デザインの方向性（トンマナ）をAIと決める進め方｜言葉にしてから形にする
「なんとなく爽やかに」から抜け出し、サイトのトンマナ（デザインの方向性）を言葉で決める進め方を解説します。AIとの対話で印象語を整理する手順、プロンプト例、参考サイトの伝え方、判断用の整理表までまとめました。
サイトリニューアルの打ち合わせで「どんな雰囲気にしたいですか」と聞かれ、「信頼感があって、でも堅すぎない感じで」と答えた経験はないでしょうか。この答えは間違いではありませんが、制作者によって思い浮かべるデザインがまったく違うため、後から「イメージと違う」というやり直しが起きやすくなります。
デザインの方向性、いわゆるトンマナ（トーン＆マナー：色・書体・写真・言葉づかいなど、見た目と語り口の一貫したルール）は、言葉で具体的に決めておくほど、制作がスムーズに進みます。そしてこの「言葉にする」作業は、生成AIとの対話で効率よく進められます。
この記事では、AIを壁打ち相手にしてトンマナを決める手順と、参考サイトの見方、判断に使える整理表を紹介します。
トンマナが曖昧なまま進むと何が起きるか
トンマナを決めずにデザインに入ると、次のような問題が起きやすくなります。
- デザイン案が出るたびに「何か違う」と感じるが、理由を説明できない
- 社内の関係者がそれぞれ違うイメージを持っていて、意見がまとまらない
- トップページとサービスページで雰囲気がちぐはぐになる
- 公開後に追加するバナーや記事画像が、サイトの雰囲気から浮いてしまう
どれも、デザインの良し悪しではなく「判断の基準がない」ことが原因です。基準を先に言葉で決めておけば、デザイン案を見たときに「基準に合っているか」で評価できるようになります。
AIと対話してトンマナを言葉にする手順
AIは、ぼんやりした印象を言葉に分解したり、反対の選択肢を出したりするのが得意です。次の流れで進めると、1〜2時間ほどで方向性の叩き台がまとまります（目安）。
- 事業と読者を伝える：何を誰に提供している会社か、サイトを見る人はどんな気持ちで訪れるかを説明します。
- 印象語を広げる：「信頼感」「親しみやすさ」など、目指す印象に近い言葉を20個ほど出してもらいます。
- 3つに絞る：社内で話し合い、最も大事な印象語を3つ選びます。多すぎると焦点がぼやけます。
- 反対語も決める：「信頼感はあるが、古臭くはない」のように、避けたい印象を併記します。これが判断の精度を上げます。
- 要素に翻訳する：印象語を、色・書体・写真・余白・言葉づかいの方針に落とし込んでもらいます。
- 関係者で確認する：まとまった内容を社内の決裁者に見せ、違和感がないか確認します。
プロンプト例
- 「当社は地域の中小企業向けに会計サポートを提供しています。サイトの訪問者は、初めて外部の専門家に相談しようとしている経営者です。この人が安心して問い合わせできるサイトの印象を表す言葉を20個挙げ、似たもの同士でグループに分けてください。」
- 「選んだ印象語は『誠実』『明快』『身近』の3つです。それぞれについて、行き過ぎると逆効果になる印象（例：誠実が行き過ぎると地味）を挙げてください。」
- 「この3つの印象語を、配色・書体・写真の撮り方・余白の取り方・文章の語り口の5項目について、具体的な方針に翻訳してください。」
トンマナ整理表の例
AIとの対話でまとまった内容は、次のような表にしておくと、制作会社やデザイナーに伝えやすくなります。
| 項目 | 目指す方向 | 避けたい方向 |
|---|---|---|
| 全体の印象 | 誠実・明快・身近 | 堅苦しい・派手・軽すぎる |
| 配色 | 落ち着いた青系を基調に、温かみのある差し色を少量 | 原色の多用、黒一色の重い画面 |
| 書体 | 読みやすいゴシック体中心 | 装飾の強い書体、細すぎる文字 |
| 写真 | 実際のスタッフが自然な表情で働く様子 | 作り込みすぎた素材写真 |
| 余白 | ゆったり取り、情報を詰め込まない | 一画面に情報が密集する構成 |
| 文章の語り口 | です・ます調、専門用語は言い換える | 業界用語の多用、過度にくだけた表現 |
この表は1枚に収まる量にとどめるのがポイントです。詳細な数値（色コードや文字サイズ）は、後のブランドガイドラインやデザイン制作の段階で決めれば十分です。
整理表の使い方
整理表は作って終わりではなく、デザイン案を確認するときの「ものさし」として使います。例えば、デザイン案を見て違和感があったときに、表の項目を上から順に照らし合わせると、「写真が作り込みすぎていて『身近』から外れている」のように、違和感の理由を言葉で説明できるようになります。
また、表をAIに渡して「このデザイン案の説明文を読み、整理表の方針と食い違っている点を挙げてください」と頼めば、確認の抜け漏れを減らせます。ただし最終的な判断は、実際の画面を見たうえで人が行ってください。公開後にバナーや記事画像を追加するときも、この表を担当者に渡しておけば、雰囲気のずれを防ぎやすくなります。
参考サイトの集め方と伝え方
言葉だけでは伝わりにくい部分は、参考サイトで補います。ただし、参考サイトの伝え方には注意が必要です。
- 「どこが」良いかを書く：「このサイトが好き」ではなく、「写真の明るさ」「見出しの大きさ」「余白の取り方」など、具体的な部分を指定します。
- 業界外のサイトも見る：同業他社ばかり参考にすると、似たようなデザインになりがちです。
- 好きでない例も添える：「この雰囲気は避けたい」という例は、好きな例と同じくらい役に立ちます。
- 真似をお願いしない：参考サイトはあくまで方向性の共有のためです。構成や表現をそのまま写すことは避けます。
参考サイトのスクリーンショットをAIに見せて「この画面の印象を言葉で説明して」と頼むのも有効です。自分では言語化できなかった「良いと感じた理由」が見えてくることがあります。ただし、AIの説明が自社の感覚と合っているかは、必ず自分たちで確かめてください。
AIに頼りすぎないための注意点
AIが出すトンマナ案は、論理的で整っています。その反面、どの会社にも当てはまる平均的な内容になりやすい点に注意が必要です。
- AIの提案をそのまま採用せず、「自社らしいか」を社内で議論する
- 創業の経緯、社員の雰囲気、顧客から言われる言葉など、自社だけの材料を必ず入れる
- 決裁者が対話に参加しないまま決めない（後で覆りやすい）
- トンマナは制作会社と一緒に磨く前提で、完成形にこだわりすぎない
特に「顧客からよく言われる言葉」は強力な材料です。営業担当者や窓口担当者に聞いてみると、自社が外からどう見えているかのヒントが得られます。
まとめ
トンマナは、デザインの好みを決める作業ではなく、デザインを評価するための基準を決める作業です。AIを壁打ち相手にして印象語を広げ、3つに絞り、避けたい方向とセットで各要素に翻訳していけば、関係者の間でぶれにくい基準ができます。
次にやることとして、まずは社内の2〜3人で「自社のサイトを見た人に、どう感じてほしいか」を5分ずつ書き出してみてください。その内容をAIに渡して印象語を広げてもらえば、トンマナ整理表の最初の1枚が作れます。