「ウチの事業部の商品をWebサイト・アプリで目立たせて！」私だけじゃなかった！ 社内政治と落としどころの見つけ方
•
3 likes•3,318 views
Web担当者Forum秋のイベント 11月7日（月）14:05 KA1-4 セッションのスライドです。 「ウチの事業部の商品をWebサイトとアプリのトップに載せて！」 「新機能をとにかく目立たせろ！ 利用数をとにかく増やして！」 Webサイトやアプリを運用していると、社内のあちこちから、さまざまな圧力や依頼が舞い込むものです。えらい人からの現場を知らない指示であったり、発言力の強い部署からの高圧的な依頼であったり、決裁者からの思いつきの要望であったり……。その多くは「その人の視点から見た世界」の個別最適であり、全体最適でのユーザー目線に欠けていたり、Webサイトやアプリの使いやすさを毀損する内容であったりします。Web担当者やプロダクトマネージャーは社内の不要な衝突を避けながら、決裁者からは予算を引き出し、ユーザーに価値を届けられるプロダクトのかたちを守り続けなければなりません。本セッションでは、業界歴20年超の発表者が、あるあるエピソードを取り上げながら、社内政治の泣き笑いと、落としどころの見つけかたを模索します。
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 「ウチの事業部の商品をWebサイト・アプリで目立たせて！」私だけじゃなかった！ 社内政治と落としどころの見つけ方
Similar to 「ウチの事業部の商品をWebサイト・アプリで目立たせて！」私だけじゃなかった！ 社内政治と落としどころの見つけ方 (9)
More from Yoshiki Hayama
More from Yoshiki Hayama (7)
「ウチの事業部の商品をWebサイト・アプリで目立たせて！」私だけじゃなかった！ 社内政治と落としどころの見つけ方
- 1. 私だけじゃなかった︕ 社内政治と落としどころの⾒つけ⽅ 2022年11⽉7⽇（⽉） ⽇本ウェブデザイン株式会社 / HCD-Net認定 ⼈間中⼼設計専⾨家 ⽻⼭ 祥樹 @storywriter 1 Twitterの ハッシュタグは #webtan 画⾯キャプチャ 投稿OK︕ ウチの事業部の商品を Webサイト・アプリで⽬⽴たせて︕ Zoomの チャットで いっしょに 盛りあがってね
- 3. Zoomの「チャット」で盛りあがろう︕ 3 チャット Q&Aに 投稿したものは 質疑応答で 答えます Zoom のチャットへ どんどん書いてね︕ （Twitter感覚で） Q&A 「全員」 で送信︕
- 5. ⽻⼭ 祥樹 @storywriter 5 ⽇本ウェブデザイン株式会社 代表取締役CEO 使いやすいプロダクトをつくる専⾨家 HCD-Net認定 ⼈間中⼼設計専⾨家 Web業界に23年、AIシステムのプロダクトマネージャーとUXデザインを5年 主な実績など 2009年 ⽇経パソコン 企業サイトランキング2009 ⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 ⽇本の⼤⼿企業150サイト中、第4位 主な専⾨分野 ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、アクセシビリティ、ライター
- 8. 発注側も受託側もふくめ25年間がんばってきた 8 某⼤⼿予備校の 宣伝部のバイトで ウェブ業界へ Web担当者 Web制作者 1998 2002 2006 2020 1996 Web制作を はじめる 某⼤⼿SIer に就職 異動で本体の Web統括部へ ⼦会社で Web担当者 2010 ⼈間中⼼設計 専⾨家の認定 産業技術 ⼤学院⼤学 副業を法⼈化 2004 プロダクトマネージャー 2013 副業で個⼈事業主 本格的に開始 2022 2016 異動でAIプロダクトの プロダクトマネージャーに
- 24. 関 係 な い 行 け
- 26. あなたのなかでなにが起きていたのか 26 あなたは⽇本で信号機を 「知って」 いました。 つまり過去に 「⾚は⽌まれ、⻘は進め」 であることを学習していました。 ⽇本 ⾚は⽌まれ ⻘は進め （学習）
- 27. あなたのなかでなにが起きていたのか 27 マリネラ王国でも、最初に出てきた信号は⽇本と同じでした。 あなたは 「⽇本と同じルールなんだ」 「⾚は⽌まれ、⻘は進め」 と学習しました。 ⽇本 マリネラ王国 ⾚は⽌まれ ⻘は進め （学習） ⾚は⽌まれ ⻘は進め （学習） ⽇本と同じ ルールだ （学習）
- 28. あなたのなかでなにが起きていたのか 28 マリネラ王国での2つ⽬の信号機も、同じ⾊でした。 あなたは 「⾚は⽌まれ、⻘は進め」 であるという確信を強めました。 ⽇本 マリネラ王国 ⾚は⽌まれ ⻘は進め （学習） ⾚は⽌まれ ⻘は進め （学習） ⾚は⽌まれ ⻘は進め （学習の強化）
- 31. 同じルールがくりかえされる → 学習する 「使いやすい」とはどういうことか 31 Webサイトやアプリのなかに「例外」をつくると、ユーザーが過去の学習を活かすこと ができません。そのため、ユーザーは混乱したり、使いかたに⼾惑ったりします。 「くり かえし」 による学習を破壊する 「例外」 はできるかぎりつくらないことが望ましい。 「例外」に遭遇する → 過去の学習から使いかたが推測できない 「使いづらい」と感じる 学習が 崩壊
- 32. 局所的な例外をつくるべきケース 32 ただし、局所的に例外をつくるべきケースがあります。たとえば渋⾕駅前交差点のよ うに、標準ルールだけではうまく解決できない複雑な現象が発⽣する箇所において は、局所的に既存のルールを拡張して例外をつくることで、スムーズな解決をうなが すことができます。ただし、例外は 「ユーザーが使いやすくなる」 ⽬的でつくるべきも のです。 渋⾕駅前交差点 「例外」の設置 使いやすい スクランブル 交差点 既存ルール だけでは 解決できない 交通量が 極端に多い
- 33. ⾵船 いる︖ 「使いやすい」 Webサイトやアプリをつくるために 33 Webサイトやアプリを 「使いやすく」 維持する原則は 「同じルールがくりかえされる ようにする」 ことです。「例外」 をできるかぎりつくらず 「標準化」 をしましょう。 Webサイト アプリ キービジュアル グローバルナビゲーション 本⽂ 本⽂ ナビゲーション キービジュアル グローバルナビゲーション 本⽂ 同じデザイン 同じ情報構造 本⽂ ナビゲーション 同じデザイン 同じ情報構造 同じデザイン 同じ情報構造 同じデザイン 同じ情報構造 突然の 例外 突然の 例外 学習が 崩壊
- 45. 会員証 できあがった画⾯ 45 フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら フラットテレビDXシリーズ 最新商品はこちら クーポン ホームの⼤量の 情報がユーザーの 動線を邪魔する ことはない ホーム クーポン 会員証 その他 グローバルナビゲーション ホーム クーポン 会員証 その他 ユーザーはアプリを⽴ち上げてすぐ 「クーポン」 「会員証」 へ移動する ユーザーがよく使う機能である 「クーポン」 「会員証」 は別メニュー 本当に⾒たい ユーザーだけが ⾒る
- 46. わ ざ と だ よ ？
- 52. できあがった画⾯ 52 いきいき保険 わくわく保険 さわやか保険 この商品が向いているお客様: 終⾝にわたり死亡保険⾦を備えたい この商品が向いているお客様: がん・⼼筋梗塞・脳卒中の新3⼤疾病に備えたい この商品が向いているお客様: 要介護になったときに保険⾦を備えたい 終⾝保険 がん 特定疾病 医療保険 介護保険 ⼈⽣のイベント からえらぶ ⼼配ごと からえらぶ 商品名 からえらぶ 保険のえらびかたがわからない⽅は ライフプランナーに相談しましょう 結婚 就職 出産・育児 定年退職 ⼈⽣のイベントからえらぶ ⾃分が万が⼀のとき 家族を守りたい 思いがけない ケガや⼊院に備えたい とくに重⼤な疾病（が ん・⼼筋梗塞・脳卒 中）に備えたい ⽼後の年⾦が 少ないと不安 ⼼配ことからえらぶ
- 55. 解説 55 商品⼀覧ページより上位に振り分けページをもうけ、保険の検討トリガーになりや すい「⼈⽣のイベントからえらぶ」 「⼼配ごとからえらぶ」 「商品名からえらぶ」 と商 品名以外の選択⽅法を提供します。また加えて、保険のような「わかりづらい」商 材では「えらびかたがわからない⽅」むけの動線も⽤意します。 いきいき保険 わくわく保険 さわやか保険 この商品が向いているお客様: 終⾝にわたり死亡保険⾦を備えたい この商品が向いているお客様: がん・⼼筋梗塞・脳卒中の新3⼤疾病に備えたい この商品が向いているお客様: 要介護になったときに保険⾦を備えたい 終⾝保険 がん 特定疾病 医療保険 介護保険 ⼈⽣のイベント からえらぶ ⼼配ごと からえらぶ 商品名 からえらぶ 保険のえらびかたがわからない⽅は ライフプランナーに相談しましょう 結婚 就職 出産・育児 定年退職 ⼈⽣のイベントからえらぶ ⾃分が万が⼀のとき 家族を守りたい 思いがけない ケガや⼊院に備えたい とくに重⼤な疾病（がん・⼼筋梗 塞・脳卒中）に備えたい ⽼後の年⾦が 少ないと不安 ⼼配ことからえらぶ 商品名以外の 選択⽅法を 上位ストラクチャで 提供する えらびかたが わからない⽅むけの 動線も⽤意
- 57. 製品A 製品B 製品Aのドライバダウンロード 製品C 製品D 製品E 製品F あるITソフトベンダー会社にて 57 しかも当社は 製品AとBで 売上の95%だから ユーザーのニーズも そこに集中してる いやウチのサイト アクセスの8割が 製品Aのドライバ ダウンロードなんだけど 当社の製品は すべて公平に 並べろ︕ なんだこの トップページは
- 60. できあがった画⾯ 60 製品A 製品B 製品C 製品D 製品E 製品F 製品G 製品H 製品A ドライバダウンロード 製品A 製品B 注⽬のコンテンツ: 製品⼀覧:
- 62. 解説 62 Webサイトやアプリのすべてのコンテンツについて、ユーザーニーズが均⼀であること はほぼあり得ません。ニーズが集中するコンテンツとそうでないコンテンツがあります。 メインコンテンツの前に、ニーズの集中するコンテンツへのショートカットをおくことで、 ユーザーをスムーズに誘導します。 製品A 製品B 製品C 製品D 製品E 製品F 製品G 製品H 製品A ドライバダウンロード 製品A 製品B 注⽬のコンテンツ: 製品⼀覧: ニーズの集中する コンテンツへの ショートカットをおく
- 66. できあがった画⾯ 66 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注 意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 「振り込め詐欺」の注意喚起の案内⽂。 XXX銀⾏ システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。 システム障害のお詫び⽂。 システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。システム障害のお詫び⽂。 システム障害のお詫び⽂。 ここからやっと本⽂
- 67. 解説 67 過去20年にわたり、メガバンク各社は億単位の⾦額をかけてサイトリニューアル → しばらくするとトップページのファーストビューが⾚い⽂字で埋まる → サイトリニューア ルできれいになる → しばらくするとまたトップページのファーストビューが⾚い⽂字で 埋まる、というサイクルをくりかえしてきました。 真っ⾚に染まったファーストビューを⾒ることを⽬的に訪問するユーザーは、果たして 何⼈いるのでしょうか。 この反省から、今ではメガバンク各社とも「緊急のお知らせ」はいつも存在する、とい う前提にたって、あらかじめトップページに「緊急のお知らせ」エリアを常設したデザイ ンをするようになりました。（次スライドを参照）
- 69. 品質の良い情報設計（IA）とは 69 Webサイトやアプリの「情報設計（IA）」は 「情報をわかりやすく整理すること」 です。品質の良い情報設計は、現在だけでなく未来にわたって情報のわかりやすさ を担保します。ふつうの情報設計は現在に⾒えている情報だけを整理します。品 質の良い情報設計は 「将来にこんな改修が発⽣するのではないか」 という予測し うる変更や、さらには予測しえない情報構造の変化すら受け⼊れても使いやすさが 崩れない、将来にわたる堅牢性をもちます。 ふつうの情報設計 現在の情報 だけ整理 新しい情報が 増えると混乱 品質の良いの情報設計 将来の拡張にも 堅牢性を担保
- 75. ある⼤⼿⾃動⾞メーカーにて 75 ⾞検 保証 北海道地区のおすすめ情報 ニュース • xxxxxシリーズの新⾞を発売いたしました • 当社のレーシングチームがxxx杯にてグランプリを獲得 • xxxxxシリーズの新CMが開始、モデルには⼈気急上昇中の秋野杏奈を採⽤ 美味しい、うれしい北海道 オトクなクーポンや、北海道の魅⼒を紹介︕ !?
- 76. ある⼤⼿⾃動⾞メーカーにて 76 ⾞検 保証 北海道地区のおすすめ情報 ニュース • xxxxxシリーズの新⾞を発売いたしました • 当社のレーシングチームがxxx杯にてグランプリを獲得 • xxxxxシリーズの新CMが開始、モデルには⼈気急上昇中の秋野杏奈を採⽤ 美味しい、うれしい北海道 オトクなクーポンや、北海道の魅⼒を紹介︕ なぜ突然に「北海道のおすすめ情報」が・・・。 ほかのコンテンツと粒度も情報の質も異なる。対象とするユーザーも不明瞭。 ふつうに⼤⼿企業のトップページを設計したら、こうなるはずがない。
- 79. 79 まとめ
- 80. ⼩宇宙を燃やせ︕ コスモ 80
- 82. まとめ 82 • 「使いやすさ」とは「過去の学習が活かせること」、 「過去の学習が活かせる」に は「同じルールがくりかえされること」 • Webサイトやアプリを運営していると、さまざまな社内からの要望や圧⼒に向き 合わなければならない。そのいくつかは相⼿の視点から⾒えている範囲の「個別 最適」であり、デザインや情報設計の統⼀を崩すものであることがある。 • 社内政治において、相⼿と対話の余地があることもあるが、余地もないこともあ る。その場合はデザインや情報設計で、相⼿の要望を満たしつつ、ユーザーに 価値を届けられるプロダクトのかたちを守り続けられるよう、両⽴を模索すること を諦めない。
- 84. 84 ありがとうございました ⽻⼭ 祥樹 （⽇本ウェブデザイン株式会社） Twitter: @storywriter
- 85. アンケート回答してね︕ 85
- 86. ⽻⼭のプレゼンのアレ が、 LINEスタンプになりました︕ スタンプ名︓ハーミィ（CSS編） 作者名︓⽻⼭ 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類
- 87. 質疑応答 87