UXデザインについて学ぶ　6.12

/ blog / By

今日は、UI、UXデザインについて学びました。

求人を探しているとよく出る言葉なので、しっかり意味や仕事内容を覚えておきたいです。

1.UXデザインとは

UXデザイン（ユーザーエクスペリエンスデザイン）：

ユーザーが製品やサービスを利用する際に感じる体験を設計すること

■UXデザインの3つの要素

ユーザー中心：

常にユーザーの視点に立ち、何が求められているのかを深く理解することが重要

全体像：

購入前の情報収集から、購入後のサポートまで、一連の体験を設計します。

感情：

ユーザーがどのような感情を抱くのか、どのような体験をしてほしいのか、といった感情的な側面も考慮します。

■なぜUXデザインが重要なのか？

顧客満足度の向上 :

ユーザーが使いやすい、楽しいと感じれば、製品やサービスに対する満足度も向上します。

リピーターの増加 :

良い体験をしたユーザーは、再び利用したいという気持ちになります。

競合との差別化 :

UXデザインを徹底することで、他の製品やサービスとの差別化を図ることができます。

■UXデザインに関わる仕事

UXデザイナー : UXデザイン全般
UIデザイナー : ユーザーインターフェースのデザイン
情報アーキテクト : 情報構造を設計
インタラクションデザイナー : ユーザーとのインタラクションを設計

2．UIデザインとUXデザインの違い

■UI（User Interface）とは？

パーツをどのように配置し、どんなデザインにするか、という設計図を描くようなも
・スマートフォンの画面上のボタンやアイコン
・ウェブサイトのメニューやフォーム
・ゲームのコントローラ

■UX（User Experience）とは？

ドライブに例えると、目的地までの道のり、車の乗り心地、景色など、運転中に感じる総合的な体験のことです。
UXデザインは、目的地までのルートを設計したり、車の乗り心地を良くしたり、景色を楽しめるような工夫をしたりするようなものです。
・ウェブサイトで目的の情報をスムーズに見つけられたか
・アプリの操作が簡単でストレスを感じなかったか
・ゲームの世界観に没頭できたか

3．UI　UXデザインのアイディア

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

（1）タッチデバイスではボタンの領域を広く取りましょう。

～の要素タグはインライン要素になります。 その為、幅と高さを持たせる為に「 display :block;」を上手く活用してみましょう

(2)ポインターが無い場合は、リンク箇所のデザインルールを変えてみましょう。

※ポインター：カーソルのこと。リンクに触れると形が変る。

　→ポインターがない＝スマホなど

サイト全体でテキストリンクの箇所は「このデザイン」というルールを統一しリンクが付いていることを解りやすくしてみましょう。

（3）リンクの付いたバナーデザインはより解りやすく

画像で作るバナーは、よりクリックしたら詳しい説明のページへ飛んでいくと解りやすく
デザインしてみましょう。

（例）→（矢印）、▷（三角）、青色を用いる

■迷子にさせない導線

（1）画面の面積が少ないデバイスでは、解りやすい導線を組みましょう。

サイト設計の段階で、無駄なリンク無駄なページは排除するのが理想です。
PCの特性、スマートフォンの特性を考えレイアウトを設計してみましょう。

(2)1クリックの動作で、1割のユーザーが離れると言われています。

1ページの内容（ストーリー）を充実させましょう。

(3)ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ

ページを開いて最初に見えるのが「目的の内容」⇒深く読み進めて「次への誘導」
そこに興味のない方には「他の興味」へご案内出来るようにしてみましょう

(参考)LPの作品を増やそう

・コーディングなしでもいいのでLPデザインを増やして掲載しよう。

・レスポンシブルデザイン作成できたらなおよし

■ページの表示スピード対策

①画像

（1）Retinaディスプレイや４Kテレビ等々への対応

Retinaディスプレイの場合解像度が2倍になるので、2倍のサイズの画像を用意し50%のサイズで指定をして画像は表示させましょう。ただし容量には要注意です！

(2)imgとbackground-imageの違いを確認しましょう。

「img」要素はHTMLの文章構造で存在する意味が必要になります。
「background-image」は背景のCSSなので、文法上の意味はありません。上手く使い分けてみましょう。

(3)Webアイコンや「canvas」「SVG」を上手く取り入れましょう

②プログラム

(1)動的プログラム（JavaScript）は表示スピードを低下させます。

(2)CMS等のテンプレートについて

便利な分「何かしらの処理」を行われている場合、表示スピードに影響します。良く確認をしてから利用していきましょう。

(3)誤ったプログラムも表示スピードの低下に繋がります。

HTMLやCSSの記述が誤っていてもブラウザは独自解釈して表示してくれます。
これも表示スピードの低下に影響しますし、SEO（検索エンジン対策）にもマイナスの影響がでます。

■使いやすさの追求

（1）WEBフォントの利用

（2）jQuery の利用

HTML5やCSS3でまだ実現できない動きを補う

（3）Googleアナリティクスの利用

※ページのアクセス数や表示スピード、滞在時間等のデータを取得出来る。無料。