概要
この記事は、株式会社アイスタイル Advent Calendar 2016 の7日目の記事です。
アイスタイルに入社して３ヶ月が経ちました。
前職ではwebデザインをしていたのですが、アイスタイルではUIデザインをする事が多くなり、"一般的なwebサイトにおけるUI" と "サービス運営サイトにおけるUI"とでは考え方が違うと感じたので、改めてUIについて考えてみました。
こういう技術系記事は初めて書くので、優しい目で見てもらえると嬉しいです。
webデザインとUIデザイン、ついでにUX
皆さんご存知かとは思いますが、一応定義。
webデザイン
webサイトにおける視覚面に対し、整理・再構築・意匠などを施すこと
wikiより引用
個人的には、商品（プロダクトやサービス、企業のブランドなど）をより良く見せるためのサイトデザインと考えています。
UIデザイン
UIはユーザーインターフェイス（User Interface）の略で、ユーザーがサービス（製品）を使う時に接触する部分を指します。
UIはweb以外でも使われますが、今回はwebデザインの中に含まれるUI（操作性）をデザインするという定義で話を進めたいと思います。
UX
UXはユーザーエクスペリエンス（User Experience）の略で、「体験価値」と言われたりしています。
簡単にデ●ズニーにたとえて言うと、
UX=ディ●ニーランド楽しい！（体験）
UI＝キャストの対応が素晴らしい！（接触）
です。
２つのUIについて考えてみた
さて、本題である"webサイトにおけるUI" と "サービス運営サイトにおけるUI"では考え方が違うと感じた件について話を進めます。
webサイトにおけるUI
上記で定義したように、今まではwebデザイナーとして見た目におけるUXを満たすためのデザインをしてきました。
企業のコーポレートサイトや商品のLPなど、一度見て印象に残るようなデザインを求められていたからです。
そうなると、必然的に必要となってくるUIは見た目に関わるものになります。
一例を挙げると、
- トレンドに合わせた見た目
- フォントサイズ
- ボタンサイズ（タップエリア）
- 画像解像度
- フォームの使い勝手（エラー表示など）
などです。
サービス運営サイトにおけるUI
一方サービスの運用がメインとなるアイスタイルでは、サービスを継続して使用してもらうために使い勝手が最優先となります。
そのため、ユーザーが抱える問題が何なのかを判断し、解決できるデザインを作る事が大事になってきます。
またアイスタイルにはサービスが多く存在し、出来ることが多い分ユーザーの行動パターンも多様化します。
ユーザーの行動が読みづらいからこそ、UIを高めてそれをUXに繋げるという考え方にシフトしなければならないと感じました。
UIデザインを意識して、入社してからやった事
考え方をUIメインに変えてデザインをした時、解決するデザインができているかはまだわかりませんが、今までよりも見た目の裏側に気を配って考えるようになりました。
数は少ないですが、入社していくつか関わった案件から以前より気にするようになった事を挙げていきたいと思います。
フォントはなるべくデバイスフォントまたはwebフォントを使用する
今までは雰囲気作りのためタイトル部分は画像にする事も多かったですが、更新性やSEOを考えてデバイスフォントを使用するようにしました。
今はgoogleのwebフォントが充実しているので、雰囲気を作りたい時はここからフォントを探して使ってみるのもいいかと思います。(英数字のみ)
アイコンはcssで描画またはsvgで書き出し
データが膨大なため、少しでも容量を軽くする事を意識しました。
デバイスごとのニーズを考える
例えば長文を表示する際、PCは全文表示、SPは一部非表示でページ全体を把握しやすくするなど考えました。
アクションは効果を狙う場所に最低限で
以前は体験して楽しいというUX向上のために付けていましたが、今はUI向上のためにアクションを付けるという考え方に変わりました。
可読性を考える（jis規格を意識してみる）
沢山の人に使って欲しいサービスだからこそ、色差やサイズ、ホワイトスペースなどを使用し、どんな人でも分かりやすくを考えるようになりました。
まとめ
結局やっていることは以前とあまり変わらないのですが、前より少し“ユーザーがどう感じるか”を意識するだけで、作るデザインは変わってくるんだと感じました。
今進んでいる事業計画もサービスが使いやすくなるようにというUX向上のためのものなので、UIデザインでちゃんとお役に立てたらと思います。
まだまだ勉強がんばります！
明日は
hirosesaさんです。記事楽しみにしてます！
おまけ
UIの参考にしているgoogleマテリアルデザイン
タイポグラフィーのスタイルなど参考になります。
https://material.google.com/jp/
気になる文字組み技術
font-feature-settings プロパティ
https://ics.media/entry/14087/3
最近教えてもらったプロパティ。opentypeのフォントを詰めてくれます。(ヒラギノや游ゴシックで力を発揮)
letter-spacingと合わせて読みやすい文字間と行間を意識したい。
気になるデザイン
コンプレクション・リダクション
http://uxmilk.jp/48364
UIとは関係無いですが、最近流行っているみたいなので。
最新のiTunesで使われているような、タイトルが大きくてモノクロの、ミニマルなデザイン。