海外対象と役割を、短い見出しで固定する
開発ツール / エディトリアル
Resend
セリフ体の大見出しと実装コードをつなぎ、開発者向けサービスに個性と具体性を両立させる。
設計の見どころ
冒頭の見出しはメールと開発者という二つの要素に絞り、その下で配信用途を説明しています。誰に何を提供するかを先に決め、詳細な仕様は後段へ。多くの機能を持っていても、最初の意味を短く保つ編集が参考になります。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
国内
海外
DESIGN NOTES
このサイトの設計を読み解く。
左右と中央に異なる役割を与える
ヒーローは左に見出しとCTA、中央に三角形のシンボル、右に用途の短い説明を配置しています。大きな一枚絵で覆わず、提供価値・ブランド・対象用途を横に分けた構成。各要素の周囲の余白が、役割の違いを支えています。
薄い線と白地で、情報の区切りをつくる
上部ナビゲーションやコンテンツの境界は控えめで、見出しとボタンの黒が主要なアクセントです。派手な色で機能を区分せず、位置と文字サイズで階層を示す設計。製品の種類が増えても、情報の整理に集中しやすい見せ方です。
技術の説明に、使われるサービスを添える
スクロール後はNotionの画面と利用に関する説明が現れ、その脇に機能一覧を配置しています。基盤の内部構造から説明するのでなく、読者が知るサービスを介して用途を示す構成。技術名だけでは伝わらない役割を補っています。
導入する人と相談する人を分岐させる
冒頭の主要ボタンはデプロイ開始、隣は営業相談。上部にもデモや登録の入口があります。技術担当が試す経路と、組織として検討する経路を分けているため、すべての訪問者に同じ問い合わせを求めない構造になっています。
機能の列挙は、用途の説明の後に置く
用途を示す見出しと利用事例の横に、関連する技術機能をまとめています。先に「何に使うか」を把握し、その下で「何が支えるか」を読む流れ。専門用語を消すのではなく、登場させる順序で理解を助ける方法です。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
専門的なサービスは、利用者が知る具体例を先に示し、その例を支える機能を後から添える。読む相手が実務担当なのか発注者なのかで、開始と相談の導線を分けます。
そのまま真似する前に
ブランド認知があるサイトの大きな余白を、説明不足の新規サービスにそのまま移すと意味が伝わりません。社名を知らない人にも提供内容が分かる補足を残します。
次に見ておきたい参考
一覧へ →海外国内対象者ごとに体験の入口を分ける
体験サービス / ミニマル
J-CAT
縦書きの言葉と小さな体験写真で日本文化への姿勢を示し、国内・海外・地域向けの事業へ分ける。
設計の見どころ
冒頭は日本の文化を未来へつなぐ姿勢を短い言葉で示し、本文では国内向けOtonami、訪日客向けWabunka、地域企業向けProduceを分けている。体験という共通軸を保ちながら、利用者と相談企業の目的を混同しない情報の順序が参考になる。
詳しい解説を読む →公式サイトを見る ↗海外The Cupping Room
飲食 / ミニマル
小さなカップと余白で店名を覚えさせる
飲食 / ミニマル
The Cupping Room
カップの小さな印と広い余白から始め、茶色とクリーム色で街のカフェの親しみを伝える。
設計の見どころ
冒頭はクリーム色の広い余白に、湯気のあるカップの小さな印と店名だけを中央に置く。上部のナビと予約ボタンは控えめに配置され、店名の周辺を静かに保つ。大きな料理写真がなくても、喫茶の用途と落ち着いた調子を短い要素で示せる例になっている。
詳しい解説を読む →公式サイトを見る ↗