海外機能の一覧より、作業の現場を先に見せる
業務ソフト / ダーク
Linear
黒の階調と実際の業務画面で、複雑な開発管理をひとつの作業の流れとして見せる。
設計の見どころ
冒頭は大きな見出しの下に、課題の本文・会話・担当情報を含む製品画面を配置。抽象的な「管理が楽になる」という説明から、どの情報を同じ場所で扱えるかへすぐ移れます。製品UIが、そのままサービス内容を説明する主役になっています。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
誰のための場所かを、機能より先に伝える
ヒーローはチームとエージェントの働く場所という意味を大きく提示。続く短い説明で、情報の取り込み・回答・自動化へつなげています。製品群の名前を覚えてもらう前に、利用者が置かれる状況から理解を始める順番です。
画面の中に、現実の仕事の粒度を残す
見出しの下には、タスクの列や個々のカードを持つワークスペース画面があります。画面が大きいため、単なる装飾ではなく仕事を入れる場所だと分かります。説明文とUIの間に余計な概念図を挟まないことが、具体性につながっています。
黒い太字と青の操作色を分ける
白地の大きな黒文字が最初の視線を集め、青は登録ボタンや見出し内のアクセントに集中しています。淡い青のデモボタンは、主ボタンと色相を揃えて強度を下げる設計。色数よりも濃淡で、行動の優先順位を示しています。
手描き表現を説明の邪魔にならない端へ
線画の人物は製品画面の周辺に置かれ、中央のUIや見出しを覆っていません。無機質になりがちな業務ソフトの紹介に人の気配を加えつつ、機能を読む領域は整理したまま。親しみやすさを、画面の主役と競合させない配置です。
無料利用と相談の二つを並べて選ばせる
ファーストビューでは無料で始めるボタンとデモ依頼を並置。下へ進むと、情報を取り込む・答えを見つけるなどの仕事別カードが現れます。行動を決められる人はすぐ進め、まだ分からない人は用途で理解できる構成です。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
多機能な商品でも、冒頭は利用者の仕事を一つの言葉で括り、実画面を一枚見せる。次の段で代表的な用途に分けると、最初から機能名を羅列せずに説明できます。
そのまま真似する前に
大きな見出しを日本語で使うと、改行次第で意味が切れます。スマホでの行数とCTAまでの距離を確認し、装飾用の人物やロゴは自前の素材に置き換えます。
次に見ておきたい参考
一覧へ →海外海外機能の多さを、ひとつの便益にまとめる
業務ソフト / ダーク
Raycast
余白の大きな宣言から、操作画面とOS別ダウンロードへつなげるデスクトップアプリの紹介。
設計の見どころ
最初は中央の短い大見出しと、ランチャーに道具を集めるという説明だけを置いています。多機能アプリでありながら、入口で全機能を見せ切ろうとしない。何が便利になるかを先に伝え、スクロール後の画面で補足する構成です。
詳しい解説を読む →公式サイトを見る ↗海外成果物を背景にして、目的を大きく伝える
業務ソフト / グラフィカル
Pitch
完成スライドを背景に、入力欄をヒーローへ組み込み、作り始める行動を早く見せる。
設計の見どころ
ヒーローには複数のスライド例が敷かれ、その上に非常に大きな見出しが重なります。何が作れるかを文章だけで説明せず、完成物の多様さを背景で示す構成。製品の操作画面より先に、利用者が得る成果物へ視線を向けています。
詳しい解説を読む →公式サイトを見る ↗