テックアカデミー11日目の学び（Lesson7〜8）

前回の記事からいきなり飛んで11日目。
学習のほうは毎日休まず続けてたが、noteの方をサボってた…。

Lesson7の内容

Webページのレイアウトについて学習。
ここはLesson6と違って楽しかった！
ただし、テキストの1/6ほどはCSSのプロパティについて解説がズラズラと羅列されている箇所だったため、こちらもLesson6と同様にスキップすることにした。

＜学んだこと＞
・視線誘導についてのテクニック
→人の視線の流れをスムーズに誘導するための技術。

人の視線はどのように動くのか、を理解したうえで
ユーザーの視線の動きを予測した効果的なレイアウトを意識することが大事だよーということで、以下について知ることができた。

・グーテンベルグ・ダイアグラム
・Z型
・要素の大小を使った方法など

・代表的なカラムレイアウトについて
１カラム・２カラム・３カラムのそれぞれの特徴について知ることができた。
実例として紹介しているサイトが結構おしゃれな私好みのサイトばかりだったので、今後のサイト作成の参考にしたいなーと思った。あとトレーストレーニングとかに使ってもよさそう。

レイアウト特徴を学んだ上で、自分のポートフォリオ作る時は１カラムにしよ。と思った。
また、知人のホームページを作成する時はブロークングリッドに挑戦してみたいと思ったが、その際グリッドの崩し具合はセンスなの？それとも原則とか黄金比があるの？と疑問に思った。

＜感想＞
テキストにも書かれていたが、PCやスマホのスペックが上がるごとに、レイアウトの主流とか、表現できることが増えるのねーと思ったと同時に
できる表現が増えるたびに知識吸収していかないといけないから、WEBデザイナーって一生最新のスキルを学習し続けないといかんな、と思った。
（直近なんかだと、5Gになることで世界が変わるぐらい色々できるようになっちゃうみたいだから、絶対WEBデザインも影響受けそうだし）

あとレイアウトの選択肢が多様になると、サイト目的やゴールに対してどのレイアウトを選択すればいいのか最適な組み合わせを考える能力がより必要になってくるなと思った。

Lesson8の内容

ここでは、ポートフォリオのデザインカンプをもとにコーディングを実際に行っていく。
コードはテキスト内に用意されているものをただコピー&ペーストするだけで進められるようになっているので、極論言うと、タグの意味を全く理解してなくても進められるし、サイトを完成させることはできる。

＜途中まで進めたところで、一旦手を止めることに＞
現状の私の理解度だが、Lesson6と7についてスキップしてしまっているので、それぞれのタグの意味は不明なままだし、プロパティの解説も読まずにきているので、用意されたHTML文章をコピペして進めていても、なんでこうなってんのか？がわからずモヤモヤするばかり。
（スキップしている自分がいけないのだがw）

なんとなくコーディングのイメージをつかめれば良いってことであれば、このまま進めればいいのだが、それだとコーディングをできるようになる日が遠くなりそうだったので、一旦中断し、ドットインストールを開始した。

ドットインストール&Progateとの合わせ技が効果的だった

ドットインストールの動画みてからテックアカデミーのテキスト読むと
とても理解しやすくなった。

タグの読み方、発音がわかる
テキストではタグの読み方もわからないから、余計に読み進めることがストレスだったが、動画だと読み方も発音もわかってスッキリした。

なぜ、このコードを書いているのかの理由がわかる
テックアカデミーのテキストにもそういった説明はあるにはあるのだが、ドットインストールの方がより初心者にわかりやすい言葉で、丁寧に意味や理由を説明してくれるので、理解がしやすい。
さらにProgateの方でも確認してみると、ドットインストールで説明されてない内容が載っていたりするから、両方チェックできるならそうした方がより効果的。

ショートカットキーを教えてくれる
ドットインストールでは、動画をみながら実際にテキストエディタを打ち込んでいくのだが、ちょこちょこ積極的にショートカットキーを紹介してくれる。しかも作業中頻繁に使えるものなので実用的。

もちろん、当たり前だがドットインストールとProgateには書いてないことがテックアカデミーのテキストには載っていることもある。

なので、基礎の基礎、初心者の入り口としてドットインストールとProgateをやってから、テックアカデミーのLesson8とLesson6、7を行き来するように進めるといいかなと思った。（Lesson8を進める際の用語辞典としてLesson6、7を使うイメージ）

ノートに書きながら進めるのも効果的

テキスト教材だから、ノートを書く必要性って最初は感じなかったけれど、上記のようにドットインストールとProgateを横断したり、他サイトを検索して得た知識だったりを、一枚の紙に自分の言葉や図でまとめると知識が整理されるので、よりわかりやすくなった。

「ちょっとこれ後で振り返りたくなるかもしれないな」っていう情報を書き留めておくことで、「あれなんだっけ？」って時に探しやすくもなる。