お化粧する際の6つの指標

お化粧する際の6つの指標

インターフェースの改善をする際に気にしてることを改めて考えてみた。普段感覚的にやってることを抽象化してみるとこの6つに分かれるのかなーと思う。

近接
整列
対比
反復
ホワイトスペース
シグニファイア


デザイン4原則+なんか聞いたことある用語2つ。たぶんここをそれなりに押さえれば60点は取れるし、ちゃんとやれば80点は固い。あくまでお化粧の話。そもそもこれどうがんばってもやりたいことやれないんだけど?みたいな破綻したアプリをよくする特効薬なんかあるはずない。それぞれイイモノをもっているにも関わらず、お互いが干渉し合ってなんかごちゃごちゃしてる画面とかを、ちゃんと本来のパフォーマンスが出るように整える&引き上げるための手段についての話です。

4原則

これは有名すぎるというかグーグル先生に聞けば分かりやすく図解してくれるサイトが山ほどあるのでそちらをご覧ください。同じようなことを書くつもりはないので、ここではもうちょっと現場寄りの話を。

見えない線がちゃんと見えることが大事。(ちょっとなにをいってるのかわからな。。笑)

ディスプレイとにらめっこする。近接と整列をちゃんと意識したデザインであれば、要素がかたまりに見える。見えない場合はディスプレイから少し離れてみる。それでもかたまりが見えなかったらなにかがおかしい。かたまりになった要素同士を隔てる余白が線に見えたら大丈夫。関連性が強いもの同士でかたまりになっているかどうかは言わずもがな。

白黒モードにする。Chromeだとこんなextensionがあるのでおすすめ。

(un)clrd

主張すべきものがちゃんと主張されているか、そうでないものがちゃんとおとなしい状態にあるか、はこれで確認できる。boldをちゃんと使い分けてるかどうかも併せて見る。

反復は見る視点がちょっと違ってて、合わせる・合わせないを意識して選択しているか、を見る。「類似コンテンツはUIを合わせる」は原則ではあるが、同じものが反復されることによって現在地が見えづらくなる場合があるし、要素が均一化される反動として視認性が損なわれる可能性もあるから。pinterestがいい例。

ホワイトスペース

お弁当箱発想をやめる。おかずいっぱいぎゅうぎゅう詰めの状態にしない。2~3口食べたあとの状態がちょうど良い。

可変コンテンツを気にする。短い場合もあれば長い場合もあるからとりあえず長くしておこうは基本NG。ふり幅が大きい場合はそもそもそれらを並べること自体が問題な場合もある。基準をどこに設けるのか、はみだす場合の表現はどうするのか、をちゃんと気にする。

見える範囲を気にする。ブラウザの横幅を縮めたりスクロールしてみたら思わぬ状態になってた、が起こらないようにする。

シグニファイア

アフォーダンスとシグニファイアがごっちゃになって使われる場合が多いが、ここではシグニファイアの話。というか、アプリのインターフェース設計時にアフォーダンスなんて言葉はあまり出てこないはず。
(もちろん例外もある。) 結構間違った使い方というか概念が蔓延してる気がしてならない。

テキストに意味が通っているか、押せるものがちゃん押せそうか、押せないものがちゃんと押せなさそうか、押したあとになにが起こるか予想できるか、なにを入れればいいか迷わないか、を気にする

ぶわーっと書いてみたが、ここらへんを普段意識してる気がした。この6つの指標で考えていればいい感じのお化粧になると思うし、繰り返し行うことで肌感覚を掴めるはず。ぜひ試してみてください。