フォントサイズと余白の感覚を身につける　WEBトレース・分析

 【目次】

1.トレースしたWEBサイト

2.分析したスタイルガイド

3.PCとSPのレイアウト比較

4.制作を通して学んだこと

1.トレースしたWEBサイト

SHE WORKS様のWEBサイトをトレースしました。
Chromの検証ツールを使用し、配色やフォントのサイズを丁寧に確認しながらトレースに取り組みました。font-weightやfont-sizeの異なる組み合わせが多かったので、見本と比べながらカーニングを行いました。

2.分析したスタイルガイド

サイトで使用されている配色・フォント・余白について分析をしました。

ー配色についてー
人材紹介の事業のため、ビジネスをイメージするネイビーの配色が中心になっています。

ーフォントについてー
Noto Sans JPのfont-weightとfont-sizeを多様に組み合わせて利用をしているため、文字情報のコントラストをはっきりさせ、視認性を高めています。

ー余白についてー
イラストや人物画像にflexプロパティを適用しているため、８の倍数の数値といった規則性は見当りません。セクションの区切りごとに十分な余白を設定しているので、グルーピングを意識した設定になっています。

3.PCとSPのレイアウト比較

セクションごとにPCとSPを分けて、レイアウトの違いについて分析しました。
レイアウトの指示を出しているhtmlやcssのコードを追記したことで、見た目で感じる違い以外に実装する場合のポイントを意識して取り組みました。

4.制作を通して学んだこと

🔸多角的な視点でのサイト制作の重要性
PCとSPのレイアウトを比較すると、SPが縦積みのレイアウトで単純な構造なのかなと当初は考えていました。
しかし、検証ツールを用いると余白やフォント、画像のサイズを細かく設定されていることがわかりました。ユーザーの視点でのわかりやすい情報設計、ターゲット・目的を達成するためのデザインとなっているか、実装をするコーディングの視点など、１つのWebサイトには多角的な視点で制作がされることに気づきました。

🔸スタイルガイドの重要性
複数人のチームでサイトの作成をする場合は、スタイルガイドを用いることで制作のルールを確認することができ、制作の工程途中の確認作業の効率化、サイト全体の統一感にもつながるメリットがあるとわかりました。