Webページトレース

制作時間：10時間

制作期間：2週間

制作範囲：Webサイトのトレース、配色/タイポグラフィ/余白に関する分析（スタイルガイド）、PC版とSP版でレイアウトが異なる箇所の分析

成果物

課題内容

• Webサイトのトレースと分析に取り組み、Webサイトにおける読みやすい文字のサイズ、レイアウト、配色の感覚を養う。
• 配色/タイポグラフィ/余白に関する分析（スタイルガイド）を行い、一定のルールに則ってデザインすることを学ぶ。
• PC版とSP版でのレイアウトの違いを分析・言語化する。

Webサイトのターゲット、目的

• ターゲット

スキル人材を採用したいと思っている企業の人事担当。

• 目的

問い合わせや資料ダウンロードをしてもらい、人材マッチングにつなげたい。

• ユーザーストーリー

配色/タイポグラフィ/余白に関する分析

• 配色

・一見カラフルなように見えるが、背景、文字の色は基本の3色をベースにしているため、統一感がある。
・背景の多角形モチーフとアイコン（「対応可能な業務」の箇所など）の色味を統一することで、違和感を感じさせないようなデザインとなっている。
・グラデーションを使用することで、カラフルだけどまとまりがあるような印象を与えている。
・文字の透明度を変えることで、色を変えずに印象を変えることが出来ている。
・グレースケールはドロップシャドウに使用されている。 

• タイポグラフィ
  

・英数字と日本語が使い分けされていることで、バランスが取れている。
・全体の文章には、可読性が良く、ビジネスシーン向けのフォント（Noto Sans）が使われている。
・英数字はロゴと似たフォント（Brandon Grotesque）が使われている。

・セクション間の余白は広めに取られており、洗練された雰囲気がある。
・コンテンツ要素が多い場合、厳密なルールを用いず、見た目の印象を優先して配置されているような印象を受けた。
・各コンテンツは横の余白を活かしたdisplay:flexが多用されている。

PC版とSP版でレイアウトが異なる箇所の分析

学んだこと

• フォントは、webサイトを通じて２種類ほどしか使われておらず、たくさんの種類のフォントを多用すれば良いというわけではないと学びました。
• サイト全体で多くのカラーを使っていても、背景、文字、ボタンなどのベースの色味が揃っていたり、グラデーションを活用することで、統一感が生まれると感じました。
• PC版は余白を活用することで、綺麗めな印象になることを学びました。
• SP版は文字の大きさを小さくしすぎると、デバイスで見えづらくなってしまうため、一般的に14～16pxが使用されていることを学びました。
• PC版とスマホ版であえて大きくデザインを変えないという考え方もあることを学びました。（例：PCで見ることが多いと想定されるサイトはスマホ版に工数をあまりかけない）

頑張ったポイント

• 文字サイズや余白などは実際のHPのディベロッパーツールを利用しながら調べました。それでわからないところはPhotoshopで調べるなど、できる限り再現できるように工夫しました。
• フォントや写真、レイアウトなど文字間、フォントサイズ、要素同士の余白や角の丸みなど、細かい点もズレがないように気を付けながらトレースしました。
• Webサイトではどのくらいのフォントサイズが使われているのか、セクション間の余白はどのくらいなのかなどを考えながら取り組みました。