海外機能の一覧より、作業の現場を先に見せる
業務ソフト / ダーク
Linear
黒の階調と実際の業務画面で、複雑な開発管理をひとつの作業の流れとして見せる。
設計の見どころ
冒頭は大きな見出しの下に、課題の本文・会話・担当情報を含む製品画面を配置。抽象的な「管理が楽になる」という説明から、どの情報を同じ場所で扱えるかへすぐ移れます。製品UIが、そのままサービス内容を説明する主役になっています。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
成果物を背景にして、目的を大きく伝える
ヒーローには複数のスライド例が敷かれ、その上に非常に大きな見出しが重なります。何が作れるかを文章だけで説明せず、完成物の多様さを背景で示す構成。製品の操作画面より先に、利用者が得る成果物へ視線を向けています。
試すための入力を、説明の直下へ置く
見出しの下に生成内容を入力する欄と実行ボタンがあります。別のページへ移ってから用途を考えるのでなく、その場で何を作るか想像させる設計。プロンプトの入口もあり、空欄を前に迷う人への足がかりを用意しています。
紫の世界観に、登録だけ別の色を使う
全体の紫に対して、右上の登録ボタンは黄緑です。大きく目立つヒーローの中でも、登録という継続的な入口を見つけやすい配色。見出し、入力領域、登録の三つが同じ色の強さで競い合わないようにしています。
中段では、文章と編集画面を対にする
次の説明では左側に用途を表す見出しと文章、右側にスライド編集画面を置いています。派手な冒頭から、実際の道具としての説明へ密度を切り替える構成。雰囲気のよさだけでなく、どこを操作するのかを示しています。
作成後の仕事まで、説明の範囲に含める
公開テキストではスライド作成に続いて、提案、ブランド統一、チーム管理の用途を説明しています。作って終わりの道具ではなく、チームのプレゼン業務を支える場所として見せる流れ。商品説明の範囲を成果物の利用場面まで広げています。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
成果物を作るサービスや素材なら、完成例を見せた直後に「何を編集するか」を考えられる入口を用意する。次の段で編集方法と利用場面を説明し、期待だけで終わらせない構成にします。
そのまま真似する前に
生成や登録は実行していないため、入力後の体験や無料範囲は未検証です。入力欄を置く場合は、実際に動く機能と必要な登録条件を一致させることが前提です。
次に見ておきたい参考
一覧へ →海外海外誰のための場所かを、機能より先に伝える
業務ソフト / タイポグラフィ
Notion
大きな言葉、製品画面、手描きの人物を重ねて、多機能な仕事道具の入り口を親しみやすくする。
設計の見どころ
ヒーローはチームとエージェントの働く場所という意味を大きく提示。続く短い説明で、情報の取り込み・回答・自動化へつなげています。製品群の名前を覚えてもらう前に、利用者が置かれる状況から理解を始める順番です。
詳しい解説を読む →公式サイトを見る ↗海外機能の多さを、ひとつの便益にまとめる
業務ソフト / ダーク
Raycast
余白の大きな宣言から、操作画面とOS別ダウンロードへつなげるデスクトップアプリの紹介。
設計の見どころ
最初は中央の短い大見出しと、ランチャーに道具を集めるという説明だけを置いています。多機能アプリでありながら、入口で全機能を見せ切ろうとしない。何が便利になるかを先に伝え、スクロール後の画面で補足する構成です。
詳しい解説を読む →公式サイトを見る ↗