1日1WEBサイト デザイン分析 #19 "KYOTO KOMAMEHAN こまめはん"

こんにちは。WEBデザイナー目指して勉強中のかいもちです。
昨日おとといと B to B なページが続いたので、今日は B to C な感じのページを見ていこうと思います🍬

"KYOTO KOMAMEHAN こまめはん"

目的・ターゲット

目的
・商品 / ブランド認知 (新ブランド)
→ 店舗に足を運んでもらう

ターゲット
・観光客。外国人向けかなーと思ったけど、英語対応のページではなさそう。

配色

・やわらかめで、落ち着いた印象。はんなり ? 

・背景は白、文字はやわらかめの黒、背景のアクセントにベージュ (卵の殻の色って書いてあるw)、アクセントカラーに薄紫。
　
・この薄紫がかなり和っぽい要素を演出。他、一部に同じようなトーンのピンクや、唐草色 (?) など。

 

フォント

・Yu Gothic (日本語)
→ 安定ですね...。
　でも、このページは全体的に間隔をゆったりとっていて、ゴシック体だけどゴシック体じゃないような、ちょっと落ち着いた印象もある。

・Lato (英数)
→ Googleフォントで使用可。英字はOなどの丸い部分がしっかり丸い。数字に関しては特になんの特徴もなく...。

ファーストビュー

・写真ドーンのよくある感じ... だけど、周りに白い枠があることで、少し奥ゆかしい雰囲気 (!?) ⇆ 開放的。

・ぱっと見で、「京都のお土産屋さんだな」とわかる、わかりやすさ。
ただ、商品の詳細まではわからないので、どんな商品なんだろう ? とスクロールさせる意図も感じる。

コンテンツ

・全体的に、曲線的。スクロールやクリックの矢印をドットにしていたりと、細かいところまで豆っぽくてかわいい。

・グリッドや色味に統一感があって、ラフすぎない。京都の、伝統を重んじる雰囲気と、商品のポップな雰囲気がうまく調合してる。

・ページ遷移無し。「もっと見る」は同じページ内に、「その他取扱店舗」はポップで出てくる。NEWSもクリックして記事に飛ぶ...とかはなく、更新を前提としたページではないのかも。

・アニメーションもほぼ無し。マウスホバーで透明度が変わるところは、ちょっとわかりにくい。もう少し変わってもいいのかなと思った。

感想

・配色がとても考えられていて、素敵だと思った。

・Yu- Gothic の新しい可能性を感じた ! 余白によってここまで印象が変わるとは...。

・コンテンツの内容やデザインは、正直あるあるな感じで、特に印象に残ったところは無い。ただ、ボタンや矢印の細かいところまで、商品と統一感があるように作り込まれているのが素敵。

あ〜〜旅行行きたいねぇ〜〜🌤