UI参考ライブラリの見本帳
- 2026-11-08 に5サイトから集めた39件の型を、当社の色（生成り×墨×朱）で描き直した見本です。文章・図はすべて自作で、他社のコードや画像は使っていません
- 各見本の上の黒い札が型の番号です（L=レイアウト・N/F=ナビとフッター・C=CTA・T=文字と色・B=背景と動き・S=部品と状態）。説明の正は
S:\repos\design-system\docs\ui-references\ - 動く見本が4つあります（カードのホバー・スクロールで現れる・光だまり・WebGL）。パソコンの「視覚効果を減らす」設定を入れると全部止まります
1. ヒーロー（ページの最初の画面）
左が海外のLPで実際に見た形、右が同じ骨組みを当社のトーンに直した形です。骨組み（中央の2行見出し→説明→CTA2つ→証明）は同じで、地の色と光の強さだけが違います。
C-01：主CTA（塗り）は1つだけ、副CTA（枠線）を横に。スマホでは縦に積んで横幅いっぱいにします（押せる範囲は 44px 以上）。
2. 機能の並べ方
機能の説明に、その機能の「実物の小さな見本」を添えるのがこの型の要点です。文字だけの箱を並べるより、何ができるかが早く伝わります。
現場の言葉で画面を作る
「受付」「手配」「納品」など、お客様の呼び方をそのまま画面の名前にします。
進み具合がひと目で分かる
案件ごとの進み具合を、棒の長さで並べます。
帳票をそのまま印刷
請求書・納品書を A4 で。
スマホで入力
現場で、その場で。
保守の範囲が決まっている
何をして、何をしないか。
作ってきた画面たち。
予約・在庫・見積・日報。どれも、現場の紙から生まれました。
ここまでスクロールした時に、周りの画面がふわっと出てきたはずです（IntersectionObserver で画面に入った物から順に表示）。「視覚効果を減らす」設定では最初から全部見えています。
3. 一覧と絞り込み
実例集・資料置き場の形です。ヒーローは短くして、すぐに一覧を見せます。
N-03：選んでいる絞り込みは、当社の「面に塗らない」原則に合わせて「太い枠＋朱の文字」で示しています。外部のサイトは塗りつぶしが多い形です。S-03：無限スクロールにせず「もっと見る」にすると、下のフッター（問い合わせ先）にたどり着けます。
4. 業務画面（紺のトーン biz で描いています）
海外の業務画面の見本14枚に共通していた並び（指標4つ→大きなグラフ→円の進み具合→最近の動きの表）です。当社の mock-core と同じ骨組みで、新しく足すものはありません。動く背景は入れません。
月ごとの見積件数
今月の目標まで
最近の動き
| 物件 | 内容 | 状態 |
|---|---|---|
| A邸 改修 | 見積を送りました | 返事あり |
| B社 倉庫 | 現場の写真を追加 | 確認待ち |
| C店 内装 | 請求書を作成 | 下書き |
正常
| A邸 改修 | 返事あり |
| B社 倉庫 | 確認待ち |
空（まだ1件も無い）
読み込み中
失敗
通信が切れた可能性があります。少し待ってから、もう一度お試しください。
5. 料金とCTA（行動をうながす所）
海外のCTAの「急がせる」書き方は、日本では景品表示法に触れることがあります。期限・割引・人数は本当の時だけ使います。金額はすべて伏せ字の見本です。
作ったあとも、困った時に頼れる
- 不具合の修正
- 月1回の動作確認の報告
- 問い合わせへの返事は24時間以内
保守プランの範囲（見本）
- ✓不具合の修正
- ✓文言や色などの小さな変更
- ✓月1回の動作確認と報告
- ✓使い方の質問への回答
- ✕新しい機能の追加（別にお見積りします）
何をしてもらえますか
上の表の ✓ の4つです。月に1回、何をしたかを報告します。
こちらで用意するものはありますか
不具合が起きた時の画面の写真をいただけると、早く直せます。
直してもらうまで、どれくらいかかりますか
連絡をいただいてから24時間以内に、まず返事をします。
途中でやめられますか
契約書に書いてある条件でやめられます。
今すぐ購入
6. 文字と色の方向性
新しいトーンを考える時の引き出しです。当社の色の決まり（tokens）を置き換えるものではありません。
温かい生成りの地。
少し黄みの白を地にして、鮮やかな色は1色だけ少し。影を使わず細い線で区切り、主ボタンは黒。当社の appro トーンと同じ方向です。
資料を受け取る暗い地に、鮮やかな1色。
開発者向け・AI系のLPに多い形。暗い地の灰色の小さな文字は、文字と地の明るさの差が足りないことが多いので、必ず測ります（4.5:1）。
無料で試す角を落とさない。線の太さで格を出す。
硬さ・精密さを出したい製造業や士業のサイト向け。当社にはまだ無いトーンで、使うなら実案件でお客様の目を通してから足します。
製品の一覧見積を、三日から一時間に。
見積を、三日から一時間に。
英語のサイトは最後の1語だけ斜体のセリフ体にします。日本語に斜体は合わないので、1語だけ明朝（上）か朱（下）に読み替えます。1ページに1か所だけ。
読みものとしての、美しさ。
明朝の大見出しと、たっぷりの余白。読ませたいページ・案内ページ・提案書の表紙向けです。当社の編集トーン（青全交のしおりで実証）と同じ方向です。
| 役割 | 当社の変数 | 値（appro） |
|---|---|---|
| 土台の地 | --bg | #f6f4ef |
| 中身の面 | --panel | #fffdf9 |
| 読む文字 | --text／--muted | #26231e ／ #7d766c |
| 操作（ボタン・強調） | --acc | #d14e28 |
| 選択中 | まだ無い | 今は案件ごとに「太い枠＋朱の文字」で代用 |
| 段落の最大幅 | まだ無い | このページでは 46em（1行およそ46文字） |
7. 背景と動き
使うのは LP・告知・動画の背景・提案の表紙までで、業務画面には入れません。自動で5秒より長く動き続けるものには、止めるボタンを付けます（WCAG 2.2.2）。
文字を2周分並べ、半分の長さだけ左へ流してから最初に戻すと、切れ目なく流れ続けて見えます。
- 画面いっぱいに描画用の領域（canvas）を1枚敷き、画面の色を GPU に計算させます
- 色の計算式（シェーダー）は「場所」と「時刻」を受け取って、点ごとの色を返します。時刻を進めると色が流れます
- スクロールの位置も計算式に渡しています。スクロールすると模様がずれるのがスクロール連動の正体です
- 画面の外に出たら計算を止めます（IntersectionObserver）。別のタブを見ている間も止まります
- 高精細の画面でも計算の細かさは2倍までにします。それ以上は見た目が変わらず重くなるだけです
- 「視覚効果を減らす」設定の人には、動かさず1枚の絵で止めて見せます
（HyperFrames で自作できる）