Mirai/web制作勉強中

2020.2~ 今年中に、副業で少しでも稼げるようになる事を目標に web設計〜デザイン〜コーディングまで勉強中です。 勉強した内容をまとめるnoteです！

Mirai/web制作勉強中

2020.2~ 今年中に、副業で少しでも稼げるようになる事を目標に web設計〜デザイン〜コーディングまで勉強中です。 勉強した内容をまとめるnoteです！

Webデザインを勉強し始め、初めてお仕事で製作するまで。

こんにちは！久しぶりのnoteとなります。 2020年の2月から、SHElikesでWebデザインコースを受講して、8ヶ月が経ちました。 そしてSHEで請け負った制作案件のWebサイトが公開され、初めて自分で作ったものが世に出ました👏 本当に色々な方にお世話になった案件でした…。 ★こちらです😊 https://twitter.com/she_officials/status/1313769530276028418?s=21 良いタイミングだと思ったので、長くなりまし

Mirai/web制作…

    • Webデザイン勉強記録：デザイン強化…するには？

      元々ものづくりは苦手な方で。 何かとセンス良く、器用にできたりしない。 この二十何年かで、嫌という程わかってるけど・・・・ だからこそきっと、真似しつつ手を動かして、改善点を教えてもらう大切さが分かります🙌 ◆スキルアップウィーク4月の前半は、HTMLとCSSを少し休憩。デザイン練習に集中です。 KAORIさんのスキルアップウィークに参加させていただきました！ こちらの回です↓😊 指定のお題でバナーを作成し、レビューを頂けます。 開催お知らせを見つけた時は、これだ

      Mirai/web制作…

      • Webデザイン勉強記録4月(1)バナー作るの難しい…

        先週は本業も忙しくてnote書けなかったので、2週分です！💦 色々と大変な世の中になっていますが・・・家にいる時間を活かして、理想の自分を作れるように一つ一つ積み重ねます🐧 ◆モダンコーディング本 で2サイト作成メインコンテンツとサブ柱メニューの2段組レイアウトと、 ブラウザ幅に合わせて可変するグリッドレイアウトを、本を見ながら組みました。 こちらはMasonryというjQueryプラグインを利用。レンガという意味らしい。 【学んだこと】（細かいプロパティ以外で）

        Mirai/web制作…

        • Webデザイン勉強記録 3月（3）

          こんにちは！すっかり暖かくなりました🌸 アイキャッチは、春っぽくほわっとした感じにしてみました。 ちょっと子供っぽいかな。次はもっと大人の女性向けに挑戦してみます！ ◆Webデザインコース卒業制作（一旦提出！）長かったレスポンシブ対応を終えて、SHE likes Webデザインコースの卒業制作を提出できました。 この後採点していただいて、その結果で卒業できるかどうか、、です。 スマホ版のレイアウト↓（ちゃんとハンバーガーも作りました🙆‍♀️） 【全体の流れ】 ターゲッ

          Mirai/web制作…

          Webデザイン勉強記録：3月⑵

          こんばんは！ 今回、アイキャッチをちょっと男性向けバナーを意識して作ってみました。好きに作ると可愛い系ばっかりになって偏るので。 難しかった…カッコイイ系のフォントも入れてなかったし。 もっとネオンっぽい文字とか入れたら良かったかも。 それでは今週の勉強noteです。 ◆卒業制作コーディング実装デザインはOKを頂いたので、初めて０からHTMLとCSSを作成していきます！ 最初は理性的に書けていたはずのコードが、進むにつれて… （ここもdivで囲う？）（この閉じタグ

          Mirai/web制作…

          Webデザイン勉強記録：3月⑵

          Mirai/web制作勉強中

          Webデザイン勉強note：3月⑴

          こんばんは！引き続き勉強しています。 アイキャッチは（特に意味もなく）プチ和風にしてみました。 荒波に立ち向かう小さい鳥が私です。笑 毎回ちょっと違う雰囲気で作っていきたい。 灰色格子柄は、完全に透過に見えますね…。今後は止めておこう…😅 卒業制作ShelikesのWebデザインコース、卒業制作に取り掛かりました。 理想のカフェの集客LPを作りたいので、コンセプトやターゲットのプラニングをして、XDでワイヤーフレームを作成します。 ・・こんな感じです。 何だか微妙

          Mirai/web制作…

          Webデザイン勉強note：3月⑴

          Mirai/web制作勉強中

          2月の振り返りとこれから

          2/29のボーナスデーがあったにも関わらず、3月になってしまいました😂 1ヶ月間、自分にとって初めての領域「デザイン」×「Web」を勉強してきたので、振り返りとまとめです！ ◆出来たこと◯勉強時間の確保 平日はフルで働きつつ、帰宅後や土日を使って週に10時間くらいは確保できたんじゃないかな？ 厳密に計っていた訳ではないけど、特にデザインの勉強は楽しくて、あまり苦もなくやってた感覚です◎ ◯アウトプット ・note開設と記事14本！ ・Twitter開設！ 一番続

          Mirai/web制作…

          2月の振り返りとこれから

          Mirai/web制作勉強中

          進捗Day27:和風バナートレース！

          ◆今日のバナトレ 今日は和風デザイン。 どれにするか探している段階で、和風デザインすごく可愛いな〜と改めて感じました(*^_^*) もっと練習して、得意な領域にできたら良いな！ （元） （トレース） 和風に見せるデザインで今回使ったのは、椿、熨斗、日の丸（緋色）、毛筆系書体など。 他に着物や扇子風の和柄、縦書き、金色、薄雲、和アイコン（鳥居や達磨）などで表現しているバナーが多かった。なるほどなるほど。 今回のトレース、熨斗紙を和柄背景に乗せていたり枠として椿を使

          Mirai/web制作…

          進捗Day27:和風バナートレース！

          Mirai/web制作勉強中

          進捗Day24~26：Progateとイラレとバナーと…

          ◆Progate   HTML&CSS 上級を終了。レスポンシブ対応は、内容もサクッとしていた。 道場編、間違い点が不明だったので問い合わせてみたら、翌日に返事をいただいた。すごい。 メインテキストのフォントサイズが違うのでは？とのことで、検証ツールを元に直してみたものの、まだ通らなかった。 全部探すしかないな…契約2月いっぱいだけど間に合うかしら。 ◆イラレコース 気分転換に、シーライクスのイラレコースを受講。 すぐにこんなに可愛いバナーが作れちゃう！楽しい！ キ

          Mirai/web制作…

          進捗Day24~26：Progateとイラレとバナーと…

          Mirai/web制作勉強中

          進捗Day21:ProgateとWebマーケ

          ◆Progate jQuery編中級を終了。 終了とはいえ、後半のアコーディオンがヤバかった…全然わからん😭 調べたらifとslideUpとかじゃなくて、slideToggleやtoggleClassなど色々実装方法はありそうだった。実際に作るときはこういうので作れるんだ、くじけずにいこう！ HTML 初級編の道場をようやく終了。次は中級へ〜 ◆卒業制作 進め方に迷って手が止まっているけど、 Webデザイン卒業制作、とりあえず3パターンでプラニングシートを考えている。

          Mirai/web制作…

          進捗Day21:ProgateとWebマーケ

          Mirai/web制作勉強中

          進捗Day18~20

          ちょっと今週、現業が忙しくてほぼ勉強できず・・。焦る。 今日ようやくできた事、初のWebサイトのトレース↓下 やっぱり学びが多かった！ （元） （トレース） ※参考画像の時点から、こちらのWebサイトは見た目と中身を少しリニューアルしているようだった。 アニメーションも素敵！ https://ringo-applepie.com/ ※今回の目標はサイトとして見たときのバランス感、要素の表現、サイズ感、余白などの感覚を掴む事。 なので、バナトレの時よりも画像の当て込みや

          Mirai/web制作…

          進捗Day18~20

          Mirai/web制作勉強中

          進捗Day17：バナートレース(4)

          ◆バナートレース 今回は、写真素材を多く使っているバナーをチョイス。 だいぶPhotoshop操作慣れてきた！ （元） （トレース） 旅行系のバナーは数多くある中、色々要素が多く、表現が凝っていそうなのを選択。 細かいちょこちょこあしらいもあり、時間かかったー！ 微妙な形の半円は、編集>変形>ワープで作成。 文字の装飾、可愛い！！いつか参考にしたい。 明朝体なのにどことなく丸みがあって素敵な元フォント、何なのか分からず…。 背景も、和柄なのはわかるけど何なんだろう。青

          Mirai/web制作…

          進捗Day17：バナートレース(4)

          Mirai/web制作勉強中

          進捗Day15~16：Progateと読んでいる書籍

          ◆コーディング ProgateのHTML Flexbox編、jQuery編初級を終了。 jQueryは楽しいけど、javascriptを知らないから当然のように出てくるfunctionとかよく分からない。 この理解度だと自分では作れないな… どの文法がどの言語だっけ？？ふというのがちょっと混乱してきた。 実際に書いてたら混乱しないんだろうけど（？）今はほぼインプットだけなので。早く作っていかないと〜 ◆参考書 3冊読んでいます。 ・ほんとに、フォント。 1ページ毎に

          Mirai/web制作…

          進捗Day15~16：Progateと読んでいる書籍

          Mirai/web制作勉強中

          進捗Day13~14：jQueryとの戦い

          昨日はちょっと勉強サボったので、更に土日に負債が！ シーライクス jQueryの章へ。 <script type="text/javascript">$(function() {$('.single-item').slick(); });</script> カッコがいっぱいでもう何が何😂😩と最初はアレルギー出そうだった。良く見る画像スライドショーは、このプラグイン[slick]で出来ていたんですね。 正しく設定できてるはずなのに、スライダーの矢印が表示されなくて随分悩ん

          Mirai/web制作…

          進捗Day13~14：jQueryとの戦い

          Mirai/web制作勉強中

          進捗Day12：バナーお題に挑戦!

          結局コード勉強からは逃げてしまった・・・ やる気が起きないと如何しようもないので、本をポチりました。週末頑張る！ ◆バナーお題 Twitter見てたら #バナーお題 というのを見つけたのでやってみた☺️ 作成中・・・ ・・・・・・・・・ できた！2時間とちょっと。 ・学びと良かった点 ベベルとエンボスが楽しい。 ブラシもちゃんと使えたと思う。 画像の切り抜きや、一度トレースで使った効果は結構サクサク作れた。 フォントも狙いたい雰囲気には合っている…ような気がする。（

          Mirai/web制作…

          進捗Day12：バナーお題に挑戦!

          Mirai/web制作勉強中

          進捗Day10~11 レスポンシブとバナトレ（3）

          ・Progate HTML&CSSの中級を終了。 道場編は本当に無理・・・挫折したくないので今は触らないでおく・・ フォーム作成がよく分かってないので、復習する。 ・シーライクス Day4のレスポンシブ対応を終了。 やる前はもっとレスポンシブ対応って難しいのかと思ってた。 設定決めて作っていくの大変ではあるけど、難易度はそこまででもなくて安心した…これも昔は大変だったのかな。 この後はjQuery。 やっぱりコーディングはあまり楽しめてない。。どこかで苦手意識を払拭した

          Mirai/web制作…

          進捗Day10~11 レスポンシブとバナトレ（3）

          Mirai/web制作勉強中