Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
UXの視点から
カスタムフィールドを増やすと
なぜ息苦しくなるのか考える
1	
HCD-Net認定 ⼈間中⼼設計専⾨家
⽻⼭ 祥樹
2017年12⽉16⽇(⼟)
【MT東京­42】カスタムフィールド製造業の集い
〜カスタムフィールド職⼈に⼤切な...
2	
ウェブは拡⼤する⼀⽅。
各社とも、ウェブサイトに⼒を⼊れ続け、
その規模は⼤きくなり続けている。
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
3	
例:あるウェブサイト:
ページ数
カスタムフィールド数
20,000 ページ
200フィールド
新規記事の登録
タイトル
サブタイトル
公開⽇...
4	
それでも、うまく運⽤するためには、
どうすればいい?
⽻⼭ 祥樹 HAYAMA Yoshiki
v インフォメーションアーキテクト
•  使いやすいWebサイトをつくる専⾨家
•  HCD-Net認定 ⼈間中⼼設計専⾨家
v Web業界に20年くらい、Watsonは2年ほど
v 担当したWebサイ...
6	
メンタルモデル
ユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊:
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1位...
7	
今⽇の主旨:
カスタムフィールドを増やしたとき
オペレーターにとって何が起きているのか
UXデザインの視点「認知⼼理学」から考える。
8	
本⽇のポイント:CMS案件の特徴
「⾒えるもの」と「仕上がるもの」が異なる
CMS案件には
「ウェブページと管理画⾯で⾒えているものが異なる」
という難しさがある。
9	
CMS案件は、何が難しいのか:
CMS案件は、表側のウェブページだけでなく、
「管理画⾯のどこで何すると、どう反映されるのか」
「何はできて、何はできないのか」
という、裏側がある。
10	
CMSの難しさ=マンマシン・インタフェース:
「管理画⾯で⾒えるものと、ウェブページが異なる」
のが、⼈間の認知には、根本的に難しい。
認知しやすい 認知しづらい
直接に触れる/⾒たまま 何かを介する/⾒たのと異なる
11	
CMSは、さらに認知⼿続きが複雑:
管理画⾯で⼊⼒したものが、複数の箇所や⾒えない箇
所にも反映される。全体構造を知らないといけない。
認知しづらい とても認知しづらい
何かを介する/⾒たのと異なる ⼊⼒がどこに反映するのかわからない
...
12	
これはまだわかりやすい:
ニュース記事	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフト...
13	
ページ構造が複雑になった:
ニュース記事	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
本⽂
画像
...
14	
ページ構造が複雑になった:
ニュース記事	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
本⽂
画像
...
15	
サイトの他の箇所に表⽰される:
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の...
16	
サイトの他の箇所に表⽰される:
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の...
17	
カテゴリにより出たり出なかったりする要素:
	
学長あいさつ	
交通アクセス	
施設案内	
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣...
18	
カテゴリにより出たり出なかったりする要素:
	
学長あいさつ	
交通アクセス	
施設案内	
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣...
19	
⾃社サイトの外に表⽰される:
	
学長あいさつ	
交通アクセス	
施設案内	
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報...
20	
⾃社サイトの外に表⽰される:
	
学長あいさつ	
交通アクセス	
施設案内	
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報...
21	
他社サービスと連携する:
	
学長あいさつ	
交通アクセス	
施設案内	
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就...
22	
	
学長あいさつ	
交通アクセス	
施設案内	
ニュースリリース一覧	
(年別に全件表示)	
ニュース記事	
ニュース記事	
	
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の...
23	
ぜんぶわかってないと管理できない:
ひとつの⼊⼒が、あまりに多くの要素に波及するため、
そのすべてを理解しなければ、カスタムフィールドが
飽和した管理画⾯を、正しく操作できない。
⾒えるもの 管理画⾯
⾒えるもの
⾒えないもの
意識の範...
24	
視認性:
「⾒づらい」「パッと⾒て⼊⼒しなければならない量
が多そうに感じる」という、視覚の負荷の軽減も重要。
25	
これはちゃんと⾒える:
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開...
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページ...
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
本⽂
⼀覧ページ...
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
og:image...
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
og:title
og:description
og:image...
30	
視認性:
カスタムフィールド量が増えると、どうしても視覚の
負荷は増えていく。
それは想像以上に、オペレーターに⼼理を圧迫する。
31	
どうして息苦しくなるのか:
指数関数的に考えることが増えていくから。
あと、⾒づらいことが⼼理負荷になるから。
カスタムフィールドを増やすと、
どうして息苦しくなるのか。
32	
それでは困る。
33	
オペレーターの負荷を下げるには:
「管理画⾯の⻤カスタマイズ」
をオススメしています。
カスタムフィールド200個は、そうしないと使えない。
34	
「管理画⾯の⻤カスタマイズ」のコツ:
管理画⾯に、説明をきちんと⼊れる。⾔葉にこだわる。
og:title
og:description
og:image
選択...
Facebookに表⽰されるタイトル
Facebookに表⽰される説...
35	
「管理画⾯の⻤カスタマイズ」のコツ:
管理画⾯で、⼊⼒のバリデーションチェックをし、わ
かりやすいエラーメッセージをきちんと出す。
タイトル
サブタイトル
思いが詰まりに詰まってとにかく長いタイトルをつけてし	
タイトル
サブタイトル
...
36	
「管理画⾯の⻤カスタマイズ」のコツ:
オペレーターを、タスクごとに複数のグループに分け
て、それぞれに専⽤の管理画⾯をつくる。
⾃分に関係あるところだけ⾒えるようにする。
タイトル
本⽂
画像
選択...
ニュースリリース⽤
タイトル
...
37	
覚悟すべきこと:
•  バージョンアップで苦労するのは、もう覚悟するし
かない。カスタムフィールドを増やすということは、
そういうことだ。
•  PowerCMS が Movable Type の管理画⾯を改修し
たのは英断だったと思う。
38	
まとめ:
1.  CMSは、「⾒えるもの」と「仕上がるもの」が異な
るのが、難しい要因のひとつ。
2.  管理画⾯をカスタマイズするとよい。管理画⾯に説
明をきちんと⼊れる。わかりやすいエラーをきちん
と出す。オペレーターごとに画⾯を⽤...
39	
メンタルモデル
ユーザーへの共感から⽣まれるUXデザイン戦略
Amazonで購⼊:
http://www.amazon.co.jp/dp/4621088068
コンピュータ・IT > インターネット・Web開発 > Web開発 最⾼「1...
40	
ありがとうございました
⽻⼭ 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook、ぜひ、つながってください!
⽻⼭のプレゼンのアレ が、
  スタンプになりました!
スタンプ名:ハーミィ(CSS編) 作者名:⽻⼭ 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類
Próxima SlideShare
Cargando en…5
×

UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜

2.315 visualizaciones

Publicado el

2017年12月16日 MT東京 での「UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える」のスライドです。
イベントのページ:
【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜
https://mt-tokyo.doorkeeper.jp/events/68078

Publicado en: Diseño
  • Sé el primero en comentar

UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜

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

×