【アイデア出し】ウェブサイトを擬人化してみる
こんにちは。株式会社トルクのデザイナー山﨑です。今回はデザイン前の段階のリサーチやアイデア出しでやってみた方法を書いてみようと思います。
いま、私はとあるプロジェクトを任されていますが、何案かラフをアウトプットし社内展開したものの上長から「メジャー感」が足りないと指摘をよく受けることがあります。「メジャー感」ってなんだろう？と考えると、「メジャー感」にも様々な方向性があると感じ、ウェブデザインを擬人化することにしてみました。例外はあるかもしれませんがそのことをまとめていこうと思います。
そもそもメジャー感とはなにか
「メジャー感」「王道」なデザインの特徴を教えてください。とChatGPTに尋ねました。
業界のリーダーを参考にする
定評のあるデザインの研究（受賞歴のあるウェブサイトを研究）
顧客の視点から考える
普遍的なデザイン原則の利用
利便性とアクセシビリティ
ChatGPTに質問している段階でだいぶ煮詰まっていることはデザイナーの方には伝わると思いますが笑。さらに具体的な内容をChatGPTに質問してみました。メジャーなデザインとは「古典的な色使いやタイポグラフィ」「公式感や権威性」「細部へのこだわり」「整合性と統一感」「バランスの取れたデザイン（色、形、画像、テキスト）」「調和の取れた色彩と形状」。ふむふむなるほど…そんなことはわかっているので（わかっていない、それが掴みきれていないから困っている）、状況を打破するにはまだ弱いです。ChatGPTがデザイナーの壁打ち・相談相手としての向上を期待します。
ウェブサイトの擬人化
さて、上長からヒアリングを受けるなかでウェブサイトに「主人公感」が欲しいというワードが出てきました。そこで私は「主人公感」について深掘りすることにしました。RPGでいうキャラクター（職業）のマッピング図を作成し、実際のウェブサイトを当てはめてみることにしました。著作権の関係から実際作成したマップを貼ることは難しいですが、マッピングしたことによってわかったウェブサイトのキャラクター（職業）を簡単に以下に記載します。
※キャラクター（職業）はドラゴンクエスト3を参考にしています。
・勇者（主人公感）
まんべんなく万能な能力。物理的な攻撃力もあり、回復魔法・攻撃魔法も使える。カラーリングはマルチカラー。訪問者に信頼を与えるコーポレートサイトに向いている。
・戦士
物理攻撃に特化している。メインカラーは赤。エネルギッシュで強い印象が営業会社のサイトに適していそう。
・魔法使い
攻撃魔法に特化している。メインカラーは緑。さらに黒や紫と組み合わせることによってテック企業の印象を与えることができそう。彩度や輝度の高い緑や紫はWeb3のウェブサイトに多いカラーリング。
・僧侶
回復魔法に特化している。メインカラーは青と黄色。クリーンな印象で医療や福祉、学校のサイトに適していそう。ベージュ系を組み合わせることでより優しい印象に。
・賢者
攻撃魔法・回復魔法の両方を使いこなす。メインカラーは白・寒色。グリッドで組まれたロジカルなサイト、余白を活かしたレイアウトでデザインファーム系のウェブサイトに多い印象。
・商人
1stViewからユーザーの収益に貢献できることをアピールするSAAS系企業。ドラクエ3でのカラーリングはマルチカラー。SAAS系企業もブランドカラーによって各社それぞれなのである意味当てはまっているかもしれない。
・遊び人
（遊び人というと聞こえが悪く申し訳ないのですが）おしゃれで大胆なカラーリングでPOPなイラストを用いたサイト。3年くらい前の西海岸系のスタートアップ企業が遊び人枠に該当していたかもしれない。硬い内容をより楽しそうに・簡単そうに伝えることが目的だったのではないか。ドラクエ3での遊び人も男女ともにカラーが違うためカラフルさはPOPの象徴と言える。
※武闘家は戦士と役割が被るので割愛します
※盗賊は該当するウェブサイトがないので割愛します
主人公感の特徴とは
主人公感の特徴のひとつとしてマルチカラーにあるのではないかという気づきがありました。例外はもちろんありますが、ドラクエ3の勇者はピンク、青、黄色のマルチカラーです。ドラクエ3の勇者以外の主人公のカラーリングの特徴をいくつか考察しました。
・機動戦士ガンダム
主人公機RX-78ガンダムは赤・青・黄・白のマルチカラー。対するジオン軍のモビルスーツはカーキ（MS-06ザクII）、青（YMS-07Bグフ）、黒+紫（MS-09ドム）と寒色や無彩色であり、2色以下で配色されている。
・アンパンマン
アンパンマンは赤・黄・薄橙・茶のマルチカラー。対するバイキンマンのカラーリングは黒・紫と無彩色+混合色の2色以下で配色されている。
・ドラゴンボール
悟空はオレンジ・青の服を着ているがスーパーサイヤ人になると髪は黄色になるためマルチカラーである。対するフリーザは紫・白、ピッコロは紫・白・紫で寒色かつ混合色で配色されている。
・セーラームーン
セーラームーンは服の色が青・白・ピンク、髪の毛の色が黄色なのでマルチカラーと言える。マーズは赤・白・黒、マーキュリーは青・白などセーラームーンに対して色数が少ない。
・マーベルヒーロー
（マーベルに詳しくないので恐縮ですが）赤・黄・青のうちの2色で構成されているキャラクターが多いように見える。
※他にも該当するキャラクターはたくさんいると思いますが凄く長くなってしまいそうなのでこの辺にします。
まとめ
ウェブサイトを擬人化+マッピングし可視化することで、デザインの方向性を掴みやすくなる（可能性がある）
主人公感のあるデザインの特徴としてマルチカラーがあげられる
三原色の赤・黄・青のうち2色以上を取り入れると良い
緑や紫などの混合色をメインで配色すると主人公感を出しづらい
まだ、該当プロジェクトのデザインは出来上がっていませんが（苦笑）主人公感≒メジャー感のヒントを少しは掴めたような気がします。まずは上長に「めっちゃええやん」と言ってもらえるよう、そして社外の方からも「めっちゃええやん」と思ってもらえるようなメジャー感あるデザインをアウトプットできるよう頑張ります。
追記
エヴァンゲリオンの初号機は紫・緑で配色されており、主人公機カラーリング法則から外れていることに気づきました。。エヴァンゲリオンは全作一応見てますがそこまでガチではないのでわかりかねますが…庵野監督の何かしらの意向かもしれないですね。
追記2
仮面ライダーはダークな要素が含まれるため、「三原色のうち2色を使うと主人公感を出しやすい」法則に該当しなさそう。
追記3
ウルトラマンはシルバー（無彩色）+赤、ストリートファイターのリュウは白+黒+赤で配色されている。白やグレー等の無彩色+赤の配色は主人公感を出せる可能性がありそうです。そう言えばRX-0ガンダムユニコーンも白+赤ですがとてもヒロイックですね。
この記事が気に入ったらサポートをしてみませんか？