LPトレース

OVERVIEW

SHElikes MULTI CREATOR COURSEの課題で、LPトレースに自主的に取り組みました。 (制作時間:30時間 使用ツール:Photoshop/Illustrator)

● 目次

 ① 課題内容

 ② 制作した作品 

 ③ 工夫したところ

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


① 課題内容

【概要】

・Webページのトレースをし、Webサイトにおける読みやすい文字のサイズや、レイアウトを学ぶ。

・スタイルガイド作成をし、一定のルールに則ってデザインを作るということを学ぶ。

・PCサイトとスマホサイトの比較分析をし、Webデザイン特有のデバイスによるレイアウトの変化を学ぶ。

【提出作品】

Webページトレース、スタイルガイド、PC・スマホの比較レポート


② 制作した作品 

- Webページトレース -

右:トレース元         左:トレース作品


- スタイルガイド -


- PC・スマホの比較レポート -


③ 工夫したところ

1.  各セクションの「空白の使い方」を意識

ユーザーが離脱しないために、各セクションの空白はどれくらい空けているのかを開発ツールで一つずつ調べ、感覚を掴みながら作業をしました。


2.  カラーパレットの分析

開発ツールでの色の確認、またWebページをコピーしPhotoshopで色を確認して作業を進めました。特にグレースケールが細かく使いわけていたので、なるべく多くの色を探してまとめました。


3.  開発ツールを使用し、html・CSSから分析

スタイルガイド作成時はChromの開発ツールを使用し、各セクションごとに細かく見ていきました。特にpaddingやmarginの付け方、文字の大きさは1行1行細かくみてまとめました。


4. ユーザー目線からPC・スマホの違いを考える

比較レポート作成時、PC画面とスマホ画面ふたつを動かしながら作成を進めました。スマホではコンパクトにしているだけでなく、見やすくするにはどんなレイアウト、タイポグラフィにしているのかを中心にレポートを作成しました。


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

1. 余白の大切さ

デザインで誘目性を出すだけでなく、見飽きないかつ離脱しないようには、どの程度の余白がいいのか制作しながら経験できました。


2.  キャッチフレーズの見せかた

「いい風、ふかそう。」のキャッチフレーズのみ、明朝体で斜めでに見せることにより、とても印象に残りました。印象に残るキャッチフレーズは、競合他社との差別化にもなるため、印象に残る言葉選び、またその言葉をどう魅せるのかも大切なことが制作を通じて経験できました。


3. 配色・グレースケールが多くても、近い明度と彩度の色を選択し統一感を出す

配色が多くてもトーンを近くしたり、ベースやメインになる色はパステルで柔らかくすることで、お互いを邪魔しない配色となっていました。また、アクセントカラーはブルーの反対色となる、グリーンやイエローにすることで、主張の強いレッドなどの色でなくても、UIなどが見やすくできると制作を通じでわかりました。


4. ターゲットを意識したデザイン

スクーターのサービス、と聞くと男性向けのイメージが強いと思いますが、こちらのWebページでは女性向けにサービスを使用してもらおう、という工夫が見られました。一つ目は女性の写真やイラストが多いこと。二つ目は初めの文章の最後に「おしゃれ」などの女性が好む単語が使われていること。三つ目はデザインの配色がパステルカラーで女性受けが良さそうなこと。主にこの三点女性向けの印象を受けました。このことから、一つの要素でだけでなく、複数の要素でターゲットを引き込むことも必要だと経験できました。