課題制作-LPトレース-
SHElikes マルチクリエイターコースデザイン実践課題③ の課題ではWebページのトレースと分析に取り組みました。スタイルガイドの作成にも挑戦し、一定のルールに則ってデザインを作るということについて学びました。
-----------------------------------
・制作期間:2週間
・使用ツール:Photoshop
-----------------------------------
【目次】
1.トレースしたLP
2.デザインガイドライン
3.PCとSPデザイン比較
4.制作を通して学んだこと
-----------------------------------
◆トレースしたLP
今回トレースさせていただいたサイトはこちらです。
◆デザインガイドライン
◆PCとSPデザイン比較
◆制作を通して気づいたこと
①女性向けの人材紹介サイトということで、濃すぎず清潔感があり、華やかな色を選択しています。メインカラーや文字には紺色を配色し、メリハリを持たせて視線を誘導しています。また、あしらいやそれぞれのアイコンを区別するためにアクセントカラーを使用し、視認性を高めています。
②日本語の大半はNoto Sans JPを使用しており、ゴシック調で読みやすく、シンプルでスッキリとした印象を与えます。メニューバーなどの英数字にはBrandon Grotesqueを使用して統一感を持たせ、丸みを帯びた可愛らしい印象を演出しています。また、一部のキャッチコピーにはヒラギノ角ゴ ProNを使用し、変化を持たせています。
③余白のスペースをバランス良く配置することで、Webサイト全体の情報が伝わりやすくなっています。ユーザーが求める情報を短時間で見つけやすくし、必要なコンテンツのグループを見つけやすくしています。また、文字と文字の間や行と行の間に適切なスペースを確保することで、読みやすさを向上させています。
◆制作を通して学んだこと
デペロッパーツールでホームページ制作側での意図を読み取り、
一定のルールに則ってデザインするということを学ぶびました。
また特有のデバイス(レスポンシブ)によるレイアウトの変化を
学ぶことで、次のLP制作活かせることができ大変有意義な勉強でした。