課題を解決するUIデザイン

課題を解決するデザインとは

デバイスフォントや、Webフォントを（限定的に）利用する

ビジュアルを画像で作成する必要がある場所以外は、運用側としては「更新性やSEO」を、ユーザー側としては「ページの軽さや検索へのヒット」といった意図で、極力デバイスフォント（WindowsやMacにはじめからインストールされているフォントのこと。Windowsではメイリオ、Macではヒラギノ角ゴシックが標準フォントとして設定）を使用するのがベストかなと思っています。

凝った見せ方を画像以外でしたい場合に限りWebフォント（ネットワーク上にあるフォントデータをダウンロードさせて使う）を使う事もありますが、数字のみをWebフォントにするとか一部の日本語のみに使用するなどテキストを限定する必要があり、軽減化を優先して近年はあまり使わなくなっているかもしれません。

アイコンは.svg形式で書き出しで用意する

以前はFont Awesomeなどで、HTMLのタグや特有のクラス名を指定して、サイト上にアイコンを簡単に表示できるサービスを利用したりもしていましたが、サーバーがダウンしていると呼び出せなくなるデメリットもあるため、アイコンに関してはベクター画像として軽く書き出すことができる.svg形式で用意するようになりました。画質を劣化させない（軽い）まま好きなサイズで描画することができるため、複雑な形でなければ極力.svgで用意する方がユーザビリティ向上に繋がるからです。

 ベクターデータで用意するため、IllustratorやSketchなどで原型を作ったり、フリーでダウンロードできるサイトなどから流用するといった流れが一般的かなと思います。作成方法や用意の仕方などはいずれ記事化しようかなと思います。

可読性を考える

可読性はセンスではなく、文字コントラストの確保や文字の読みやすさなど、知識で解決できる問題も非常に多いです。そこには配色も大きく関係します。

センスだけではない配色は、ユーザビリティだけではなくアクセシビリティ(JIS X 8341-3:2016などを参照：概要としては、高齢者・障がい者等が情報通信における機器・ソフトウェアによって実現されるサービスを支障なく操作または利用できるよう配慮すること）にも配慮することを指します。ちなみに規格番号の「8341」は「やさしい」の語呂合わせだそうです 笑

「コントラスト比 ツール」などで調べると、サイト上で背景色や文字色を入力するだけで達成レベルを数値化してくれるサイトがいっぱい出てくるので、参考にすると良いかもです。

「AA」以上がベストとされますが、なかなか基準に達するには難しいかもしれません。コントラスト比が大きいほど、色の差が激しい＆文字サイズに比例するため、サイトとしてのまとまりを意識するとバランスが崩れるケースが多いからです。このブログも、Cocoonのスキンを利用させていただいているので色々厳しいと思いますが、使い勝手との折り合いで調整していけたら良いのかなと思っています。

デバイスごとのニーズに合わせる

モバイルファーストでデザインする（スマートフォンでもストレスなく利用できるようSPから先に設計）という流れになってからは、長文を表示する箇所において（例えば）SPは一部非表示、PCは全文表示ということを頭に置きながらデザインを作る事が主流になりました。

凝ったキービジュアルを作る場合は先にそこだけPCサイズで作ってからSPサイズにリサイズする、という流れもありますが、それ以外のUIやパーツは、文字量や重量などを意識しながらSPで作る事がスタンダードになったかなと思います。ユーザーにストレスを与えない配慮という意味で、必要最小限の情報を適切なレイアウトで設計する重要性が問われるようになったと思います。

まとめ

他にも、記事に書きましたがデザインの4大原則や色の3属性など基本の原則を理解する事や、前回の記事で少しかいたマテリアルデザイン（明確なガイドラインが定められたデザインシステム）などを知った上で、ユーザビリティを押し上げるインタラクションや見せ方などで課題を解決していける道はまだまだ色々とありますが、私も日々勉強しながらなので、ここに関しては少しずつ記事化していけたらいいなと思っています。