Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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種類
Upcoming SlideShare
Loading in …5
×

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

1,202 views

Published on

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

Published in: Design
  • Be the first to comment

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種類

×