＜ 制作概要 ＞
制作時間 ：8時間
制作範囲 ：Webページトレース、スタイルガイド、PCとSPの比較分析まとめ
使用ソフト：Illustrator
＜ 目次 ＞
1. 目的
2. 制作物
3. 気付いたこと
4. 工夫したこと
5. 制作を通して学んだこと
1. 目的
・Webデザインにおける基本的なビジュアルデザインの感覚を掴む
・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ
・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ
2. 制作物
▼ Webページトレース
▼ スタイルガイド
▼ PCとSPの比較分析まとめ
3. 気付いたこと
・今回選んだWebサイトは、メインカラーがグラデーションという主張の強いカラーを採用しているが、グラデーションが淡い色で構成されていることに加え、ベースカラーの白がページのほとんどを占めている為、スッキリとした印象を受けました
・フォントカラーは真っ黒ではなく濃いグレーで、コントラストが強くなりすぎるのを防いでいると思いました
・アクセントカラーの青色は、ビジネスライクで堅実なイメージを受けました
・フォントは2種類使われており、和文・英文で使い分けられていました
・英語のフォントはサービス名のロゴと似ており、統一感を持たせていました
・各セクション毎に上下の余白が統一されており、見出しに加えてどこからどこまでが何のセクションか分かりやすくなっていました
4. 工夫したこと
・ブラウザ上で検証ツールを用いながら、忠実にトレースをしました
・フッターなどのグラデーションも、何色を何％使っているか調べながら再現しました
・どうしてこのフォントを選んだのか、配色には何か意味があるのかを考えながらスタイルガイドを作成しました
・PCとSPのレイアウトの違いをまとめる際、線の色はWebサイトのメインカラーを用いることで統一感を出しました
・ハンバーガーメニューを開いた画面も貼り付けることで、内容を分かりやすくしました
・線と線の間も統一して、バラバラとした印象を与えないようにしました
5. 制作を通して学んだこと
・Webサイトにおける読みやすい文字サイズや余白感をトレースを通して学びました
・スタンダードな構成を知ることで、ジャンルを問わず応用できそうなレイアウトの組み方を学びました
・スタイルガイドをつくることで、チームで仕事をする際に共通認識がつくれ、後々Webサイトの更新もしやすいことを学びました
・PCとSPを比較分析することで、SPの縦並びデザインへの落とし込みの手段を学びました