5. UMEDA FOOD HALLのLPサイト short版webサイトレビュー

こんにちわ！ayakaです。

twitterで発信しているwebサイトレビューを紹介します！

Twitter版)webサイトレビュー9

レビューするサイト: UMEDA FOOD HALLのLPサイトhttps://t.co/SekE8UsVzE

サイト選定参考: https://t.co/7uyLRnlBV5

note記事:https://t.co/rNVCkAQVDp

noteでも投稿しました。ぜひ読んでいただけると嬉しいです！ pic.twitter.com/Wt9DmY9PbI

— アヤカ@webデザイン勉強中 (@5BI24Bj5tbX5JZS) October 11, 2021

レビューするサイト:

UMEDA FOOD HALLのLPサイト

インフルエンサー5人がオススメ！私ならこう楽しむ！UMEDA FOOD HALL

サイト選定参考:

https://site-advance.info/

ターゲット:

関西のインフルエンサーに関心のある、関西在住の20代から50代の女性

参考: https://smmlab.jp/article/research-data-about-instagram-users/

配色:

・背景: 白・黒
・ページタイトルデザイン・ハンバーガーメニュー・背景:紫・暗いピンク・マゼンタのグラデーション

フォント:

・インフルエンサーの英語表記: ”Influencer”: Barlow Condensed(サンセリフ体)
・上記以外全て:Segoe UI

―Barlow: 丸みが少々あり、コントラスト性が低い特徴を持つ、カリフォルニア由来のサンセリフ体フォント。車のプレート・高速道路の標識・バス・電車などに用いられている。

参考:
https://www.1001freefonts.com/barlow.font
https://www.1001fonts.com/barlow-condensed-font.html

全体的なデザインについて:

・白背景の上に透明な文字背景や、明るい店内でインフルエンサーが食事を楽しむ写真、丸みのあるロゴを含むページタイトル、サービス名やインフルエンサーなど部分的な英語表記があることで、高級感と柔らかい雰囲気を演出しているデザイン。

このサイトから学べる事

レイアウト:

・利用者のレビューを掲載しているLPサイトの構成は、レビュー者のスライド式写真とサイトタイトル、サービスの概要・ビジョン、レビュー者リスト、各レビュー者のレビュー内容の一部の掲載とすると好ましいこと。

配色:

・高級感あるInstagramの雰囲気を演出するには、ページタイトルで紫・ピンク・マゼンタのグラデーションを用いたデザインを加え、かつ #タグ名を記載すると好ましいこと 。

・高級感があり落ち着いたオシャレさを演出するには、背景を白にしてその上に背景の模様やコンテンツのフォントデザイン、加工デザインした写真などを加えていくことが好ましい。

フォント:

・白背景に設定している中でサイトの個性を出す方法として、白背景の上に模様をつけるイメージで、サービス名や#などのサイトで用いるメインキーワードを透明な文字で掲載する方法があること。その文字はコンテンツで用いているフォントの種類と同じものを用いる。
・白背景に設定している中でサイトの個性を出す方法として、ページタイトルやコンテンツタイトルなどをロゴとwebフォントの両方に設定する方法があること。特にページタイトルのロゴデザイン次第でサイトの印象を大きく変える。

ハンバーガーメニュー:

・ファーストビューで用いている色をボタンの背景とした上で、展開前のボタン線を段違いの長さで横3本線にすると、同じ長さで横3本線のボタンを用いている通常のレスポンシブサイトとデザインの差別化ができ、好ましいこと。

PC版外観:

iOS版外観:

最後まで読んで下さり、ありがとうございました。