【デザインを見る】雑っていいこと | はくばく
mimi | webデザイン勉強中（https://note.com/webdesign_mi0026）さんの投稿を見て、私もwebデザインを見る勉強をしてみる
本日私が見るサイトはこちら
雑っていいこと | はくばくさん( https://hakubaku-zatsu.jp/ )
これをmimiさんの見ていたものになぞらえて私も見ていこうと思う。
1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード
1
3、40代向けの落ち着いたメディアサイト？
2
・ページタイトルの「雑っていいよね」のロゴのインパクト。
一見長くて入れるのを躊躇いそうだけど、「雑」という文字を大きくして読みやすくしている。
・メニューの横棒がお箸っぽくて可愛い。
・ユーザー目線の言葉を吹き出しのようなものでポップに見せていて目に入りやすい。
・メニューを開いた時のアニメーションが独特で面白い
・和紙のような落ち着いた背景色で落ち着いた雰囲気を出しているが、一方で赤や黄色、緑、青、ピンクなど色々な色を使っているが明度を抑えているので落ち着きやまとまりが出ている。
・あしらいが可愛い。
3
トップの見出しが右左の違い違いに配置されていて、
大見出し→中見出し→詳細文と流れるように近くに配置されていて、自然に読ませたい順番に誘導させている。
4
・font-family:Zen Kaku Gothic Antique;
・文字サイズ
(max-width: 767.4px)→calc(13px * var(--scale)) (--scale=1)
・letter-spacing:normal;
・line-height:1.625;
5
・和紙のような落ち着いた背景色で落ち着いた雰囲気を出しているが、一方で赤や黄色、緑、青、ピンクなど色々な色を使っているが明度を抑えているので落ち着きやまとまりが出ている。
6
アイコンやあしらいの形はシンプルだが、カラフルな色を使うことで落ち着いた雰囲気の中ポップさが出ている。
7
スクロールした時に回る円のアニメーションが見出しと同じく左右交互にあることで視線誘導を図っている。
