サイト模写（WEB GRAM採用ページ）

今回のトレースの目的

• WEBサイトの「レイアウト」と「余白の使い方」の学習。

デザインについて気づいたこと・考察

• フォントに関して、アルファベットは「Oswald」日本語に関しては「Noto Sans」と2種類のフォントを使用している。「Oswald」を用いたテキストに関しては、読み手に意味を伝えるというよりかはタイポグラフィを表現しているのではないかと感じた。
• フォントサイズに関して、全部で9パターンのサイズを使い分けている。一番大きなフォントサイズはセクション毎の見出しで使われている100pxのフォント。アルファベットの見出しを100pxという大きなサイズにして、その横に20pxの日本語の見出しをつけて読み手が理解しやすいような工夫がされている。
• サイト全体のデザインに関して、「スタイリッシュ」な印象を受けた。MVのメインコピーからもわかるように20代をターゲットにした採用サイトであるため、ここで働くことで「かっこいい社会人になれる」という印象が伝わるようなデザインになっている。
• タイポグラフィに関して、ゴシック体のみだと堅苦しい印象を与えるが、筆記体のフォントを使用することでカジュアルな印象になり、より取っ付きやすいデザインになっている。
• サイトの余白に関して、セクション上下は150pxの余白がついていて、セクションの横幅については1100pxで統一されている。
• グラデーションカラーやドロップシャドウを使うことで、サイトに立体感が出ている。また、単色のカラーを使うよりも、グラデーションカラーを使うことで他のサイトのデザインと差別化をとることができるのでは？