見れば分かる、を
設計しています。
VIBE MAKER の画面と資料には、決めごとがあります。色に意味を持たせること。角丸を使わないこと。見出しを20文字までにすること。どれも好みで選んだものではなく、読み手が迷わないために置いた制約です。ここでは、その決めごとと、そう決めた理由を公開します。
なぜ、決めごとを置くのか
私たちの読み手は、経営者、役員、管理職、士業の方々です。AIに詳しいとは限りません。画面や資料に向き合う時間も長くありません。だから、操作を覚えてもらうのではなく、見た瞬間に分かることを目指します。
そのために有効なのは、装飾を足すことではなく、迷いどころを減らすことでした。色が5種類あれば、読み手は「この色は何の意味だろう」と考えます。角丸と直角が混ざっていれば、「この2つは別の種類なのか」と考えます。考える回数が増えるほど、肝心の中身に使える集中力が減ります。
迷わせない
1つの画面で使う色は3つまで。主要な行動を示すボタンは1画面に1つだけ。選択肢が2つ並ぶと、どちらを押すべきか分からなくなります。
のっぺりさせない
制約は、平坦さの言い訳になりません。見出しの階層は文字の大きさと余白で必ず視覚化し、どこが幹でどこが枝かを目で追えるようにします。
数えられる状態にする
数値は等幅の書体で桁を揃えます。並んだ数字が縦に揃っていないと、比べるために読み直しが発生します。
色に、意味を持たせる
色は雰囲気づくりの道具ではなく、情報の種類を示す記号として扱います。使う色を絞るほど、1つ1つの色が意味を持ちます。
緑は使いません。「完了は緑」は世の中で広く使われている約束ごとですが、私たちはそれを採らず、良い状態を青で示します。理由は2つあります。1つは、赤と緑の組み合わせが、色の見え方に個人差のある方にとって最も区別しにくい対であること。もう1つは、緑を足すと1画面の色数が4色を超え、それぞれの色から意味が薄れてしまうことです。
赤は、面で塗らずに線と点で効かせます。細い区切り線、数値の強調、アクティブなタブ。広い面積を赤で塗ると、その画面のすべてが「注意」に見えてしまい、本当に見てほしい1点が沈みます。
形は直角。面ではなく、線で仕切る
角丸を使いません。影で面を持ち上げることもしません。区画は細い罫線で仕切ります。カードを「浮いた箱」ではなく「仕切られた区画」として扱うと、要素どうしの関係が並びだけで読み取れるようになり、視線が横滑りしなくなります。
直角
角を丸めると、要素は柔らかく、そして曖昧になります。私たちが扱うのは学習の記録と評価の基準なので、輪郭は曖昧にしません。
罫線
線の太さは図の中で必ず揃えます。太さが混ざると、意味の違いだと誤読されます。
余白
4pxを基準に、8pxの倍数で積みます。見出しの上は下の2倍空けます。余白は空白ではなく、階層を示す情報です。
連番と約物
アイコンの代わりに、等幅の連番（01・02…）と小さな英数ラベル、罫線を使って見分けます。絵文字は使いません。
地は、紙の色
背景に純白を使わず、わずかに温度のある紙の色を敷いています。純白の上に黒い文字を置くと、明暗の差が強すぎて、長い文章では目が疲れます。紙の色は、読み続けられる明るさの上限です。
その地の上に、白い面を置きます。白は「紙の上に置かれた1枚」を意味します。資料のスライドや配布物が白い面として浮かび、地と混ざらずに読める。この2段構えのために、地を白から外しました。
言葉も、デザインの一部
画面に出る文字は、すべて日本語で書きます。Dashboard も Loading も Error も出しません。読み手が英語を読めないからではなく、意味を受け取るまでの時間を1秒でも短くするためです。
見出しは20文字まで
体言止めを基本にします。長い見出しは、読まれずに飛ばされます。
1文に主語と述語を1組
接続詞でつないだ長い文は、途中で誰の話か分からなくなります。
煽らない
「今すぐ」「絶対」「必ず売れる」は使いません。読み手の判断を急かさないことが、信用の条件だと考えています。
裏の取れないことを書かない
実績、満足度、人数。確かめられない数字は、そもそも載せません。
エラーの文面にも型があります。「何が起きたか」を書き、次に「どうすればよいか」を書く。2文以内で、責めない。
- ご登録が確認できません。受講時にご登録いただいたメールアドレスでログインしてください。
- 認証に失敗しました（401 Unauthorized）
ロゴ
V と M を1つの字形に組んだマークです。2文字は独立して並ぶのではなく、斜めの線を共有して噛み合っています。輪郭の角には切り落としがあり、まっすぐな面と斜めの面が交互に現れます。
マークは無彩色です。ブランドカラーの赤を使っていません。私たちの画面では、赤は「注意」「未完了」という意味を持つ色として働いています。ロゴを赤にすると、その意味と混ざります。ロゴは状態を示す記号ではなく、名前です。だから色から降ろし、明るい面では黒、暗い面では白として置きます。
大きさにも上限を置きました。ロゴは主役ではありません。名乗りは短く済ませ、画面の面積は中身に譲ります。
- 縦横比を変えて、正方形の枠に押し込むこと
- マークだけを本文中のアイコンとして散らすこと
- 色を足すこと。グラデーションを掛けること
- 資料のスライドの上に重ねること
資料のデザイン
画面の決めごとは、そのまま資料にも適用します。私たちが目指すのは、経営会議に出せるフレームワークの精度と、雑誌の記事に添えられる図版の品格が、1枚の中で同居している状態です。どちらか一方では足りません。図解だけでは冷たく、絵だけでは中身が伝わりません。
図の主役は1つ
1枚に複数の主張を詰めません。比較なら比較、流れなら流れ。読み終わったときに残る言葉を1つに絞ります。
同じ見せ方を3枚続けない
流れ、比較、内訳、実例。型を変えて緩急をつけます。同じ形が続くと、読み手の集中は3枚目で切れます。
人物の顔を描かない
人は表情のない抽象的な影として描きます。顔を描くと、そこに視線が集まり、伝えたい構造が背景に落ちます。
絵は幾何学で構成する
面と余白で組み、輪郭線に頼りません。手描き風、立体、写真的な表現は使いません。
下は、実際に作った資料です。自社プロダクト「Vibe Coach」の紹介を、この決めごとだけで10枚に組みました。
掲載しているのは、実際に社内で作った資料です。内容は自社プロダクトの紹介であり、掲載にあたって作り変えていません。
ログインの前と後で、同じ世界
公開しているページと、受講生の方だけが入るポータルは、同じ地の色、同じ形、同じ言葉づかいで作っています。ログインした瞬間に見た目が変わると、別のサービスに来たように感じられ、それまでに積み上げた信用がいったん切れます。
違うのは密度だけです。公開ページは大きな文字で迫力を出し、ポータルは文字を抑えて行間を広げ、長く読める明るさにします。役割は違っても、語彙は1つです。
配色は明るい面を既定とし、暗い面にも切り替えられます。どちらのモードでも、本文と背景の明暗差が読みやすさの基準を満たしていることを、実測で確認しています。
まだ、決めていないこと
決めごとを公開する以上、決まっていないことも書きます。
- ロゴの印刷用データは、まだ用意していません。いまあるのは画面用のみです
- タグラインを添えた組み方と、色をつけた版は、検討中で採用していません
- 動きの規定（画面が切り替わるときの速さと軌道）は、最小限しか定めていません
このページに書いた決めごとは、実際の画面と資料に適用されているものだけです。理想として掲げたものは含めていません。更新があれば、このページを直します。