海外invoicemon
IT / イラスト
完成する請求書を先に見せる
IT / イラスト
invoicemon
風景画を背景に紙のカードと実際の請求書画面を重ね、ブラウザ内で使う道具を紹介する。
設計の見どころ
確認時は日本語の説明が表示され、冒頭でブラウザ内の請求業務という用途を示していた。特徴を短いカードで囲み、その下に請求書を作る画面が続く。一般的なサービス紹介を長く読ませる前に、どのような帳票を扱う道具かを視覚で把握させる順序である。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 海外 
国内
海外
DESIGN NOTES
このサイトの設計を読み解く。
文字を選ぶ作業に用途を絞る
冒頭はプロジェクトに合う文字の声を選ぶという用途を表し、フォントを探すカードと開始ボタンを置く。本文では比較、文字の確認、書き出しなどの機能へ進む。デザインの専門用語だけで紹介せず、選ぶ作業から実際に利用するまでの流れを説明している。
画面で優先される要素
淡い青紫の背景に白いカードを中央で重ね、その中に手描きの人物や文字の図を見せる。大きな見出しはカードの左右に分かれ、下部にフォントを表示するボタンがある。上部の小さなロゴと言語選択が余白の中に置かれ、文字を選ぶ道具らしい静かな画面である。
具体性を支える情報
公開本文には絞り込み、比較、字形やOpenTypeの確認、PDFやSVGへの出力、Figmaとの関係が記載される。別のフォント管理方法との比較表やFAQもある。機能を並べるだけでなく、既存の選び方から何が変わるかを検討できる情報を同じページで提供している。
行動への導線
中心のボタンは端末内のフォントを見る行動へつながる表示になっている。今回はローカルフォントへのアクセス許可は与えていない。ブラウザの対応やプライバシーに関するFAQがあるため、開始前に利用条件を理解したい人にも読む場所を用意している。
取り入れるときの考え方
専門作業を助ける無料ツールでは、作業の場面を短く示し、既存の方法との比較を置くと価値を伝えやすい。端末の情報へアクセスする道具は、何を読むか、どこへ送るか、対応する環境を開始前に説明したい。親しみのある画面と条件の透明性を両立させる構造だ。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
フォントを選ぶ作業に絞り、比較表とFAQで既存の方法との違いを示す。開始前に端末へのアクセス条件を読める形も参考になる。
そのまま真似する前に
ローカルフォントへの許可や比較機能は実行していない。導入時は対応ブラウザ、読み取り範囲、出力形式を自分の環境で確認する。
次に見ておきたい参考
一覧へ →海外国内Generative Agents
IT / タイポグラフィ
役割別の解説から実務サービスへつなぐ
IT / タイポグラフィ
Generative Agents
大きな社名の下に書籍、役割別の解説、研修や開発サービスをまとめる知識発信型の企業サイト。
設計の見どころ
冒頭でAIエージェントを扱う会社であることを示し、ニュース、出版物、対象者別のガイド、提供サービスへ進む。技術に詳しくない経営者から実装を考える担当者まで、同じ言葉を異なる深さで学べる入口を用意する情報の組み立てが特徴である。
詳しい解説を読む →公式サイトを見る ↗海外Tori by TalkJS
IT / グリッド
導入手順と人への引き継ぎを示す
IT / グリッド
Tori by TalkJS
青い設計図のような区画で、問い合わせ対応AIの導入手順と人への引き継ぎを説明する。
設計の見どころ
冒頭で問い合わせに答えるAIという用途を示し、何をする製品か、どの基盤で動くか、導入の手順へ進む。URLを接続し、内容を学ばせ、設置するという三段階を見せることで、抽象的なAIの能力よりも利用開始までの道筋を先に理解させている。
詳しい解説を読む →公式サイトを見る ↗