FROM WORDS, DESIGN BEGINS

言葉から始めるデザイン個人事業主のための、方向決めとお客様対話の教科書

センスは要らない。要るのは、言葉である ── お客様の事業を聞き、方向を決め、なぜこうしたかを説明し、「なんか違う」をほどく。さらに、その言語化の力をそのままAI活用に転用する。デザイン初心者の個人事業主が、ウェブ制作の現場で言葉を武器にするための十一章

読了目安 57 MIN
構成 11 CHAPTERS
想定読者 SOLO WEB MAKERS
scroll
PROLOGUE

「なんとなく」のデザインから抜ける

デザインの不安は、たいてい「言葉にならない」ところから来る。言葉にできれば、決められる。決められれば、説明できる

個人事業としてウェブサイト制作を請けるとき、最も心臓が痛む瞬間がある。お客様が画面の向こうで、まだ何もない白い紙を前に「どんな感じにします?」と聞いてくる瞬間だ。あるいは、初稿を出したあとに「うーん、なんか違うんですよね」と言われる瞬間だ。

このとき、自分の中で何が起きているかを正直に振り返るとこうなる。頭の中に何かはあるのに、それを言葉にできない。だから提案にできない。だからお客様にも届かない。届かないから、自分が何を作るべきかも定まらない。

多くの初心者は、これを「センスがないから」と片付ける。そして本屋でセンスの本を買い、Pinterestを延々眺める。しかし、それで救われた人をあまり見たことがない。なぜか。

本書の出発点

プロのデザイナーが初心者と決定的に違うのは、絵を描く力ではない。「いま自分はなぜこの線を引いているのか」を言葉で説明できる力だ。言葉で説明できれば、お客様にも届く。届けば合意になる。合意があれば、迷わずに引ける。デザインの実務は、絵の力ではなく言葉の力に支えられている。

本書は、デザインを「才能の話」から「言語化の話」へ引きずり下ろすための教科書だ。お客様にどう聞くか。聞いた話からどう方向を決めるか。決めた方向をどう共有するか。出した案にどうフィードバックをもらうか。自分の判断をどう支えるか。揉めないスコープをどう書くか。すべて、言葉の問題として扱う。

センスを否定したいわけではない。センスは存在する。しかしセンスは、言葉の積み重ねの先に育つものであって、最初に持っているべきものではない。順番が逆である。本書はその順番を正す。

章立ては実務の順に並べた。ヒアリング、参照集め、方向決定、コンセプト共有、レビュー対応、自分の判断、契約、そして習慣。一冊を通読すれば、白い紙の前で何をどう問えばよいかが、輪郭を持つようになる。

CHAPTER ONE

デザインは才能ではなく、言語化の積み重ね
── 初心者がまず外すべき「センス信仰」

デザイナーは絵を描いているのではなく、判断を積み重ねている。判断の一つ一つには理由があり、理由は言葉で書ける

デザイナーが画面に向かって作業しているとき、何をしているか。外から見ると「色を選んでいる」「フォントを選んでいる」「配置を動かしている」ように見える。しかし内側で起きているのはもう少し複雑だ。無数の選択肢から一つを選んでいる、その選択の連続が作業の正体だ。

I. 思想デザインは「選択の連続」である

ウェブサイトを1ページ作るのに、デザイナーは数百回の選択をする。「見出しは何ポイントか」「行間はいくつか」「ボタンは角丸か直角か」「写真は左か右か」「余白は広めか詰め気味か」── 一つずつ選んでいる。プロのデザイナーが速く見えるのは、選択にかかる時間が短いからだ。短い理由は、選択の基準が言葉になっているからだ。

初心者が遅いのは、選択の基準がまだ言葉になっていないからだ。なんとなく見比べて、なんとなく選ぶ。だから時間がかかるし、選んだあとに不安になる。不安だから提案にも自信が持てない。お客様も不安になる。負の連鎖が始まる。

プロの内側で起きていること

プロのデザイナーは、頭の中で常にこう自問している ── 「いま自分はなぜこの選択をしようとしているのか」。理由が浮かべばその選択は通す。理由が浮かばなければ、選び直す。この自問のループの速さと精度が、デザイナーの実力の中身だ。絵心の問題ではない。

I. 思想「センスがない」は、たいてい「語彙がない」

「自分にはセンスがない」という言葉を分解すると、そこには三つの別々の問題が混ざっている。

  • ① 観察の語彙がない ── 良いデザインを見ても、何が良いかを言葉で取り出せない。だから自分の引き出しに入らない。
  • ② 判断の語彙がない ── 自分の案を見ても、何が良くて何が悪いかを言葉で診断できない。だから直しようがない。
  • ③ 説明の語彙がない ── 出した案について、なぜこうしたかをお客様に伝えられない。だから合意が取れない。

この三つはすべて、絵の力ではなく言葉の力の問題だ。そして言葉の力は、訓練で確実に伸びる。先天的な才能ではない。本書の各章は、この三つの語彙を別々に育てるための章として配置されている。

II. 実務言語化のミニ訓練 ── 一日一サイト

毎日一つ、ウェブサイトを開いて、三分だけ言葉にする。これだけで観察の語彙は確実に増える。

  • 第一印象を一語 ── 「清潔感」「重厚」「親しみやすい」「無機質」など、最初に浮かんだ形容詞を一つ書く
  • その印象を作っている要素を三つ ── 「余白が広い」「色数が少ない」「写真が大きい」など、視覚的な要素として書き出す
  • 真似したい点と真似したくない点 ── 自分の仕事に取り入れたいか、避けたいかを判断する

三分で終わる。継続が要点だ。一年続ければ、365枚の「見たデザインの解剖メモ」が手元にできる。これがあなたの語彙集になる。

章のまとめ

  • デザインは絵の才能ではなく、選択の連続。選択を支えるのは言葉である。
  • 「センスがない」は、たいてい観察・判断・説明の語彙が足りないだけ。三つは別々に鍛えられる。
  • 一日三分、一サイトを言葉で解剖する訓練を続ける。一年で365枚の語彙集が育つ。
CHAPTER TWO

ヒアリングの設計
── 「どんな感じにします?」が機能しない理由

良いデザインは、良い質問から始まる。お客様にどう聞くかが、その後のすべての方向を決める

初心者が最初の打ち合わせでやりがちなのは、こんな質問だ。「どんな感じにしますか?」「色はどうしましょう?」「参考にしているサイトはありますか?」。これらの質問は、すべてお客様の頭の中にすでにビジュアルがあることを前提にしている。しかしほとんどのお客様の頭の中に、ビジュアルはまだない。

あるのは、もっと手前のものだ。事業への思い。届けたい相手。困っていること。やりたいこと。これらを引き出すのがヒアリングの仕事であり、ビジュアルの話はずっと後に来る。

I. 思想ヒアリングは「事業を語ってもらう場」

ウェブサイトはビジネスの道具だ。だから、お客様のビジネスを理解しないとサイトは設計できない。当たり前のことだが、初心者ほどここを飛ばす。なぜなら、ビジネスの話は怖いからだ。専門用語が分からない。失礼な質問をしそう。経営判断に踏み込んでしまいそう。だから安全な「色は何がいいですか」に逃げる。

しかし、お客様は自分の事業について話したい生き物だ。何年もかけて育ててきた事業のことを、丁寧に聞いてくれる相手はそう多くない。質問を間違えなければ、お客様はむしろ饒舌になる。そしてその語りの中に、ウェブサイトを設計するための材料がすべて含まれている。

ヒアリングの目的

ヒアリングは「お客様の要望を聞き出すこと」ではない。「お客様の事業と顧客を、自分が言葉にできるレベルまで理解すること」だ。要望は、その理解の上にしか正しく置けない。要望を先に聞いてしまうと、その要望が事業に合っているかどうかを判断できない。

II. 実務ヒアリングシートの五領域

初回のヒアリングは、次の五領域を順番に聞く。事業から始めて、ビジュアルで終わる。逆順にしない。

  • ① 事業 ── 何を売っているか、誰が買っているか、いつから何年やっているか、強みは何か、競合は誰か、最近うまくいっていることと困っていること
  • ② 顧客 ── 想定するお客様は誰か(年代・性別・地域・職業・家族構成)、どんな状況で来店・問い合わせするか、何に困って・何を期待して来るか
  • ③ サイトの目的 ── このサイトで何を起こしたいか(問い合わせ・予約・採用・信頼形成・販売)、優先順位は、成功の判断基準は
  • ④ トーン ── 自社をどんな会社・お店として見せたいか、避けたい印象は何か、競合とどう違って見せたいか
  • ⑤ 参考 ── 好きなサイト・嫌いなサイト・気になっているお店や雑誌(理由付きで)

①②に最も時間をかける。理想は全体時間の半分。③で目的を定め、④⑤でビジュアルの方向のヒントを集める。多くの初心者が④⑤から始めて事業の理解が浅いまま提案に入る、これが後の「なんか違う」の最大の原因だ。

II. 実務機能する質問・しない質問

同じことを聞くにも、聞き方で得られる情報が変わる。

  • ×「どんな印象にしたいですか?」 → ○「お客様がこのサイトを開いた瞬間、最初の三秒でどう感じてほしいですか?」
  • ×「ターゲットは誰ですか?」 → ○「直近で一番嬉しかったお客様はどんな方ですか? その方と似た人をもう一人増やしたい、というイメージで合っていますか?」
  • ×「他にどんなページが要りますか?」 → ○「サイトを見たお客様が、最終的に何をしてくれたら成功と言えますか? その行動を起こすために、何を知る必要がありますか?」
  • ×「予算と納期は?」 → ○「いつまでに何を達成したいかを伺ったうえで、その達成のために必要なスコープと費用感をすり合わせさせてください」

左の質問は「答えてください」と言っている。右の質問は「一緒に考えましょう」と言っている。お客様の言葉を引き出すのは、いつも右の聞き方だ。

章のまとめ

  • 「どんな感じにしますか」はお客様にビジュアルがあることを前提にした質問。手前から聞く。
  • ヒアリングは事業→顧客→目的→トーン→参考の順で。事業と顧客に半分の時間を使う。
  • 聞き方の工夫で得られる情報の質が変わる。「答えてください」ではなく「一緒に考えましょう」の問い方を持つ。
  • 「分かりません」は失敗ではなく発見。一緒に言葉にしていく対象になる。
CHAPTER THREE

参照と競合 ── 比較で言葉を引き出す
── ムードボードは「絵を集める」ではない

人は何もない場所からは言葉を出せない。並んだものを見て、初めて「これが好き」「これは違う」と言える

ヒアリングで事業と顧客の理解が進んでも、ビジュアルの方向はまだ霞んでいる。ここで参照と競合の収集に入る。目的は二つある。① お客様自身の好み・嫌いを言葉として引き出すこと。② 業界の暗黙のルールと、差別化の余地を把握すること。

I. 思想なぜ参照を見せると言葉が出るか

「どんなトーンがいいですか?」と空中で聞かれても答えられない人が、「この三つのサイトのうち、どれが一番近いですか?」と聞かれると即答できる。これは比較の威力だ。人間の脳は、絶対値を出すのは苦手だが、相対比較は得意にできている。

だから、ヒアリングの後半か二回目の打ち合わせで、参照サイトをこちらで集めて持っていく。お客様に「探してきてください」と宿題に出すのは半分しか正解ではない。なぜなら、お客様は自分の業界しか知らないことが多く、また「お手本にしたい」という気持ちが先立って、似たような無難なものばかり集めてくる。制作者側の選書眼が、ここで効いてくる。

参照集めの三方向

参照は三方向から集める。① 同業界の競合(暗黙のルールを知るため)② 異業界だが似たトーンの優良事例(差別化の選択肢を広げるため)③ あえて反対のテイスト(嫌いの方向を確定させるため)。この三方向を並べることで、お客様は自分の位置を相対的に決められる。一方向しか見せないと、議論が偏る。

II. 実務ムードボードの作り方

ムードボードは、参照画像を一枚にまとめた視覚的な参考集だ。サイトのスクリーンショットだけでなく、色・写真・素材感・タイポグラフィの参考もまとめる。

  • サイズ感 ── 8〜12枚程度。これ以上だと印象がバラける。これ以下だと比較材料が足りない
  • 分類 ── サイト3〜4枚・写真や素材感3〜4枚・色見本2〜3枚・タイポグラフィ1〜2枚
  • 並べ方 ── 似ているもの同士を近くに置き、対比したいものは離す。視線の流れを意識する
  • キーワードを添える ── 各画像の脇に「清潔感」「手仕事」「都会的」など、その画像が体現する言葉を一語添える

Figma、Miro、Pinterest、PowerPoint、何でもいい。ツールではなく、並べて見られる状態を作ることが肝心だ。

II. 実務「好き/嫌い」を言語化する三つの問い

参照を見せたら、お客様に三つの問いを順番に投げる。これで好みが言葉として定着する。

  • ① 「この中で、自社のお客様に最初に見せたいのはどれですか?」 ── 直感的な選好を引き出す。理由はまだ問わない。
  • ② 「逆に、絶対これは違う、というのはどれですか?」 ── 嫌いの方向を確定させる。これが進行中の判断ミスを防ぐ最大の安全網になる。
  • ③ 「選んだ理由を、一語ずつ挙げるとしたら何ですか?」 ── 「上品」「親しみやすい」「信頼感」── 一語の形容詞を集める。これがそのままコンセプトの素材になる。

II. 実務競合調査の最低限

同業界の競合サイトを5〜10件、機械的に巡る。記録するのは次の三項目だけでよい。

  • ファーストビュー ── 写真主体か文字主体か、どんな印象か、何を最初に伝えているか
  • カラー ── メインカラー・アクセントカラーは何系統か(暖色/寒色/モノトーン)
  • 言葉づかい ── ですます体か敬体か、専門用語の量、感情的か理性的か

この三項目を一覧表にすると、業界の「暗黙のルール」が浮かび上がる。同業他社が全員白背景に黒文字なら、それを踏襲するか、あえて外して差別化するかの選択肢が見える。何も知らずに作ると、無意識に踏襲してしまい、差別化の機会を逃す。

章のまとめ

  • 参照は制作者側が集めて並べる。比較がお客様の言葉を引き出す。
  • 三方向(同業界・異業界・反対テイスト)を揃えると、議論が偏らない。
  • 「最初に見せたいのは」「絶対これは違うのは」「選んだ理由を一語で」の三問で好みを言語化する。
  • 競合調査は最低限三項目で十分。お作法を知ったうえで踏襲・差別化を選ぶ。
CHAPTER FOUR

方向性を決める三つの軸
── 業種・ターゲット・ブランドの交差点

方向性は感覚で決めるものではない。三本の軸の交点として、論理的に絞り込んでいくものだ

ヒアリングと参照集めが終わると、材料が机の上に並ぶ。事業の情報、顧客の像、目的、好きな参照、嫌いな参照、競合の傾向。ここから「方向性」を一つに絞らないと、デザインに入れない。多くの初心者がこの段階で固まる。材料はあるのに、まとめ方が分からない。

方向性は、三本の軸の交差点として絞る。① 業種・文脈の軸、② ターゲットの軸、③ ブランドの軸。それぞれが許容する範囲を出し、三つすべてが重なる領域に方向を置く。一つの軸だけで決めると、必ずどこかで矛盾が出る。

I. 思想業種・文脈の軸 ── 業界の重力

業種ごとに、視覚言語の「重力」がある。法律事務所は信頼感が必要だ。コーヒー屋は温度のある写真が要る。テック企業はモダンさが期待される。これらは正解ではなく、業界が長年積み上げてきた期待値だ。

この重力を完全に無視すると、お客様の顧客が違和感を持つ。法律事務所のサイトが極端にカジュアルだと、依頼する側は「ここで大丈夫か」と不安になる。重力に従いつつ、その中でどう差別化するかを考えるのが、業種の軸の使い方だ。

I. 思想ターゲットの軸 ── 顧客の感情と語彙

誰に見せるかで、許容できるトーンが変わる。同じ「整体院」でも、20代女性が顧客なら明るく親しみやすく、60代男性が顧客なら落ち着いて信頼感あるトーンに寄せる。これも正解ではなく、ターゲットの感情と語彙に合わせる、という基本姿勢だ。

ヒアリングで聞いた「直近で一番嬉しかったお客様」を、視覚的にイメージする。その人がスマホを開いた瞬間、何を感じれば「ここに頼みたい」と思うか。その感情を逆算してデザインの方向に翻訳する。

I. 思想ブランドの軸 ── 差別化と一貫性

業種とターゲットだけで決めると、結果として競合と似たサイトになる。なぜなら、同じ業種で同じターゲットを狙えば、答えは収束するからだ。ここに第三の軸 ── ブランドの軸 ── を入れる。

ブランドの軸とは、「自分たちは競合とどう違うか」を視覚的に表現することだ。ヒアリングで引き出した強み・こだわり・哲学。それを業種の重力の中で、どう少しだけ外すか。全部外すと業界違反、何も外さないと無個性。「業界のルールの中で、どこを少しだけ破るか」の選択が、ブランドの軸の中身だ。

三軸の交差で方向が定まる

方向性は「業種が許容するゾーン」と「ターゲットが反応するゾーン」と「ブランドが主張したいゾーン」の三つの円が重なる部分として描く。一つの円だけ大きくしないこと。業種を無視すれば違和感、ターゲットを無視すれば届かない、ブランドを無視すれば没個性。三つが揃った狭い領域に、方向は確定する。

II. 実務三軸を一枚に落とす ── 方向性シート

三軸の検討を、A4一枚のシートにまとめる。これが社内資料であると同時に、お客様への提示資料の原型になる。

  • 業種の軸 ── 「業界の標準: 〇〇 / 外せる範囲: 〇〇 / 外したい度合い: 弱・中・強」
  • ターゲットの軸 ── 「想定顧客: 〇〇 / その人が反応するトーン: 形容詞3つ / 避けたいトーン: 形容詞2つ」
  • ブランドの軸 ── 「自社の強み: 〇〇 / 競合との違い: 〇〇 / 主張したい一言: 〇〇」
  • 三軸の交差点 ── 「結果として向かう方向: 形容詞3つ + 一文の説明」

このシートをお客様と一緒に埋めると、方向性が「制作者の独断」ではなく「お客様との合意の結果」になる。後で揉めるリスクが激減する。

II. 実務例 ── 整体院のサイトで三軸を回す

具体例。40代女性開業の整体院、ターゲットは30〜50代の働く女性、強みは「無理に通わせない、症状を聞き切る丁寧さ」、競合は近隣の整体院5軒。

  • 業種の軸 ── 整体院は清潔感と専門性が標準。骨格イラストや施術写真は鉄板。外せる範囲: 写真の色温度、文字主体の構成は試せる
  • ターゲットの軸 ── 働く女性は時間がない。スマホで5分で「ここに行ってみよう」と判断できる構成。トーンは「落ち着き・温かさ・信頼」、避けたいのは「医療っぽさの圧」
  • ブランドの軸 ── 強みは「聞き切る丁寧さ」。これを視覚化する → 院長の写真(目線あり)、初回カウンセリングの時間と価格を明示、お客様の声を実名で複数
  • 交差点 ── 「働く女性が、五分で安心して予約できる、丁寧な町の整体院」 → 写真主体・温かい色味・余白広め・院長の顔と声が見える構成

この方向まで言葉で絞ると、もはやデザインの選択肢はかなり狭い。フォントは丸めの明朝かやや太めのゴシック、色は生成り+深い緑か茶系、写真は自然光、ボタンは大きめ ── と、ほぼ自動的に決まっていく。これが「方向性が決まる」ということの意味だ。

章のまとめ

  • 方向性は業種・ターゲット・ブランドの三軸の交差点として絞る。一軸だけで決めない。
  • 業種には重力があり、無視すれば違和感、従いすぎれば没個性。ブランドの軸で少しだけ外す。
  • 三軸を一枚のシートに落とすと、お客様との合意の素材になる。
  • 方向が言葉として定まれば、ビジュアルの選択肢は自動的に狭まっていく。
CHAPTER FIVE

ビジュアル言語の語彙を持つ
── 形容詞を、視覚要素に翻訳する

「清潔感」「高級感」「親しみやすさ」── これらの形容詞が、具体的に色・形・余白の何によって生まれるかを言葉で持っているか

方向性が「働く女性に、五分で安心して予約できる、丁寧な整体院」と定まった。さて、これをどう色とフォントと余白に翻訳するか。この翻訳の作業こそが、デザイナーの本業の中心にある。

翻訳がうまくできるかは、形容詞と視覚要素の対応表が頭の中にどれだけあるかに依存する。「清潔感」と聞いて、即座に「白の比率高め・余白広め・サンセリフ・写真の青み・無彩色寄り」と分解できる人と、なんとなく白いものを置くだけの人とでは、結果が全く違う。

I. 思想形容詞は分解できる

「高級感」という形容詞をそのまま使っても、デザインは出てこない。一段ブレイクダウンが必要になる。

  • 高級感 = 余白が広い + 色数が少ない + 黒/濃紺/深緑/金 + セリフ体 + 写真は陰影が強く落ち着いた光 + 動きが少ない + 文字組みが整っている
  • 親しみやすさ = 角丸が多い + 暖色系 + 手書き風要素 + 写真は人が笑顔 + 文章がカジュアル + アイコンが丸い
  • 清潔感 = 白の比率が高い + 余白が広い + サンセリフ + 写真は自然光で青みあり + 線が細い + 装飾が少ない
  • 信頼感 = 左右対称に近い構成 + 文字組みが整っている + 紺/グレー/濃色 + データや実績が並ぶ + 写真は人物の正面 + 過度な装飾がない
  • 温かみ = オレンジ/ベージュ/茶系 + 写真は黄色寄りの色温度 + 木や布の質感 + 手書き的な要素 + 余白に余裕

これは固定の正解ではない。あなたが自分のデザイン経験の中で更新していく、自分専用の対応表だ。本章のリストはあくまで起点。観察を積むほど、語彙は精緻になっていく。

五つのレバー

どんな印象も、結局は「色・タイポグラフィ・余白・写真と素材・形(角度や曲線)」の五つのレバーの組み合わせで決まる。形容詞を出されたら、この五つのレバーを順にどう倒すかを言葉で書き出す。これが翻訳の手順だ。「なんとなく作る」のではなく「五つを順に決める」。

II. 実務色 ── 三色ルールから始める

色は、ベースカラー1・メインカラー1・アクセントカラー1の三色から始めるのが最も失敗が少ない。グレースケールは別途。

  • ベースカラー ── 背景に使う色。白・生成り・薄いグレー・薄い色など。画面の70%程度
  • メインカラー ── ブランドの中心になる色。見出しやキーアイテムに使う。25%程度
  • アクセントカラー ── ボタンや強調に使う色。最も目立たせたい場所だけに使う。5%程度

色の比率(70/25/5)を意識すると、画面の重心が安定する。アクセントは「使いどころが少ない」ほど効く。全部アクセントだとどこも目立たない、という基本則。

II. 実務タイポグラフィ ── 二書体までで揃える

初心者がやりがちな失敗は、書体を増やしすぎることだ。和文一・欧文一の二書体で全画面を作れる、を基本姿勢にする。

  • 明朝体 ── 高級感・知性・伝統。長文の本文向き。和食・伝統工芸・士業・教育に合う
  • ゴシック体 ── 親しみ・モダン・清潔。短文と大見出し向き。テック・小売・カジュアル業態に合う
  • 欧文サンセリフ ── 数字や英文ラベルに。Inter・Helvetica・Plus Jakarta Sans など。和文と組み合わせやすい
  • 欧文セリフ ── 上品さや格を出したい時に。Cormorant・Playfair・Adobe Garamond など

サイズと太さでメリハリは作れる。書体の種類を増やさなくていい。むしろ二書体で押し通すほど、画面の品位が上がる。

II. 実務余白 ── 「広め」を恐れない

初心者ほど画面を埋めたがる。空いている場所が不安だからだ。しかし余白は装飾ではなく、要素を引き立てる積極的な道具だ。余白の量が、ブランドの落ち着きと自信を表現する。

セクション間の余白は、想像している量の1.5倍を目安に取る。要素の周りには、その要素の高さの30〜50%の呼吸を持たせる。ボタンの内側パディングは、想像より一段大きく。これだけで画面の印象が引き締まる。

章のまとめ

  • 形容詞は分解できる。「高級感=余白広め+色数少なめ+セリフ+...」と、五つのレバーで言葉に降ろす。
  • 色は三色(70/25/5)から。タイポは二書体まで。これだけで品位が上がる。
  • 余白は装飾ではなく道具。広めを恐れない。詰めるほど読まれなくなる。
  • 視覚要素の語彙は、観察と実作の積み重ねで自分のものになっていく。
CHAPTER SIX

デザインコンセプトをお客様と共有する
── 言葉のデザインを、絵より先に出す

いきなりカンプを見せると揉める。間に「言葉のデザイン」という合意のレイヤーを入れる

方向性が定まり、ビジュアルの語彙も揃った。さあカンプを作ろう、と急いではいけない。カンプ(具体的なデザイン案)を見せる前に、もう一段挟むレイヤーがある ── デザインコンセプトの提示だ。これが、初心者と中級者の最大の分かれ目になる。

なぜ間に挟むのか。理由は単純で、カンプはお客様にとって反応しやすすぎるからだ。具体的なビジュアルを見せると、お客様は瞬時に「赤いボタンが嫌」「写真が冷たい」と細部に反応する。すると本来合意すべき「方向」の話が、いきなり「細部」の話にすり替わる。一度すり替わると、方向の議論には戻れない。

I. 思想合意は「抽象」から「具体」へ階段で取る

お客様との合意形成には、踏むべき階段がある。階段を飛ばすと、たいてい後で踏み外す。

  • 第一段 ── 目的の合意: このサイトで何を達成したいか
  • 第二段 ── 顧客像の合意: 誰に届けるか
  • 第三段 ── 方向性(形容詞)の合意: どんなトーンか
  • 第四段 ── コンセプトの合意: 形容詞を一行に統合した提案
  • 第五段 ── ビジュアル要素の合意: 色・フォント・写真の方向
  • 第六段 ── レイアウト/カンプの合意: 具体的なデザイン

多くの初心者は第一段から第六段まで一気に飛ぶ。お客様にとっては、第六段だけ突然見せられた状態。だから細部にしか反応できないし、根本的なやり直しが何度も起こる。

「言葉のデザイン」が先行する

カンプを見せる前に、言葉と参照画像だけで構成されたコンセプトシートを提示し、合意を取る。「このサイトは『落ち着いた温かみのある町の整体院』として、生成り+深い緑を基調に、自然光の写真と余白広めのレイアウトで、五分で予約まで辿り着ける構成にします」── この一文に頷きをもらってからカンプに入ると、後の修正が劇的に減る。

II. 実務コンセプトシートの中身

1〜2ページのドキュメント(PDFやスライド)。次の七要素で構成する。

  • ① タイトル ── サイトを一言で表す呼び名(社内的なもの)
  • ② コンセプト文 ── 「このサイトは、〇〇な〇〇である」の一文
  • ③ ターゲット像 ── 想定するお客様を2〜3行で描写
  • ④ キーワード ── 方向を表す形容詞を3つ(例: 「落ち着き・温かさ・信頼」)
  • ⑤ ムードボード ── 参照画像6〜8枚を1ページに
  • ⑥ カラー方向 ── 候補カラーを2〜3パターン、色見本で
  • ⑦ タイポ方向 ── 候補書体を1〜2パターン、見出しの実例で

ここでまだカンプは出さない。出すのはあくまで「言葉と素材」だ。お客様が反応すべきは「方向」であって「ボタンの色」ではない、と空気を作る。

II. 実務提示の場の運び方

コンセプトシートを送るだけではダメだ。お客様は読まずに「いい感じです」と返してくる場合が多い。後で「やっぱり違う」になる。必ず対面(オンライン含む)で、こちらが画面共有して読み合わせる。

  • ① コンセプト文を音読する ── 「『落ち着いた温かみのある町の整体院』── これで合っていますか?」
  • ② キーワードに一つずつ反応をもらう ── 「『落ち着き』はピンときますか?『温かさ』は強すぎませんか?」
  • ③ ムードボードに一枚ずつ反応をもらう ── 「これは合っていますか?これは外したほうがよさそうですか?」
  • ④ カラー候補を見比べてもらう ── 「A案とB案で、よりお客様に近いのはどちらですか?」
  • ⑤ 結論を一文に書き戻す ── 「では、A案のカラーで、ムードボードからこの3枚を残した方向で進めますね」と確認する

最後に必ず議事録にして送る。「合意した方向」を文章で残す。これが後の防壁になる。

章のまとめ

  • カンプを見せる前に「言葉のデザイン」(コンセプトシート)で合意を取る。階段を飛ばさない。
  • コンセプトシートは七要素(タイトル・コンセプト文・ターゲット・キーワード・ムードボード・カラー・タイポ)で構成。
  • 送るだけでは合意にならない。読み合わせを通して、お客様の言葉で反応を引き出す。
  • 議事録は「証拠」ではなく「贈り物」として送る。後の揉めを防ぐ最大の道具。
CHAPTER SEVEN

「なんか違う」をほどく
── フィードバックの言語化の作法

お客様の「なんか違う」を、そのまま受け取ってはいけない。問い返しで言葉にしてもらう

初稿のカンプを提示した。お客様の口から出てくる言葉は、たいていこのどれかだ。「うーん、なんか違うんですよね」「もうちょっと、こう…」「言葉にできないんですけど…」。この言葉を「修正リクエスト」として受け取ってしまうと、終わりがない迷路に入る。なぜなら、何を直せばよいかが定まっていないからだ。

I. 思想「なんか違う」の正体

「なんか違う」は、お客様が嘘をついているわけではない。本当に何かが違うと感じている。しかしその「違う」が、デザインの何のせいなのかを、お客様自身が分解できていない。これは才能の問題ではなく、語彙の問題だ。第1章で見た「観察の語彙」が、お客様にもないだけだ。

だから制作者の仕事は、「直す」前に「ほどく」ことだ。お客様が「なんか違う」と感じている対象を、色のせいか、フォントのせいか、写真のせいか、構成のせいか、それともそもそも方向のせいか、を一緒に切り分けていく。

「なんか違う」を分解する五領域

「違和感」は通常、次の五領域のどこかから来ている。① 方向そのもの(コンセプトのずれ)、② 色(温度・彩度・コントラスト)、③ 文字(書体・サイズ・字間)、④ 写真や素材(雰囲気・人物の表情・光)、⑤ 構成(情報の順番・余白・要素の重み)。順に「これは合っていますか?」と問い返すと、たいていどれか一つに収束する。

II. 実務問い返しテンプレート五つ

「なんか違う」を聞いたら、次のいずれかを返す。沈黙して引き受けない。

  • ① 方向の確認 ── 「コンセプトシートで合意した『落ち着いた温かみのある町の整体院』という方向自体は、まだ合っていますか? それとも方向から見直したい感じですか?」
  • ② 比較で炙り出す ── 「最初に出した参照のうち、A案とB案ではどちらに近いほうが今のお気持ちですか?」
  • ③ 要素を順に当てる ── 「色・文字・写真・構成、どれが一番引っかかっていますか? 一つ選ぶとしたら?」
  • ④ 感情を聞く ── 「最初に開いたとき、どんな気持ちになりましたか? 期待していた気持ちとどう違いましたか?」
  • ⑤ 想定顧客の目線に戻す ── 「お客様(=エンドユーザー)がこれを見たとき、どう感じてほしかったかと比べて、足りないのはどんな感覚ですか?」

五つすべて、「お客様に答えを出してもらう」のではなく「お客様と一緒に絞っていく」姿勢で投げる。詰問にならないよう、トーンは柔らかく。「もう少しだけ言葉にできると、的確に直せるので一緒に考えさせてください」と前置きする。

II. 実務二案以上を出す理由

カンプを出すとき、可能なら最初から二案出す。理由は次のとおり。

  • ① 比較で言葉が出る ── 一案だけだと「いいです」「違います」しか出てこない。二案あれば「Aのこの部分とBのこの部分が好き」が出る
  • ② 制作者の判断軸を見せられる ── 「同じコンセプトでも、こう振るとこう、こう振るとこう」と幅を示せる
  • ③ 議論が「直す/直さない」から「選ぶ」に変わる ── 否定ではなく選択の場になり、関係が前向きになる

ただし、三案以上は出さない。多すぎると判断疲れで「どれもピンとこない」になる。二案、多くて三案、これが運用上の最適解だ。両案ともそのまま採用してもこちらが恥ずかしくないクオリティで作る。「捨て案」を作らない。捨て案を見抜かれた瞬間、信頼を失う。

II. 実務「全部直してください」への返し方

稀に、お客様が「全部やり直しでお願いします」と言ってくることがある。ここで素直に全部やり直すと、契約上の修正回数を圧迫し、利益が吹き飛ぶ。同時に方向がさらに迷走する。

このときの返し方はこうだ。「承知しました。ただ、全面的にやり直す前に、合意していたコンセプトに立ち返らせてください。当初は『〇〇な〇〇』という方向で合意しましたが、その方向自体を見直しますか? もし見直すなら、もう一度コンセプトシートから組み直す形になりますので、別途〇〇のお時間と費用感を相談させてください。方向はそのままで細部だけ大幅に直したい場合は、五領域(色・文字・写真・構成・全体感)のどこをどう直したいか、もう少し具体に伺えればすぐに対応できます。どちらでいきますか?」

このように選択肢を出すと、「全部やり直し」のほとんどは「実は方向はそのままで、写真を全部明るくしたい」程度の話に収束する。お客様自身も「全部」という言葉に逃げていただけで、本当に全部とは思っていない。

章のまとめ

  • 「なんか違う」は語彙の問題。お客様と一緒に分解する。
  • 違和感の五領域(方向・色・文字・写真・構成)を順に問い返して絞り込む。
  • カンプは二案出す。比較が言葉を引き出し、議論が「選ぶ」に変わる。
  • 「全部やり直し」は選択肢を出して具体に降ろす。たいていは細部の話に収束する。
  • 内容の前に感情を受け止める。不安が解けると、フィードバックも建設的になる。
CHAPTER EIGHT

自分の判断を言葉で支える
── 説明できない判断は、変更してよい判断

提案の場でお客様に「なぜこうしたんですか?」と聞かれたとき、答えに詰まる ── その時点で、その判断は弱い

お客様への対話だけが言語化の対象ではない。自分が自分のデザインに対して行う対話 ── 自己説明 ── こそ、最も重要な言語化の場だ。これが弱いと、お客様の前で簡単に揺らぐ。揺らぐと信頼を失う。信頼を失うと、修正の地獄に入る。

I. 思想判断には「言える理由」と「言えない理由」がある

デザインの判断には、二種類の理由が混ざっている。

  • 言える理由 ── コンセプトから演繹できる根拠。「コンセプトが『落ち着き』なので、彩度を抑えました」のように説明できるもの
  • 言えない理由 ── 経験則・好み・なんとなく良い感じ。プロには大事な直感だが、お客様には伝わらないもの

提案の場でお客様に問われるのは「言える理由」だ。すべての主要な判断に「言える理由」を一つは持たせる。これが提案を支える。「言えない理由」しかない判断は、お客様に問われた瞬間に揺らぐ。だから、自分でレビューする段階で「言える理由」を後付けでもいいから言語化する。後付けでも、自分で納得できれば判断は強くなる。

説明できない判断は、変更してよい判断

逆に言えば、自分でその判断の理由を言葉にできないなら、その判断はお客様の修正リクエストに従って変更してもよい。守る価値のある判断とは、自分の言葉で守れる判断のことだ。「なんとなくこっちのほうが好き」しかない判断は、お客様の希望に合わせて変える。それで困らない。プロの矜持はそこにはない。

II. 実務セルフレビューの三問

カンプを提示する前に、自分で自分のデザインを点検する。次の三問を、すべての主要要素に投げる。

  • ① コンセプトに紐付くか ── 「この要素は、合意したコンセプトの何を体現しているか?」を一文で言えるか
  • ② 代替案より優れているか ── 「これではない選択(別の色・別の配置)に比べて、なぜこちらが良いか」を一文で言えるか
  • ③ お客様の目で見て不安にならないか ── 「お客様が初めて見たとき、不安や違和感を持たないか? 持つとしたらどこか?」

三問のうち一つでも答えに詰まる要素は、要修正だ。修正できない場合は、せめてその要素の説明を準備しておく。提案の場で問われたら、その準備した説明を出す。準備さえあれば、答えに詰まる事故は起きない。

II. 実務提案資料に「設計意図」を一行添える

カンプ画像を見せるとき、各セクションに一行のキャプションを添える。これがお客様の理解を圧倒的に助ける。

  • ファーストビュー ── 「想定顧客が3秒で『丁寧な町の整体院』と感じる構成にしています。院長の顔を中心に置き、施術風景は外しました」
  • サービス紹介 ── 「症状別ではなく『初めての方へ』を上に置きました。新規予約を主目的とするためです」
  • お客様の声 ── 「実名と年代を出すことで、信頼の重みを上げています。匿名も可能ですが、効果は半減します」

キャプションがあると、お客様は「なぜこうなっているか」を読み取ったうえで反応できる。読み取らずに反応すると「なんか違う」になる。読み取ったうえでの「違う」は、具体的な議論につながる。

II. 実務議論の場で言うべき言葉、言うべきでない言葉

提案の場での言葉遣い一つで、議論の質が変わる。次の置き換えを習慣にする。

  • ×「個人的にはこうしたほうがいいと思います」 → ○「合意したコンセプトから考えると、こちらの方向が適していると判断しました」
  • ×「センスとしてこれが良いです」 → ○「目的が問い合わせ増だとすると、ボタンの色はこの位置にこの強さで置くのが効果的だと思います」
  • ×「他の方もこうしてます」 → ○「業界の標準はこうですが、御社の差別化ポイントを考えるとここを少し外す選択もあります。どちらが良いか相談させてください」
  • ×「お任せします」 → ○「私から見るとA案を推しますが、最終判断はお任せします。理由は…」(推しと理由を必ずセットで)

「個人的に」「センスとして」「お任せします」── これらの言葉は、自分の判断を放棄する逃げ言葉だ。一度使うと、その後のすべての判断の重みが軽くなる。自分の判断は、いつもコンセプトとお客様の目的に紐付けて語る。これだけで、初心者から一段抜ける。

章のまとめ

  • 判断には「言える理由」と「言えない理由」がある。主要な判断にはすべて「言える理由」を持たせる。
  • 説明できない判断は変更してよい判断。プロの矜持はそこにはない。
  • セルフレビューの三問で、提案前に自分のデザインを点検する。
  • 提案資料には「設計意図」を一行添える。なぜがあると反応の質が変わる。
  • 「個人的に」「センスとして」「お任せします」を捨てる。コンセプトと目的に紐付けて語る。
CHAPTER NINE

揉めないための契約・スコープ
── 言葉で線を引いておく

デザインの揉め事のほとんどは、デザインの良し悪しではなく、「どこまでがこの仕事か」の曖昧さから生まれる

個人事業でウェブ制作をしていて、最も体力を奪うのは、長引く修正対応や追加要望のグダグダだ。これらの多くは、デザインの問題ではない。契約段階での言葉の不足が、後で姿を現しているだけだ。最初に言葉で線を引いておけば、ほとんどは起こらない。

I. 思想契約は「敵対」ではなく「合意の保存」

初心者の個人事業主が契約書を曖昧にする理由は、たいてい二つある。「契約書を細かく書くと冷たい印象を与えてお客様に嫌われる」と「自分自身が法律用語に弱くて作るのが面倒」だ。どちらも気持ちは分かる。しかし、契約の曖昧さが招く揉め事のほうが、よほど関係を悪くする。

契約は敵対の道具ではない。「今日合意したことを、半年後の自分たち二人のために書き留めておく」道具だ。書面があれば、お客様と制作者の両方が、後で同じ場所に戻ってこられる。記憶は揺れるが、文章は揺れない。

「制作範囲」を言葉で囲う

契約書のうち、最も重要な一節は「何を含み、何を含まないか」の明示だ。これが曖昧だと、すべてのフェーズで「これも入っていますよね?」「いえ、入っていません」の摩擦が発生する。料金よりも納期よりも、この一節に時間を使う価値がある。

II. 実務スコープに必ず書くべき六項目

個人事業のウェブ制作で、契約書または見積書に必ず明記しておくべき項目を六つ挙げる。

  • ① ページ数と構成 ── トップ + 〇〇ページ + 下層ページのテンプレート〇種。これより増える場合は別途見積
  • ② デザイン提案の回数 ── 「コンセプト提示1回 + カンプ提示2回まで」など。これ以上の方向転換は別途
  • ③ 修正回数 ── 「カンプ確定後、各ページあたり修正2回まで」。3回目以降は時間単価
  • ④ 素材の責任 ── 写真・原稿・ロゴはどちらが用意するか、撮影費用や有料素材費はどちらが負担するか
  • ⑤ 公開後の対応範囲 ── 公開後〇日間は軽微な調整(typo・リンク切れ等)を無償対応、それ以降は別途保守契約
  • ⑥ 著作権・運用権の帰属 ── 制作物の著作権は誰のものか、ソースファイルは渡すか、運用に必要なログイン情報の管理は誰か

これらは「冷たい契約」ではなく「お互いを守る合意」だ。お客様に提示するときは「お互いに後で困らないように、最初に範囲を明確にさせてください」とトーンで伝える。多くのお客様はむしろ安心する。曖昧なほうが不安なのだ。

II. 実務「追加要望」が来たときの対応

スコープを言葉で囲っていても、お客様から「ついでにこれもお願いできませんか?」は必ず来る。これにどう答えるかが、関係と利益を両立させる肝になる。

  • 断らない、即諾しない、まず分解する ── 「ありがとうございます。少し作業量と影響を整理させてください」
  • スコープ内か外かを判定する ── 「これは当初の〇〇に含まれるので追加なしで対応します」 / 「これは当初の範囲外になるので、別途〇〇でお願いできますか?」
  • 金額・納期・影響を一緒に提示 ── 「対応する場合、〇〇円・〇〇日延びる・他のページの作業が〇〇に影響します」と三点セットで
  • 選択肢を残す ── 「対応する/しない/今回は見送って後日まとめて」の三択を渡す

大事なのは、追加要望を「お客様の悪意」と感じないこと。お客様は単に思いついただけで、追加だと認識していない場合がほとんどだ。分解して見せてあげれば、お客様自身が「あ、それは別件ですね」と引き下がる。悪意のない要望に対して、悪意のない線引きをする。これが揉めない秘訣だ。

II. 実務言質を集める ── メールと議事録の作法

口頭で合意したことは、必ずその日のうちにテキストで戻す。「本日打ち合わせありがとうございました。合意した内容を以下にまとめます」と書く。書く内容は次の四項目で十分。

  • ① 合意した方向・内容 ── 「方向性は『〇〇』で確定」「カラーはA案で進行」
  • ② 残課題と担当 ── 「ロゴデータの送付: お客様側」「カンプ初稿提出: 制作側 / 〇月〇日」
  • ③ 次回の予定 ── 「次回打ち合わせ: 〇月〇日 〇時 / オンライン」
  • ④ 異論あれば返信を依頼 ── 「内容に相違があれば〇日までにお知らせください。なければこの内容で進めます」

これを毎回送る。お客様にとって「読み返せる記録」になり、制作者にとって「言質の集積」になる。半年後の揉め事が、ほぼ起きなくなる。

章のまとめ

  • 契約は敵対の道具ではなく、半年後の自分たちのための合意の保存。
  • スコープに六項目(ページ数・提案回数・修正回数・素材責任・公開後対応・著作権)を必ず明記する。
  • 追加要望は分解して三点セット(金額・納期・影響)で返す。三択を渡せばお客様が判断する。
  • 口頭合意は当日中にテキストで戻す。議事録は揉めない関係の最大の道具。
  • 料金は「時間」ではなく「価値」で語る。言葉で囲う技術はここにも効く。
CHAPTER TEN

言葉で考える範囲を広げる習慣
── 一冊の語彙帳を、毎日少しずつ厚くする

言語化の力は、一度の決意ではなく、日々の小さな観察と振り返りの積み重ねで育つ。三年後の自分のための積立だ

本書の中身は、一度読んで明日から全部できるものではない。お客様との対話の場で、コンセプトの言語化で、フィードバックのほぐしで、揉めない契約の書き方で ── どこも言葉の精度がものを言う。その精度は、日々の習慣で育つ。最終章は、その習慣の処方箋にあてる。

I. 思想言葉で考えられる範囲が、デザインできる範囲

第1章で「センスは結果である」と書いた。同じことを言葉の側から言うと、こうなる ── 言葉で扱える概念の範囲が、そのままデザインで扱える範囲になる。「上品」と「上質」の違いを言葉で区別できなければ、デザインでも区別して表現できない。「親しみやすい」と「カジュアル」の違いを言葉で持っていなければ、お客様の要望を取り違える。

だから、語彙を厚くすることは、デザイン力を厚くすることと同じだ。語彙集を作るのは、絵を描く練習と同じくらい大事な訓練になる。むしろ初心者にとっては、こちらの訓練のほうが効果が早く出る。

三つの習慣

日々続ける習慣を三つだけ。多すぎても続かない。① 観察日記 ── 一日一つ、見たデザインを言葉で記録する。② 案件日誌 ── 案件のたびに、判断と結果を言葉で振り返る。③ 語彙整理 ── 月に一度、集まった言葉を整理して自分の語彙帳に追加する。三つで合計、一日10分・月に1時間で済む。これだけで一年後には別人になっている。

II. 実務習慣① 観察日記 ── 一日一サイト

第1章で触れたものを、もう少し具体化する。スマホのメモアプリでもNotionでもよい。フォーマットは固定する。

  • 日付・URL
  • 第一印象: 形容詞一語
  • その印象を作っている要素: 三つ(色・タイポ・余白・写真・構成のどれか)
  • 自分の案件に取り入れたい点: ある場合のみ
  • 違和感・避けたい点: ある場合のみ

三分で終わる。継続のコツは「完璧に書かない」こと。短く、不完全でいい。継続が頻度を上回ることを覚えておく。

II. 実務習慣② 案件日誌 ── 案件のたびの振り返り

納品して請求が終わったら、その案件について次の四項目を書き留める。

  • ① ヒアリングで効いた質問・効かなかった質問 ── 次回に向けて改善ポイントを言葉で残す
  • ② コンセプト合意で詰まった点・スムーズだった点 ── 合意プロセスの自分なりの定石を育てる
  • ③ 「なんか違う」が出た箇所と、それをどう解いたか ── 自分のフィードバックほぐし辞典を作る
  • ④ スコープ外で対応してしまった項目 ── 次回の契約書改善のヒント

この案件日誌が10件貯まると、自分なりの仕事の定石ができてくる。20件貯まると、初心者を抜ける。30件貯まると、人に教えられる。蓄積がそのまま実力になる仕事だ。

II. 実務習慣③ 語彙帳 ── 月に一度の整理

月末に一時間、観察日記と案件日誌から出てきた形容詞を抜き出す。意味の近いもの・離れているものをグルーピングして、自分の語彙帳に整理する。

  • 「清潔感」の周辺: 清潔・清楚・無垢・無菌・透明・潔白 → 微差を言葉にしておく
  • 「温かい」の周辺: 温かい・優しい・柔らかい・包み込む・親しみのある → どれをいつ使うか
  • 「高級」の周辺: 高級・上品・上質・洗練・格式・重厚 → ターゲットによって使い分け

これを続けると、お客様のヒアリングで出てきた一語の形容詞に対して、「それは『〇〇』の方向ですか、『〇〇』の方向ですか?」と微差を問い返せるようになる。微差を問えるデザイナーは、微差を作れるデザイナーである。

II. 実務スワイプファイル ── 視覚の引き出し

言葉だけでなく、視覚の引き出しも育てる。気に入ったデザイン・写真・配色を保存しておく場所を作る。これをスワイプファイルと呼ぶ(古い広告コピーライターの用語)。

Pinterest、Figma、Eagle、フォルダ管理、何でもよい。重要なのは保存することではなく、保存時に必ず「何が良いと思って保存したか」を一語添えること。後から見返したとき、自分の好みのパターンが浮かび上がる。お客様への提案時の参照源にもなる。

章のまとめ

  • 言葉で扱える概念の範囲が、デザインで扱える範囲。語彙を厚くすることが力を厚くする。
  • 三つの習慣で十分: ①観察日記(日次) ②案件日誌(案件ごと) ③語彙帳(月次)。
  • 案件日誌は20件で初心者を抜け、30件で人に教えられる。蓄積がそのまま実力になる。
  • 微差を言葉で持つと、微差を作れるデザイナーになる。
  • 真似は卒業ではなく入口。模写の中で語彙が育つ。
CHAPTER ELEVEN

AIと組むワークフロー
── 言語化の力を、そのままAI活用に転用する

AIは「いい感じのデザインを作ってくれる魔法」ではない。言葉で説明できる人にこそ、AIは大量の補助を返してくる

本書はここまで、デザインを「言葉」の話として扱ってきた。最終章でAIの話をするのは、それが単なる便利ツールの話ではないからだ。本書のここまでで育てる「言語化の力」と、AI活用の力は同じ筋肉である。言葉で考えられる人ほどAIから引き出せる量が増え、そのAIの出力が次の案件の言語化をさらに深める。AIは言語化の代替ではなく増幅器だ。

I. 思想「いい感じに作って」では、いい感じは返ってこない

AIに「整体院のいい感じのサイトを作って」と頼んでも、平均的で量産的なものしか返ってこない。これはAIが弱いからではない。こちらが渡した言葉が、平均的だからだ。本書の第1〜10章で身につけた「事業を聞き取る言葉」「方向を絞り込む言葉」「視覚要素に翻訳する言葉」── すべてがそのままAIへのプロンプトの精度を決める。

逆に言えば、AIは初心者の弱点を一段持ち上げてくれる。一人で考えていると詰まる場面 ── ヒアリングの質問が思いつかない、コンセプト文が一文にまとまらない、契約書の言い回しが思い浮かばない ── で壁打ちの相手になってくれる。ただし、判断の責任は渡せない。「AIがこう言ったので」という説明は、第8章で見たとおりお客様の前で揺らぐ。AIは下書きを量産する道具であって、判断する人ではない。

AIが効く三つの作用

個人事業のウェブ制作でAIが効くのは、主に三つの作用に集約できる。① 壁打ち ── 一人で詰まったとき、別の視点を返してくれる。② 下書きの大量生成 ── ゼロから書くより、出てきたものを直すほうが速い。③ 視覚化の高速化 ── ムードや方向を画像で複数案、数分で出せる。これらすべての効きは、こちらの言葉の精度に比例する。

II. 実務ヒアリング前 ── 業界とペルソナの予習

初回打ち合わせの前に、AIで業界の前提知識を仕入れる。「専門用語が分からなくて怖い」を解消するための準備運動だ。

  • 業界の予習 ── 「〇〇業界(整体院/会計事務所/美容室など)の中小規模事業者の典型的な顧客層・差別化軸・最近の業界動向を、初心者でも理解できる粒度で整理してください」
  • ペルソナ仮説 ── 「〇〇業界で、地方都市の小規模事業者の典型的なお客様像を3パターン挙げてください。年代・職業・来店動機・期待・不安を各パターンで」
  • 聞くべきポイント ── 「私はウェブ制作者で、〇〇業界のお客様の初回ヒアリングをします。事業理解のために最低限聞くべき質問を10個、優先順位付きで提案してください」

ここで返ってきた情報を鵜呑みにしない。あくまで仮説として持って打ち合わせに臨み、お客様の実際の言葉と突き合わせる。ズレた箇所こそ、そのお客様の固有性が現れる場所であり、デザインの差別化のヒントになる。

II. 実務ヒアリング直後 ── 議事録から事業要約とコンセプト草案

ヒアリングのメモ(殴り書きで構わない)をAIに渡し、構造化させる。これが最も時間を節約する用途だ。

  • 議事録の構造化 ── 「以下はウェブ制作のヒアリングメモです。これを①事業概要 ②想定顧客 ③サイトの目的 ④トーンの希望 ⑤参考・避けたい例の五領域で構造化してください。メモにない領域は『未確認』と明記してください」
  • 事業要約 ── 「上記の情報をもとに、お客様の事業を100字以内で要約してください。お客様自身に確認してもらう用です」
  • コンセプト草案を三案 ── 「この事業のウェブサイトのコンセプト文を、『〇〇な〇〇である』の形で三案、方向を変えて出してください。各案にキーワード3つを添えて」

コンセプト三案は、そのまま使わない。「自分が考えていなかった方向」を見つけるための鏡として使う。三案を眺めると、自分が無意識に絞っていた選択肢が浮かび上がる。第4章の「三軸」を埋める材料として、AIの提案を素材化する。

II. 実務方向性の三軸 ── 壁打ち相手としてのAI

第4章の方向性シート(業種・ターゲット・ブランドの三軸)を埋めるとき、AIを壁打ち相手にする。一人で詰まる場面が一番減る用途だ。

  • 業界の重力を確認 ── 「〇〇業界のウェブサイトに共通する視覚的な傾向(色・写真・トーン)を、観察事項として挙げてください。どこを外すと違和感、どこは外せそうかも添えて」
  • ターゲット感情の翻訳 ── 「想定顧客は〇〇です。この人がサイトを開いた瞬間に感じるべき感情を3つ、その感情を作るための視覚要素(色・タイポ・余白・写真)を各感情ごとに分解してください」
  • 差別化の選択肢 ── 「業界標準は〇〇です。この事業の強みは〇〇です。標準のうちどこを少しだけ外すと差別化と違和感のバランスが取れるか、3パターン提案してください」

AIの答えは「正解」ではなく「選択肢」として扱う。出てきた選択肢を、お客様との合意プロセスに持ち込めば、議論の出発点が立ち上がる。第3章で見た「比較で言葉を引き出す」が、AIによって加速する。

II. 実務ビジュアル探索 ── 画像生成AIで方向を見る

Midjourney、Nano Banana、Stable Diffusion 系、ChatGPT の画像生成 ── どれでもよい。コンセプトの段階でムードボード用の参考画像を、AIで生成する。Pinterest探索の代替にも、補完にもなる。

  • ムード画像の生成 ── 「a website hero image for a small chiropractic clinic, warm natural light, soft beige and forest green palette, calm and reassuring, minimal text overlay, photographed style, professional but approachable」のように、英語で形容詞を並べて指示する
  • 方向違いを並べる ── 同じ事業を「温かく親しみやすく」と「上品で信頼感あり」の二方向で各3枚ずつ生成。お客様の選好を炙り出す材料に
  • カラーパレットの探索 ── 「ベージュとフォレストグリーンを基調にした、整体院のブランドカラーパレット5パターン、各5色のスウォッチで」
  • レイアウト構造案 ── 「ヒーロー・サービス・院長紹介・お客様の声・予約導線、を縦に並べるシングルページのワイヤーフレーム概要を、文章で説明してください」

注意点が二つある。① 生成画像はそのまま本番に使わない。権利・人物の同一性・現実性に不確実さが残る。あくまで方向確認用の参照として扱う。② お客様には「これは方向確認用のイメージです」と明示する。これを本番だと誤解されると、後の合意がずれる。

II. 実務コンセプトシート作成 ── 文章の推敲・キャプション生成

第6章のコンセプトシートを作るとき、AIを文章の下書き・推敲に使う。お客様に届く言葉の精度が上がる。

  • コンセプト文の磨き ── 「次のコンセプト文を、お客様(整体院院長・40代女性・非IT)に届く言葉に推敲してください。専門用語を避け、感情に届くトーンで。3案出してください」
  • キャプション一行 ── 「次のカンプ説明を、お客様向けに『なぜこうしたか』が伝わる一行のキャプションに直してください: 〇〇」
  • 議事録の整形 ── 「以下の打ち合わせメモを、お客様に送る議事録の形式(合意内容/残課題と担当/次回予定)に整えてください」

AIに書いてもらった文章は、必ず自分の声で読み直して直す。AIの文章はそのままだと、どこか平均的で記名性が薄い。「自分ならこう言うかな」を一カ所ずつ手で入れる。これだけで、お客様にとっての温度がはっきり戻る。

II. 実務「なんか違う」の分解 ── お客様のコメントをAIで整理

第7章の「なんか違う」をほどく作業で、お客様から複数のフィードバックが断片的に来たとき、AIで整理させる。

  • 領域分類 ── 「次のお客様コメントを、①方向(コンセプトのずれ) ②色 ③タイポ ④写真や素材 ⑤構成 の五領域に分類してください。複数領域にまたがる場合は、主な領域に置いて、副次的な領域も注記してください」
  • 優先順位付け ── 「上記のコメントのうち、コンセプトの根幹に関わる重大なものと、細部の好みの問題を分けてください」
  • 問い返しの草案 ── 「次のお客様コメント『なんか違うんですよね』に対して、第7章で挙げた問い返し五テンプレートをこのお客様の状況に合わせて具体化してください」

整理が済めば、自分が次に打つべき手が見える。全部を直す前に、何を直すべきかが整う。これは一人作業の最大のボトルネックを解く。

II. 実務契約・スコープ ── ドラフトの高速化

第9章の契約・スコープの言語化も、AIで下書きできる。法的有効性は別途確認が要るが、ゼロから書く負担が劇的に減る。

  • 見積書のスコープ言語 ── 「個人事業のウェブ制作で、整体院サイト(トップ+5ページ)の見積書に書く『制作範囲・含まれるもの・含まれないもの』のドラフトを作ってください。後で揉めない粒度で」
  • 追加要望の返信文 ── 「お客様から『ついでにブログ機能もつけてほしい』と要望が来ました。第9章の三点セット(金額・納期・影響)と三択(対応/見送り/後日)で返す文章を、丁寧かつ毅然としたトーンで書いてください」
  • 議事録テンプレ ── 「ウェブ制作の打ち合わせ議事録の標準テンプレート(合意内容/残課題と担当/次回予定/異論あれば〇日まで)を作ってください。これを各案件で使い回します」

出てきた契約文言は、必ず一度自分で目を通し、自分の事業のスタイルに直す。AIは「平均的な契約書」を出してくる。あなたの事業の個性 ── 例えば「初回相談無料」「修正は実費でなく回数」など ── は自分で書き足す必要がある。

II. 実務振り返り ── 案件日誌と語彙抽出

第10章の習慣にもAIを組み込む。案件のたびに振り返りメモをAIに食わせ、自分一人では言葉にしきれない学びを抽出する。

  • 案件日誌の抽出 ── 「次のメモは私のウェブ制作案件の振り返りです。①次に効きそうな質問 ②合意プロセスで詰まった原因 ③お客様の『なんか違う』の発生源 ④契約・スコープの改善点、の四項目に整理してください」
  • 語彙の抽出 ── 「次の一ヶ月分の観察日記から、登場頻度の高い形容詞と、類似グループを抽出してください。グループごとに微差(意味の違い)を一文で説明してください」
  • 自分なりの定石化 ── 「過去5件の案件日誌から、私のヒアリングの傾向(よく聞く質問・聞き忘れがちな質問)を整理してください」

蓄積をAIで定期的に整理することで、自分一人では見えない自分のパターンが浮かび上がる。これが個人事業の最大の弱点 ── レビュアーがいないこと ── を補う。

AIに渡せないもの

本章で挙げた用途のすべてに共通する原則は、「AIには下書きと整理を任せ、判断と関係性は人間が持つ」こと。お客様との対話の場には、AIは出さない。お客様の事業への共感、初期のヒアリングでの傾聴、提案の場での説明、フィードバックを受け取る瞬間 ── これらは人間にしかできないし、これこそが個人事業の競争力の中核だ。AIは舞台裏で動き、舞台にはあなたが立つ。

章のまとめ

  • AIは言語化の代替ではなく増幅器。本書の言葉の力が、そのままAIから引き出せる量を決める。
  • 三つの作用 ── 壁打ち・下書きの大量生成・視覚化の高速化 ── を工程ごとに使い分ける。
  • ヒアリング前(業界予習)、直後(議事録構造化・コンセプト草案)、方向決め(三軸壁打ち)、ビジュアル探索(画像生成)、コンセプト文磨き、フィードバック分解、契約ドラフト、案件振り返り ── すべてにAIの居場所がある。
  • 判断・対話・関係性は人間が持つ。AIは舞台裏、あなたは舞台に立つ。
  • AIに出させたあと必ず自分の手で書き直す。これがAIを使いながら自分の言葉も育てるための一線。
EPILOGUE

デザインは、お客様との共同作業である

一人で抱え込まない。言葉でほどき、お客様と一緒に作っていく ── それが個人事業のウェブ制作の作法だ

本書を貫く一つの姿勢を、最後に言葉にしておく。個人事業のウェブ制作におけるデザインは、デザイナーが一人で完成させて差し出すものではない。お客様と一緒に作っていく共同作業である。この姿勢を持てるかどうかが、長く続けられる仕事の仕方かどうかを分ける。

大手の制作会社なら、デザイナーが「これがプロの判断です」と押し切る選択肢もある。しかし個人事業では、その押し切りはたいてい裏目に出る。お客様の事業に深く寄り添い、お客様の言葉を引き出し、自分の判断とお客様の判断を編んでいく ── これが個人事業の強みであり、義務でもある。

共同作業を成立させるのは、繰り返すが言葉だ。お客様の中にあるが言葉になっていないものを、こちらの問いで言葉にする。自分の中にあるが説明できていないものを、自分の手で言葉にする。両者の言葉が出会うところに、デザインが生まれる。

最後に残るのは関係である

ウェブサイトは公開して終わりではない。お客様の事業が続く限り、サイトも更新され続ける。その更新を誰に頼むか ── ここで、最初の制作で「言葉で一緒に作ってくれた人」が選ばれる。デザインの良し悪しよりも、対話の経験が記憶に残る。個人事業のウェブ制作の最大の資産は、ポートフォリオではなく、お客様との関係そのものだ。

本書で扱った言語化の技術は、すぐには身につかない。十件、二十件、五十件と案件を重ねながら、少しずつ自分のものにしていく。途中で何度も「なんか違う」を浴び、何度もコンセプトのすり合わせに失敗し、それでも次の案件でほんの少しだけ前回より上手になる。その積み重ねの先に、安心して仕事を受けられる自分が立ち上がる。

白い紙の前で固まっていた最初の自分のことを、忘れないでほしい。あのとき、欲しかったのは才能ではなく、言葉だった。本書が、その言葉を集め、編んでいく旅の地図になれば嬉しい。

──そして、お客様も同じく、自分の事業を言葉にする旅をしている。あなたの問いが、お客様の事業の言語化を助ける。お客様の言葉が、あなたのデザインを支える。互いに育てあう関係を、一案件ずつ、丁寧に作っていく。それがこの仕事の最も豊かな部分だ。

BIBLIOGRAPHY

参考資料一覧

さらに深く学ぶための地図

デザインの原則と思想

  • Don Norman, The Design of Everyday Things, Basic Books, rev. ed. 2013. デザインを「使い手との対話」として捉える原典。
  • 原研哉, デザインのデザイン, 岩波書店, 2003. 言葉でデザインを考える日本語の良書。
  • 佐藤可士和, 佐藤可士和の超整理術, 日本経済新聞出版, 2007. 制作前の整理を言葉で行う作法。

デザインの言語化と語彙

  • ウジトモコ, デザインセンスを身につける, SBクリエイティブ, 2010. 「センス」を言語化と訓練の問題として扱う初心者向け書。
  • Ellen Lupton, Thinking with Type, Princeton Architectural Press, 2nd ed. 2010. タイポグラフィを言葉で考えるための教科書。
  • 桑沢デザイン研究所 編, デザインの基礎, 美術出版社. 視覚要素を語彙として整理した基礎テキスト。

ヒアリングとクライアントワーク

  • Mike Monteiro, Design Is a Job, A Book Apart, 2012. クライアントとの契約・対話・対立の作法の原典。
  • Mike Monteiro, You're My Favorite Client, A Book Apart, 2014. 上記の「クライアント側」視点。両方読むと立体的になる。
  • Tom Greever, Articulating Design Decisions, O'Reilly, 2nd ed. 2020. デザインの判断を言葉で説明する技術の体系書。

ブランディングと方向性の決定

  • Marty Neumeier, The Brand Gap, New Riders, 2005. ブランドの軸を一冊で掴むための定番。
  • Alina Wheeler, Designing Brand Identity, Wiley, 5th ed. 2017. ブランドコンセプトを視覚に翻訳する実践書。
  • 水野学, センスは知識からはじまる, 朝日新聞出版, 2014. 「センス」を観察と知識の問題として再定義する。

契約・スコープ・個人事業の運営

  • 『ウェブ制作の見積・契約・トラブル対応』各種実務書. 業界団体やJagatの資料に良いものが多い。
  • Paul Jarvis, Company of One, Houghton Mifflin Harcourt, 2019. 一人で持続する事業の運営思想。
  • Jessica Hische, In Progress, Chronicle Books, 2015. 個人デザイナーの仕事の進め方と価格付け。

観察と語彙を育てる長期の習慣

  • Twyla Tharp, The Creative Habit, Simon & Schuster, 2003. 創造性を「習慣」として捉え直す古典。
  • Austin Kleon, Steal Like an Artist, Workman, 2012. 模写と引用を出発点とするクリエイティブ論。
  • 松浦弥太郎, 暮しの手帖編集長を辞めて気づいた、「ていねいに生きる」ということ, PHP研究所, 2016. 観察を仕事にする態度。