橋の設計しながらでもここまで変われたwebデザイン勉強法

お久しぶりです！aiです。
前回の記事はたくさんの方に読んでいただいて、嬉しいコメントもたくさんいただいてありがとうございました！
ありがたいことに、最近ポートフォリオを公開したところ、嬉しいお言葉をたくさんいただきました。

aiさん、初リプ失礼します！
素敵なポートフォリオで見入ってしまいました☺️✨
私もポートフォリオ作成中で、フィードバックいただいた後のBeforeAfterを載せるページのデザインでちょうど悩んでいました💦aiさんのデザイン、とてもわかりやすく感動しました！
参考にさせていただきます🙇‍♀️

— すずらん🍋EC | デザイン (@suzuran_1600) November 13, 2020

aiさんポートフォリオ見ました〜！！mizukanサイトやバナー制作など拝見してめちゃめちゃ素敵だー！と思っていたのでポートフォリオにまとまるとこっちまで勝手に感慨深くなってしまいました😭ロゴもサイト全体のデザインも好きだし制作過程の背景やフォント雰囲気出ていて楽しくてすごく好きです👏✨

— りゅーまち / Webデザイナー兼エンジニア / 岡山 (@ryumachi3) November 11, 2020

aiさん、はじめまして！
ポートフォリオ拝見しました！

とてもわかりやすく、キレイで素敵なサイトですね！
私もこれからポートフォリオを作りたいと思っているのでとても参考になりました！

Befor/Afterを掲載されているというのもすごく良い構成ですね！
勉強になります✨

— あいこ☀️webデザイン勉強中 (@route_A_design) November 12, 2020

webデザインの勉強を始めて1年ちょっと、Twitterではwebデザイン勉強中のフォロワーさんも増えてきました。そこで少しでも役に立てればなと思い、今回は第２弾として私がこれまでにやってきて効果があると感じた勉強法についてまとめていこうと思います。

まず、約１年間で私がどれくらい変わったのか、はじめて作ったサイトと最近公開したポートフォリオをご紹介します。

左はフォトグラファーの友人のために作ったサイトです。(2019.07)
右が先日公開した私のポートフォリオです。(2020.11)
見ての通り文字のジャンプ率の付け方、余白の取り方など全然違いますよね。ここまで変わるために私がやってきたことを時系列で紹介するとこんな感じです。

2019.05〜06
・オンラインスクールでhtml,css,WordPressを学ぶ
・オリジナルサイト※1を制作

2019.07〜08
・Twitterをはじめる
・Progate,デイトラでhtml,cssの復習
・オリジナルサイト※1のレビューを受ける

2019.09〜11
・書籍で余白・フォント・配色を勉強
・ProgateでjQueryを勉強
・オリジナルサイト※2を制作
・オリジナルサイト※2のレビューを受ける

2019.12〜03
・ProgateでSassを勉強
・オリジナルサイト※3を制作
・オリジナルサイト※3のレビューを受ける

2020.04〜06
・バナートレース
・オリジナルバナー※4を制作
・オリジナルバナー※4のレビューを受ける

2020.07〜11
・オリジナルサイト※5を制作
・オリジナルサイト※5のレビューを受ける

正直、数は全然こなせてないです。ひとつのサイト作るのにも数ヶ月かかってます。
昼間は仕事がありますし、残業もあります。
ですが限られた時間の中で「少しずつ」「確実」に、できることを増やしていけたかなと思います。
今これを読んでくださっている方の中にも働きながら、限られた時間の中で勉強している方が大勢いると思います。
独学でコツコツ頑張る方へ私が実践してきて効果があったと思うポイントをぎゅっとまとめてお伝えしたいと思います。
前回の「真似のすゝめ」で好評だった制作過程を今回も紹介しています。

それでは、本文をお楽しみください。(5000文字くらいです)