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

【目次】

01 課題の目的

02 制作物（サイトトレース）

03 分析（スタイルガイド）

04 分析（PCとスマホ画面でのレイアウトの違い）

05 工夫したこと

06 課題を通して学んだこと

01【課題の目的】

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

◎webデザインをする際に一定のルールに沿ってデザインするということを学ぶ

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

02【制作物（サイトトレース）】

03【分析（スタイルガイド）】

04【分析（PCとスマホ画面でのレイアウトの違い）】

05【工夫したこと】

◎細部までこだわりトレースする。

◎Webサイトをダウンロードし、左横と下敷きに配置しズレがないように画像の配置や文字間の調整を行いました。

◎検証ツールを使用し、フォントの大きさや余白の取り方を確認しながら取り組みました。

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

◎トレースをすることで配色やジャンプ率、ドロップシャドウの付け方など細部までじっくりと見ることができました。普段から見ているサイトも注意して見るとドロップシャドウが使われていたりと、これまで気がつかなった部分も見るようになりました。

◎配色やフォント、余白の分析をすることで、一定のルールを作り見やすく配置がされていることを学びました。情報量が多いため文字のバランスや画像の配置にも注意しないと、見ている方が困惑しゴールに誘導できないと感じました。

◎PCと携帯では画面サイズが全然違うため、PCの情報量をいかに携帯の画面で見やすくするかレイアウトを考えないといけないと学びました。