AIでデザインする前に、思想を決めたらUIが自然に決まった
今、私はChatGPTとCodexを使ってアプリを作っています、というお話はずっとnoteでしてきてると思うんですけど。彼らはコードを書いて、アプリとして動くところまではかなりやってくれるんですけど、別にUIデザインのプロではないんですよね。
なので、UIについては割とこちらで考える必要があります。ただ、私もUIの専門家ではありません。ちょっとずつ勉強はしていますけど、基本的には実際にできたアプリを自分で触りながら、「ここはもう少しボタン同士の距離を取った方が気持ちいいな」「いや、これは近い方が分かりやすいな」みたいなことを考えて直しています。
そうやっていくつかアプリを作っているうちに、同じことを何回もお願いしていることに気づいたんですね。
視覚情報、色って大事すぎる
たとえば私は、情報を認識するときに結構色に頼っているなぁと実感します。Asanaでタスクに優先度をつけるときも、ただ「優先度：高」と書いてあるだけだと、私は普通に見落とします（ぽんこつすぎる）。
なので、優先度が高いものには赤とか黄色とか、自分の中で「ちょっとピンチですよ」と直感的に分かるような色がついていてほしい。文字だけで全部を判断するより、色でも状態が分かる方が私には圧倒的に見やすいんですよね。
ほかにも、私が作っているものは文章を書くときに長時間使うアプリが多いので、「ダークモードを入れてほしい」ということも何回も言っていました。ライトモードで長時間画面を見ていると、私は結構目がチカチカします。一つのアプリを作って、「ダークモード入れてください」と言う。また別のアプリを作って、「これもダークモード入れてください」と言う。
そういうことが何度も起きてきました。だったらもう、私が作るアプリのビジュアルガイドを一個作ってしまえばいいじゃんと思ったんですね。
毎回お願いしていたことを、一回全部集めた
最初にやったのは、これまで各アプリを作るときに私が担当AIへ、「こうして」「ああして」と言っていたことを集めることでした。私は毎回こういうことをお願いしているから、これを一回整理して、もう少しちゃんと言語化してほしい、と管理部の担当者ミズキ（AI人格）に頼みました。
さらに、私がそもそもどういうデザインを好きなのかも把握してほしかったので、普段使っているツールの中から、「この見た目好きなんだよな」「これ使ってるとちょっと気分上がるんだよな」と思うものをいくつか挙げました。
たとえばTrello。私は普段のタスク管理にはAsanaを使っていますが、仕事で少し使ったTrelloのビジュアルや設計が結構好きでした。スタイリッシュで、なんか、「これ使って仕事してる私、めっちゃ仕事できそうじゃない？」みたいな感じがあるんですよ。なんかアガる。洗練されていて、かっこいい。
一方で、私は結局Asanaを使い続けています。AsanaにはAsanaなりの良さがあって、私が実際に仕事を管理するうえでは、こっちの方が合っていたからです。このあたりから、だんだん面白くなってきました。
「見た目が好きなUI」と、「実際に自分が使いやすいUI」って、全然同じじゃないんだなと思ったんですね。
小説を書くなら、私は明朝体で書きたい
それから、普段執筆をしていて感じていることも、ビジュアルガイドに入れていきました。
たとえばフォント。私は小説を書くとき、メイリオだとなんか書いてる気がしないんですよ。もっとあからさまに言うと、私は明朝体で書きたい。ただ、これは人によると思います。だったら「明朝体に固定する」じゃなくて、フォントを選択できる方がいい。文字サイズも同じです。
Figmaなんかを見ていると、情報量が多いので結構文字が小さいですよね。でも私は、「文字サイズは絶対変えられた方がいいな」と思いました。以前、本ではなく電子書籍を選ぶ理由の一つとして、文字サイズを自分で変えられることが挙げられているのを見たことがあって。確かに紙の文庫本には紙の良さがありますけど、文字そのものを大きくすることはできません。
そう考えると、視力や年齢やその日のコンディションによって、「今日はもう少し大きい文字で読みたい」ということって普通にあるよなと思ったんですね。眼精疲労で疲れたしょぼしょぼの目に小さい文字やライトモードはまじでつらいんです。
だったら、自分が作るものも文字サイズを変えられるようにしたいとか、そういうところからどういう機能を優先的に自分のアプリには実装していくべきなのかが分かってきたんです。
物書きの主戦場は、マウスじゃなくてキーボード
操作についても同じです。物書きの人って、基本的に主戦場はマウスではなくてキーボードなんですよね。
文章を書いている途中で、キーボードから手を離す→マウスを持つ→何かをクリックする→またキーボードへ戻る。これを何度もやるのが、私は結構めんどくさいんです。なので、よく使う操作にはショートカットを入れたい。
しかも、できればそのショートカットキー自体を自分で好きに割り振れるようにしたい。こういうものも全部、「なんとなく私が好きだから」ではなくて、執筆をできるだけ中断したくないというところから出てきています。
見た目だけを真似すると、たぶんズレる
最初は、私が好きなアプリやサイトをAIに見せて、「この感じが好き」と伝えて、それを言語化してもらっていました。それ自体はすごく参考になりました。
ただ、途中で、見た目の好みだけからルールを作ると、自分が本当に解決したかったこととズレる場合があるなと思うようになりました。Trelloがかっこいいから、全部Trelloみたいにすればいいわけではない。
Asanaの見た目をもっとシュッとさせたら最高なのに、と思うことはありますけど、私がAsanaを使っている理由は、見た目とはまた別のところにあります。逆に、見た目がめちゃくちゃ好みでも、実際の作業には合わないこともある。
「気分が上がるUI」と、「私が実際に長時間使って、これいいなと思うUI」は別のものなんですよね。もちろん、見た目も大事です。でも、見た目と実用性のバランスをちゃんと取らないといけないなぁとも思ったんです。
「誰が、何をするためのアプリなのか」まで戻った
そこで、だんだん個別のデザインから離れて、「そもそも私は何をメインの思想としてこのアプリを作るんだろう」というところまで戻るようになりました。もっと大きく言えば、「そもそも栞屋で何をやりたくて、こういうものを作っているんだろう」というところです。
そこを整理していくと、不思議なくらいUIが自然に決まっていきました。
・私は文章を書く人が使うプロダクトを作りたい→だったら、フォントは選べた方がいい
・文章を書く人の主戦場はキーボード→だったら、執筆を中断させないようにショートカットを作りたい
・長時間パソコンとにらめっこする→だったら、ダークモードが欲しい
・情報を文字だけで管理すると私は見落とす→だったら、色も状態を伝えるために使いたい
結局、「誰に、どういう場面で使ってほしいのか」を突き詰めると、色とかフォントとかボタンとかショートカットとか、その下にある仕様がかなり自然に決まってくるんですよね。
私が先に作るべきだったのは、デザインプロンプトではなく思想だった
UIデザイナーの人からしたら、「いや、それ初歩の初歩では？」という話なのかもしれません。でも、私はAIでアプリを作り始めて、それを実際に自分で何本か作って触って、初めて実感しました。
まず、「このプロダクトを、どんな人に、どういう場面で使ってほしいのか」を考える。そこから、「これは絶対に外してほしくない」という自分なりの原則を決める。
それを言語化して、AIが実装するときにも使えるルールにしていく。そうすると、その下にUIがついてくる。私は最初、細かいデザインの指示をChatGPTに出したり、好きなプロダクトを参考にしたりしていました。でも、他社のプロダクトを真似すればいいわけでは全然なかった。
むしろ私の場合、参考にしたけど、そのままでは参考にならなかったものもあります。結局一番の近道だったのは、「自分は何を作りたいのか」を先に言語化することでした。AIに詳細なデザインプロンプトを渡す前に、何のために作るのか・誰に使ってほしいのか・その人にどういう状態で使ってほしいのか、そこを決める。
思想が決まったら、UIはあとからかなり自然についてきたなという結論に至りました。
なので、そういうものを「ビジュアルガイド」と名付けて、すべてのアプリを作る時に仕様段階で「このビジュアルガイドを参考にしてください」と伝えておくと、初期段階でUIっぽいものも見えてくるのでおすすめですというお話でした。
