Webページトレース

【課題概要】

Webページのトレースを通して、LP制作のコツやテクニックを学ぶ課題です。

【トレースした作品】

【トレースで気づいたこと】

＜色＞

・ベースカラーは無彩色を使い、シンプルながらスタイリッシュさを出している。

・無彩色をベースにしているので、アクセントカラーが映える。アクセントカラーはLUUPの商品と同じようなカラーを使っているので、商品を連想させる演出が効果的にできていると思う。

・使う色を絞ることで、写真が目立ち商品がどんなものかが入ってきやすい。

＜タイポグラフィ＞

・タイトルや飾り文字以外は同じフォントを使い統一感がある。

・サイズも同じサイズが繰り返されているので、全体もすっきりした印象をうける。

・シンプルなゴシック体で読みやすく、視認性が高い。ゴシック体でもNoto Sansを用いることで、固くなりすぎずカジュアルさも出ているように思う。

＜余白＞

・余白をひとつひとつ調べたが、同じ余白は数回繰り返されていたものの、こちらのサイトでは規則性をあまり感じられなかった。ターゲットが比較的若めの世代と考えるので、きちっとした雰囲気より、おしゃれさやカジュアル感を出すためにあえての演出かもしれない。サイドの大きな余白は統一されており、縦のラインは並びが揃えられている。PCよりスマホで閲覧することをメインと考えているように思う。

【サイトのターゲットや目的の分析】

(1)ターゲット

都会暮らしの20〜30代の、一人暮らしで車を持っていない、比較的若めの層。生活の基本は電車移動がメイン。電車通勤や通学をしているが、満員電車が嫌なので、できれば電車に乗らず通勤したいと思っている。自転車通勤も考えたが、雨や真夏の暑い日など考えると、自転車を購入するのは面倒だと思っている。最新のトレンドに敏感で、新しいものは積極的に取り入れる人。

(2)目的

・基本は電車移動がメインの人がターゲットなので、駅周りなどに設置し、電車に乗るほどでもない距離の時やちょっとした買い物などに気軽に使えるようにする。

・自分の自転車や車を買うほどでもないが、あると便利だなと思う人は多いと思うので、短時間の利用をたくさんの人にしてもらう。

・レンタカーは手続きに時間がかかり、思いついた時に気軽に借りれない。アプリでサクッと予約できるようにし、特別な時ではなく日常的に使ってもらう。

上記のように「気軽にサクッと、面倒な手続きなく借りられる」というのをアピールし、多くの人に電動キックボードの存在を認知させ、登録してもらうこと。

【今回の課題を通して学んだこと】

Webサイトをデザインの視点で見ると、自分で検索して見るのとは違う視点で見ることができた。普段はなんとなく見ているいろいろなサイトは、細かなことも考えられているのだとわかった。サイトデザインはおしゃれさや奇抜さ、目立たせるのが第一ではなく（それも大事な要素だが）、使いやすさ、見やすさ、目的を伝えられるかが大切だと思った。

【頑張ったポイント】

正確なトレースで、配置や余白などをしっかり認識できるようにした。

スタイルガイドや分析まとめも、サイトのデザインに寄せてまとまりを出した。かつシンプルに見やすく、を意識して作成した。

デザインの基本４原則を意識し、基本が身につくよう基本から大きく外れないように作成した。

【お手本】