【課題】Webサイトトレース

制作時間：12時間

制作期間：2週間

制作範囲：スタイルガイド、トレース、PCとスマホのレイアウトの比較

使用ツール：Photoshop

制作物

【トレース】

観察・分析

【ターゲット】

• 即戦力の女性を採用する企業の採用担当者
• デザイン関係の仕事ができる女性を探している方
• 明るく元気に働く女性を採用したいと思っている方

【目的】

• 働きたい女性と企業をマッチングすること
• 人材紹介について問い合わせをしてもらい、実際にマッチングまで繋げること
• サービス概要や料金形態について分かる資料をダウンロードしてもらうこと

【配色】

• メインカラーに一見たくさんの色を使用しているように見えるが、グラデーションや不透明度を使用して、様々な色を使用しているように見せている。
• 随所にメインカラーと同系の色が使用してあることで統一感が出ている。
• アクセントカラーの同系色の中でも微妙に異なる色が使われていた。

【タイポグラフィ】

• ほとんどの部分でNoto Sans JPが使用されていて、統一感を感じた。
• 数字と目立たせたい英字、もしくは英字のみの部分はBrandon Grotesqueが使用されていた。
• 見出し４と本文２の組み合わせが数回あり、統一感を感じた。

【余白】

• セクションとセクションの間に大体130pxから150pxの余白が取ってあり、区切りが分かりやすい。
• コンテンツの上下で余白がおおよそ揃えてあり、揃っていない部分も近しい余白サイズで、揃っているように綺麗に見えた。
• 全体的に余白は揃っていない箇所も多かったが、文章間の余白は揃っている箇所が多かった。

【PCとスマホでレイアウトが異なる箇所】

課題を通して学んだこと

• デベロッパーツールには思った以上に様々な情報が記載されていること。
• セクション間はある程度多めに余白を取ると区切りがわかりやすいこと。
• 余白は全く一緒の間隔でなくても、見た目では揃っているように見えることもあること。
• スタイルガイドはコーダー等と共有する際に分かりやすいように作成すること。
• デバイスによって見やすい文字間隔や余白は異なること。