実戦で使えるUIデザインのテクニックを徹底的に学ぶ1日！ユーザー視点で作る情報デザインの極意がわかる２本立て講座

＜他のUIデザイン講座では【ぜったいに】聞くことができない、第一線で培ったノウハウを惜しげもなく大公開！！！＞

「ユーザー視点」でサイトを作ることは、当たり前なようで当たり前ではありません。そして、その考え方を身に付けるには、しっかりとしたポリシーとノウハウを合わせもつことが重要と言えます。 ユーザーの立場に立って、「誰が何を知りたいのか？」という根本的な情報デザインの基本構造を考え、わかりやすいサイト内の遷移構造を設計するための具体的な事例をふんだんに使って講義します！

まったく新しい視点でUIを構築できるようになります！

このUIデザイン講座は、どんなことに気をつけて制作をすべきか？どんなことを想定してサイトを設計・構築して行くと、わかりやすく使いやすいWEBサイトを作れるのか？といった、UIデザインの根本となる基礎的考え方を改めて習得し、今までとはまったく違うWebデザインの表現方法を産み出せる意識を身に付けることを目的とした教育プログラムです。

豊富な実績をもったUIの専門家がレクチャーします！

電通グループで17年にわたり、著名なWEBサイトのリニューアルや新規構築プロジェクトを手がけた実績から、さまざまなUIに関する知見をご紹介します。 そして、勉強になるUI専門書として、大好評書籍「だから、そのデザインはダメなんだ。」の著者が、書籍には未掲載の最新ノウハウも交えて、「使いやすい・分かりやすいWEBデザイン」のためのプロでも知りたいテクニックや知識をご紹介します！

＜第3部②：スマホサイトを根本から快適にする「UIデザインのツボ」＞

スマートフォンのサイト構築において、『本来あるべき使い勝手』や『わかりやすさ」の観点から、スマホ用UIデザインをユーザー視点に立って徹底的にその性能を検証し、あらゆるデザイナーのバイブルになるUIデザインの方向性や、最適なデザイン表現や構成レイアウトを学べぶことができます！

【講義内容】

※各内容は開発中のため、タイトルは仮であり内容は変更になる場合があります。

▼スマホのユーザー実態

1. 右手、左手、片手、両手？
2. 親指が届く範囲と操作性
3. スマホ画面上の視線移動
4. iPhoneとGalaxy端末の画面反応の違い
5. メニューの固定表示

▼ハンバーガーメニューを徹底研究

1. 大多数の企業で採用されているからOKなのか？
2. だから、このメニューはダメなんだ。
3. サイト構造を理解できないのはなぜ？
4. 直感性を損なわないさまざまなナビゲーションメニュー
5. 直感性を損なうカルーセルナビ

▼レスポンシブデザインで注意すること

1. 適合化であって最適化ではない
2. レスポンシブのメリット
3. レスポンシブにより失うもの
4. カルーセルパネルに必要な本当のUI

▼快適を維持するためのボタン性能

1. アップルやグーグルがガイドラインで規定する最適なボタンサイズ
2. 最低限認識可能なアイコンサイズや表現方法
3. 最適なボタンやテキストリンクの感覚
4. 右手でも左手でも押せる最適なボタン表現
5. 意味の通じないアイコンやピクトグラムならいらない

▼操作を分断しないモーダル表示、アコーディオン表示

1. モーダル表示は、直感性を阻害することがある
2. モーダル表示は、開けた後「閉じる」操作が問題
3. やってはいけないモーダルの落とし穴
4. スマートフォンでは別窓表示は禁じ手
5. 知りたい度に答えるアコーディオン表示
6. やってはいけないアコーディオン表示
7. アコーディオン表示を閉じた後現在位置を見失わないポイント

▼入力操作を快適にする入力フォームの良し悪し

1. ユーザー視点に立った入力の省力化
2. スマートフォンではタブ操作ができない
3. 選択肢は「比較」できることが必要
4. 入力制限を緩くしてストレスを無くす
5. 入力ミスを起こさせないインタフェース
6. ユーザーに正しい入力を促すことがエラー文言の目的

▼グーグルモバイルファーストについて

＜第5部：ユーザー視点で作る「UI性能が高いサイト設計＆提案書」＞

Webデザインのリニューアルや新規の提案の際は、議論の中心は常にデザイン表現になりますが、今の時代、デザインの善し悪しももちろん大切ですが、「使いやすさ」や「わかりやすさ」と合わせてサイトの「利用価値」が大変重要になって来ています。 使いやすく・わかりやすいWEBサイトを設計するためのユーザー視点の考え方と戦略を例にノウハウを初公開、勝てる提案書作成法も解説します！

【講義内容】

▼UIデザインの基礎知識編

1. WEBサイトの歴史と、今後のWEBサイトのトレンドと方向性
2. 市場構造の移り変わりに対応して変化してきた消費行動モデル
3. ユーザーの消費行動に対するサイトの役割を見据える

▼情報設計に絶対必要な着眼点

1. サイトの課題をあぶり出す着眼点
2. WEB戦略に基づくターゲットユーザーとそのユーザーニーズ
3. 企業のブランディングとWEBサイトの役割

▼サイト構造設計 基本編

1. ユーザーのサイト内行動とビジネスゴールを洗い直す
2. 決裁者はだれかを考えたBtoBサイトの着目ポイント

▼サイト構造設計 分析編

1. 競合分析による業界のトレンド（役割）を洗い出す
2. 重箱の隅をつつくような分析にしないためのポイント
3. continue式ヒューリスティック分析レーダーチャート

▼サイト構造設計 情報デザイン編

1. オリエンの内容を疑え！本質を見極める提案ポイント
2. 情報の要。ユーザー心理と対話するサイトナビゲーション
3. 情報の多様性とターゲットのバリエーションに密接に関わる検索性能
4. 出口戦略に沿ったコンテンツ構成と問い合わせフォーム
5. ビジネスコンバージョンを上げるためのWEBフォームの設計
6. サイト構造図（サイト内遷移図）の作成がアピールできるポイント
7. 誰に何を知ってもらいたいのか？

▼競合に勝つ！提案書の作り方

1. 提案書のあるべき方向性を考察する
2. 提案書をよりよくしていくためのポイント
3. 「勝つ提案書」のための具体例
4. 少ない時間で、個別の課題を調査できるノウハウ（着眼点）

▼サンプル動画

コンテンツをポジショニングマップで分析

提案書のあるべき方向性（QCD）