海外機能の一覧より、作業の現場を先に見せる
業務ソフト / ダーク
Linear
黒の階調と実際の業務画面で、複雑な開発管理をひとつの作業の流れとして見せる。
設計の見どころ
冒頭は大きな見出しの下に、課題の本文・会話・担当情報を含む製品画面を配置。抽象的な「管理が楽になる」という説明から、どの情報を同じ場所で扱えるかへすぐ移れます。製品UIが、そのままサービス内容を説明する主役になっています。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
機能の多さを、ひとつの便益にまとめる
最初は中央の短い大見出しと、ランチャーに道具を集めるという説明だけを置いています。多機能アプリでありながら、入口で全機能を見せ切ろうとしない。何が便利になるかを先に伝え、スクロール後の画面で補足する構成です。
空白が、ダウンロードを独立させる
見出しとダウンロードボタンの間に広い余白があり、その下に対応OSの条件が小さく添えられています。CTA周辺を他のカードで埋めないことで、行動とその前提をまとめて認識しやすい。条件をボタンから離しすぎない点も重要です。
黒い外観とUIの光をつなげる
全体を暗く抑え、製品画面の中では赤や青などの要素が現れます。薄い縁のついたナビゲーションも、アプリのパネルのような輪郭。Web上の紹介とデスクトップ製品の見え方に連続性を持たせています。
スクロール後は、一つの操作面を大きく
次の画面では検索・一覧・プレビューを持つアプリUIを大きく提示。細かな機能カードへ急いで分割せず、一つのインターフェースに情報が集まることを見せています。導入後の操作場所をイメージさせる見せ方です。
OSと上位プランの選択肢を混ぜない
確認したWindows環境ではWindows向けダウンロードと要件が表示され、ナビにはPro、Teams、Enterpriseなどが分かれていました。今すぐ使うための選択と、契約プランを調べる選択を別の位置で扱っています。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
ダウンロード型の商品は、便益、実際の画面、対応環境、取得ボタンの順序を明確にする。特に対応OSやファイル形式は、ユーザーが押す直前に判断できる位置へ置きます。
そのまま真似する前に
確認したのはWindows環境の表示です。OSによる切り替えの全パターンやインストール後の挙動は未検証。暗い背景で小さな補足文字を使う際はコントラストを確認します。
次に見ておきたい参考
一覧へ →海外海外誰のための場所かを、機能より先に伝える
業務ソフト / タイポグラフィ
Notion
大きな言葉、製品画面、手描きの人物を重ねて、多機能な仕事道具の入り口を親しみやすくする。
設計の見どころ
ヒーローはチームとエージェントの働く場所という意味を大きく提示。続く短い説明で、情報の取り込み・回答・自動化へつなげています。製品群の名前を覚えてもらう前に、利用者が置かれる状況から理解を始める順番です。
詳しい解説を読む →公式サイトを見る ↗海外成果物を背景にして、目的を大きく伝える
業務ソフト / グラフィカル
Pitch
完成スライドを背景に、入力欄をヒーローへ組み込み、作り始める行動を早く見せる。
設計の見どころ
ヒーローには複数のスライド例が敷かれ、その上に非常に大きな見出しが重なります。何が作れるかを文章だけで説明せず、完成物の多様さを背景で示す構成。製品の操作画面より先に、利用者が得る成果物へ視線を向けています。
詳しい解説を読む →公式サイトを見る ↗