WEBサイトをデザインするための準備事項
WEBサイトをつくる上で考えていくとても大切な要素としてUXを考えていきます。UXとは、ユーザーエクスペリエンス（User Experience 以下 UX）の略称で、サービスを通じたユーザー体験を意味しています。似たような言葉に、UI（ユーザーインターフェイス、User Interface）がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。UX体験を向上させるためには、UIの使いやすさは不可欠です。
参考：すべてのUXデザイナーに必須のスキル、スケッチをマスターする方法
参考：すべてのUXデザイナーに必須のスキル、スケッチをマスターする方法
STEP 1 : どんな目的/価値を届けたいWEBサイトなのかを考える
まずはじめに、どんな目的のために、どのような価値を届けたいWEBサイトなのかを明確にする
- そのサービス(WEBサイト)は、誰のため？
- そのサービス(WEBサイト)は、何のために？
- その目的を達成するために誰に使ってもらいたいか？
ワークシート1を利用して、上記の内容を整理していきます
STEP2 : コンテンツになる可能性があるものを書き出す
コンセプトに合わせて素材を集める
例1：気軽に料理が作りたい人のためのWEBサイト（クックパッドの場合）
- 基本的な料理レシピ
- 旬の野菜を使ったレシピ
- 料理でつながるコミュニティ
例2：自分の活動紹介
- これまでの作品
- blog / SNS
- プロジェクト など
STEP 3 コンセプトに照らし合わせて情報の分類・優先度を考える
クックパッドを構成している情報とは？
・気軽に料理が楽しめるレシピ集・おすすめランキング
・つくレポ
・会員ページ
など
コンテンツ (何を載せるのか)を考えるための準備事項
STEP 4 : どのようにWEBサイトを利用してもらうかを考える
想定するサービスをどのようにユーザーが使用するかを、具体的に4コマ漫画で考えてみる。その場面で、WEBサイトはどの画面のどの部分を閲覧したり、クリックされているかも想定して記入していく。
1. サービスを利用するきっかけ (どんな困った？エンターテイメント？)
2. 最初のページで起こして欲しい行動
3. 次のアクションへの誘導
4. 欲しい情報に届いた状態
※注意：上手く描くことが目的ではありません
STEP 5 : 画面をイメージしていく / ワイヤーフレーム
コンセプトに照らし合わせ 、まずは紙に画面レイアウトを考えていきます。
事例サイト：クックパッド
- 今回は、複数のページを持つ構成にする
- TOPページから考える
- 構成要素と情報の優先順位度でページを考える
- 全体でどのように関連しているかを紐づけていく
STEP 6 : TOPページをラフにイメージする / ワイヤーフレーム
TOPページの構成を具体的に考えていきます。ワークシートでは、タイトルやヘッダーやフッターなどの目安の場所や大きさをスケッチしていきます。
- TOP / コンテンツページ (画面内の構成要素)
- ヘッダー / フッター / メニューなど 画面遷移 共通要素連動編集
- デザイントーン&マナーを考える (ブランディング / 全体の世界観を構成する画像、色、フォントなど)
参考サイト：デザインの役割からみる「トーン」&「マナー」
参考 : 画面推移
作成したページがどのような関係なのかを線でつないでいきます。
画像：Adobe XD
UIについて 1 : ワイヤーフレームを作りながらプロトタイピング!
STEP7 : WEBサイトのプロトタイプを作ってみる
STEP9 : 画面構成していく
ワークシート5と6で作成したワイヤフレームを使って、AdobeXD上でWEBページに置き換えてみる
STEP8 : UIキットでデザインをはじめてみる
Adobe XD用UIキット（無料）をダウンロードすれば、デザイン作業をすぐに開始できます。最新のApple、Google、Microsoftデバイス用UIリソースを使えば、複数のデバイスのインターフェイスとプラットフォーム向けデザインの時間を短縮できます。UIキットとワイヤーフレームは、アイコン、キーボードレイアウト、ナビゲーションバー、入力、ボタンなど、共通のデザイン要素を含むXDファイルです。
UIキットでデザインを初めてみる
UIキットでデザインを初めてみる
UIについて 2 : WEB制作にあたって考えるべき項目
WEBサイトのプロトタイプを作りながら、
具体的にビジュアルデザイン(色・フォント・ボタンなど)を考えていきます
STEP10 : デザイントーンとマナーの確認
STEP11 : カラーパレットの確認
アプリを構成する要素の色を決める
メインカラー : 背景・ヘッダー・フッター
参考：カラーパレットの持つ力 - わかりやすいデータ可視化のための色使い
サブカラー : ヘッダー・フッター
アクセントカラー : クロポチなど
ボタン : 動的なボタンだった場合色が変わるのであれば、2パターンなど
フォント : 文字
windows / mac 標準OSを指定しておき、自分好みのフォントをWEBフォントで指定する
WEBフォントの弊害は、重くなること
STEP12 : レスポンシブデザインを考える
ディバイスの互換性を考慮して、アプリを設計する必要がある
理由
考慮するべき項目
参考：レスポンシブデザインWEBデザイン基礎- レイアウト崩れを防ぎたい
- 見せたい情報が見れない
- 触れない 例：ボタンが押せない
- ディバイス >> iOS or Android
- ブラウザ >> 古い
- フォント >> 入ってない
STEP13 : アクセシビリティを考える
アクセシビリティとは？
あらゆる人が情報にアクセスすることができ、利用できることを意味します
情報にアクセスすることが難しい方へ向けた対策
読むこと・見ることの困難への配慮
- 読み上げ機能使用の検討（テキストなら可能、動画に音があれば別だが、基本的に動画 / 写真は読み上げできない)
- アプリを使用する上での検討 (操作性 / 状態を表示など、 例：ON : 赤 / OFF : 青)
色のアクセシビリティチェッカー
カラーチェッカー機能使用の検討（色による区別をどう配慮するか）
検証：アドビ Photoshop (カラーチェッカーでの確認など)
UIについて 3 : ユーザーテスト
STEP14 : ユーザーテストを行なってみる
目的
- つくったWEBサイトが、そもそも使いやすいか？
- 意図した設計通りに使ってくれるか、 感じてくれるかの確認
- 意外な発見があるか
>> 新しい発見が有効である場合
デザインに取り込んで再設計するとより良いUXデザインになります
STEP 15 : ユーザーヒアリングを行なってみる
ユーザーアンケート
ABテスト >> A or B のデザインで迷った時に反応を検証