海外文字を選ぶ作業に用途を絞る
IT / イラスト
fromT
文字を選ぶ仕事をカードとイラストで見せ、ローカルフォントの比較や出力方法を説明する。
設計の見どころ
冒頭はプロジェクトに合う文字の声を選ぶという用途を表し、フォントを探すカードと開始ボタンを置く。本文では比較、文字の確認、書き出しなどの機能へ進む。デザインの専門用語だけで紹介せず、選ぶ作業から実際に利用するまでの流れを説明している。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
国内
海外
DESIGN NOTES
このサイトの設計を読み解く。
完成する請求書を先に見せる
確認時は日本語の説明が表示され、冒頭でブラウザ内の請求業務という用途を示していた。特徴を短いカードで囲み、その下に請求書を作る画面が続く。一般的なサービス紹介を長く読ませる前に、どのような帳票を扱う道具かを視覚で把握させる順序である。
画面で優先される要素
谷の風景を描いた絵の上に白い縦長のカードを中央配置し、その周囲へ傾いた機能カードを貼り付けたように並べる。黒い開始ボタンが紙面の中で目立ち、下部にはデスクトップの窓に似た請求書画面が見える。仕事の道具を親しみのある紙の表現で包んでいる。
具体性を支える情報
本文ではローカル保存、印刷を使うPDF出力、通貨設定、バックアップなどの具体的な機能を説明する。クラウドを使う追加機能とは区別があり、創業者の文章も載る。長く使う業務道具で気になる保存先や継続性を、機能紹介の中で扱っている点が参考になる。
行動への導線
冒頭の開始ボタンから利用の入口へ進める一方、ページ内に実際の道具に近い画面が見えるため、使う前に形式を確かめやすい。今回は請求書の作成や保存は行っていない。説明と操作画面の距離を近くすることで、サービスの用途を具体的に伝える構成である。
取り入れるときの考え方
業務テンプレートや簡単なツールを紹介する場合は、完成する帳票や画面を先に見せる方法を応用できる。保存場所、データの持ち出し方法、有料になる範囲は近くに明示したい。便利さの説明に加え、仕事の情報を預ける際に必要な判断材料を揃える設計が重要だ。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
完成する帳票の姿と保存方法を同じページで示す。小さな業務ツールほど、始めやすさとデータを扱う条件を合わせて伝えたい。
そのまま真似する前に
ブラウザ内保存やPDF出力の実動作は試していない。端末変更時の復元方法と、日本の請求書に必要な項目への対応を別途確認する。
次に見ておきたい参考
一覧へ →海外国内Generative Agents
IT / タイポグラフィ
役割別の解説から実務サービスへつなぐ
IT / タイポグラフィ
Generative Agents
大きな社名の下に書籍、役割別の解説、研修や開発サービスをまとめる知識発信型の企業サイト。
設計の見どころ
冒頭でAIエージェントを扱う会社であることを示し、ニュース、出版物、対象者別のガイド、提供サービスへ進む。技術に詳しくない経営者から実装を考える担当者まで、同じ言葉を異なる深さで学べる入口を用意する情報の組み立てが特徴である。
詳しい解説を読む →公式サイトを見る ↗海外Tori by TalkJS
IT / グリッド
導入手順と人への引き継ぎを示す
IT / グリッド
Tori by TalkJS
青い設計図のような区画で、問い合わせ対応AIの導入手順と人への引き継ぎを説明する。
設計の見どころ
冒頭で問い合わせに答えるAIという用途を示し、何をする製品か、どの基盤で動くか、導入の手順へ進む。URLを接続し、内容を学ばせ、設置するという三段階を見せることで、抽象的なAIの能力よりも利用開始までの道筋を先に理解させている。
詳しい解説を読む →公式サイトを見る ↗