海外焼き菓子と一杯を一つの写真にする
飲食 / 写真中心
Madie
焼き菓子とコーヒーの一組を大きく見せ、味選びから来店・特別注文までつなぐ。
設計の見どころ
冒頭の写真は木のテーブル上のマドレーヌとアイスコーヒーを大きく見せる。背景には赤茶色のタイルがあり、商品だけでなく店で過ごす温度感も伝わる。一品の物撮りに絞らず、組み合わせて楽しむ場面を先に見せることで、カフェの利用を想像しやすくしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
企業の転換期から相談内容を探せる
冒頭は企業の将来に関わる姿勢を示し、本文で社内に入り共に考える仕事の方法を説明する。新生、分社、承継、再編など企業の状況別に支援を分け、一般的なサービス名よりも相談が必要になる局面から読者が自社の課題を探せる順序にしている。
画面で優先される要素
白いヘッダーの下に紺色の大きな日本語を置き、木のテーブルを囲む二人の写真を上から見せる。青い床と写真を横切る白い曲線が、社名の意味を思わせる画面をつくる。人物の対話を主役にすることで、無形の仕事を具体的な場面として伝えている。
具体性を支える情報
支援する局面の説明に加え、メンバーのプロフィールがあり、誰が関わるかを確かめられる。ニュースとコラムの入口も設けているが、確認時に記事がない区画もあった。情報量が多いことを実績とみなさず、人物と支援範囲の説明を判断材料として読む必要がある。
行動への導線
右上では問い合わせを紺色の面、資料の入口を輪郭線のボタンとして分けている。本文末尾にはそれぞれのフォームと電話、受付時間が示される。いきなり相談する人と、先にサービスを把握したい人に異なる連絡手段を渡す形が参考になる。
取り入れるときの考え方
無形の専門サービスでは、抽象的な能力一覧よりも依頼が発生する場面を入口にすると分かりやすい。代表者や担当者の説明と併せて、初回相談で話せる内容、資料で分かる内容を分ければ、問い合わせ前の不安を減らす情報設計へ応用できる。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
サービス名ではなく企業が置かれた局面から説明する。担当者の顔と相談方法を添えれば、無形の仕事も具体的に検討しやすくなる。
そのまま真似する前に
伴走という言葉は担当範囲が広く解釈されやすい。契約期間、会議への関わり方、成果物などは別ページで具体化したい。
次に見ておきたい参考
一覧へ →海外海外The Salad Project
飲食 / 写真中心
情報の順序
飲食 / 写真中心
The Salad Project
食べる人と食材の接写を左右に並べ、日常の昼食から商品選択・受け取り方へつなぐサラダバー。
設計の見どころ
最初はサラダを食べる場面と食材を見せ、続いてサラダとプロテインボウルの選択、アプリの案内へ進む。会社説明を先に長く置かず、今日何を食べるかという来訪者の判断に近い順序だと読める。メニュー内には具材の区分や栄養情報への入口もある。
詳しい解説を読む →公式サイトを見る ↗国内THE BUTTER
飲食 / 写真中心
素材と料理を二枚でつなぐ
飲食 / 写真中心
THE BUTTER
バターの接写とトーストを二分画面で並べ、素材と提供体験を同時に見せる店舗サイト。
設計の見どころ
冒頭はバターの表面を写した接写と、皿に盛られたトーストを左右に配置する。中央に大きな店名を重ねることで、何を使い、どんな状態で提供する店かを一画面で伝えている。食材の写真と完成品の写真を一組にする方法が明快だ。
詳しい解説を読む →公式サイトを見る ↗