自社サイトを作り直しました。全17ページのうち、プロのデザイナーにお願いしたのはTOPと下層の1ページ、あわせて2ページです。残りのページは、その2ページをもとに、AIと一緒に組み上げました。
デザイナーへの依頼を減らして、AIで安く済ませた。そう読めるかもしれませんが、伝えたいのは逆のことです。2ページで足りたのは、その2ページにサイトのコア、つまりコンセプトと型が入っていたからでした。AIで広げられるのは、コアが決まったあとの話です。
作り直す前と後で、変わったのは「見え方の決め方」
前のサイトは、7月に私がAIと一緒に作ったものです。FVの写真もAIで作りました。見出しの言葉は、今とほとんど同じ「売り込まずに、選ばれる」です。
並べてみると、言葉はほぼ変わっていません。変わったのは見え方です。白い箱に文字を載せた写真のFVから、クリーム色の地にイラストを置いたFVへ。四角いボタンは、丸いボタンになりました。色も、青は見出しとリンク、黄土は主なボタンと飾り、と役割を決めています。
前のサイトでも、部品はひととおりそろっていました。ただ、見え方の方針は、ページを作るたびに私がその場で決めていました。作るたびに決めていたものを、最初にひとつに決めた。前と後の違いは、そこにあります。
ちなみに、前のサイトで使っていた金色のコビトの人形は気に入っているので、どこかでまた使おうと思っています。
デザイナーにお願いしたのは、色と形の「決め方」だった
正直に書くと、私はデザインのコンセプトを自分で決められません。BtoBの会社サイトに奇抜な表現は要らないと考えていますが、それでも「この会社らしい見え方は何か」という問いには、自分で答えが出せませんでした。
そこでデザイナーさんには、全ページを作ってもらうのではなく、TOPと下層1ページで、サイト全体の方向を決めてもらいました。色の使い方、見出しのあしらい、余白の取り方、イラストのタッチ。打ち合わせは、色味の相談を中心に2回です。
受け取ったのは2ページ分のデザインですが、中身は「このサイトでは、こう決める」という判断の集まりでした。私がほしかったのは、この判断のほうです。
コアが決まると、AIは同じ判断で広げられる
受け取ったデザインは、見出し・カード・図・ボタンといった部品に分けました。サイトはHubSpotで作っているので、部品の見た目は1か所のCSSで決まります。AIにページを組ませるときも、この部品の中から選ばせています。
作業の途中で、デザイナーさんから指摘が入ります。「青い帯の上の下線は、濃い青に」「この絵だけ、密度が高い」。直したことはその場で1行のルールにして、部品の設定と、絵を作るときの指示に組み込みました。直したことが、その時点のサイトのルールになるので、次に作るページは最初からその形で出てきます。
ここで効いているのは、AIの速さではありません。判断の基準がひとつに決まっていることです。基準があるので、AIに何度作り直させても、同じ方向に寄っていきます。
コアがないと、AIは形しか作れない
では、基準を持たないままAIに任せるとどうなるか。作り直しの途中で、実際に起きたことが3つあります。
1つずつ作るので、少しずつずれがたまる
AIは、頼んだ部品をその場で作ります。図をひとつ、カードをひとつ、ラベルをひとつ。その場その場では、どれも筋が通っています。
ところが数日作業を続けたあと、サイトにある図を全部並べてみると、丸い小さなラベルの書き方が3種類になっていました。灰色の文字、黒い文字、青い文字。どれも、作ったときは「これでいい」と判断したものです。白地では読みにくい黄土色の小さな文字や、箱の中の英字の見出しも、気づかないうちに増えていました。
1つずつ作る進め方だと、ずれは作っているあいだには見えません。全部を並べたときに初めて、ばらばらだと分かります。
足すのは得意で、削るのは苦手
TOPページを見直したとき、AIは「誰向けかを伝える帯」「分業との違いを見せる図」「強みを説明する帯」を次々と足しました。どれも理屈は通っています。
ところが並べてみると、説明が多すぎました。結局その3つはTOPから外し、よくある課題を説明するページに移しています。外すと決めたのは、人の目です。
AIに頼めば、帯も飾りも強調も、いくらでも足してくれます。ただ、「これがあるせいで、全体がうるさい」とは、なかなか言い出しません。引き算の判断は、こちらから頼まないと出てこないのです。
並べたときの重さに気づけない
デザイナーさんにサイトを見てもらったとき、あるページの絵だけ、ほかより密度が高いという指摘をもらいました。大きな本棚をゴールドで塗っていたので、ほかのページの絵と並べると、そこだけ重く見えるのです。
その絵はAIで作ったもので、私もAIも、1枚で見て問題ないと判断していました。並べて見比べると、確かにそこだけ浮いています。
3つとも、部品1つずつの出来は悪くありませんでした。崩れていたのは、部品と部品の関係です。全体の調和は、何をどう並べ、何を外すかの判断で決まります。その判断の元になるのが、コアです。
コアとは、何を削るかを言葉で説明できること
サイトを見てもらった方から、「もっと安くできる人がいる」「AIでやればいい」という声をもらったことがあります。部品を作るところまでなら、そのとおりです。
ただ、安さの話とコアの話は別です。差になるのは、何を削るかを決めて、その理由を言葉で説明できるかどうか。理由を言葉にできれば、ルールにしてAIに渡せます。「なんとなく良い」のままでは、AIにも、次にページを作る人にも引き継げません。
いまは、役割をこう分けています。
- 人が、コアを決める。デザイナーさんと一緒に、色と形の決め方を決める
- 人が、違和感に気づく。「うるさい」「この絵だけ重い」と止める
- AIが、その判断をルールにして全ページに当てる
- ときどき、全部を並べて見直す。ずれは並べたときにしか見えない
ルールは1枚の文書にまとめ、指摘が入るたびに1行ずつ足しています。たとえば絵については「大きなものは薄いグレーか白、ゴールドは小物に2〜3か所まで」と決め、絵を作るときの指示に入れました。これから作る絵は、最初からこの配分で出てきます。
コアを知っていると、判断する目が社内に育つ
プロのデザイナーがコアを決め、残りのページはAIで広げる。この分け方は、いちばん早く、費用も抑えられます。ただ、私がいちばん大きいと感じているのは、別のところです。
コアのコンセプトを理解していると、新しいページを足すときに「これはこのサイトらしいか」を自分で判断できるようになります。ルールの1行ずつに理由があるので、外れているものに気づけるのです。判断する目、言いかえれば審美眼が、サイトを運用するご担当者や会社の中に少しずつ育っていきます。
サイトは公開してからも、ページを足し、直し続けるものです。そのたびに外の人に判断を頼んでいると、コアは少しずつずれていきます。ゆくゆくは、この審美眼を会社の中に持つこと。デザイナーにコアを決めてもらうのは、そのための最初の一歩だと考えています。
サイトやLPを作り直すときは、まずコアを決めるところから一緒に考えます。どこまでをAIに任せ、どこからを人の目で決めるか。その線引きも含めてご相談ください。
あわせて読む: AIで記事を100本作るとき、レビューは最初の5本に集中してもらう｜「HubSpotはノーコードだからAIと相性が悪い」は誤解でした