Successfully reported this slideshow.
Your SlideShare is downloading. ×

「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 87 Ad

「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方

Download to read offline

Web担当者Forum秋のイベント 11月7日(月)14:05 KA1-4 セッションのスライドです。
「ウチの事業部の商品をWebサイトとアプリのトップに載せて!」
「新機能をとにかく目立たせろ! 利用数をとにかく増やして!」
Webサイトやアプリを運用していると、社内のあちこちから、さまざまな圧力や依頼が舞い込むものです。えらい人からの現場を知らない指示であったり、発言力の強い部署からの高圧的な依頼であったり、決裁者からの思いつきの要望であったり……。その多くは「その人の視点から見た世界」の個別最適であり、全体最適でのユーザー目線に欠けていたり、Webサイトやアプリの使いやすさを毀損する内容であったりします。Web担当者やプロダクトマネージャーは社内の不要な衝突を避けながら、決裁者からは予算を引き出し、ユーザーに価値を届けられるプロダクトのかたちを守り続けなければなりません。本セッションでは、業界歴20年超の発表者が、あるあるエピソードを取り上げながら、社内政治の泣き笑いと、落としどころの見つけかたを模索します。

Web担当者Forum秋のイベント 11月7日(月)14:05 KA1-4 セッションのスライドです。
「ウチの事業部の商品をWebサイトとアプリのトップに載せて!」
「新機能をとにかく目立たせろ! 利用数をとにかく増やして!」
Webサイトやアプリを運用していると、社内のあちこちから、さまざまな圧力や依頼が舞い込むものです。えらい人からの現場を知らない指示であったり、発言力の強い部署からの高圧的な依頼であったり、決裁者からの思いつきの要望であったり……。その多くは「その人の視点から見た世界」の個別最適であり、全体最適でのユーザー目線に欠けていたり、Webサイトやアプリの使いやすさを毀損する内容であったりします。Web担当者やプロダクトマネージャーは社内の不要な衝突を避けながら、決裁者からは予算を引き出し、ユーザーに価値を届けられるプロダクトのかたちを守り続けなければなりません。本セッションでは、業界歴20年超の発表者が、あるあるエピソードを取り上げながら、社内政治の泣き笑いと、落としどころの見つけかたを模索します。

Advertisement
Advertisement

More Related Content

More from Yoshiki Hayama (20)

Recently uploaded (20)

Advertisement

「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方

  1. 1. 私だけじゃなかった︕ 社内政治と落としどころの⾒つけ⽅ 2022年11⽉7⽇(⽉) ⽇本ウェブデザイン株式会社 / HCD-Net認定 ⼈間中⼼設計専⾨家 ⽻⼭ 祥樹 @storywriter 1 Twitterの ハッシュタグは #webtan 画⾯キャプチャ 投稿OK︕ ウチの事業部の商品を Webサイト・アプリで⽬⽴たせて︕ Zoomの チャットで いっしょに 盛りあがってね
  2. 2. 2 鳳 翼 天 翔 !! ⽴場の強い⼈の意⾒
  3. 3. Zoomの「チャット」で盛りあがろう︕ 3 チャット Q&Aに 投稿したものは 質疑応答で 答えます Zoom のチャットへ どんどん書いてね︕ (Twitter感覚で) Q&A 「全員」 で送信︕
  4. 4. 「全員」で送信 Zoomの「チャット」で盛りあがろう︕ 4 無駄無駄無駄無駄 無駄無駄無駄無駄 無駄無駄 練習 ・・・と投稿してみよう!!
  5. 5. ⽻⼭ 祥樹 @storywriter 5 ⽇本ウェブデザイン株式会社 代表取締役CEO 使いやすいプロダクトをつくる専⾨家 HCD-Net認定 ⼈間中⼼設計専⾨家 Web業界に23年、AIシステムのプロダクトマネージャーとUXデザインを5年 主な実績など 2009年 ⽇経パソコン 企業サイトランキング2009 ⽇本の主要企業696サイト中、ユーザビリティ/アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 ⽇本の⼤⼿企業150サイト中、第4位 主な専⾨分野 ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、アクセシビリティ、ライター
  6. 6. 2022年某⽇ Web担編集部とのミーティングにて 6 ⽻⼭ Web制作や デジマの最新情報も もろちん⼤切ですが 四⾕編集⻑ ⽇々がんばっている Web担当者が 「私だけじゃなかった︕」 と共感して勇気をもらえるセミナーも ⽤意したいんです︕
  7. 7. 7 ⽻⼭の胸にさまざまな記憶が去来した・・・
  8. 8. 発注側も受託側もふくめ25年間がんばってきた 8 某⼤⼿予備校の 宣伝部のバイトで ウェブ業界へ Web担当者 Web制作者 1998 2002 2006 2020 1996 Web制作を はじめる 某⼤⼿SIer に就職 異動で本体の Web統括部へ ⼦会社で Web担当者 2010 ⼈間中⼼設計 専⾨家の認定 産業技術 ⼤学院⼤学 副業を法⼈化 2004 プロダクトマネージャー 2013 副業で個⼈事業主 本格的に開始 2022 2016 異動でAIプロダクトの プロダクトマネージャーに
  9. 9. 9 廬 ⼭ 昇 ⿓ 覇 えらい⼈からの 現場を知らない指⽰
  10. 10. 不 本 意 っ ・ ・ ・ ・ ! 圧 倒 的 不 本 意 っ ・ ・ ・ ・ !
  11. 11. 理 不 尽 の な い プ ロ ジ ェ ク ト か そ ん な も ん は こ の 世 の 中 に あ り は し な い
  12. 12. 2022年某⽇ Web担編集部とのミーティングにて 12 ⽻⼭ ・・・さん ⽻⼭さん︕ 四⾕編集⻑ どうしたんですか ボーッとして・・・ ハ ッ
  13. 13. 13 わ か っ た ………… 引 き 受 け よ う …… 羽 山 さ ん …… こ の 仕 事 受 け て も ら え ま せ ん か セ ミ ナ ー ス イ ス 銀 行 の 俺 の 口 座 に 5 0 0 0 兆 振 り 込 ん で く れ ……… ド ル ジ ン バ ブ エ
  14. 14. 14 Webサイトやアプリを運⽤していると、社内のあちこちから、さまざまな圧⼒や依頼 が舞い込むものです。えらい⼈からの現場を知らない指⽰であったり、発⾔⼒の強 い部署からの⾼圧的な依頼であったり、決裁者からの思いつきの要望であったり ……。その多くは「その⼈の視点から⾒た世界」の個別最適であり、全体最適での ユーザー⽬線に⽋けていたり、Webサイトやアプリの使いやすさを毀損する内容で あったりします。 注意: この⼈はこの⼈で よかれと思ってやっている ことを忘れてはいけない
  15. 15. 15 Web担当者やプロダクトマネージャーは社内の不要な衝突を避けながら、決裁者 からは予算を引き出し、ユーザーに価値を届けられるプロダクトのかたちを守り続け なければなりません。本セッションでは、あるあるエピソードを取り上げながら、社内 政治の泣き笑いと、「ユーザーに価値を届けられるプロダクトのかたち」をうまく両⽴ する⽅法を模索します。
  16. 16. 注意事項 16 このプレゼンに出てくる事例やエピソードはフィクションです。 実在の⼈物や団体などとは関係ありません。
  17. 17. 17 なぜデザインや情報設計は 統⼀されていなければならないのか 前提
  18. 18. 「使いやすい」とはどういうことか 18 あなたはマリネラ王国註への海外旅⾏でレンタカーを借り、運転していました。 すると交差点で信号にあたりました。あなたは直進しました。 註: 魔夜峰央 『パタリロ』 に登場する架空の王国。 駐⾞違反は15年の禁固刑だから旅⾏の時は気をつけよう︕
  19. 19. 「使いやすい」とはどういうことか 19 あなたが運転を続けると、また交差点で信号にあたりました。 あなたは直進しました。
  20. 20. 「使いやすい」とはどういうことか 20 あなたが運転を続けると、交差点で今度は次のような信号にあたりました。 !?
  21. 21. 「使いやすい」とはどういうことか 21 あなたの後ろからは後続⾞が来ています。不適切にブレーキを踏んだら追突されそ うです。あなたの前⽅からは左折⾞が来ています。もし左折⾞が⽌まらないなら、あ なたがブレーキを踏まないと衝突します。 !?
  22. 22. 「使いやすい」とはどういうことか 22 あなたならどうしますか︖ ブレーキを踏まずに直進しますか︖ ブレーキを踏みますか︖ Zoomのチャットに ぜひ書いてね︕ !?
  23. 23. ど う す る ・ ・ ・ ・ っ ど う す る ・ ・ ・ ・ っ !? !?
  24. 24. 関 係 な い 行 け
  25. 25. 25 だ ー れ が 殺 し た ク ッ ク ロ ビ ー ン
  26. 26. あなたのなかでなにが起きていたのか 26 あなたは⽇本で信号機を 「知って」 いました。 つまり過去に 「⾚は⽌まれ、⻘は進め」 であることを学習していました。 ⽇本 ⾚は⽌まれ ⻘は進め (学習)
  27. 27. あなたのなかでなにが起きていたのか 27 マリネラ王国でも、最初に出てきた信号は⽇本と同じでした。 あなたは 「⽇本と同じルールなんだ」 「⾚は⽌まれ、⻘は進め」 と学習しました。 ⽇本 マリネラ王国 ⾚は⽌まれ ⻘は進め (学習) ⾚は⽌まれ ⻘は進め (学習) ⽇本と同じ ルールだ (学習)
  28. 28. あなたのなかでなにが起きていたのか 28 マリネラ王国での2つ⽬の信号機も、同じ⾊でした。 あなたは 「⾚は⽌まれ、⻘は進め」 であるという確信を強めました。 ⽇本 マリネラ王国 ⾚は⽌まれ ⻘は進め (学習) ⾚は⽌まれ ⻘は進め (学習) ⾚は⽌まれ ⻘は進め (学習の強化)
  29. 29. あなたのなかでなにが起きていたのか 29 ところがマリネラ王国の3つ⽬の信号は、これまでの信号機と異なっていました。 そのため、あなたはこれまでの学習から使いかたを推測することができませんでした。 ⽇本 マリネラ王国 これまで 学習したこと とちがう︕︖ 学習が 崩壊 ⾚は⽌まれ ⻘は進め (学習) ⾚は⽌まれ ⻘は進め (学習) ⾚は⽌まれ ⻘は進め (学習の強化)
  30. 30. 同じルールがくりかえされる → 学習する 「使いやすい」とはどういうことか 30 「使いやすい」を分解すると、多くは「過去の学習が活かせる」かどうかで決まります。 そして「学習」とは「同じルールがくりかえされる」ことでされていきます。 つまり「使いやすい」の⼤原則は「同じルールがくりかえされる」ことなのです。 次にまた同じルールに出会ったとき、どうしていいか推測がつく(学習が活かせる) 「使いやすい」と感じる
  31. 31. 同じルールがくりかえされる → 学習する 「使いやすい」とはどういうことか 31 Webサイトやアプリのなかに「例外」をつくると、ユーザーが過去の学習を活かすこと ができません。そのため、ユーザーは混乱したり、使いかたに⼾惑ったりします。 「くり かえし」 による学習を破壊する 「例外」 はできるかぎりつくらないことが望ましい。 「例外」に遭遇する → 過去の学習から使いかたが推測できない 「使いづらい」と感じる 学習が 崩壊
  32. 32. 局所的な例外をつくるべきケース 32 ただし、局所的に例外をつくるべきケースがあります。たとえば渋⾕駅前交差点のよ うに、標準ルールだけではうまく解決できない複雑な現象が発⽣する箇所において は、局所的に既存のルールを拡張して例外をつくることで、スムーズな解決をうなが すことができます。ただし、例外は 「ユーザーが使いやすくなる」 ⽬的でつくるべきも のです。 渋⾕駅前交差点 「例外」の設置 使いやすい スクランブル 交差点 既存ルール だけでは 解決できない 交通量が 極端に多い
  33. 33. ⾵船 いる︖ 「使いやすい」 Webサイトやアプリをつくるために 33 Webサイトやアプリを 「使いやすく」 維持する原則は 「同じルールがくりかえされる ようにする」 ことです。「例外」 をできるかぎりつくらず 「標準化」 をしましょう。 Webサイト アプリ キービジュアル グローバルナビゲーション 本⽂ 本⽂ ナビゲーション キービジュアル グローバルナビゲーション 本⽂ 同じデザイン 同じ情報構造 本⽂ ナビゲーション 同じデザイン 同じ情報構造 同じデザイン 同じ情報構造 同じデザイン 同じ情報構造 突然の 例外 突然の 例外 学習が 崩壊
  34. 34. 34 決裁者の思いつき そ ん な こ と 知 っ た こ と か !! オ ー ロ ラ エ ク ス キ ュ ー シ ョ ン !!
  35. 35. 35 本来はステークホルダーにきちんと説明し 同じ⽅向(ユーザー)へむくべきです。 しかし、現実は説得もままならないことも・・・。 そんなときはWebサイトやアプリの デザインや情報設計で 解決を図ることになります。
  36. 36. 36 ウチの事業部の商品を いちばん⽬⽴つところに置け︕ あるあるエピソード
  37. 37. 誰のおかげで 給料がもらえてると 思っているんだ ある⼤⼿電器メーカーにて 37 ウチの事業部が 全社でいちばん 稼いでるんだ 他の事業部からも 不満が殺到してしまう ウチの事業部の商品を いちばん⽬⽴つところに置け︕ そ・・・ そんなことをしたら ユーザー動線が めちゃめちゃだ
  38. 38. 38 早 く な ん と か し な い と … 駄 目 だ こ い つ …
  39. 39. 対処⽅法 39 わかりました︕ トップページにバナーエリアを つくってそこに掲載しましょう ⼀等地ですよ︕
  40. 40. オ イ オ イ オ イ た い し た 策 略 家 で す ね ほ う ト ッ プ ペ ー ジ の バ ナ ー に 掲 載 で す か … 死 ぬ わ ア イ ツ
  41. 41. できあがった画⾯ 41 キービジュアル お知らせ プレスリリース 事業部Aの 商品 事業部Bの 商品 事業部Cの 商品 事業部Dの 商品 事業部Eの 商品 事業部Fの 商品 フラットテレビDXシリーズ 最新商品はこちら
  42. 42. 社内の反応 42 そうそう これでいいんだよ
  43. 43. 解説 43 トップページに「いかにも広告なバナー」をおいたとき、ユーザーの視線はどのように流 れるでしょうか。ユーザーは「広告だ」と思った瞬間、無意識のうちに読まずに視線が ジャンプする傾向があります。つまりこのバナーはユーザーにとって無いのと同じなので、 ユーザー動線の邪魔になりません。本当にこの商品がほしい⼈のみ反応します。 キービジュアル お知らせ プレスリリース 事業部Aの 商品 事業部Bの 商品 事業部Cの 商品 事業部Dの 商品 事業部Eの 商品 事業部Fの 商品 フラットテレビDXシリーズ 最新商品はこちら いかにも広告なバナーは 無意識に視線がスキップされ ユーザー動線を邪魔しない 主動線
  44. 44. 解説 44 アプリにおいても同じ⼯夫ができます。アプリを⽴ち上げたときに初期表⽰される画 ⾯(ホーム)と、ユーザーがよく使う機能を別メニューにします。(次スライドを参 照) ユーザーはアプリを⽴ち上げるとホームをじっくり⾒ることなく、よく使う機能へすぐ 移動するので、ホーム画⾯に情報を満載しても、ユーザー動線の邪魔になりません。 ホーム画⾯は「新商品の情報はないかな」というような、いかにもホーム画⾯にあり そうな情報を探すユーザーにのみ使われます。
  45. 45. 会員証 できあがった画⾯ 45 フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら クーポン ホームの⼤量の 情報がユーザーの 動線を邪魔する ことはない ホーム クーポン 会員証 その他 グローバルナビゲーション ホーム クーポン 会員証 その他 ユーザーはアプリを⽴ち上げてすぐ 「クーポン」 「会員証」 へ移動する ユーザーがよく使う機能である 「クーポン」 「会員証」 は別メニュー 本当に⾒たい ユーザーだけが ⾒る
  46. 46. わ ざ と だ よ ?
  47. 47. 47 その商品名、お客様は知りませんよ︕︖ あるあるエピソード
  48. 48. ある保険会社にて 48 お客様は商品名で えらぶはずだからな そもそも当社の 商品名をユーザーは 覚えてないよ 商品⼀覧ページには 商品名をドーンと ⼤きく並べてくれ 商品名だけを⾒て 商品の差を理解できる ユーザーなんて いないよ
  49. 49. 49 おまえは何を言っているんだ 毎週日曜19:00は! UXデザイン祭り
  50. 50. 対処⽅法 50 わかりました︕ ⼀覧ページに商品名を 並べますね 合わせて 探しやすいよう いろんな切り⼝で 動線をつくりましょう
  51. 51. できあがった画⾯ 51 いきいき保険 わくわく保険 さわやか保険 この商品が向いているお客様: 終⾝にわたり死亡保険⾦を備えたい この商品が向いているお客様: がん・⼼筋梗塞・脳卒中の新3⼤疾病に備えたい この商品が向いているお客様: 要介護になったときに保険⾦を備えたい 終⾝保険 がん 特定疾病 医療保険 介護保険
  52. 52. できあがった画⾯ 52 いきいき保険 わくわく保険 さわやか保険 この商品が向いているお客様: 終⾝にわたり死亡保険⾦を備えたい この商品が向いているお客様: がん・⼼筋梗塞・脳卒中の新3⼤疾病に備えたい この商品が向いているお客様: 要介護になったときに保険⾦を備えたい 終⾝保険 がん 特定疾病 医療保険 介護保険 ⼈⽣のイベント からえらぶ ⼼配ごと からえらぶ 商品名 からえらぶ 保険のえらびかたがわからない⽅は ライフプランナーに相談しましょう 結婚 就職 出産・育児 定年退職 ⼈⽣のイベントからえらぶ ⾃分が万が⼀のとき 家族を守りたい 思いがけない ケガや⼊院に備えたい とくに重⼤な疾病(が ん・⼼筋梗塞・脳卒 中)に備えたい ⽼後の年⾦が 少ないと不安 ⼼配ことからえらぶ
  53. 53. 社内の反応 53 そうそう これでいいんだよ
  54. 54. いきいき保険 わくわく保険 さわやか保険 この商品が向いているお客様: 終⾝にわたり死亡保険⾦を備えたい この商品が向いているお客様: がん・⼼筋梗塞・脳卒中の新3⼤疾病に備えたい この商品が向いているお客様: 要介護になったときに保険⾦を備えたい 終⾝保険 がん 特定疾病 医療保険 介護保険 解説 54 ユーザーから⾒て商品名から差がわかりづらいとき、商品名以外にユーザーが商品 をえらぶための「取っ掛かり」が必要です。商品⼀覧ページでは商品名とともに「この 商品が向いているお客様」という項⽬を添えて、タグとしてユーザーが想起しやすい キーワードや、ユーザーの⽬的を記載することで、ユーザーがえらべるようにします。 それぞれの商品に「この商品が 向いているお客様」タグを添え、 ユーザーが想起しやすいキー ワードや、ユーザーの⽬的を記 載することで、えらぶ「取っ掛か り」を与える 商品名で 商品の差を理解して えらべるユーザーはいない
  55. 55. 解説 55 商品⼀覧ページより上位に振り分けページをもうけ、保険の検討トリガーになりや すい「⼈⽣のイベントからえらぶ」 「⼼配ごとからえらぶ」 「商品名からえらぶ」 と商 品名以外の選択⽅法を提供します。また加えて、保険のような「わかりづらい」商 材では「えらびかたがわからない⽅」むけの動線も⽤意します。 いきいき保険 わくわく保険 さわやか保険 この商品が向いているお客様: 終⾝にわたり死亡保険⾦を備えたい この商品が向いているお客様: がん・⼼筋梗塞・脳卒中の新3⼤疾病に備えたい この商品が向いているお客様: 要介護になったときに保険⾦を備えたい 終⾝保険 がん 特定疾病 医療保険 介護保険 ⼈⽣のイベント からえらぶ ⼼配ごと からえらぶ 商品名 からえらぶ 保険のえらびかたがわからない⽅は ライフプランナーに相談しましょう 結婚 就職 出産・育児 定年退職 ⼈⽣のイベントからえらぶ ⾃分が万が⼀のとき 家族を守りたい 思いがけない ケガや⼊院に備えたい とくに重⼤な疾病(がん・⼼筋梗 塞・脳卒中)に備えたい ⽼後の年⾦が 少ないと不安 ⼼配ことからえらぶ 商品名以外の 選択⽅法を 上位ストラクチャで 提供する えらびかたが わからない⽅むけの 動線も⽤意
  56. 56. 56 すべての情報を公平に並べたら ユーザーが求めるものと差異がありすぎる あるあるエピソード
  57. 57. 製品A 製品B 製品Aのドライバダウンロード 製品C 製品D 製品E 製品F あるITソフトベンダー会社にて 57 しかも当社は 製品AとBで 売上の95%だから ユーザーのニーズも そこに集中してる いやウチのサイト アクセスの8割が 製品Aのドライバ ダウンロードなんだけど 当社の製品は すべて公平に 並べろ︕ なんだこの トップページは
  58. 58. 素 人 は 黙 っ と れ ── Web担 プロダクトを改修する 社内から要望 しかし…
  59. 59. 対処⽅法 59 わかりました︕ 全部の製品を均等に 並べます ただユーザーのニーズが 強いコンテンツがあるので ショートカットエリアを つくりますね
  60. 60. できあがった画⾯ 60 製品A 製品B 製品C 製品D 製品E 製品F 製品G 製品H 製品A ドライバダウンロード 製品A 製品B 注⽬のコンテンツ: 製品⼀覧:
  61. 61. 社内の反応 61 そうそう これでいいんだよ
  62. 62. 解説 62 Webサイトやアプリのすべてのコンテンツについて、ユーザーニーズが均⼀であること はほぼあり得ません。ニーズが集中するコンテンツとそうでないコンテンツがあります。 メインコンテンツの前に、ニーズの集中するコンテンツへのショートカットをおくことで、 ユーザーをスムーズに誘導します。 製品A 製品B 製品C 製品D 製品E 製品F 製品G 製品H 製品A ドライバダウンロード 製品A 製品B 注⽬のコンテンツ: 製品⼀覧: ニーズの集中する コンテンツへの ショートカットをおく
  63. 63. 63 注意喚起⽂とお詫び⽂に 埋め尽くされるトップページ あるあるエピソード
  64. 64. ある銀⾏にて 64 え・・・ 先⽇に x億円かけて サイトリニューアルした ばかりなのに 先⽇のシステム障害の お詫び⽂も緊急で ⽬⽴つように載せろ 「振り込め詐欺」の防⽌のため トップページに緊急の案内⽂を ⽬⽴つように載せろ その前のお詫び⽂︖ 残しておけ
  65. 65. ま る で 成 長 し て い な い ………
  66. 66. できあがった画⾯ 66 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注 意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 XXX銀⾏ システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。 システム障害のお詫び⽂。 システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。 システム障害のお詫び⽂。 ここからやっと本⽂
  67. 67. 解説 67 過去20年にわたり、メガバンク各社は億単位の⾦額をかけてサイトリニューアル → しばらくするとトップページのファーストビューが⾚い⽂字で埋まる → サイトリニューア ルできれいになる → しばらくするとまたトップページのファーストビューが⾚い⽂字で 埋まる、というサイクルをくりかえしてきました。 真っ⾚に染まったファーストビューを⾒ることを⽬的に訪問するユーザーは、果たして 何⼈いるのでしょうか。 この反省から、今ではメガバンク各社とも「緊急のお知らせ」はいつも存在する、とい う前提にたって、あらかじめトップページに「緊急のお知らせ」エリアを常設したデザイ ンをするようになりました。(次スライドを参照)
  68. 68. できあがった画⾯ 68 「振り込め詐欺」の注意喚起の案内⽂ XXX銀⾏ システム障害のお詫び⽂。 キービジュアル 重要なお知らせ: 個⼈のお客様 法⼈のお客様 「緊急のお知らせ」エリアが 常設されている
  69. 69. 品質の良い情報設計(IA)とは 69 Webサイトやアプリの「情報設計(IA)」は 「情報をわかりやすく整理すること」 です。品質の良い情報設計は、現在だけでなく未来にわたって情報のわかりやすさ を担保します。ふつうの情報設計は現在に⾒えている情報だけを整理します。品 質の良い情報設計は 「将来にこんな改修が発⽣するのではないか」 という予測し うる変更や、さらには予測しえない情報構造の変化すら受け⼊れても使いやすさが 崩れない、将来にわたる堅牢性をもちます。 ふつうの情報設計 現在の情報 だけ整理 新しい情報が 増えると混乱 品質の良いの情報設計 将来の拡張にも 堅牢性を担保
  70. 70. 70 神からの啓⽰ あるあるエピソード
  71. 71. ! " # $ % & ' ( $ ) * + , - . ' !! 社⻑からの指⽰
  72. 72. どうにもならないこともある 72 ときには 「本当に⾔われたそのままにつくらなければならない」 というケースも存在し ます。圧倒的な権⼒(社⻑やそれに準ずる役員など)からのマイクロマネジメント 的な指⽰の場合、現場に⼯夫の余地がなく、⾔われたままに・・・とならざるをえな い。
  73. 73. ある⼤⼿⾃動⾞メーカーにて 73 XXX自動車 かつてない走り心地 xxxxxシリーズ 新車デビュー クルマをえらぶ
  74. 74. ある⼤⼿⾃動⾞メーカーにて 74 ご購⼊サポート 販売店検索 お⾒積もりシミュレーション ローン・保険 試乗⾞検索 アフターサービス・メンテナンスのご案内 オーナーの⽅へ ⾞検 保証
  75. 75. ある⼤⼿⾃動⾞メーカーにて 75 ⾞検 保証 北海道地区のおすすめ情報 ニュース • xxxxxシリーズの新⾞を発売いたしました • 当社のレーシングチームがxxx杯にてグランプリを獲得 • xxxxxシリーズの新CMが開始、モデルには⼈気急上昇中の秋野杏奈を採⽤ 美味しい、うれしい北海道 オトクなクーポンや、北海道の魅⼒を紹介︕ !?
  76. 76. ある⼤⼿⾃動⾞メーカーにて 76 ⾞検 保証 北海道地区のおすすめ情報 ニュース • xxxxxシリーズの新⾞を発売いたしました • 当社のレーシングチームがxxx杯にてグランプリを獲得 • xxxxxシリーズの新CMが開始、モデルには⼈気急上昇中の秋野杏奈を採⽤ 美味しい、うれしい北海道 オトクなクーポンや、北海道の魅⼒を紹介︕ なぜ突然に「北海道のおすすめ情報」が・・・。 ほかのコンテンツと粒度も情報の質も異なる。対象とするユーザーも不明瞭。 ふつうに⼤⼿企業のトップページを設計したら、こうなるはずがない。
  77. 77. 77 社内でなにがあったのか想像するほどに 「Web担当者ってタイヘンだな・・・」 と思わざるをえない。
  78. 78. 社 長 の 為 に プ ロ ダ ク ト が あ る ん じ ゃ ね ぇ ユ ー ザ ー の 為 に プ ロ ダ ク ト が あ る ん だ !! お 前 な ぁ ん か 勘 ち が い し と り ゃ せ ん か ?
  79. 79. 79 まとめ
  80. 80. ⼩宇宙を燃やせ︕ コスモ 80
  81. 81. 81 第七感に⽬覚めろ セブンセンシズ
  82. 82. まとめ 82 • 「使いやすさ」とは「過去の学習が活かせること」、 「過去の学習が活かせる」に は「同じルールがくりかえされること」 • Webサイトやアプリを運営していると、さまざまな社内からの要望や圧⼒に向き 合わなければならない。そのいくつかは相⼿の視点から⾒えている範囲の「個別 最適」であり、デザインや情報設計の統⼀を崩すものであることがある。 • 社内政治において、相⼿と対話の余地があることもあるが、余地もないこともあ る。その場合はデザインや情報設計で、相⼿の要望を満たしつつ、ユーザーに 価値を届けられるプロダクトのかたちを守り続けられるよう、両⽴を模索すること を諦めない。
  83. 83. その社内政治力もらってくね。あといらないと思うけど フォームにリセットボタンいる?
  84. 84. 84 ありがとうございました ⽻⼭ 祥樹 (⽇本ウェブデザイン株式会社) Twitter: @storywriter
  85. 85. アンケート回答してね︕ 85
  86. 86. ⽻⼭のプレゼンのアレ が、 LINEスタンプになりました︕ スタンプ名︓ハーミィ(CSS編) 作者名︓⽻⼭ 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類
  87. 87. 質疑応答 87

×