海外左右と中央に異なる役割を与える
開発ツール / ミニマル
Vercel
余白の大きな三分割と、利用事例から機能へ降りる説明で、見えない開発基盤を伝える。
設計の見どころ
ヒーローは左に見出しとCTA、中央に三角形のシンボル、右に用途の短い説明を配置しています。大きな一枚絵で覆わず、提供価値・ブランド・対象用途を横に分けた構成。各要素の周囲の余白が、役割の違いを支えています。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
対象と役割を、短い見出しで固定する
冒頭の見出しはメールと開発者という二つの要素に絞り、その下で配信用途を説明しています。誰に何を提供するかを先に決め、詳細な仕様は後段へ。多くの機能を持っていても、最初の意味を短く保つ編集が参考になります。
セリフ体を、見出しに限って効かせる
大見出しは明暗差のあるセリフ体、ナビゲーションや説明は読みやすいサンセリフです。黒地の中で文字の形そのものが視覚的な特徴になっています。全文章へ装飾書体を広げず、ブランドを感じる場所と読む場所を分けた組み合わせです。
始める前に、ドキュメントへ進める
主要CTAの横にDocumentationのリンクがあります。登録に進む人だけでなく、仕様や組み込み方を先に確認したい開発者にも入口を用意。営業的な説明を信じるかどうかではなく、実装可能性を自分で調べられる導線です。
利用企業の後に、コードで中身を示す
ロゴ群のセクションの後には、言語や環境を選べる実装例が続きます。採用例による信用と、少ないコードで何をするかという具体性を順に提示。APIサービスの説明を抽象的な利点だけで終わらせない構成です。
小さな色の変化で章の入口を示す
暗い背景を通して使いながら、後段の見出しには部分的な色の変化やメールの図版が加わります。各セクションを別色の大きな背景で切らず、統一感を保って読む節目をつくる方法。装飾の量を抑えたい長いLPで応用できます。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
技術素材やスキルの販売なら、対象者と用途を短く示し、すぐ使い方・サンプルコードへ進める。購入の前に自分の環境で使えるか判断できる資料を並べると親切です。
そのまま真似する前に
掲載コードの動作や配信性能は今回検証していません。技術商品では見た目だけのコードを置かず、実際の対応環境・依存関係・試せる範囲を明示します。
次に見ておきたい参考
一覧へ →海外海外Noma Projects
食品・生活用品 / エディトリアル
情報の順序
食品・生活用品 / エディトリアル
Noma Projects
木の棚に並ぶ調味料から商品一覧、製法の背景、料理例へ進み、専門的な味を家庭で使う理由まで説明するEC。
設計の見どころ
キャンペーンの大きな写真の下に商品一覧を置き、続いてブランドの成り立ちや自然・製法の説明、レシピ、ニュース、ギフト商品、FAQへ進む。専門的な背景を読む前にも商品を選べる一方、用途が分からない人には後半で料理例を渡す二段構えになっている。
詳しい解説を読む →公式サイトを見る ↗海外Violaine & Jérémy
デザイン / エディトリアル
自己紹介を小さく作品を大きく
デザイン / エディトリアル
Violaine & Jérémy
小さな中央組みの自己紹介と大きな空白の後に、業種名を広い字間で掲げた作品写真を連ねる。
設計の見どころ
冒頭は中央の短い自己紹介と広い白い余白が中心で、その下からホスピタリティ、ファッション、出版などの分野と作品が続く。経歴を長く説明するより、作品群から活動範囲を読ませる順番だ。制作実績が主な判断材料になるスタジオに向いた入口である。
詳しい解説を読む →公式サイトを見る ↗