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

◼︎制作情報

・制作時期：2025年6月

・制作時間：2週間

・制作ツール：Photoshop

◼︎制作物

・スタイルガイド

・Webサイトトレース

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

◼︎目的

・Webデザインにおける基本的なビジュアルデザインの感覚を掴む

• Webデザインをする際に一定のルールに則ってデザインするということを学ぶ(スタイルガイド)

• Webデザイン特有のデバイスによるレイアウトの変化を学ぶ

◼︎スタイルガイド

◼︎トレース

◼︎PCとスマホでレイアウトが異なる点の観察・分析内容まとめ

◼︎頑張ったポイント/工夫したところ

・デベロッパーツールの中から、色や透明度、大きさ、太さ、そして文字間などの数値を全て見つけ出してトレースに適用しました。

・ただなぞるだけや上から並べるだけでなく、余白の該当サイズの四角を並べながら実際の余白を意識して制作をしました。

◼︎学んだこと

・普段カラーは＃◯◯◯◯◯◯と6桁で表す認識でいましたが、8桁になることで透明度まで表しているということを学ぶことができました。

また、たくさんのカラーがあるように見えるサイトでも、透明度を調整することでまとまりのあるサイトに仕上がるということを学べました。

・フォントサイズは14~20px、余白は8の倍数もしくはキリのいい数字であることと、9px以下になると見えづらくなるため使用しないということを発見しました。規則を持って作成することでデザインの4原則を守ったWebサイトに仕上げることができると学ぶことができました。

・PCとSPではフォントのサイズや余白のサイズはデバイスに合わせた大きさになっており、アイコンや写真などは横並びから縦並びに変更し、小さいデバイスでも画面いっぱいにみられるようになっていることがわかりました。

◼︎講師コメント
見本に合わせて丁寧にトレースができておりクオリティの高いアウトプットになっていました。スタイルガイドも整っており、PCとSPの違うもわかりやすく記載できていてとってもよかったです！