制作情報
作成時期：2025.11
作成時間：6時間（スタイルガイド4時間、作成：2時間）
使用ツール：Photoshop
制作範囲：サイトトレース、サイト分析
トレースの目的：
・Webデザインにおける基本的なビジュアルデザインの感覚を掴む
・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ
・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ
今回の課題で目指すゴール：
1. 見本のWebサイトとの差分が少ないクオリティの高いトレースを完成させる
2. 見本のWebサイトを分析してスタイルガイドをまとめることができる
3. PCとスマホでどのようにレイアウトが変わるのかを言語化することができる
学んだこと：
ウェブサイトトレースでは、レイアウト・余白・色・タイポグラフィなど、プロのデザインに共通する“意図とルール” を学びました。
視線の流れを意識した情報設計や、UIコンポーネントの一貫性がサイトの使いやすさと世界観をつくっていることを理解し、デザインの「なぜ」を説明できる力が身につきました。
目次
1. 作成したトレース
2. スタイルガイド
3. サイト分析
4. 講師からのフィードバック
1. 作成したトレース
2. スタイルガイド
3. サイト分析
4. 講師からのフィードバック
・トレースについて
ボリュームの多いLPでしたが、細かい点も丁寧に観察し、丁寧トレースいただいていましたね。
指摘するところも少なく、観察力と再現力、どちらもクオリティの高いアウトプットになっていました。
また、ターゲットもトレースを通じて考察し、言語化できているのも素晴らしいです。
・スタイルガイド・レイアウト分析資料について
色数や文字サイズなど、各項目をしっかりまとめられていますね！ 要素をまとめるだけでなく、デザインの意図までしっかり考察されているのもGoodです。️