【課題】Web ページトレース

目次

1. 制作情報

2. 課題概要

3. 制作物

4. トレースから得た気づき

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

1. 制作情報

制作時間：12日間

制作範囲：Webページ丸ごとトレース、スタイルガイド作成、PCとスマホでレイアウトが異なる箇所の分析

制作ツール：Photoshop

2. 課題概要

・Webサイトにおける読みやすい文字のサイズや、レイアウトの組み方、色の使い方など基本的なビジュアルデザインの感覚を掴むトレースしながら習得する。

・スタイルガイドを作成することで一定のルールに則りデザインすることを学ぶ。

・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ。（PCとスマホでレイアウトが異なる箇所の分析）

3. 制作物

▪️スタイルガイド

▪️PCとスマホでレイアウトが異なる箇所の分析

4. トレースから得た気づき

▪️サイトのターゲット：主にWebスキルやクリエイティブ部門で即戦力となる人材を求めている企業様

▪️目的：SHE WORKSのサービス内容を知ってもらい、お問合わせフォームに送信してもらうこと

▪️ユーザーストーリー

　　　　　　　　　　伝える内容　→　見た人の心境

①即戦力人材マッチングサービス　→　人手不足でなかなか手が回ってないんだよな

②こんな課題はありませんか　　　→　そうそう！まさにそこで困っているんだよね

③SHE人材なら…WORKします　　→　専門スキルがあるのか、実際利用したらこんな流れなんだね　

④SHE人材がWORK…ヒミツ　　　→　気軽に利用できそうだし、アフターフォローもしてくれそう

⑤対応可能な業務　　　　　　　　→　自社に取り入れるならこの業務かな

⑥多くの企業で…　　　　　　　　→　へぇ、こんな企業にも！しかも実例も詳しく知れていいな

⑦SHE人材&実際の制作物　　　　→　さすが！自社にもこんな制作をお願いしたいな

⑧お問い合わせボタン　　　　　　→　気になってきたな、話だけでも聞いてみよう！

▪️カラーについて

・背景は＃fffや高明度のグレーをベースに、文字はネイビーをメインにして見やすく、クリーンな印象にしている。

・アクセントカラーが暖色から寒色まで幅広くあるが、あしらいや画像の一部に使用されておりポップで親しみやすい雰囲気に仕上がっている。

・文字や各所で使われているネイビーは不透明度を下げ使用することで情報の優先度　　の差別化に役立っている。また、同色を使用することで統一感を保っている。

▪️タイポグラフィーについて

・文章はNoto Sans JP、強調したい英数字はBrandon Grotesqueで構成されている。

・見出しのフォントサイズは一定ではなく30〜38と幅を持たせている。読み手が最後まで見たくなるような工夫が凝らされている。

・見出しで特に強調したいところの配色を変えている。

・対応可能な業務のセクションでは淡いブルーグレーの背景に文字がぼやけないように白いシャドウをかけている。

▪️余白について

・余白サイズは偶数、特に８の倍数が多い。

・各セクションの左は68px、ボトムは150pxが設定されており、トップは130〜150まで様々に設定されている。

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

Webサイトはトンマナに合わせた可読性の高いフォントを使用しており、情報の優先度が高い箇所は大きいサイズ、見出し、本文などでフォントのサイズを調整していることがわかりました。また、余白は８の倍数が多く、レイアウトが綺麗にまとまるので多くのサイトで使われていることを知りました。Webページ丸ごとトレースしたことで余白の重要性を認識しました。