作品紹介

WORK

サイトカムイのモックアップ

CONCEPT
You Bring the Passion of Food to you.
COPY
北海道で育まれた食材にひと手間加えた彩りを
TARGET
中流階級~富裕層
PERIOD
8月30日
TIME
2日間
USED
XD / HTML / CSS / jQuery
RESPONSE
PC
FIELD
Webデザイン基礎実習

意識したところ

I WAS MINDFUL OF

学校にて一番最初にXDで制作したデザインをコーディングしたもの。ナビゲーションを追従させること、ロゴマークを入れること、コンセプトセクションを入れること、などのいくつかの課題をクリアしながら用意された写真のなかで制作した。実際に存在するフレンチレストランで、ターゲット層は富裕層だったため、ごちゃごちゃせずにシンプル且つ地味過ぎないデザインを心がけた。色味においてもカラフルな色彩は避け、白黒を基調とした大人っぽい無彩色を選んだ。ファミリーレストランなどの庶民的な飲食店と差をつけるために、料理画像の付近に黒ベースの大理石の画像をはめ込んで、高級感を演出した。FVではメイン料理に近い写真をMVに置きアイキャッチを図り、それ以外はロゴのみが見えるように配置して、スクロールをするとコンセプトや紹介などがわかるような誘導をしている。コンテンツや配置においても、画面内で収めようとせずに最後までスクロールを促すようなストーリー性のある配置となっている。特に拘った部分は、TEAMセクションのすぐ下にある二人用のテーブルだが、お店のコンセプトや料理、それらを提供する人物の信念を知った上で、写真をみる人自身が実際に食事をする姿を想像しやすいと思い、敢えてサイトの下に配置した。

カラーコード

COLOR CHORD

BASE

#FFF

高級感のある飲食店のサイトにはあまり色彩を使わない方が良いとの教えがあり、ベースカラーはそれに習って真っ白を選択した。

MAIN

#000

上記と同じく高級感のある飲食店のサイトにはあまり色彩を使わない方が良いとの教えがあり、サイトをみるターゲット層はおそらく30代からご年配の方が多いと想定して、メインカラーは視認性の高い真っ黒を選択した。

ACCENT

#F1D500

ベースカラーとアクセントカラーのコントラストを壊したくなかったため、アクセントカラーは最もカラーコーディネートの邪魔をしないチャコール系を選択し、使用回数も一度きりに収めた。

文字

FONT

Yu Mincho

明朝体のなかでも小説に扱われる落ち着きのあるフォント。文字の空間が均一でご年配の方でも読みやすいものを選んだ。

Nsimsun

中国語の言語を設定するために設計された書体だが、Windowsの標準フォントであること、大きなテキストブロックや小さい文字での表示においても、文字がクリアに見えること、高級フレンチレストランの雰囲気を壊さないことの三つのメリットがあったため、使用した。

サイトカムイのモックアップ

CONTACT US

お気軽にお問い合わせください。