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

【概要】

制作時期：2026年2月

制作範囲：Webサイトトレース

制作ツール：Photoshop

制作の目的：

• Webデザインにおける基本的なビジュアルデザインの感覚を掴む
• Webデザインをする際に一定のルールに沿ってデザインするということを学ぶ
• Webデザイン特有のデバイスによるレイアウトの変化を学ぶ

【制作物】サイトトレース

　　　　　　　　　見本　　　　　　　　　　　　　　　　　トレース

【分析】スタイルガイド

【分析】PCとSPでのレイアウトの違い【工夫したこと】

• 細かい部分にまでこだわりトレースすること
• 文字の大きさや配置がズレない様に見本を下に敷いて文字間等を調整した
• 検証ツールを使用してフォントや余白の取り方を確認しながら取り組んだ

【制作を通して学んだこと】

配色やドロップシャドウの付け方等、細部までじっくり観察して、それぞれがどの様な役割をしているのかを考えながらトレースしました。

配色やフォント、余白の取り方を分析することで一定のルールを作り、見やすく配置することが出来ると学びました。情報量が多い場合は文字のバランスや画像の配置を工夫してスムーズに誘導することが重要であると感じました。

デバイスによるレイアウトの違いを分析して、PCの情報量をどの様にスマホで見やすくレイアウトするかを学びました。