観察から始めるデザイン

アドベントカレンダー2025 UIUX

2025-12-15

はじめに

　こんにちは、12/15のアドベントカレンダー担当のまこちゃーんです。自分も今年でアプリ開発歴4年目となりますが、振り返ると、実にたくさんの領域を触る機会をもらえたなぁと感じています。フロントエンド・バックエンド・サーバインフラ・デザイン。Webアプリ・ネイティブアプリ・Unityゲーム・機械学習。

　その中でも今日は、自分でもあまり話すことはないのですが「デザイン」についてお話しできたらいいなと思っています。

　ハッカソンに参加すると、みんな口をそろえてこう言いますよね。「自分、デザインのセンスなんてないっす…」

でも、そもそもデザイン自体センスなんかじゃない！！！そう思ってます。今日はそんなデザイン ≠ センスなお話しをして、デザインに踏み込めない人の助けが出来ればと思います～～

デザインを理屈にする方法

1. デザインを見つける

　デザインをセンスでなくするためには何をすればいいか？

観察してください！（河野玄人）

　例えばスーパーに行くとき。調べ物をして企業のサイトを訪れるとき。何かゲームをしているとき。そのたびに皆さんはデザイナーが作り上げた作品にこれでもかというほど触れているんですよ、実は。

これはあるスーパーで見つけた広告です。思わず撮っちゃうぐらいには目を引きました。値引きの「引」が、下矢印と組み合わせられて、値段が下がっていることを補強しているのがとてもいいですね︎︎👍

こちらはある施設の券売機UI。言いたいことは沢山ありますが、それはまた後ほど……

ここで挙げたのは本当に一部であるほど、デザインは様々なところに溢れています。自分は、いいなと思ったり、よく考えたいなと思ったデザインは写真に収めるクセがあります。このクセがあると、デザインをするときに使えるデザインの引き出しが増えます。これが大切なことだと思います。

2. デザインの理由を見つける

　デザインを見つけたときに、そのデザインについて軽く考えてみることはとても良いことだと思います。例えば、

なぜいいと思えた / 思わず見てしまったのか？
〇〇の所はどんな意図があってデザインされているのか？
どこが良くないと思ったか

などでしょうか。広告やUIは、無意識に触る部分である以上、どうしても「何かいい」、「何かクソ」みたいに、ぼんやりとした評価をしてしまいがちです。でも、せっかくデザインをするなら、その理由を考えたいんです。無責任に批判しては、ぼんやりとしたアンチパターンがたまるだけで、そのデザインのどこが悪いのかということに注目できず、自分に活用することが難しいままになってしまいます。それは、ちょっともったいないですねぇ…

　先ほどの例を見てみましょうか。まずは1つ目の広告です。

どんなところに自分は目を惹かれたかといえば、

値引きの「引」が、下矢印と組み合わせられて、値段が下がっていることを補強している
その矢印が値引商品の方に向いている
黄色・赤・黒で、注意看板の配色と一緒なので、物々しい感じがする

ところです。それに対して、自分がうーん？と思った点を挙げると、

右の広告の黒背景の所で、赤い文字で「本日」と書いてあるのは見づらい
左の広告左上にある「まだまだおいしく食べられます！」の所で、なんで「おいしく」の上に点が表示されて強調されているんだろう

という点です。一番最後のものは、自分の今まで見た広告の中では、「状況が特別」なものに対してルビ点をつけるイメージとの乖離を思ったのがきっかけです。それを踏まえると、恐らく「まだまだ」のほうにルビ点があるべきなんだろうなぁとも考えたりします。けど、そこまで踏み込む必要はなくて、「どこがよいか」、「どこがうーん？と思ったか」という点だけでも考えてみるのが大事だと思っています。

こちらは2つ目のデザインですね。左の方で感じたことを挙げると、

文字色によって見づらくなる点が無い（＝配色が考えられている）
ボタン間が飛び過ぎていて、気づきづらい
小学生ボタンにおける料金表示が小さくて見づらい（押して赤枠が追加されたら見切れる）
余白が大きすぎる
丸枠に対して角ばった枠の赤枠がかぶさっており、視線はひくが不自然

とかでしょうか。何より、使えることは最低ラインとしていいと思いますが、触る側としては、ちょっとお粗末に感じてしまうかもしれません。特に、「小学生ボタンにおける料金表示が小さくて見づらい」といった問題は、この券売機ではどちらもタワーのチケットを販売しているため、そもそも「シーキャンドル（タワー）昇塔券」という文字は入れずに、「大人 500円」、「小学生 250円」の文字だけでもいいように感じましたね。これも、今までのインプットがあるから気づけることだと思います。

　このように、デザインを見たときに、ただ良くない・良いと言うだけでは発見できない各論が見つかります。この各論を見たときに、何人かは、自分のデザインに組み込めそう、と思ったのではないでしょうか？例えば、ボタンの文字を洗練するだとか、黄色・赤・黒の配色いいなとか。ちょっとプログラミングな話になりますが、ボタンの文字入れはHTML（もしくはそれに該当するコード）を書く際に誰もが触れることであり、後者もCSSをいじって配色を決定する際に触れることです。

それ、今まで何となくやってませんでしたか？？

配色、これがよさそう！文字、とりあえず入れよう！強調の太字、ここに入れたらよさそう！ボタンの配置、ここでいいかな！など…

これは、自分の感覚に頼る部分では決してありません。ここを感覚でできるように見える人は、実際は無意識のうちにこういったインプットを蓄積して、ちゃんとアウトプットをしているだけです。なので、このインプットをして、どんなことがいいか悪いかというパターンを集めるのは、みんな同じなんです。

では、インプットがどうやったらそれが身につくか？

それは、やっぱり実践に限りますよ！！！！

3. 実際に意識してデザインをする

　どんなデザインも、ダメだと思っても一回落とし込む体験をするのがいいと思います。その際、やはり「どう組み込むかなぁ」ということを考えるのは難しいと思います（自分もそうでした…💦）

なので、その時は「真似」をすればいいんです。サイトでいいなと思った構成、好きなVtuberの配色、デザインのレイアウト。アウトプットは真似から始まるんです。

例えば、自分は以前こんなデザインをしてみました：

時刻表データを加工して、必要な情報を表示するモバイルアプリなんですが、このデザイン、見覚えありませんか？

そう、実際の電光掲示板のデザインそのものです。

みなさん電光掲示板に文句ってあまり湧きませんよね。ということは、このデザインには、何か見やすいと感じる良い点があるということです。

実際にその視点で自分がデザインを見据えたとき、以下の4点を感じました：

ヘッダーの部分は紺色と灰色を混ぜた色合いをしていて、白色とのコントラスト差が小さくなって見やすい
電光掲示のオレンジと緑は、補色の関係になっていてメリハリがある
路線配色を間に挟むのは、路線名と方面の情報を区別するのによい
路線名・方向・時間の要素があれば満足できる＝デザインを加えるならそれ以外の情報

実際に自身が今回考えたのは、現在位置からの所要時間も加味した、間に合うか表示です。これは既存のデザインにはないことが、自分にとっての不便だったので実装しました。そのうえで、その他の要素はやはり電光掲示板は良く実装しているので、それを踏襲しました。実際に触れることで、このオレンジと緑の配色や紺色と灰色の混色のみやすさを知りました。こうやってインプットを実践することで、デザインの力がつくと、僕は思います（また、こうやって再現実装すると、再現するために色んな関数を触ることになるのもいいですね～）。