2025.05.16
アジェンダ
- UXデザインとは
- UXとUIの違い
- UXデザインの各ポイント
- 課題制作
- 課題制作
テーマ：よりよいサイト作りのために
UX とは？
UXとは、「User eXperience（ユーザーエクスペリエンス）」の略で、ユーザーがサービスや製品の使用で得られる体験を示す言葉です。
UXデザインの流れ
- ペルソナの作成・・・代表的なユーザー像を作成し、設計の指針とします。
- ワイヤーフレーム作成・・・画面の骨組みを設計します。
- プロトタイプ作成・・・動く画面を作成し、実際に操作してみます。
- ユーザビリティテスト・・・実際にユーザーに試してもらい、改善点を洗い出します。
- デザイン・・・視覚的なデザインを施します。
- 実装・・・システムに組み込みます。
UXデザイン「User Experience Design」の略
- ユーザーの視点から何が求められているかを理解する
- 購入前⇒購入後まで一連の体験を設計する
- ユーザーがどう思うか、どんな体験をしてほしいか考える
ユーザーが使いやすいと感じる
製品やサービスの満足度が上がる
リピーターにつながる
他のサービスとの差別化を図れる
例）使いやすいナビゲーション
見やすいレイアウト、スムーズな情報収集
直感的な操作性、美しいデザイン
簡単な操作、安全設計、快適な使用感
例）カフェのサイト
ここに来たらこんな体験ができる（UX）
⇒来てほしいターゲット層への訴求をデザイン化
UXデザインに関わる仕事
- UXデザイナー
- UIデザイナー
- 情報アーキテクト
- インタラクションデザイナー
UXデザインの流れ
- リサーチ
- ペルソナ設定
- ワイヤーフレームの作成
- プロトタイプの作成
- ユーザビリティテスト
- デザイン
- 実装
UXとUIの違い
UIとは？
- ユーザーインターフェース
- スマホの画面上のボタンやアイコン
- ウェブサイトのメニューやフォーム
- ゲームのコントローラー
＊車でいえば運転席やハンドル
アクセルブレーキなど機能にまつわるもの
UXとは？
- ウェブサイト内で目的の情報をスムーズに見つけられる
- アプリ操作が簡単でストレスを感じない
- ゲームの世界観に没頭できたか
＊ドライブでいえば目的地までの道のりや乗り心地
景色など体験にまつわるもの
UIはUXの一部
UIが使いにくい⇒UXも悪い
UIが良い⇒UXが良くない場合もある
ボタン・リンクの考え方
UI・UXの視点から
- タッチデバイスではボタンの領域を広く取ろう
<a href=”XXXX”>～</a> インライン要素なので
幅と高さを持たせる「display: block;」を活用 - ポインターがないとき、リンクのデザインルールを変える
リンク先の文字色を変更する
統一感のあるボタンを使用 - リンクのついたバナーデザインはより分かりやすく
外枠があるバナーデザインはより分かりやすく
「詳しくはこちら」「お申込みはこちら」 など
迷子にさせない導線づくり
サイト設計をする段階で考える
- 無駄なリンク・ページは排除
- PC、スマホ それぞれの特性を考えレイアウトする
- クリック数は減らし、縦に長いページにする
- ファーストビューで最優先のコンテンツ
- フッターで各ページへ案内
⇒自分の作ったWordpressサイトにも適用するとよい！
表示スピード対策「画像」
画像読み込みが遅いのはストレスになる
表示スピード対策「画像」
- 「img」＝意味が必要な画像、Google画像検索にかかる仕様
- 「background-image」＝意味を持たない、ぼやけてもいい画像
- 「SVG」＝パスで作る画像
ページ表示スピード対策「プログラム」
- 動的プログラム（JavaSprict）は速度が遅くなる傾向
- 最低限の利用方法を考えてみる
CMS等のテンプレートについて
- WordPress、サーバーなども速度に関わる
誤ったプログラム
- 表示スピードの低下につながる
- スピード低下⇒SEO的にもマイナスに影響してしまう
使いやすさの追求
- WEBフォントの利用
源ノ角ゴシック・源ノ明朝・Googleフォント（軽い） - jQuery（JavaSprictをライブラリ化したもの）
ページを遅くする面もあるが使いやすさ重視で優先する場面もあり - Googleアナリティクスの利用（ユーザーの動向）
数字から解析し、より良いコンテンツを作成する分析を行う
＼ 最新情報をチェック ／
コメント