【自主制作】LPトレース・分析

 【目次】

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

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

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

4.工夫した点

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

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

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

杜のいちご株式会社様のWEBサイトをトレースしました。

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

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

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

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

4.工夫した点

▼トレース

影部分と文字間です。影部分については、ボタンやシェフの写真の丸枠などに薄くシャドウがかかっており、色味や大きさの微調整を行いました。

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

▼スタイルガイド

整列とトンマナです。整列については、各要素の間や左右の幅に一定の余白を設定し、読みやすいガイドになるよう意識しました。

トンマナについて、ケロケロ苺の世界観を表現して作成しました。フォントは「筑紫A丸ゴシック」に統一し、ピンクやベージュなどの柔らかい色味を使用することで、トンマナに一貫性を持たせています。

▼PCとSPの比較

目線の流れを意識し作成しました。「商品紹介」の部分について、PCでは目線がジグザグに誘導されるのに対して、SPでは上から下に読み進められます。これを分かりやすく表現するために、矢印で目線の流れを表現しました。

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

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

魅せたい部分には、世界観に合うようなあしらい要素が強いフォントや自由な余白を設けており、読ませたい部分には、可読性の高いフォントや明確なコントラストがつけられていました。一見遊び心がある自由度の高いデザインでも、メリハリをつけることで情報が入ってきやすいサイトになっていると感じました。

▼レスポンシブ対応の工夫

SPはただ要素を縦積みにするのではなく、小さい画面だからこそユーザーが読み進めやすいような工夫(余白の取り方や各要素の配置など)がされていることを学びました。PCとは違う視点を持ってレイアウトする必要があると学びました。