海外機能の多さを、ひとつの便益にまとめる
業務ソフト / ダーク
Raycast
余白の大きな宣言から、操作画面とOS別ダウンロードへつなげるデスクトップアプリの紹介。
設計の見どころ
最初は中央の短い大見出しと、ランチャーに道具を集めるという説明だけを置いています。多機能アプリでありながら、入口で全機能を見せ切ろうとしない。何が便利になるかを先に伝え、スクロール後の画面で補足する構成です。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
機能の一覧より、作業の現場を先に見せる
冒頭は大きな見出しの下に、課題の本文・会話・担当情報を含む製品画面を配置。抽象的な「管理が楽になる」という説明から、どの情報を同じ場所で扱えるかへすぐ移れます。製品UIが、そのままサービス内容を説明する主役になっています。
黒一色にせず、境界を明度でつくる
背景、外枠、内側のパネルは少しずつ明るさが違います。細い境界線と小さな角丸で階層を示し、彩度の高い色はステータスなど限定した場所へ。業務画面の密度を保ちながら、ページ全体が騒がしくならない設計です。
大きな宣言と、小さな操作文字の対比
見出しは幅広く大きく、本文とナビゲーションは控えめ。同じサンセリフ系でもサイズと明度に段差があり、読む文章と眺めるUIの優先順位が分かれています。細部の文字を全部読ませるより、使う場面を一度に把握させる組み方です。
利用企業の帯を、製品画面の後に置く
UIの直後に利用企業のロゴ群があり、その後に製品の考え方や業務工程の説明が続きます。製品を見る、採用例を見る、仕組みを理解するという順番。ロゴだけで信用を演出するのでなく、直前の画面を補強する配置として読むと参考になります。
登録と情報収集をナビで分ける
上部右端の登録ボタンだけを明るくし、製品・顧客・価格・問い合わせは文字リンクで並べています。すぐ始める人には固定した入口を残し、検討中の人には調べる経路を与える構成。すべてのリンクを同じ強さのボタンにしない点が要点です。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
業務サービスのLPなら、最初に一つの具体的な作業画面を大きく見せ、その下で導入例と機能を説明する。画面内の文字は自社の実際の利用場面に合わせて選びます。
そのまま真似する前に
暗い配色だけを移すと読みにくくなります。情報が多い画面を載せる場合は、スマホで読ませる部分と雰囲気だけ伝える部分を分ける必要があります。
次に見ておきたい参考
一覧へ →海外海外誰のための場所かを、機能より先に伝える
業務ソフト / タイポグラフィ
Notion
大きな言葉、製品画面、手描きの人物を重ねて、多機能な仕事道具の入り口を親しみやすくする。
設計の見どころ
ヒーローはチームとエージェントの働く場所という意味を大きく提示。続く短い説明で、情報の取り込み・回答・自動化へつなげています。製品群の名前を覚えてもらう前に、利用者が置かれる状況から理解を始める順番です。
詳しい解説を読む →公式サイトを見る ↗海外成果物を背景にして、目的を大きく伝える
業務ソフト / グラフィカル
Pitch
完成スライドを背景に、入力欄をヒーローへ組み込み、作り始める行動を早く見せる。
設計の見どころ
ヒーローには複数のスライド例が敷かれ、その上に非常に大きな見出しが重なります。何が作れるかを文章だけで説明せず、完成物の多様さを背景で示す構成。製品の操作画面より先に、利用者が得る成果物へ視線を向けています。
詳しい解説を読む →公式サイトを見る ↗