課題制作-LPトレース-

OVERVIEW

SHElikes マルチクリエイターコースデザイン実践課題③ の課題ではWebページのトレースと分析に取り組みました。スタイルガイドの作成にも挑戦し、一定のルールに則ってデザインを作るということについて学びました。

YEAR 2024

-----------------------------------

・制作期間:2週間

・使用ツール:Photoshop

-----------------------------------

【目次】

1.トレースしたLP

2.デザインガイドライン

3.PCとSPデザイン比較

4.制作を通して学んだこと

-----------------------------------

◆トレースしたLP

今回トレースさせていただいたサイトはこちらです。 

◆デザインガイドライン

◆PCとSPデザイン比較

◆制作を通して気づいたこと

①女性向けの人材紹介サイトということで、濃すぎず清潔感があり、華やかな色を選択しています。メインカラーや文字には紺色を配色し、メリハリを持たせて視線を誘導しています。また、あしらいやそれぞれのアイコンを区別するためにアクセントカラーを使用し、視認性を高めています。

②日本語の大半はNoto Sans JPを使用しており、ゴシック調で読みやすく、シンプルでスッキリとした印象を与えます。メニューバーなどの英数字にはBrandon Grotesqueを使用して統一感を持たせ、丸みを帯びた可愛らしい印象を演出しています。また、一部のキャッチコピーにはヒラギノ角ゴ ProNを使用し、変化を持たせています。

③余白のスペースをバランス良く配置することで、Webサイト全体の情報が伝わりやすくなっています。ユーザーが求める情報を短時間で見つけやすくし、必要なコンテンツのグループを見つけやすくしています。また、文字と文字の間や行と行の間に適切なスペースを確保することで、読みやすさを向上させています。


◆制作を通して学んだこと

デペロッパーツールでホームページ制作側での意図を読み取り、

一定のルールに則ってデザインするということを学ぶびました。

また特有のデバイス(レスポンシブ)によるレイアウトの変化を

学ぶことで、次のLP制作活かせることができ大変有意義な勉強でした。