あんど

2019-04-19に更新

個人開発のUI設計術

読了目安：11分

あんど( @ampersand_xyz )と申します。
クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。
個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。
なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。

1.画面サイズの最大・最小幅を最初に決めておく

まずはじめにここを決めます。
いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を保つことが難しくなります。
これの対抗策として、コンテンツの最大幅・最小幅を最初に決めてしまいます。
基準としては、最小は未だに人気の高いiPhoneSEの解像度である320px、最大幅はPCもそんなにデカいディスプレイを使ってる人ばかりではないので1024px程度で良いかと思います。

2.制作物のコンセプトを決める

これも早い段階で決めます。
このあたりが決まらないといつまでも色をどうするとか、フォントをどうするとか迷い続けることになります。
具体的に決める内容としては「このプロダクトは優しい印象をもって欲しいから丸字のフォントを使う」とか「真面目な印象を与えたいのでクール系の色にまとめる」とかそういう感じです。

「アジャイルだからやってみてから決める」とか「デザインしながらコーディングするからそれは後回しでいい」とか、そういうセリフはその手法でどうにかなるレベルの規模の開発か、それでどうにかなる達人のセリフです。おいそれと真似できるものではありません。
時間と労力を無駄にしないために物事を進める上で決めなきゃいけないことは先に決めましょう。
現実として、それでも戻らなくてはいけない時、というのは得てして起こり得るものですが、その時のダメージも決めることを決めた上で戻るのか、そうでないかでダメージはずいぶん違うものです。

3.採用する色を決める

コンセプトに合わせた色を決める

この段階でカラーコードを厳密に決める必要はありません。それこそ後で調整をしながらしっくり来る色を探せば済みます。
ここでは、メインに据える色、サブとして使用する色をなんとなく決めていきます。
決めるための基準として2.で決めたコンセプトを拠り所とします。
コンセプトに見合う色を色彩心理学に基づいて決めるのが短絡的な近道ですが、テーマやモチーフ等がある場合はそれに沿うこともベターな選択肢であると思います。
色彩心理学の説明はこちらのページの「それぞれの色彩が与える印象を活用して配色できているか？」の項目が参考になります。
https://liskul.com/wm_cpsychology-4111

ユニバーサルな色であるか確認する＋α

wikipediaからの抜粋情報ですが、先天性色覚異常を持つ人は、日本においては男性で約5%、女性で約0.2%の割合であるが、フランスや北欧では男性で約10%、女性で約0.5%であり、アフリカ系の人では2～4%程度であり、日本全体だけでも日本全体では約290万人が存在するとされています。
思っているよりもずっと色覚が自分と異なっている人は多いということ、また、自動車免許を取得される場合は気づくかもしれませんが、自身が色覚異常であると気づいていないケースもありえます。
大事なのは異常が云々ではなく、自分が見えてるものが相手にも同じに見えているとは限らないということを念頭に置く必要があるということです。
では、何を考えなくてはいけないかというと、より多くの人が判別しやすい色使いでUIを作成するということです。
ここでいうUIとは、あしらいや彩りのことではなく、「見えていなくては困る情報」を指します。
具体的な例を示します。

これは極端に見づらい色をチョイスしていますが、色覚異常がある場合はそもそも文字があることを認識できない、という問題になります。
背景色を敷いている場合は、文字情報はコントラストをつけるようにすると解決します。

また、色だけで区分が明確にならない場合が存在します。
例えば赤と緑は色覚異常がある場合判別しづらいことがあります。そういった場合に備え、アイコンや文字表現などを用いてより明確化を図ります。

4.CSSフレームワークとの付き合い方を決める

BootstarapやBulma、OnsenUIなど色々ありますが、CSSフレームワークを採用する場合、はじめからあまり改造を必要としないUIを作るように画面設計するのが無難です。

自分のサービス独自の仕様となるような込み入ったUIを作る場合は、CSSフレームワークを魔改造するより自前でゼロから作ってしまうほうが綺麗で応用が効くものが作れると経験上思っています。
CSSフレームワークを手放せない、という方も一度フルスクラッチで作ってみることをオススメしたいです。
多分なれればゼロから自分で作るほうが早いはず（と、自分は思っていますがUIフルスクラッチゴリラの暴論かもしれません。ご自身に合った方法を選んでください）。

5-1.画面設計をする

ツールは何でも良いのですが、画面設計をします。自分の場合はAdobe XDを使っています。
この工程は「自分が作ろうとしてるものを自分でより具体的に認識する」ためのものです。
ある程度この段階で「これ思ってたより作るのがめんどくさそう」と判断出来たり「これ要らなくね？」というのが見えてきます。
実装してから、要らなかったかもな、と気づいても開発にかけたサンクコストによって切り捨てづらくなったりします。
また、自分の場合は一人でやっているのでそこまで問題にはなりませんが、共同開発をしていてパートナーに作ってもらった機能だったりすると、捨てづらさはもっと大きなものになるでしょう。
望まない悲しみを避けるためにも、判断は最低限のダメージですむうちに行うのが基本です。

また、ワイヤーフレームの作成と、ビジュアルデザインUIの作成はまったく別の工程の作業になるので、混同しないようにしましょう。

余談ですがこれはクイズメーカーを作成していた時、時期にして2018年7月末頃に作っていたワイヤーフレームの一部です。
色々名残は残っているのですが、結構紆余曲折しました。

1個あたりのサイズが小さかったり項目追加に対する強さが微妙なのでボツに。

なんか色周りについて締まりがなくてだいぶ迷走していました。

5-2.出来るだけ1カラムのUIにする

一般向けのウェブサイトにおけるモバイルからの閲覧が8割以上を占める昨今において、広いデバイス側にあわせてUIを構築するのは誰にとっても旨味があんまりありません。
あわせ、開発に無駄なコストがかかりがちです。
言葉だけで説明するのは難しいので図解するとこういうことです

一見なんとなくありがちな感じのこういうフォームですが

何も考えないで画面サイズで縮小するとこういう感じになる未来が待ってます。悲しいですね。

では入力項目を縦に並べるのはどうでしょう。

マシになったように見えます。しかし項目名に「メールアドレス」より長い要素が来た場合はどうなるでしょうか？そういう部分にも思いを馳せて設計していく必要があります。
また、「メールアドレス」みたいな長い項目名はこういう事になりがちです。

悲しいですね。

余計な例が多くなりましたが、1カラムでUIを設計することでこの辺の問題は結構解決します。

スッキリしましたね。
横幅の可変対応にも強く、項目名称の文字数にも余裕を取ることができました。
また、項目ごとのまとまりも分かりやすくなったかと思います。
バリデーションメッセージなどを表示させる場合も、縦に伸ばしてやる方向で対応することが出来るため、UI周りが見た目もマークアップもごちゃつかずにスッキリさせることができます。

チェックボックスやラジオボタンを添える場合などでマルチカラムのUIを用いる場合は、1行に可変長の列を1つ以上持たないようにするという形で秩序を保つことができるかと思います。

5-3.可変長の項目が問題ない配置になっているか確認する

ユーザーが入力して設定するもの（例えばユーザ名や投稿するコンテンツの内容など）が、レイアウト的に問題ないか確認しておきます。
配置的にどうしようもない場合は、N文字以上は「...」にするなどの対策を検討します。

5-4.「見えない線」を揃える

人間は無意識に「見えない線」を引いて色々なものを区別しています。
例えば5-1で出したこの入力項目を例にします

これを、見えない線を崩してやるとどうなるでしょうか

このようになります。項目は同じなのにすごく気持ち悪く、なんだかイケてなさを感じないですか？

見えない線を可視化するとこんなかんじになります。

この線のリズムがずれる時、人間は違和感を感じ、それを洗練されてなさとして認識します。
この例はかなりミニマム単位を取り上げていますが、範囲が大きくなっても同じ考えを適用できます。
逆に、強調したい要素はあえてこの線のリズムを外してやることで目線を引っ張ることもできます。
ていうかこの辺揃ってないと実装のときも辛いです。
また、余白のスペースのとり方については2の累乗数を用いるとしっくり来ます。
その理由については、こちらのブログ記事を御覧ください。ちょっと昔の記事ですが、エンジニアにも分かりやすく、最新でもバリバリ使えるデザイン・UIに関するプリミティブな知見情報ですのでご一読を強く推奨します。
https://ameblo.jp/ca-1pixel/entry-11837685575.html

5-5.トーンを整える

アイコンフォントやフリーイラストを使う場合は「複数のところから使うものをもってくると統一感（トーン）がバラバラになってダサく見える問題」が起こります。
自分はそれが嫌で絵やアイコンを自分で描くようになりましたが、基本「混ぜて使うことを避ける」だけで十分かと思います。

6.文言を考える

説明文やボタンに表示する文言を考えます。
自分が決める上で重要としているポイントとしては 「分かりづらいスタイリッシュより分かりやすいダサいのほうがずっと良い」 ということです。
伝わらなければゼロですが、たとえ伝えたいことの3割しか伝わってなかったとしても、ゼロとは圧倒的な差です。
楽にこの辺を実践する方法としては「アクションが何をするのか説明する」です。あと、多少文章になっても構わんという気持ちをセットで持ちます。

具体的ではない例。フォームだけでは何をしているシーンなのかは断定しきれません。

具体的にした例。どういう機能を使っているのかを判別できるので操作をしているときに何をしているのかを見失わず、確認をするための判別コスト＝ユーザのストレスになる要因を軽減できます。

7.アニメーションをどうするかまずは脳内で考える

アニメーションは大きく分けて「演出」と「操作支援」として考えています。
演出とは、例えばランディングページの装飾として使うような派手なものや、要素をフローティングさせたりするなどです。
操作支援は例えばスムーススクロールであったり、ブラウザのスワイプ時のページ送りなどにみられる、ユーザーの画面操作のトリガーとその結果を見えるようにつなぐアニメーションです。
例えば画面内リンクはクリックした瞬間（画面操作のトリガー）に、画面内の遠くの要素に突然飛んでしまうと「いまどこに来た？」となるので、スクロールをアニメーションして移動地点（操作の結果）をつないでやる、という意味合いになります。

アニメーションは使い方が難しい要素です。
人間は「動いているものを意識してしまう」ものです。要素にパルスやフローティングなどのアニメーション演出を加えると、効果的に視線を集める事ができます。
反面、「意味なく動いているものがずっと視界に入りつづける」ことはストレスになるので避けるべきかもしれません。
また、アニメーションがもたもたして操作が妨げられることもストレスになります。
例えばメニューボタンを押したのに3秒ぐらいモサモサしてるとか演出が入って操作できないとかイライラしますよね。
ものによっては「ほんとにアニメーションさせて表示する必要があるのか？」などを考えます。
余談として個人的な感覚ですが表示／非表示切り替え系だと、フェードなら表示0.3秒、非表示0.2秒、トグルなら表示0.5秒、非表示0.3秒、ぐらいでなんとなく収まりがいい感じになる気がします。

8.ロゴなどを作る

ここはメチャメチャ難しいです。後回しにしても構わないと思います。
もしあなたが作るサービスをビジネスとして本気でスケールさせるような場合はロゴデザインを信用できる先に依頼するのが良いかと思いますが、
まず趣味のレベルでやる場合は、かっこいいフォントのパワーに任せるのが安全パイです。
無料フォントでもイケててカッコいいものはたくさんあります。特に英字フォントはかなりバリエーション豊かなので、大抵の要望に叶うものは見つかると思われます。
ロゴに日本語フォントを使う場合は「ためしがき」を使うと手軽に比較でき、かつライセンス的にもクリアなものが一覧化されています。
また、有料フォントはたまに95％オフとか「収益どうなってんの？」みたいなセールが開催されることがあります。そういうときにはぜひ買っておきましょう。イケてるフォントは強力な武器になってロゴ作成のみならず様々な場面でデザインを支えてくれます。

9.あとは気合で実装する

ハァーッ！！！！！！！！！！！！！！！！！！！！

以上のことを全部守ると実装の都合を考えすぎたつまらんUIが出来上がります

実装を知るがゆえに負担の少ない道を選びがちになる傾向があります…。
作成するサービスそれぞれの独自性や遊び心や工夫を忘れないようにして頂ければ幸いです。

追記：つまらないUIというのは良い意味でも悪い意味でもあります。
つまらないと感じるほど見慣れた、慣れ親しんだものは言いかればアフォーダンスへの則りがよく行われており、人を迷わせることがないUIであると言えます。
プロフィールや設定系のフォームなどは、つまらない＝平易で分かりやすいUIであるほうが望ましいとも言えます。

では、つまらなくないUIとはなにか、といえば「使った時に気持ちがいい」ようなものかな…と思っています。
それを多分言葉で表すと「マイクロインタラクション」というものになると思うんですが、それをどのように実現するかはサービス独自のコンセプトやデザインによって遊び心を加えるような部分になると思っています。
例えばnoteなどのブログサービスにある入力して保存するとピュッと上の方に細いバーが走って保存した、ということを体感として表すようなものとか、操作に対してリアクションをしてくれるようなものですね。

これは余談なのですが、マイクロと呼ぶにはちょっと大きいインタラクションもアリかと思っていまして、手前味噌でおこがましいのですが、 meeemo というメモアプリを作ったさいに削除の動きにちょっと遊びをいれたのが意外と好評で嬉しかったところでした。ただ、全部の操作やUIをこんな感じに演出過剰にしてしまうと胃もたれが起こりますので、留意が必要です。