【実践課題③】LP制作・分析

 【目次】

1.トレースしたWEBサイト

2.分析したスタイルガイド

3.PCとSPのレイアウト比較

4.工夫した点

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

－－－－－－－－－－－－－－－－ －－－－－

1.トレースしたWEBサイト

家計簿プリカB/431のWEBサイトをトレースしました。

2.分析したスタイルガイド

サイトで使用されている配色・フォント・余白に着目して分析しました。

3.PCとSPのレイアウト比較

PCとスマホそれぞれのレイアウトの違いを分析しました。

4.工夫した点

▼トレース

画像がいくつも重なる部分や、ボタンや写真は角が丸いデザインになっており、細かな色味や大きさなど微調整を行いました。

文字間に関しては、検証ツールを確認しながら入力しましたが、見本とずれる箇所がいくつかあったので、一文字ずつカーニングで調整を行いました。

▼スタイルガイド

整列とトンマナです。

整列については、各要素の間や左右の幅に一定の余白を設定し、読みやすいガイドになるよう意識しました。サイズやカラーも規則性を持って見やすいよう意識しました。

トンマナについては、製品そのものがサイトのカラーになっていることもあり、グラデーション部分も忠実に再現しました。

▼PCとSPの比較

目線の流れを意識し作成しました。特に使い方の部分について、PCでは目線がZの法則でジグザグに誘導されるのに対して、SPでは上から下にスクロールしながら読み進められます。これを分かりやすく表現するために、STEP１・２・３の表記と点線で目線の流れを表現しました。

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

▼魅せたい部分と読ませる部分の表現

魅せたい部分には、世界観に合うようなあしらい要素が強いフォントや自由な余白を設けており、読ませたい部分には、可読性の高いフォントや明確なコントラストがつけられていました。情報量が多く、伝える内容の多い（文字の多い）サイトでも、上手くメリハリをつけることで、まとまりのあるサイトに仕上げると学びました。