AIデザイン時代に“自社らしさ”が際立つWebサイトを作るための3要素

なぜ没個性サイトが生まれるのか

これまでカナダなど4カ国でWebデザイナーとして活躍してきたMana氏。現在は広島を拠点に幅広く活動している。趣味はトライアスロン。毎年大会に出場し、昨年は中国ブロックの年代別女子3位になるほどの実力だ。最近ではトレーニングメニューの作成や大会情報の収集にAIを取り入れ、自身の経験や感性と掛け合わせながら練習を重ねているという。

レースの勝敗を分けるのは、これまでの経験や気合、根性など、AIにはわからない部分があります。これはWebデザインでも似ています。AIで平均点の正解を出すことはできますが、最後の決め手は人間の感性や経験になります（Mana氏）

Webデザイナー以外でも、Webサイトやバナー、広告クリエイティブを作れる環境が整ってきた。STUDIOのような国産のノーコードツールや多様なCMS（Contents Management System）のテーマが登場し、CanvaやAdobe Expressといったデザインツールも一般化して、制作のハードルが下がっている。

講演では、FigmaのAI搭載デザインツール、Figma Makeを使って「新しくオープンしたカフェ」のWebサイト制作の例が紹介された。自然言語で数行指示を出す（プロンプトを書く）と、わずか1〜2分でWebサイトが生成され、そのまま公開までできてしまう。

たとえば、上の図のように指示をすると、次図のように作成が始まる。

作成が始まると、1分ほどでカフェのサイトを作ることができた。しかし、Mana氏は、「作る側は、楽にできるのでうれしいかもしれないが、作ってもらった側は『自分のカフェらしさがない』と感じるのではないか」と語る。

オーナーのこだわりや想いが抜け落ちてしまうところがAIの限界で、指示されたことの平均点しか出せません。文章や色、画像の変更は指示すればすぐにできますが、使えば使うほど、何かが違うと感じるかもしれません（Mana氏）

AIで作ったサイトが「なんかダサい」の正体

ある日Mana氏がGoogleのGeminiを使ってWebサイト制作をした際、「どこかで見たことあるデザインだな」と感じたという。後に、Google AI StudioのWebサイトを開いてみたとき、それとそっくりであることに気づいたそうだ。

これはGemini以外のAIも同様で、デザインについての指示がなければ、そのAIがもつベーススタイルやテンプレートに沿って生成されるようです。AIデザインの課題は、似たようなデザインばかりになり、文脈を深く理解した情緒的なデザインができないことです（Mana氏）

説明は多いのに図解はなく、導線もわかりづらい。ときには関係のない画像が出てくることもある。「だから見た人はなんか違う」と感じるのではないかとMana氏は言う。

AIは平均点のデザインを出すので、「らしさ」が抜けた、魂のないデザインが量産されるのです（Mana氏）

こうした状況から、Mana氏のもとには「AIが作ったWebサイトやアプリのデザインを直してほしい」という依頼が急増している。その際、依頼者たちが口をそろえて語るのが「なんかダサい」という言葉だ。

このダサいという一言に情報が詰まっています。彼らが本当にいいたいのは、デザインそのものというよりも、「私たちの会社の情熱やユーザーへの想いを代弁してくれていない」という心の叫びです（Mana氏）

実際にAIが作ったサイトを見てみると、「誰に」「どう使ってほしいか」という体験設計がないもの、説明文ばかりでユーザーが使う気になれないものが多い。こうした場合、表面的に色や形を直すだけでは解決せず、誰の・どんな課題を解決するデザインなのかを、根本から見直す必要がある。

「なんかダサい」の正体こそが「AIが生み出せないブランドの核心部分」で、「デザイナーが価値を発揮する最大のポイント」とMana氏は語った。

「らしさ」を表現するための3つの要素

では、自分らしさ、自社らしさをどのように表現すればよいのだろうか。Mana氏は、人間が定義すべき3つの要素を挙げた。

• 想い：会社の存在理由、大切にしているもの、事業を始めた原点など
• 人柄：会社やサービスを人にたとえたとき、親しみやすい友人なのか、信頼できる専門家なのか、情熱的なリーダーなのか。これは、サイト全体のトーン＆マナーにも影響する
• 印象：最終的に顧客に感じてほしい印象。ワクワク、安心、信頼など

たとえば、法律事務所のWebサイトをAIに作成させると、信頼感を演出する青系の配色や落ち着いたレイアウトなど、無難なデザインが生成されることが多い。しかし、事務所の「人柄」が異なれば、デザインも変わる。

親しみやすく、なんでも相談できる友だちのような法律事務所であれば、温かみのある色で、丸みのあるフォントといったデザインを選ぶだろう。一方、絶対に勝つことを信条とする孤高の天才弁護士であれば、黒とシルバーを基調にシャープで威厳のあるフォントにするかもしれない。

3つの要素が定まったら、「AIで擬人化した画像の作成をしてみる」ことをMana氏はおすすめしている。次図がその例だ。このイメージをもとに議論したり、社内で共有したりすることで、方向性のすり合わせがしやすくなる。

ブランドをデザインする「新・制作フロー」

AIデザイン時代の新しいデザインの流れについて、Mana氏は次のように語った。

これからは、会社やサービスの「想い」、「人柄」、「印象」を定義することがWeb担当者やデザイナーの新しい仕事になります。自社らしさがきちんと定義されていれば、AIは最強のアシスタントになります（Mana氏）

続いて、AIへの指示の仕方についてコツが紹介された。最初のカフェの作成指示は悪い例だ。良い指示は、単に「作ってください」というのではなく、次例のような想い・人柄・印象を添えることだ。

• 想い：日常から切り離された自分だけの瞬間を提供すること
• 人柄：仕事に疲れた30代女性が一人静かに読書できる隠れ家のような雰囲気
• 印象：全体的に落ち着いた温かみのあるデザインで上質なトーン

「自分だけの瞬間」という言葉があれば、にぎやかな家族連れの写真は選ばれない。「一人静かに読書できる隠れ家」からは、ポップで元気な色は外れる。「上質なトーン」を指定すれば、太くて大きなフォントも候補から外れる。

3要素を定義することで、AIに間違える余地を与えないデザインの指示書ができるわけだ。色やフォント、イラストを細かく指示しなくても、カフェらしさを理解したデザインを考えてくれる。

一度「らしさ」を定義できれば、デザイン案を10個出してもらって、その中で原石となるようなアイデアをみつけて、ブラッシュアップしていけます。さらに、SNSの発信内容、キャッチコピー、バナー、アイコンなど、さまざまな場面でAIに相談にのってもらえます（Mana氏）

たとえば、「落ち着いた上質な」「賑やかでポップな」といった印象を指示してアイコンをいくつか出してもらうといい。人間がゼロから考えるより、AIに選択肢を出してもらい、最終的な判断を人間がするという流れにしたほうが、時間を短縮できる。

アニメーション、動きも同様だ。たとえば安心感を与えたいなら、光るボタンよりもゆっくりふんわり変化するような動きがいい。印象を指示してAIに動きを提案してもらえば、人は選択するだけになる。

「らしさ」を見つける3つのステップ

しかし、想いや存在意義などがすぐに出てこないという人もいるかもしれないが、難しく考えすぎる必要はなく、次の3つのステップを意識するとよい。

ステップ1. 想いの発見：「お客様が喜んだ瞬間」を１つ思い出す

クライアント、ユーザーから「ありがとう」といわれた瞬間、レビューで褒められた内容を１つだけ思い出して書き出してみよう。そこに、サービスが提供する真の価値、想い、存在意義が隠れている。

ステップ2. 人柄の発見：「らしさ」を3つの形容詞で表す

「想いの発見」で見つけた価値を踏まえて、会社やサービスの人柄を表す形容詞を3つ書き出す。これがトーン＆マナーの基礎になる。

ステップ3. 印象の発見：ユーザーにいってほしい「最後の一言」を決める

Webサイトを見たユーザーに一言で感想をいってもらうとしたら、何といってほしいのか。その一言を考えよう。

AIに指示する際には、次図のように、最初に想い・人柄・印象を伝えることで、その他大勢の平均点ではなく、「あなたらしい」デザインの原石を返してくれるようになる。

まずはこの３つを伝える小さな一歩から、自社らしさで選ばれるWebサイト作りを始めましょう（Mana氏）

最後に、Mana氏は「これからのデザインは、『らしさ』の定義から始まる」とし、次のように話して講演を締めくくった。

AIデザイン時代に、その他大勢から抜け出す鍵は技術ではなくて、「なぜ存在するのかという想い」です。AI は平均点の正解を作るツールとしては優秀ですが、自社の唯一無二の価値を見つけて定義することまではできません。できるのは人間だけです。作業はAIに任せて、私たち人間はより人間らしい感性を磨いて、これからのデザインと向き合っていきましょう（Mana氏）