uxの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【mt東京−42】カスタムフィールド製造業の集い...
TRANSCRIPT
![Page 1: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/1.jpg)
UXの視点からカスタムフィールドを増やすとなぜ息苦しくなるのか考える
1
HCD-Net認定 ⼈間中⼼設計専⾨家⽻⼭ 祥樹
2017年12⽉16⽇(⼟) 【MT東京42】カスタムフィールド製造業の集い
〜カスタムフィールド職⼈に⼤切なこと〜
![Page 2: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/2.jpg)
2
ウェブは拡⼤する⼀⽅。
各社とも、ウェブサイトに⼒を⼊れ続け、その規模は⼤きくなり続けている。
![Page 3: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/3.jpg)
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
3
例:あるウェブサイト:
ページ数
カスタムフィールド数
20,000 ページ
200 フィールド
新規記事の登録タイトル
サブタイトル
公開⽇
meta description
年 ⽉ ⽇ カレンダー
プレビュー
meta keywords
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ1
関係する商品
▼
カテゴリ2▼
カテゴリ3▼
商品A 商品B 商品C
商品D 商品E
⼀覧ページのテキスト
ふつうにつくるとこうなる →
![Page 4: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/4.jpg)
4
それでも、うまく運⽤するためには、どうすればいい?
![Page 5: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/5.jpg)
⽻⼭ 祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト• 使いやすいWebサイトをつくる専⾨家• HCD-Net認定 ⼈間中⼼設計専⾨家
v Web業界に20年くらい、Watsonは2年ほど
v 担当したWebサイトが、雑誌のWebユーザビリティランキングで国内トップクラスの評価を受ける ほか実積多数
v 主な専⾨分野• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、
アクセシビリティ、⼤規模CMS、Watson、ライター
Twi$er:@storywriter WebSite:storywriter.jp5
ユーザー⼼理をつかむプロです
![Page 6: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/6.jpg)
6
メンタルモデルユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊:http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」コンピュータ・IT 総合 最⾼「9位」
![Page 7: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/7.jpg)
7
今⽇の主旨:カスタムフィールドを増やしたときオペレーターにとって何が起きているのか
UXデザインの視点「認知⼼理学」から考える。
![Page 8: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/8.jpg)
8
本⽇のポイント:CMS案件の特徴
「⾒えるもの」と「仕上がるもの」が異なるCMS案件には「ウェブページと管理画⾯で⾒えているものが異なる」という難しさがある。
![Page 9: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/9.jpg)
9
CMS案件は、何が難しいのか:
CMS案件は、表側のウェブページだけでなく、「管理画⾯のどこで何すると、どう反映されるのか」「何はできて、何はできないのか」という、裏側がある。
![Page 10: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/10.jpg)
10
CMSの難しさ=マンマシン・インタフェース:
「管理画⾯で⾒えるものと、ウェブページが異なる」のが、⼈間の認知には、根本的に難しい。
認知しやすい 認知しづらい
直接に触れる/⾒たまま 何かを介する/⾒たのと異なる
![Page 11: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/11.jpg)
11
CMSは、さらに認知⼿続きが複雑:
管理画⾯で⼊⼒したものが、複数の箇所や⾒えない箇所にも反映される。全体構造を知らないといけない。
認知しづらい とても認知しづらい
何かを介する/⾒たのと異なる ⼊⼒がどこに反映するのかわからない?????
![Page 12: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/12.jpg)
12
これはまだわかりやすい:
ニュース記事
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄
![Page 13: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/13.jpg)
13
ページ構造が複雑になった:
ニュース記事
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
![Page 14: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/14.jpg)
14
ページ構造が複雑になった:
ニュース記事
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
⼊⼒と出⼒の対応が分割された。
「本⽂」と「画像」って別なの?
あ、そう・・・
![Page 15: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/15.jpg)
15
サイトの他の箇所に表⽰される:
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
⼀覧ページのサムネイル画像
選択...
⼀覧ページのテキスト
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
![Page 16: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/16.jpg)
16
サイトの他の箇所に表⽰される:
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
⼀覧ページのサムネイル画像
選択...
⼀覧ページのテキスト
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
ふつうに⾒える範囲の外も更新されるようになった。⼊⼒と出⼒が 1:n の関係になった。
他のページにも出るの?どこに影響するのかわからない・・・
![Page 17: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/17.jpg)
17
カテゴリにより出たり出なかったりする要素:
呍呍呍
学長あいさつ
交通アクセス
施設案内
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
⼀覧ページのサムネイル画像
選択...
カテゴリ▼
⼀覧ページのテキスト
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
![Page 18: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/18.jpg)
18
カテゴリにより出たり出なかったりする要素:
呍呍呍
学長あいさつ
交通アクセス
施設案内
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
⼀覧ページのサムネイル画像
選択...
カテゴリ▼
⼀覧ページのテキスト
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
どんなカテゴリがあるのか、どの要素がカテゴリに影響されるのか、サイト全体の構造理解が必要になった。
このカテゴリを選ぶとどのページのどこに反映されるわけ?
![Page 19: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/19.jpg)
19
⾃社サイトの外に表⽰される:
呍呍呍
学長あいさつ
交通アクセス
施設案内
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ▼
⼀覧ページのテキスト
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
![Page 20: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/20.jpg)
20
⾃社サイトの外に表⽰される:
呍呍呍
学長あいさつ
交通アクセス
施設案内
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ▼
⼀覧ページのテキスト
画像
選択...
ドラフトを保存送信して公開 下書きの破棄
⾃社サイトで⾒えている範囲だけでなく、ウェブ全体のエコシステムの理解がいるようになった。
og:imageって何・・・?
![Page 21: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/21.jpg)
21
他社サービスと連携する:
呍呍呍
学長あいさつ
交通アクセス
施設案内
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ▼
⼀覧ページのテキスト
画像
選択...
utmパラメータ
ドラフトを保存送信して公開 下書きの破棄
![Page 22: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/22.jpg)
22呍呍呍
学長あいさつ
交通アクセス
施設案内
ニュースリリース一覧
(年別に全件表示)
ニュース記事
ニュース記事
呍呍呍
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ▼
⼀覧ページのテキスト
画像
選択...
utmパラメータ
ドラフトを保存送信して公開 下書きの破棄
他社サービスと連携する:
システムという、⽬に⾒えない部分の理解も必要になった。
utmパラメータって何・・・?もうムリ・・・
![Page 23: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/23.jpg)
23
ぜんぶわかってないと管理できない:
ひとつの⼊⼒が、あまりに多くの要素に波及するため、そのすべてを理解しなければ、カスタムフィールドが飽和した管理画⾯を、正しく操作できない。
⾒えるもの 管理画⾯
⾒えるもの
⾒えないもの
意識の範囲内
意識できない
![Page 24: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/24.jpg)
24
視認性:
「⾒づらい」「パッと⾒て⼊⼒しなければならない量が多そうに感じる」という、視覚の負荷の軽減も重要。
![Page 25: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/25.jpg)
25
これはちゃんと⾒える:道⽞坂⼤学
ニュースリリースニュース記事
学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄
![Page 26: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/26.jpg)
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ
⼀覧ページのテキスト
画像
選択...
utmパラメータ
ドラフトを保存送信して公開 下書きの破棄
こうなると、じつはこう⾒える:道⽞坂⼤学
ニュースリリースニュース記事
学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ
⼀覧ページのテキスト
画像
選択...
utmパラメータ
ドラフトを保存送信して公開 下書きの破棄
![Page 27: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/27.jpg)
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ
⼀覧ページのテキスト
画像
選択...
utmパラメータ
ドラフトを保存送信して公開 下書きの破棄
こうなると、じつはこう⾒える:道⽞坂⼤学
ニュースリリースニュース記事
学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページのサムネイル画像
選択...
og:image
選択...
カテゴリ
⼀覧ページのテキスト
画像
選択...
utmパラメータ
ドラフトを保存送信して公開 下書きの破棄
なんかボヤけた四⾓形の「かたまり」が
並んでる・・・
![Page 28: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/28.jpg)
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
og:image
選択...
じつはスクロールバーの⻑さも⾒ている:道⽞坂⼤学
ニュースリリースニュース記事
学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄
![Page 29: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/29.jpg)
道⽞坂⼤学ニュースリリース
ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
og:image
選択...
じつはスクロールバーの⻑さも⾒ている:道⽞坂⼤学
ニュースリリースニュース記事
学科・コース学⽣⽣活⼊試情報就職情報⼤学院
新規記事の登録タイトル
サブタイトル
公開⽇年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄 スクロールバー短っ!⼊⼒項⽬
めっちゃ多くね!?
![Page 30: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/30.jpg)
30
視認性:
カスタムフィールド量が増えると、どうしても視覚の負荷は増えていく。それは想像以上に、オペレーターに⼼理を圧迫する。
![Page 31: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/31.jpg)
31
どうして息苦しくなるのか:
指数関数的に考えることが増えていくから。あと、⾒づらいことが⼼理負荷になるから。
カスタムフィールドを増やすと、どうして息苦しくなるのか。
![Page 32: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/32.jpg)
32
それでは困る。
![Page 33: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/33.jpg)
33
オペレーターの負荷を下げるには:
「管理画⾯の⻤カスタマイズ」をオススメしています。
カスタムフィールド200個は、そうしないと使えない。
![Page 34: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/34.jpg)
34
「管理画⾯の⻤カスタマイズ」のコツ:
管理画⾯に、説明をきちんと⼊れる。⾔葉にこだわる。
og:title
og:description
og:image
選択...
Facebookに表⽰されるタイトル
Facebookに表⽰される説明⽂
Facebookに表⽰される画像
選択...
Facebookには専⽤のタイトルや画像を設定します。
![Page 35: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/35.jpg)
35
「管理画⾯の⻤カスタマイズ」のコツ:
管理画⾯で、⼊⼒のバリデーションチェックをし、わかりやすいエラーメッセージをきちんと出す。
タイトル
サブタイトル思いが詰まりに詰まってとにかく長いタイトルをつけてし
タイトル
サブタイトル
タイトルは32文字以内にしましょう。Googleで表示される上限です。
![Page 36: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/36.jpg)
36
「管理画⾯の⻤カスタマイズ」のコツ:
オペレーターを、タスクごとに複数のグループに分けて、それぞれに専⽤の管理画⾯をつくる。⾃分に関係あるところだけ⾒えるようにする。
タイトル
本⽂
画像
選択...
ニュースリリース⽤
タイトル
本⽂
商品情報⽤
関係する商品商品A 商品B 商品C 商品D 商品E
広報部 マーケティング部
![Page 37: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/37.jpg)
37
覚悟すべきこと:
• バージョンアップで苦労するのは、もう覚悟するしかない。カスタムフィールドを増やすということは、そういうことだ。
• PowerCMS が Movable Type の管理画⾯を改修したのは英断だったと思う。
![Page 38: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/38.jpg)
38
まとめ:
1. CMSは、「⾒えるもの」と「仕上がるもの」が異なるのが、難しい要因のひとつ。
2. 管理画⾯をカスタマイズするとよい。管理画⾯に説明をきちんと⼊れる。わかりやすいエラーをきちんと出す。オペレーターごとに画⾯を⽤意する。
![Page 39: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/39.jpg)
39
メンタルモデルユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊:http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位」コンピュータ・IT 総合 最⾼「9位」
![Page 40: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/40.jpg)
40
ありがとうございました⽻⼭ 祥樹Twitter: @storywriterFacebook: storywriter.jp
Facebook、ぜひ、つながってください!
![Page 41: UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜](https://reader031.vdocuments.site/reader031/viewer/2022020203/5a647abd7f8b9a5d568b480f/html5/thumbnails/41.jpg)
⽻⼭のプレゼンのアレ が、 スタンプになりました!
スタンプ名:ハーミィ(CSS編) 作者名:⽻⼭ 祥樹https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ全40種類