連載「クリシンクエストをつくる」· 第6編／全8編
中身が良くても、見た目で伝わらなければ届かない。1カラム化と引き算で整え直した話
中身がどれだけ良くても、見た目で伝わらなければ届きません。世に出す前に、クリシンクエストの見た目をレイアウトから作り直しました。1カラム化、重複の削除、相手に合わせた入口、細部の詰め。デザインを「飾り」ではなく「翻訳」として捉え直した記録です。
ここまで5回、嘘の設計、答えの守り方、本番環境、速度、認証と、「中身」をつくる話を書いてきました。仕組みとしては、もう十分に動きます。
ところが、画面を改めて眺めて、ひとこと言いたくなってしまったんです。「ダサい」と。みなさんも、自分でつくったものを少し時間をおいて見返して、こんな気持ちになったこと、ありませんか。
これは、けっこう大事な問題です。どれだけ中身が良くても、見た目で「なんだか雑そう」と思われた瞬間、人は触る前に離れてしまいます。とくに、これから企業の担当者にも見せていくサービスなら、なおさらですよね。世に出す前の最後の仕事は、中身を「伝わる形」に整え直すことでした。
そして、見た目の手直しというと、つい「色を変える」「角を丸める」といった部分いじりから始めがちです。でも、たいていそれでは良くなりません。直すべきは、もっと土台。レイアウトそのものだったんです。
ここで改めてお伝えしておくと、私は CSS も自分では書きません。私がやることは、「ダサい」と言葉にし、「1カラムにする」「これは削る」「ここはダッシュボード風に」と方針を出すこと。実際に手を動かして直すのは AI です。出てきた画面を見て、「まだ詰め込みすぎ」「ここは強弱が足りない」と問い直しては、また方針を返す。デザインのディレクションとは、まさにこの往復でした。ですから以下は「私が描いた話」ではなく、「私がどう方向づけ、AI とどう直していったか」の記録だと思って読んでいただけたらうれしいです。
そもそも、最初の画面はどんな状態だったのか。
ひとことで言うと、「とりあえず並べただけ」でした。情報をひとつずつ四角い「カード」に入れて、表示すべき項目を上から順に置いていく。レベル、スコア、プレイ数……と、データの箱が淡々と縦に積まれている。中身はほぼ文字だけで、色や大きさの強弱もありません。どれが大事で、次に何をすればいいのか。それが画面からは読み取れなかったんです。
これは、悪いというより段階が違うんですね。最初につくるのは PoC、「この企画は成立するのか」をまず確かめるための試作です。その段階では、見た目は後回しでいい。必要なデータが「とにかく表示される」ことが確認できれば、PoC としては成功なんです。
問題は、AI がその PoC のままの画面で世に出そうと提案してきたことでした。AI は「とりあえず動くもの」をすばやく形にしてくれる一方で、「これで世に出していいか」という判断まで最適化してくれるわけではありません。AI の判断が、いつも最善とは限らない。これは、その良い例だったと思います。だからこそ、「動くことの確認」用の画面と「人に見せる」ための画面は別物だと見極めて止めるのが、ディレクターの仕事になります。カードを並べただけの状態から、伝わる画面へ。その引き上げが、ここから始まりました。
最初にやったのは、トップページを縦一本（1カラム）に並べ直すことでした。
それまでは、あれもこれもと要素を横にも縦にも詰め込んでいました。情報を盛るほど親切に思えるんですよね。でも、実際は逆なんです。全部を目立たせようとすると、どれも目立たない。視線がどこへ進めばいいか、分からなくなってしまいます。
そこで、上から「これは何のゲームか → どうトレーニングするか → 始める」と、読む順に一本道で並べ直しました。視線の通り道が一本になるだけで、画面はぐっと落ち着きます。引き算の前に、まず並び順を整える。これが、思った以上に効きました。
次にやったのは、思い切った削除です。
トップには、これまでのプレイ実績や「初回診断」の進み具合を表示していました。一見、親切な情報に見えます。でも、これらは別にある「マイページ」とまるかぶりだったんです。同じ情報が2か所にあると、どちらの存在も軽くなってしまう。そして画面は無駄に重くなります。
だから、トップからはばっさり削りました。詳しい成長記録はマイページに任せ、トップは「来た人を、まっすぐトレーニングへ送り出す」役割に集中させる。1つの画面に、1つの仕事。これは、第5編で書いた「安全は足し算より引き算」とも、どこか響き合っています。良くするための削除は、足すより勇気がいるものです。でも、ちゃんと効くんですよね。
前回、ログインの入口を学習者・企業担当者・運営者で分けた話を書きました。あれは仕組みの話でしたが、見た目もそれぞれに合わせて変えています。
同じ「ログイン」という機能でも、誰に見せるかで装いを変えます。法人の担当者に遊び一辺倒の画面を見せれば、それだけで信頼が一段下がってしまいますよね。デザインは、相手への目配りそのものなのだと思います。
入口を分けた先には、もうひとつ大きな作り分けがあります。ゲーム画面と管理画面（コンソール）です。
ゲームは「トレーニングする」場所。丸みのある文字、明るい色、AI たちが並ぶ遊び心のある見た目がふさわしいですよね。一方、管理画面は「データを読み、人を管理する」場所。受講者の進み具合や平均スコアを、落ち着いて見渡せることが何より大事です。同じサービスでも、目的がまるで違う。だから、見た目の言葉づかいも分けました。
管理画面も、出発点は同じでした。指標をカードに入れて並べただけの状態です。そこから、いわゆるダッシュボード型に作り直しました。
プレイの高揚感と、業務の安心感。ひとつのサービスに、目的の異なる二つの顔を持たせる。これも「相手に合わせる」の延長線上にあります。
画面ごとに、その場の気分で色や余白を選んでいくと、全体がちぐはぐになってしまいます。そこで、使う色・余白の取り方・角の丸み・文字の種類といった“決め”を一か所にまとめて、どの画面もそこから引いて使うようにしました。
こうしておくと、新しい画面をつくっても自然と揃いますし、「やっぱり色を変えたい」と思ったときも、一か所直すだけで全体に反映されます。一貫性は、センスで毎回がんばるものではなく、仕組みで保つもの。ここでも「決めを一本化する」という、この連載で何度も出てきた発想が効いています。
最後は、小さな詰めの積み重ねです。
どれも単体では些細なことです。でも、こうした小さな違和感をひとつずつ潰していくと、全体の「ちゃんとしてる感」が確かに上がっていくんですね。逆に、一個の取りこぼしが「なんか雑」という印象を全部に広げてしまう。神は細部に宿る、というのは本当だなと感じました。
作り直してみて、腑に落ちたことがあります。デザインは、上から塗る飾りではないということです。中身を、相手に伝わる形へ翻訳する作業なんですよね。
良い翻訳は、足すよりも整えます。並びを直し、重複を削り、相手に合わせ、決めを揃え、細部を詰める。派手な装飾を加えなくても、それだけで「伝わる」画面になります。中身がしっかりしているほど、この翻訳は効いてきます。
これで、見た目もようやく中身に追いつきました。
さて、ここまで6回。嘘の設計から、答えの守り方、本番環境、速度、認証、そしてデザインまで、ぜんぶお話ししてきました。でも、ひとつ大事なことを、まだちゃんと書いていません。この全部を、私はコードをほとんど書かずに、AI エージェントたちと進めてきたという事実です。次回はその舞台裏。AI を相棒に、コードを書かずに開発するという働き方そのものについてお話しします。
— クリシンクエスト開発記・第6回