見出し画像

新卒デザイナーが、WEBサイト分析とリデザインをやってみた❶(リデザイン編)

こんにちは。新卒ペーペーデザイナーのカナです。
今回は前回の「Post Coffee」の続きです。分析結果から、既存のページの良さを残しつつ一部リデザインするという形にしました。前回の分析結果を見たい方はこちらをご覧ください↓

では早速リデザインした部分を説明します。
既存のデザイン

アートボード 2 のコピー

挑戦のデザイン

アートボード 1 のコピー 4

【変更点】
1)voiceが加わった(全体的に適用)
2)サブタイトルとタイトルが左揃えになった
3)吹き出し加わった
4)メディアのロゴが少なく表示されている
5)黒の色を#000000から#333333に変更(全体的に適用)

【理由】
1)voiceが加わった
→最初に何の内容が書かれているコンテンツなのか知るため
最初にvoice(声)を入れることで、誰かしらのサービスに対する声が書かれたコンテンツが次あるんだなと予想が立てられる。結論から入った方がわかりやすいのではと考えた。
色は淡いネイビーにした理由は2つ。
・結論のため少し強調させたかったため
・チャットと同じ色合いにすることで、色を増やさずにサイトを構成させるため

2)サブタイトルとタイトルが左揃えになった
→サイト内で左揃えの部分と、中央揃えの部分があり統一されていなかったため
使い分けをしているようだったが、これだけでは伝わってこなかった。このように、サブタイトルとタイトルは全て統一した方がサイト内の動きに統一感が生まれる。

3)吹き出し加わった
→メディアの声ということを視覚的にわかりやすくするため
既存のデザインだと文字だけのため、文字をちゃんと読まないと何のコンテンツなのかわからない。ターゲットによっては、「ここ読まなくてもよかった」とがっかりさせてしまうこともあるだろう。ターゲットの知りたい情報なのか分かりやすくするためにも、文章だけでなく視覚的な工夫が必要だと考えた。

4)メディアのロゴが少なく表示されている
→重要度が高くないため
確かにロゴが画面いっぱいにあると、多くのテレビや雑誌に紹介されたことが分かり信頼感や尊敬をユーザーは感じることができる。信頼感を獲得してからサービスについて知ってもらう方が、ユーザーも前向きにサイト内を回遊できるだろう。
しかし、このコンテンツはそこまで重要度は高くないと考える。
理由は、このサイトでは自分好みのコーヒーを飲む生活がどれだけ素敵かを訴えなかれば、CVにつながらないからだ。どれだけ信頼を得ても、中身のインパクトが弱ければ期待外れになってしまう。このサービスの肝心な部分は、内容の中身である。中身でどれだけユーザーの心を動かせるかが鍵となる。そのため、ここまで画面を埋めるほどメディアロゴを表示させなくていいと考える。
表示は2列くらいにし、横へ自動にスクロールされるようなサイトにすればどれだけメディアに取り上げられて来たのかもわかる。また、自動でずっと流れるため、より多くのメディアに注目されているようにも見え、信頼度のアップにもつながるだろう。

5)黒の色を#000000から#333333に変更
→・#000000ではWEB上では主張が強すぎるため。
(=目の疲れに繋がってしまう)
 ・写真に目が行きやすくするため。
せっかく素敵な写真のため、写真を見て購入意欲を高めてもらう


次に青の見出しの部分のデザインについて
既存のデザイン

スクリーンショット 2020-08-24 11.40.53

挑戦のデザイン

アートボード 1 のコピー


【特徴】
1)文字が斜め
2)少しデザイン性のあるフォント
3)柔らかい印象に
【理由】
1)文字が斜め
少し主張させるため
斜めにすることで、「コンテンツがこれから変化するよ」とコンテンツの境目を分かりやすくしている。
「PostCoffee」のロゴが斜めになっているので統一感も出した。
2)少しデザイン性のあるフォント
サイト内で、ロゴ以外の英語は明朝体のようなファントを使っていたため
ロゴ以外の英語でゴシックを使わない理由は、重要視されていない部分だからと思われる。装飾的な意味合いで英語が使用されている部分が多く感じた。
3)柔らかい印象に
→写真が落ち着いたものが多いため
柔らかい落ち着きのある写真がサイト内で多い。また、コーヒーはひと段落した際に飲むイメージがある。それらの雰囲気を踏まえて、フォントを少し小さくし、淡いネイビーにすることで主張しすぎない見出しにした。

以上が今回リデザインした部分だ。あまり変化させていない気がするが、今回は既存を生かしたリデザインをすることに徹底した。理由は、既存のサイトのデザインを認めるためだ。認めながらも、もっと良くするためにはこれをするべきなのではないか?と提案していき、サイト改善を行った。これは実際の業務にも近い形のため、仕事にも良い影響があると考える。

さてさてここまで読んでくださり、ありがとうございました。新卒ペーペーデザイナーのカナでした。次回の言語化も頑張ります。





この記事が気に入ったらサポートをしてみませんか?