いま読んでいるこのサイトは、公開までに11回作り直しています。機能を作り直したのではなく、見た目だけを11回です。
理由ははっきりしていて、最初に出てきたものが「AIに作らせたな」と一目で分かる見た目だったからです。
ここは自分が作ったものを並べる場所です。その入口が手抜きに見えるなら、それ自体が反証になってしまう。だから納得いくまでやり直しました。その過程で「AIっぽさ」には具体的な正体があると分かったので、記録として残します。
作り直しながら気づいたのは、AIっぽい見た目には決まった部品があるということでした。
ひとつめは淡い青のアクセント。水色っぽい青をリンクやボタンに使う配色です。無難で読みやすく、どんな内容にも合う。だからこそ、あらゆるサイトで同じものが出てきます。
ふたつめは角丸のカードが並ぶレイアウト。情報をカードに入れて格子状に置き、マウスを乗せるとふわっと浮く。整理された見た目になりますが、これも全部同じ顔になります。
みっつめは絵文字のアイコン。手軽で意味が伝わる反面、間に合わせの印象が出ます。特にページの主役として使うと、途端に安っぽくなる。
この3つが揃うと、内容が何であっても同じ見た目になります。AIっぽさとは、内容と無関係に決まる見た目のことだったんです。
最初は全ページを1つの配色で統一していました。ブランドとして正しいはずでした。でもそれが、のっぺりした印象の原因にもなっていました。
そこで方針を変えて、ページごとに色の系統そのものを変えることにしました。
| ページ | 配色 | 狙い |
|---|---|---|
| トップ | 黒鉛色＋琥珀 | 計測機器のような、夜の実験室 |
| ミニゲーム | 紫黒＋ネオンのマゼンタ | 夜のゲームセンター |
| ブログ（このページ） | 生成り色＋明朝体 | 紙の読み物 |
| ウェブ制作 | 白＋深緑 | ちゃんとした仕事の顔 |
統一感は落ちます。でもスクロールしていくと別の店に入ったように景色が変わるようになりました。基調となる色（琥珀）だけは全体に通してあるので、バラバラにはなりません。
企業サイトの作りを参考にしたのも効きました。トップページを「お知らせ」「私たちについて」「事業紹介」という順に並べる、あの構成です。個人サイトでも、情報の並べ方の型としてそのまま使えました。
サイトにマスコットを置くことにしたのですが、これが一番苦戦しました。
「かわいいペンギンを描いて」と頼むと、確かにペンギンは出てきます。でも思っていたものと違う。「もっと丸く」「目を小さく」と言葉で足していっても、近づいているのか分からない。この往復を何度もやりました。
解決したのは、参考にしたい絵を自分で用意して渡した瞬間でした。それまで何度やっても決まらなかったものが、一発で決まりました。
造形の好みは、言葉より画像で渡したほうが速い。これが今回いちばん実用的な学びでした。色や配置は言葉で詰められますが、「かわいい」の中身は人によって違いすぎて、言葉では収束しません。
マスコットには動きを付けました。瞬きをして、カーソルに合わせて少し傾いて、クリックすると揺れます。
最初はもっと動かしていました。カーソルを近づけると首をかしげ、クリックすると別のポーズに切り替わる。作っているときは楽しいのですが、実際に使うとうるさいんです。読もうとするたびに何かが動く。
結局、削りました。いま残しているのは、呼吸のような小さな上下、瞬き、わずかな傾き、クリックしたときの揺れだけです。ページを開いた瞬間の第一印象と、読んでいる最中の静けさは別に設計する必要がありました。
目安として決めたのは「入場の演出は合計1秒以内で終わる」「読んでいる間に動き続けるものは画面に1つまで」の2つです。数字にしておくと、あとから増やしたくなったときに歯止めになります。
作り直しの回数は多いように見えますが、1回あたりは小さな変更でした。配色だけ、構成だけ、キャラクターだけ、というふうに一度に1つの層だけを変えると、何が効いたのか分かります。全部いっぺんに変えると、良くなったのか悪くなったのかも判断できません。
そしてもう一つ。AIが最初に出してくるものは、平均的に無難なものです。それは能力の限界ではなく、指示が「いい感じにして」だったからです。何がいいのかを決めるのは、注文する側の仕事でした。
11回目でようやく、自分のサイトらしくなりました。数えてみると多いですが、1回1回は数十分です。納得いかないまま置いておくより、ずっと安く済んだと思っています。