2025.12.26 学習記録 ～UXデザイン～
Kumiko Okawara用語
- UXデザイン（User Experience Design）
ユーザーが製品やサービスを利用する際に感じる体験を設計すること。
（サイトで目的の情報がスムーズに見つかる、アプリの操作が簡単、ゲームの世界観に没頭できる） - UIデザイン（User Interface Design）
ユーザーがシステムと直接やり取りするインターフェースに関わるデザイン。UIはUXの一部。
（画面上のボタンやアイコン、サイトのメニューやフォーム、ゲームのコントローラー）
UXデザインについて
UXデザインのポイント
- ユーザー中心
常にユーザーの視点に立ち、何が求められているのかを深く理解することが重要。 - リサーチ
ユーザーのニーズや行動を調査する。
画面のデザインだけでなく、ユーザーが製品やサービスに触れる全ての場面、
（購入前の情報収集から購入後のサポートまで）一連の体験を設計する。 - 体像
ユーザーがどのような感情を抱くのか、どのような体験をしてほしいのか、といった感情的な側面も考慮する。
UXデザインの具体例
- Webサイト : 使いやすいナビゲーション、見やすいレイアウト、スムーズな情報検索
- スマートフォンアプリ : 直感的な操作性、美しいデザイン、パーソナライズされた機能
- 家電製品 : 簡単な操作性、安全設計、快適な使用感
UXデザインに関わる仕事
- UXデザイナー : UXデザイン全般を担当する。
- UIデザイナー : ユーザーインターフェースのデザインを担当する。
- 情報アーキテクト : 情報構造を設計する。
- インタラクションデザイナー : ユーザーとのインタラクションを設計する。
UXデザインの流れ
- リサーチ
ユーザーのニーズや行動を調査する。 - ペルソナの作成
代表的なユーザー像を作成し、設計の指針とする。 - ワイヤーフレーム作成
画面の骨組みを設計する。 - プロトタイプ作成
動く画面を作成し、実際に操作してみる。 - ユーザビリティテスト
実際にユーザーに試してもらい、改善点を洗い出す。 - デザイン
視覚的なデザインを施す。 - 実装
システムに組み込む。
UXデザインのポイント
ボタン（リンク）
タッチデバイスではボタンの領域を広く取る！
＜a href= "xxxx" >～</a>の要素タグはインライン要素。
その為、幅と高さを持たせるよう「display :block;」を上手く活用する。
ポインターが無い場合は、リンク箇所のデザインルールを変えてみる。
サイト全体でテキストリンクの箇所は「このデザイン」というルールを統一し、リンクが付いていることを解りやすくする。
リンクの付いたバナーデザインはより解りやすく！
画像で作るバナーは、よりクリックしたら詳しい説明のページへ飛んでいくことがわかりやすいようにデザインする。
例）背景とのコントラストが弱いバナーに境界線をつける。→境界線の有無でもクリック率に影響が出る！
迷子にさせない導線
画面の面積が少ないデバイスでは、解りやすい導線を組む
サイト設計の段階で、無駄なリンクや無駄なページは排除するのが理想。
PCの特性、スマートフォンの特性を考えてを設計をする。
1クリックの動作で、1割のユーザーが離れると言われている！
無駄なページ移動はお客様が離れる原因になる。
スマートフォンやタブレットで縦に長いページは、基本的にはそんなにストレスを感じさせない。
ページの内容（ストーリー）を充実させる。
ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ
ページを開いて最初に見えるのが「目的の内容」⇒深く読み進めて「次への誘導」。
そこに興味のない方には「他の興味」へご案内出来るように工夫してみる。
ページの表示スピードの高速化
表示スピードはUXやSEOに影響を与える。軽視しないこと！
ページの表示スピード対策「画像」
Retinaディスプレイや４Kテレビ等々への対応
Retinaディスプレイの場合解像度が2倍になるので、2倍のサイズの画像を用意し50%のサイズで指定をして画像は表示させましょう。ただし容量には要注意です！
imgとbackground-imageの違いを意識する
「img」要素はHTMLの文章構造で存在する意味が必要！
「background-image」は背景のCSS。文法上の意味は持たないので使い分けること。
Webアイコンや「canvas」「SVG」を取り入れる
「jpg,gif,png」以外の画像表示やコンテンツも上手く取り入れてみる。
ただし、実機検証やブラウザ依存には要注意！
やはりメジャーなのはjpg,gif,png。
ページの表示スピード対策「プログラム」
動的プログラムは表示スピードを低下させる！
JavaScriptはとても便利だが、プログラムとしてはページの表示速度を低下させる点に注意。
ユーザビリティ、アクセシビリティという部分を考えて最低限の利用方法を考える。
CMS等のテンプレートについて
テンプレートは便利な分「何かしらの処理」を行われている場合、表示スピードに悪影響が出る。
良く確認をしてから利用すること。
誤ったプログラムも表示スピードの低下に直結！
HTMLやCSSの記述は誤っていてもブラウザ上は独自解釈して表示される。
表示スピードの低下に影響するうえ、SEO（検索エンジン対策）にもマイナスの影響が出る。
検証サイト等を利用し、正しく記述することを意識すること。
使い易さの追求
WEBフォントの利用
日本語に対応したWEBフォントも多数ある。
無料で使える「源ノ角ゴシック」「源ノ明朝」が国内でも多く広まってきているため、上手く取り入れてみる。
jQuery の利用
HTML5やCSS3でまだ実現できない動きも、jQuery ならば可能。
ページを重くするという問題はあるが、優先すべき「使い易さの追求」に必要であれば取り入れてみるのも手。
Googleアナリティクスの利用
Googleアナリティクスを使えば、ページのアクセス数や表示スピード、滞在時間等のデータを取得出来る。
無料で利用することが可能。数字から解析してより良いコンテンツを追求するのも有効。
