-本日のアジェンダ-
1限目
学科 UXデザイン基礎
UXデザインとは
2限目
学科 UXデザイン基礎
UXとUIの違い
3限目
学科 UXデザイン基礎
UXデザインの各ポイント
4限目
学科 UXデザイン基礎
課題制作
5限目
学科 UXデザイン基礎
課題制作
本日のテーマ
より良いサイト作りの為に
UXデザイン
User Experience Designの略で、日本語にすると「ユーザーエクスペリエンスデザ
イン」となります。
つまり、ユーザーが製品やサービスを利用する際に感じる体験を設計すること
・ユーザー中心
常にユーザーの視点に立ち、何が求められているのかを深く理解することが重要
・全体像
単に画面のデザインだけでなく、ユーザーが製品やサービスに触れる全ての場面、例えば、購入前の情報収集から、購入後のサポートまで、一連の体験を設計
・感情
ユーザーがどのような感情を抱くのか、どのような体験をしてほしいのか、といった感情的な側面も考慮
UIとUXの違い
UIとUXは、よく一緒に使われる言葉ですが、それぞれ意味が異なります。
簡単に言うと、UIは車の運転席、UXはドライブそのものといったイメージ
| UI（User Interface） | UX（User Experience）顧客体験 |
| 車の運転席に例えると、ハンドル、アクセル、ブレーキ、 メーターなど、実際に触れる部分、つまりユーザーがシ ステムと直接やり取りするインターフェースのことです。 UIデザインは、これらのパーツをどのように配置し、ど んなデザインにするか、という設計図を描くようなもの | ドライブに例えると、目的地までの道のり、車の乗り心 地、景色など、運転中に感じる総合的な体験のことです。 UXデザインは、目的地までのルートを設計したり、車の 乗り心地を良くしたり、景色を楽しめるような工夫をし たりするようなもの |
| ・スマートフォンの画面上のボタンやアイコン ・ウェブサイトのメニューやフォーム ・ゲームのコントローラー | ・ウェブサイトで目的の情報をスムーズに見つけられたか ・アプリの操作が簡単でストレスを感じなかったか ・ゲームの世界観に没頭できたか |
ボタン（リンク）の考え方
・タッチデバイスではボタンの領域を広く取りましょう。
～の要素タグはインライン要素になります。 その為、幅と高さを持たせる為に「 display :block;」を上手く活用してみましょう
・ポインターが無い場合は、リンク箇所のデザインルールを変えてみましょう。
・リンクの付いたバナーデザインはより解りやすく
画像で作るバナーは、よりクリックしたら詳しい説明のページへ飛んでいくと解りやすく
デザインしてみましょう
迷子にさせない導線
・画面の面積が少ないデバイスでは、解りやすい導線を組みましょう
サイト設計の段階で、無駄なリンク無駄なページは排除するのが理想です。
PCの特性、スマートフォンの特性を考えレイアウトを設計してみましょう。
・1クリックの動作で、1割のユーザーが離れると言われています
無駄なページ移動はお客様が離れるだけです。スマートフォンやタブレットで縦に長いページは、
そんなにストレスを感じさせないハズなので、1ページの内容（ストーリー）を充実させましょう
・ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ
ページを開いて最初に見えるのが「目的の内容」⇒深く読み進めて「次への誘導」
そこに興味のない方には「他の興味」へご案内出来るようにしてみましょう
コメント