UI/UXデザイン

UXデザインとは

ユーザーが製品やサービスを利用する際に感じる体験を設計すること。UIデザインよりもマーケティング要素が強いため、市場調査・ターゲットの絞り込みなどが重要になる。納品後も改変していく仕事が発生する場合もある。
（UIはクリックのしやすさやなど、分かりやすい操作性を設計すること）

• ユーザー中心
  常にユーザーの視点に立ち、何が求められているのかを深く理解する必要がある。自己満足でないこと。
• 全体像
  単に画面のデザインだけでなく、ユーザーが製品やサービスに触れる全ての場面を想定する。
  例えば、購入前の情報収集から、購入後のサポートまで、一連の体験を設計する。
• 感情
  ユーザーがどのような感情を抱くのか、どのような体験をしてほしいのか、といった感情的な側面も考慮する。

UXデザインの具体例

Webサイト : 使いやすいナビゲーション、見やすいレイアウト、スムーズな情報検索
スマートフォンアプリ : 直感的な操作性、美しいデザイン、パーソナライズされた機能
家電製品 : 簡単な操作性、安全設計、快適な使用感

UIとUXの違い

簡単に言うと、UIは運転席、UXはドライブそのもの。
UIはUXの一部。UIが使いにくければ、UXも悪くなってしまう。しかし、UIが良くても、UXが良いとは限らない。どちらも意識してデザインする必要がある。

UI（User Interface）

車の運転席に例えると、ハンドル、アクセル、ブレーキ、メーターなど、実際に触れる部分、つまりユーザーがシステムと直接やり取りするインターフェースのこと。
UIデザインは、これらのパーツをどのように配置し、どんなデザインにするか、という設計図を描くようなもの。

具体例

• スマートフォン→画面上のボタンやアイコン
• ウェブサイト→メニューやフォーム
• ゲーム→コントローラー
• ECサイト→買い物カゴの使い勝手・決済方法など

UX（User Experience）

ドライブに例えると、目的地までの道のり、車の乗り心地、景色など、運転中に感じる総合的な体験のこと。
UXデザインは、目的地までのルートを設計したり、車の乗り心地を良くしたり、景色を楽しめるような工夫をしたりするようなもの。

具体例

• ウェブサイト→目的の情報をスムーズに見つけられたか
• アプリの操作→簡単でストレスを感じなかったか
• ゲーム→世界観に没頭できたか

デザイン知識

ボタン（リンク）の考え方

• タッチデバイス（スマートフォンなど）ではボタンの領域を広くする
• ポインターが無い場合は、リンク箇所のデザインルールを変えてみる
  サイト全体でテキストリンクの箇所は『このデザイン』というルールを統一しリンクが付いていることを解りやすくしてみる。リンク部分は青くするのが一般的。
• リンクの付いたバナーデザインはより解りやすく
  画像で作るバナーは、クリックしたら詳しい説明のページへ飛んでいくということを解りやすくデザインしてみる。『詳細はこちら』のボタンや矢印、view moreなどを付加するとクリック数が増える。

迷子にさせない導線

• 画面の面積が少ないデバイスでは、解りやすい導線を組む
  サイト設計の段階で、無駄なリンク、無駄なページは排除するのが理想。PCの特性、スマートフォンの特性を考えレイアウトを設計する。
  スマートフォンはPCよりも物理的に画面面積が少ないため、情報量が多すぎると迷子になる。
• 1クリックの動作で、1割のユーザーが離れる
  無駄なページ移動はお客様が離れる原因になる。スマートフォンやタブレットで縦に長いページは、クリックに比べてストレスを感じさせないので、1ページの内容（ストーリー）を充実させるのが大切。
• ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ
  1. ページを開いて最初に見えるのが「目的の内容」
  2. 深く読み進めて「次への誘導」
  3. そこに興味のない方には「他の興味」へご案内出来るように設計する

ページの表示スピード対策（画像）

• Retinaディスプレイや４Kテレビ等々への対応
  Retinaディスプレイの解像度は2倍になるので、2倍サイズの画像を用意し50%のサイズで指定をして画像を表示させる。画像サイズが大きくなるほどにwebサイトは重くなるので要注意！
• imgとbackground-imageの違いを確認
  「img」要素：HTMLの文章構造なので、存在する意味が必要。
  「background-image」：CSSなので、文法上の意味はない。（画像検索の対象外）
  それぞれを上手く使い分けてみよう。
• Webアイコンや「canvas」「SVG」を用いる
  「jpg,gif,png」以外の画像表示やコンテンツが実装出来る段階に入って来ているので、上手く取り入れる。ただし、実機検証やブラウザ依存には要注意！
  SVG：パス画像。ロゴなどに使用される。

ページの表示スピード対策（プログラム）

• 動的プログラムは表示スピードを低下させる（JavaScript）
  JavaScriptはとても便利！…だが、プログラムとしてはページの表示速度を低下させる。ユーザビリティ、アクセシビリティという部分を考えて最低限の利用とする。
• CMS等のテンプレートについて
  簡単にWEBサイトを作成してくれるというツール（WordPressなど）は便利だが「何かしらの処理」が行われている場合、表示スピードに影響する。
• 誤ったプログラムも表示スピードの低下に繋がる
  HTMLやCSSの記述が誤っていたとしても、ブラウザが独自解釈して表示してくれる。しかし、表示スピードの低下に影響し、SEO（検索エンジン対策）にもマイナスの影響が出る。検証サイト等を利用し、正しく記述できるようにしよう。

使いやすさの追求

• WEBフォントの利用
  Googleフォントはwebフォントとして使用可能。Adobeフォントはライセンス取得しないと使用できないため要注意。
  無料で使える「源ノ角ゴシック」「源ノ明朝」がおすすめ。上手く取り入れてみよう。
• jQuery の利用
  HTML5やCSS3でまだ実現できない動きがある。ページを重くするという問題はあるが、それよりも「使い易さの追求」を優先するのであれば、上手く取り入れてみても良い。
• Googleアナリティクスの利用
  ページのアクセス数や表示スピード、滞在時間等のデータを取得出来るGoogleアナリティクスは無料で利用することができる。数字（統計）から解析し、より良いコンテンツを作成しよう。

まとめ

ユーザー目線で、相手の気持ちの理解を高めよう！

UXデザインとは、単に見た目を良くするだけでなく、ユーザーがより良い体験ができるように、製品やサービスを設計するプロセスのこと。
UXデザインを意識することで、より多くの人々に喜ばれる製品やサービスを生み出すことができる。