5回コース 東京AL:UIデザインの基本を学び直す「誰も知らなかった基礎知識」

ウェブデザインの技術と知識を確実に向上させる、これまでのWEBデザインの常識を覆す「だから、そのデザインはダメなんだ。」の総合受講編

learn

こんなことを学びます

【日程と場所は、受講者のスケジュールに合わせて決定します。】
まず、お問い合わせをいただき、受講者と開催のための調整をした上で開講するので、
忙しい個人の方や、企業内でのグループセミナーをしたい場合にも、大変便利です!!!
※開催場所とプロジェクターやテレビモニターなどの設備は、生徒側がご準備ください。
※3名以上で受講される場合は、場所と設備を講師側で準備することもできます。

【知ってると知らないでは、実力に大きな差がつくUIデザインの基礎。】
単にデザインの格好良さだけに固執せずに、Webサイトをデザイン制作する際に、そのサイトを利用するユーザーが、どのような目的で利用しているのか? どんな情報を探しているのか?、ユーザーがサイトを利用する動機やタイミングに見合ったユーザー視点でわかりやすい導線や、目的とする情報が探しやすいデザイン表現ができているでしょうか?
利用者の立場のときには当たり前のように気づくことが、実際にデザインする立場になってみると、私たちは、なかなかデザインに活かせていないことに気づきます。

だからこそ、ユーザー視点にたった『UIデザインの基礎』を、WEBサイト以外のさまざまな日常的な事例や、世に公開されている著名サイトがくり返す情報発信側目線のデザインや構成を反面教師にして、本来あるべきUIデザインについての「本質」をしっかりと身につけていきます。

そして、どんなことに気をつけるべきか?どんなことを想定してサイトを設計・構築して行くのが良いのか?根本的に制作するWebサイトの考え方や表現方法の意識を変えていくことを目的としたプログラムです。


■1日目で学習・身につけられる内容

第1部 →プロだからという過信の余り、見落としている「ユーザー視点」を、
     WEBから離れた日常的なサイン表示などの役割を知ることで、
     あらためて「ユーザー視点」のUIデザインに必要な着眼点を知る

第2部 →表面的な見せ方としてのUIではなく、
     必然性や科学的な裏付けに基づいたUI設計の理由を知り、
     具体的にサイト分析やサイト設計するときの重要ポイントとしての
     知識を蓄える

■第2日目で学習・身につけられる内容

第3部①→著名企業でも犯しているUI上の問題を反面教師として知り、
     UIデザインを手がける時の知識として役立てる

第3部②→ハンバーガーメニューもレスポンシブデザインも、
     常識がくつがえるユーザー視点で作るスマホサイトのUIデザイン

■第3日目で学習・身につけられる内容

第4部 →サイトを利用するユーザーがもっとも知りたいことに、
     的確に応えられるUI性能を具体的な著名サイトから考察する

■第4日日目で学習・身につけられる内容

第5部 →リニューアルと新規構築をするための、
     サイトの課題抽出のノウハウとサイト構築のための着眼点を知る

■第5日目で学習・身につけられる内容

第6部 →サイト分析に必要な詳細な方法を理解して、
     即実戦に使えるツールを入手する
続きを読む

日程・開催時間を選ぶ

開催リクエスト受付中

開催予定エリア

東京(その他)

価格(税込)

¥140,000(¥28,000 × 5 回)

受けたい
20人が受けたい登録しています

teacher

この講座の先生

情報デザイン・ストラテジスト

「だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる」著者(エムディエヌコーポレーション刊)

1989年にグラフィックデザイナーとして独立。1995年に大手電機メーカー系のWebサイト制作を多数手がける中、Adobe Flashのクリエーターとしても活躍後、2001年、電通グループ 株式会社デジタルパレット(現電通アイソバー株式会社)の設立時より現在に至るまで、独自のデザイン理論とユーザー視点の構造設計・情報デザインで、大手企業のWebサイト構築やリニューアルプロジェクトの中心メンバーとして多数参画。

昨今のWebサイト構築には、IA(インフォメーション・アーキテクト)による情報設計が必要だという認識がやっと定着し、あらゆる場面で IA が引く手あまたになっている状況と言ってもよい時代になりました。
そんな中で、Webサイトの制作担当者やWEBデザイナーが、ユーザー視点のWEBデザインを修得・実践できる機会になればと、『本来あるべきWebサイト作りの武器』として、お役に立てることを願い、本講座を開設することにしました。
+ 続きを読む

detail

講座詳細

カリキュラム

  • 第1回 知ってると知らないでは、実力に大きな差がつくUIデザインの基礎

    【第1部 街中の案内表示から学ぶ「ユーザー視点のUIデザイン」】:約2.5時間
    街中にある誘導表示やサイン計画、施設内の誘導導線に着目し、使う立場で感じる様々な疑問や不満から、Webサイトにも必要なユーザー視点にたった使いやすさ・わかりやすさのポイントを再認識できます。
    頭では分かっているけど、ユーザビリティについて本当のところどうして「そうなの?!」をもっと知りたい方なら、WEBの専門知識がなくても楽しく理解できます。
    【1】マスメディアとWEBデザインの違い
    【2】東京スカイツリーのサイン表示から「わかりにくい」を体感しよう
    【3】動線と導線の違い
    【4】伝わる機能とデザイン
    【5】デザインとインタフェースのことばの意味
    【6】わかりやすいWEBデザインとは?
    【7】すべての人がすべての情報をくまなく見ることはない!
    【8】知りたくなる度合いが大切
    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★初心者でわかる導線と動線!
    https://www.street-academy.com/myclass/15959
    ーーーーーーーーーーーーーーー


    【第2部 UIデザインの常識を改める「認知学から学ぶUIの基本」】:約3時間
    『いつも目にするWEBデザイン』を認知心理学などのデータや人間本来がもつ知覚能力の限界値と比較して検証すると、実は使いにくい・わかりにくいデザインだったことに気づかされることがたくさんあります。
    キレイなデザインやカッコいいデザインだけじゃない、本当にユーザーの役に立つWEBデザインの仕掛けを理解できます。
    【1】人間はそもそも見える範囲に限界がある
    【2】ある一定量を超えた情報に対して読みたくなくなる心理
    【3】短期記憶がカギになるWEB閲覧
    【4】ナビゲーションの分かりやすさの仕掛け
    【5】男性と女性の意識の違い
    【6】誰でも使えるわけではない検索機能
    【7】よくある質問は、よくない質問
    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★UI性能を科学的裏付ける!
    https://www.street-academy.com/myclass/15973
    ーーーーーーーーーーーーーーー


  • 第2回 著名企業のWEBデザインから学ぶ、UI性能が高いサイトと低いサイト。 ユーザー視点に立つWebデザインの重要性を身に付けるUIデザインの応用編①

    【第3部① ユーザー視点でわかりやすいサイトを作る「UI設計のツボ」】:約4時間
    UIデザインの落とし穴と呼ぶべき盲点から、本来あるべきユーザビリティ性能とは何かを前後編にわけて、たっぷりと学ぶそれぞれ2時間です。

    著名サイトで表現されているデザインやインタフェースは参考事例として注目を集めますが、そのユーザビリティ性能を分析していくと、実はユーザーにとっては使いにくい理由が、数多く浮かび上がってきます!
    いつも目にするWEBデザインのユーザービリティを、有名サイトだからと安心せず、UIデザインの落とし穴と呼ぶべき盲点から、本来あるべきユーザビリティ性能とは何かを理解できます。
    【インタフェース編】
    ・トップページの位置づけと求められる役割
    ・トップページ「カルーセルパネル」の見せ方善し悪し
    ・ナビゲーションの位置づけと求められる役割
    ・『次』が見えるナビゲーション
    ・『次』を明示させるヘルプ機能
    ・機能がわかるボタンらしいフラットデザイン
    ・スマホ版の使いやすいメニューとハンバーガーメニュー
    ・検索窓を使わない検索機能
    【コンテンツページ編集構成編】
    ・重要なことはPV数を稼ぐことではなく伝えること
    ・タイトルとリードで伝わる情報デザイン
    ・メイン導線とサブ導線で分かれるターゲットの興味
    ・リピートユーザーには内容だけでなく情報鮮度も大切
    ・注意喚起は見てもらわなければ意味がない
    ・ユーザーの利用シーンを考慮した編集
    ・ターゲットのリテラシーを考えたコンテンツテーマと専門性
    ・登録フォームはいかに入力要素を削減できるかがカギ!
    ・ストレスがためない入力フォーム
    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★著名サイトを反面教師に!
    https://www.street-academy.com/myclass/16175
    ーーーーーーーーーーーーーーー

    【第3部②東京:スマホサイトを根本から快適にする〜UIデザインのツボ】:約4時間
    かねてからリクエストが多かった「スマートフォン用UIデザイン」の講座が新登場!!
    ハンバーガーメニューもレスポンシブデザインも、常識がくつがえるユーザー視点で作るスマホサイトのUIデザイン!

    多くのサイトで、スマートフォンユーザーの利用率が60%を超え、今やスマホファーストのWEBデザインは必須といえます。その一方で、運用効率やコストの面から、レスポンシブ対応のデザインが求められ、デザイナー側の魅せるデザインとも相まって、サイト利用する側の「使いやすさ」や「わかりやすさ」が犠牲になっている側面は否めません。
    【スマートフォンとは】
    ・真の“スマートフォン”と言えるデバイスが2007年に誕生
    ・スマートフォンはどっちで使う?右手?左手?片手?両手?

    【スマートフォンには欠かせない「ハンバーガーメニュー」】
    ・ハンバーガーメニューの普及率を徹底調査
    ・ハンバーガーメニューの種類
    ・ハンバーガーメニューは、なぜ多くの企業に採用されているのか?
    ・だから、ハンバーガーメニューはダメなんだ。
    ・スマートフォンでは階層構造を理解・把握しにくい
    ・直感性を損なわずに使えるスマホ用ナビゲーションメニュー
    ・使い方に注意が必要なスマホ用ナビゲーションメニュー

    【レスポンシブデザインが実現できるスマートフォンへの最適化】
    ・レスポンシブデザインの普及率
    ・レスポンシブデザインがもたらすメリット
    ・レスポンシブデザインによって失われるモノ
    ・レスポンシブデザインは、適合化であって最適化ではない
    ・スマートフォンサイトの未来を作るモバイルファースト

    【入力操作を快適にする入力フォームの良し悪し】
    ・入力ミスを起こさせないインタフェース
    ・ユーザー視点に立った入力の省力化

    【操作を分断しないモーダル表示、アコーディオン表示】
    ・モーダル表示にはTPOが大切
    ・スマートフォンの閲覧性を左右するアコーディオン表示

    【快適を維持するためのスマートフォン向けUI】
    ・グーグルモバイルファーストについて
    ・右手でも左手でも押せる最適なボタン表現
    ・最低限認識可能なアイコンサイズや表現方法
    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★スマホサイトをユーザー視点で分析!
    https://www.street-academy.com/myclass/37429
    ーーーーーーーーーーーーーーー

  • 第3回 著名企業のWEBデザインから学ぶ、UI性能が高いサイトと低いサイト。 ユーザー視点に立つWebデザインの重要性を身に付けるUIデザインの応用編②

    【第4部 ブランド価値を高めていく「ユーザー視点のUIデザイン」】:約4時間
    どんな目的でサイトを利用するかを見据えた、明確なターゲット設定が、最も効果的なUIを実現し、企業のロイヤリティをアップする!
    企業ブランディングに効果を発揮するポイントをたっぷりと学ぶ3時間半です。

    【伝えるデザインが、伝わるデザインではありません!
     伝わるデザインに必要な考え方や表現方法を学べます!】
    単に、情報を「伝える」という一方通行な取組であれば、一貫性や統一性という点でコントロールすればすむ話ではあるものの、その情報を的確に・正確に・同一のメッセージと「伝わる」ことに主眼を置くのであれば、受け手となるユーザーがその情報とどう接触するのか?どんな感情を生み出すのか?など様々な「伝わり方」を想定しなければ、企業が目指すプレゼンスとしての「真の価値」には成らないのでは無いでしょうか。
    そこで、伝えることだけを目的とするデザインと、伝わることを目指したデザインの違いについて学ぶ新しい講座です。

    【伝えるデザイン 編】
    企業のブランド戦略が実現したいメッセージ性と
    WEBが機能性として実現しなければいけないユーティリティ性能
    情報を発信する側だけの意識だけでは解決できないWebサイトがになう役割
    ・自動車メーカーによる車両・WEB・店舗における
     統一コンセプトによるデザイン戦略がWEBサイトに与える影響
    ・トライベック社のユーザビリティランキングが示す使いやすさ
    ・デザイン統一によって失われたユーザビリティ
    ・接触ポイントとWEBの役割を見つけ出すカスタマージャーニーマップ
    ・企業ブランディングと就活ブランディング

    【伝わるデザイン 編】
    日本を代表する大手有名旅館のWebサイトからわかる
    人と人の間にある「おもてなし」がもたらす価値とは違う、
    WEBサイト上で情報デザインが実現すべきホスピタリティのむずかしさ

    ・37年連続1位にはならなかったが、積み上げられた老舗旅館の価値
    ・ホスピタリティとおもてなしの違い
    ・WEBサイトにおけるUIとは、まさに、来訪者への「おもてなし」
    ・ユーザーに対してどんなプライオリティでブランド価値やロイヤリティを高めていきたいのか?
    ・縦書き構成によって、画面内を視線が左右に振られる原因を作る
    ・ひとつの画面で、目的や用途が違う、複数のユーザーに対してアプローチ
    ・格安ビジネスホテルの宿泊プランと大差ない詳細情報表示
    ・ゆったりとしたレイアウトの中に、明確な選択肢が示されたインタフェース
    ・サービスのひとつと位置づけるWEB戦略

    【伝わるデザインを実現していくためには】
    ・世の中のセオリーに囚われない戦略を!
    ・表層的なニーズでなく深層的なエクスペリエンスを考える
    ・ユーザのニーズを捉えるサイト設計の考え方

    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★格好いいだけでは伝えたいことは伝わらない!
    https://www.street-academy.com/myclass/23310
    ーーーーーーーーーーーーーーー

  • 第4回 リニューアルと新規構築をするための、 サイトの課題抽出のノウハウと勝てる提案書が作れる実戦編

    【第5部 ユーザー視点で作る「UI性能が高いサイト設計&提案書」】:約6時間
    ユーザーに支持される使いやすく・わかりやすいWEBサイトを設計するための基本的な考え方を整理し、具体的な提案書作成までのノウハウを6部に分けて学ぶ5時間です。

    サイトの制作費の関係で、どうしても表面的な改訂になってしまう実情も否めず、いかにクライアントに情報設計の重要性を説明でき、また理解してもらうかが費用をアップさせるためにも重要な課題と言えるでしょう。
    成果や効果がないから費用が出ないという悪循環を脱却するためには、「成果の出るWEBサイト」を提案することに尽きるわけで、そのためのノウハウを勉強してみませんか?

    【講義内容】
    ▼UIデザインの基礎知識編
    【1】WEBサイトの歴史と、今後のWEBサイトのトレンドと方向性
    【2】市場構造の移り変わりに対応して変化してきた消費行動モデル
    【3】ユーザーの消費行動に対するサイトの役割を見据える

    ▼情報設計に絶対必要な着眼点
    【4】サイトの課題をあぶり出す着眼点
    【5】WEB戦略に基づくターゲットユーザーとそのユーザーニーズ
    【6】企業のブランディングとWEBサイトの役割

    ▼サイト構造設計 基本編
    【7】ユーザーのサイト内行動とビジネスゴールを洗い直す
    【8】決裁者はだれかを考えたBtoBサイトの着目ポイント

    ▼サイト構造設計 分析編
    【9】競合分析による業界のトレンド(役割)を洗い出す
    【10】重箱の隅をつつくような分析にしないためのポイント
    【11】continue式ヒューリスティック分析レーダーチャート

    ▼サイト構造設計 情報デザイン編
    【12】オリエンの内容を疑え!本質を見極める提案ポイント
    【13】情報の要。ユーザー心理と対話するサイトナビゲーション
    【14】情報の多様性とターゲットのバリエーションに密接に関わる検索性能
    【15】出口戦略に沿ったコンテンツ構成と問い合わせフォーム
    【16】ビジネスコンバージョンを上げるためのWEBフォームの設計
    【17】サイト構造図(サイト内遷移図)の作成がアピールできるポイント
    【18】誰に何を知ってもらいたいのか?

    ▼競合に勝つ!提案書の作り方
    【19】提案書のあるべき方向性を考察する
    【20】提案書をよりよくしていくためのポイント
    【21】「勝つ提案書」のための具体例
    【22】少ない時間で、個別の課題を調査できるノウハウ(着眼点)
    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★実戦的知識を身につけたい!
    https://www.street-academy.com/myclass/31133
    ーーーーーーーーーーーーーーー

  • 第5回 リニューアルと新規構築をするための、 サイトの課題抽出のノウハウとサイト構築のための着眼点を身につける実戦編

    【第6部 初めてでもできる!「かんたんサイト分析/説得力ある評価レポート」】:約10時間
    論理的で説得力をもったレーダーチャートによる視覚的でわかりやすい評価レポートを作れるので、あらゆるサイトの分析と改善ポイント抽出が容易にできる、画期的な方法を身につけられる10時間です。

    専門的なユーザビリティの知識が乏しい初めての人やアクセス解析などのデータが無くても、100項目の評価指標を用いて、対象サイトを減点評価するだけで、ユーザビリティ性能や構造的な課題を客観的で直感的に分析・評価!

    勉強になるUI専門書として、大好評書籍「だから、そのデザインはダメなんだ。」の著者が、書籍には未掲載の最新ノウハウも交えて、「使いやすい・分かりやすいWEBデザイン」のためのプロでも知りたいテクニックや知識をご紹介します!

    【講義内容】
    【基礎編】
    ・ユーザビリティの歴史と代表的なデザインの原則
    ・ユーザビリティガイドラインの進化
    【ユーザビリティ評価分析 解説編】
    ・UXハニカム構造から見たWEBサイトの基本性能
    ・10ヒューリティクスとUXハニカム構造から発想する客観的評価
    ・レーダーチャートによる評価事例

    〜昼食休憩〜

    【ユーザビリティ評価分析 準備編】
    ・ヒューリスティック分析とは
    ・サイトを分析するための手順とポイント
    ・分析するときの留意点
    ・分析の仕方(サンプルを実際に見てみる)
    ・参考分析(全日空サイト)

    〜夕食休憩〜

    【実際のサイト分析ワークショップ】
    ・実際にサイトをご自身で分析してみましょう!(日本航空サイト)
    ・質疑応答とディスカッション
    ーーーーーーーーーーーーーーー
    ※講義の詳細は、下記単発講座でご確認ください。
    ★今すぐ業務に使いたい!
    https://www.street-academy.com/myclass/20569
    ーーーーーーーーーーーーーーー

  • こんな方を対象としています

    ・サイトリニューアル作業や競合他社との性能比較を必要とする実務担当者
    ・Web制作や制作ディレクションに携わる方々、
    ・案件として発注を担当する責任者の方々に最適です。
    ・もっと効率的で評価されるUIデザインを勉強したい方(ディレクター、デザイナー、広報担当など)
    ・WEBサイトやUIデザインについて、もっと役立つ情報がほしい方
    など、今までのWEBに対する知識や技量をもっと高めたいという方々にお奨めです。
  • 受講料の説明

    ★最低開催人員は3名以上となります。
    ★受講者が開催場所や設備(プロジェクターやWi-Fi)を準備してください。
     開催地が東京23区以外の場合は別途交通費が必要な場合があります。
     また、講師側で開催場所を準備する場合は別途会議室の費用として+40,000円が加算されます。
    ★レッスン代、教材となる資料代が含まれています。※デジタルでの配布はありません。

    ★5日目第6部の講座では、
     教材となる資料のPDF、Excelファイルも合わせて提供します。
  • 受講する際は以下をお読み下さい

    最終講座では、実際にWEBサイトを見ながら分析をしていきますので、
    ・パソコン
    ・スマートフォンまたはタブレット
    ・筆記具
    を必ずご持参ください。

review

レビュー

  • 1

  • 楽しかった!( 1 )

  • 勉強になった!( 1 )

  • 行く価値あり!( 1 )

  • 男性 40代

    この講座は「明日から確実にビジネスで使える実用性がある講座」でした

    講座内容・コンテンツは非常によく考えられていてスキル向上に役立つことはもちろんのこと、ビジネス現場を熟知されているので本当に役立つものばかりでした。あと香西先生のお人柄も良いので長時間も苦なく受講することができました。
    本当にありがとうございました!

  • more

    この先生の他の講座

    relation

    関連講座

    watching

    この講座を見た人は、こんな講座も見ています