飲食店系サイトをトレースしました。
メインビジュアルを見てすぐこのサイトをトレースしようと決めました!


■構成
トップ(メインビジュアル)

コンセプトについて

フロア別紹介1

プログラム紹介

イベント紹介

インスタグラム

フッター

このお店は「場所を提供する」という特徴的なコンセプトがあるため、トップの下にコンセプトのセクションが来ているのかなと思います。


トップのメインビジュアルがとてもかっこいいです!
モザイク調?のガラスを入れるだけでアート性のある違和感を感じました。
加工したように見えるけど実際に顔の前にガラスを置いて撮影していると思われます。
ビジュアル的にかっこいいし、あえて顔を映さないことで「なんだか、良い場所」というコンセプト通り、自由に過ごして良いい匿名性みたいなものも表現しているのではないかと思います。


このサイトでは写真だけでなくイラストも効果的に使われています。

写真だけよりイラストを入れることで、単調さがなくなって一気に親しみやすさが増す効果があるように思います。


■日本人のイラストではなく外国の人のイラストを使うことについて考察

→外国の人のイラストでなく写真であったとしたらもう少し海外のお店の感じが強くなる
→お店自体が外国風のお洒落な外観、広尾という場所、ライフスタイルとワークスタイルの融合、都市空間に現れたクラブラウンジといったコンセプトなどから違和感がない



フォントは英字にAvenir、日本語はNotosansJPをメインで使用しています。
ある記事によると、Avenirは幾何学的なフォントとしてFuturaと比較されることも多いらしいです。
Futuraは可愛さと尖った印象を持っているけど、Avenirは同じくモダンな印象はあるけどよりクセがなく使用しやすいと思いました。

英字の見出し部分では、Betonというフォントも使用していました。(Rockwellで代用)
白地+Beton+イラストで雑誌のような雰囲気になるというのは一つ覚えておきたいです。
日本語で「なんだか、良い場所。」のような句読点をつける小見出しをつけたり、あしらいで線を引いてもそれっぽい!


■飲食系サイトに効果的だと思う要素
・特に空間や雰囲気をポイントとしている場合、料理や外観内観の写真の上質さ
・フォント(特にセリフ系)で上質な印象
・CONTACTボタンを固定スクロールなどで押しやすく
・その空間に行ってみたいとターゲットに思わせる印象をつくる


■モダンな印象にする要素
・幾何学的なフォント(Avenirなど)、セリフ系フォント
・上質な写真(料理の写真は色鮮やかに。朝の日差しのような青みのある光と影?)
・多様性を感じる外国の人のイラスト
・黒地と白のパッキリとしたコントラスト


ぜひ実際のサイトもご覧ください。
Back to Top