SMALLSHIFT
← サイト事例に戻る

WEBSITE STUDY / 海外

Brewitty

紙のコラージュとコーヒーの比喩を使い、制作の狙いから事例・チームへ進むコンテンツ制作会社。

公式サイトを見る ↗
公式サイト / 掲載確認用
Brewittyの公式サイト画面

DESIGN NOTES

このサイトの設計を読み解く。

01

制作の役割を三つに分けてから事例へ進む

冒頭の短い宣言と問い合わせの後に、反応・クリック・記憶というコンテンツの役割を三列で示す。その下で成果を記した事例カード、選ばれる理由、チームへ進む。先に仕事の意味を分解し、それを事例で補う順序として読み取れる。

02

太い輪郭をボタンとカードで繰り返す

生成りの背景に黒い見出し、太い輪郭と影のあるボタンを置き、下方では水色の波型境界へ切り替える。事例カードにも同じ黒い線が使われる。写真や文章の内容が変わっても、線と色の反復によって同じ会社の画面としてまとまる。

03

コーヒーの工程をサービスの比喩にする

豆・粉・飲み物が入ったカップを横に並べ、制作が生む三つの役割に対応させている。冒頭の手や紙を組み合わせたコラージュも、手を動かして内容をつくる印象に寄せる。飲料販売ではなく、制作会社の説明に使われる視覚的な比喩だ。

04

連絡の入口を短く保ち事例で補強する

ヘッダーと冒頭に問い合わせへのボタンがあり、本文を読む前から連絡先を見つけられる。下方の成果カードは数字と説明を同じ枠内へ収めている。数字は公式サイトの自己申告として扱い、この画面から効果の再現性までは判断できない。

05

制作会社では担当内容まで見えるカードにする

国内の制作会社にも、何を狙う仕事かを三つ程度に整理してから事例を見せる順序を応用できる。成果数字を掲げるなら、期間、担当範囲、比較条件も必要になる。柔らかい装飾と、発注判断に使える具体的な情報を組み合わせたい。

APPLY TO YOUR PROJECT

自分の制作に取り入れるなら

サービスの役割を短い三項目に分解し、その直後へ事例カードを置く。イラストの比喩は説明を助ける範囲で統一し、連絡先は上部にも残す。

そのまま真似する前に

親しみやすい装飾だけでは担当範囲が伝わりにくい。成果数字は条件を添え、何を制作したかと契約前に確認する内容を具体化する。

次に見ておきたい参考

一覧へ →
Brewittyの公式サイト画面