Download as PDF, PPTX
Uploaded byYoshiki Hayama
UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える：【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜
2017年12月16日 MT東京 での「UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える」のスライドです。 イベントのページ： 【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜 https://mt-tokyo.doorkeeper.jp/events/68078
More Related Content
Similar to UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える：【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜
UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える：【MT東京−42】カスタムフィールド製造業の集い 〜カスタムフィールド職人に大切なこと〜
- 1.
- 2.
- 3. 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 3 例：あるウェブサイト： ページ数 カスタムフィールド数 20,000 ページ 200フィールド 新規記事の登録 タイトル サブタイトル 公開⽇ meta description 年⽉ ⽇ カレンダー プレビュー meta keywords og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ1 関係する商品 ▼ カテゴリ2 ▼ カテゴリ3 ▼ 商品A 商品B 商品C 商品D 商品E ⼀覧ページのテキスト ふつうにつくるとこうなる →
- 4.
- 5. ⽻⼭ 祥樹 HAYAMAYoshiki v インフォメーションアーキテクト • 使いやすいWebサイトをつくる専⾨家 • HCD-Net認定 ⼈間中⼼設計専⾨家 v Web業界に20年くらい、Watsonは2年ほど v 担当したWebサイトが、雑誌のWebユーザビリティランキングで国内 トップクラスの評価を受ける ほか実積多数 v 主な専⾨分野 • ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、 アクセシビリティ、⼤規模CMS、Watson、ライター Twi$er：@storywriter WebSite: storywriter.jp 5 ユーザー⼼理を つかむプロです
- 6. 6 メンタルモデル ユーザーへの共感から⽣まれるUXデザイン戦略 Amazonで購⼊： http://www.amazon.co.jp/dp/4621088068 コンピュータ・IT > インターネット・Web開発> Web開発 最⾼「1位」 コンピュータ・IT 総合 最⾼「9位」
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. 12 これはまだわかりやすい： ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ ドラフトを保存送信して公開 下書きの破棄
- 13. 13 ページ構造が複雑になった： ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ 画像 選択... ドラフトを保存送信して公開 下書きの破棄
- 14. 14 ページ構造が複雑になった： ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ 画像 選択... ドラフトを保存送信して公開 下書きの破棄 ⼊⼒と出⼒の対応が分割された。 「本⽂」と「画像」って 別なの？ あ、そう・・・
- 15. 15 サイトの他の箇所に表⽰される： ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ ⼀覧ページのサムネイル画像 選択... ⼀覧ページのテキスト 画像 選択... ドラフトを保存送信して公開 下書きの破棄
- 16. 16 サイトの他の箇所に表⽰される： ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ ⼀覧ページのサムネイル画像 選択... ⼀覧ページのテキスト 画像 選択... ドラフトを保存送信して公開 下書きの破棄 ふつうに⾒える範囲の外も更新されるようになった。 ⼊⼒と出⼒が 1：n の関係になった。 他のページにも出るの？ どこに影響するのか わからない・・・
- 17. 17 カテゴリにより出たり出なかったりする要素： 学長あいさつ 交通アクセス 施設案内 ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ ⼀覧ページのサムネイル画像 選択... カテゴリ ▼ ⼀覧ページのテキスト 画像 選択... ドラフトを保存送信して公開 下書きの破棄
- 18. 18 カテゴリにより出たり出なかったりする要素： 学長あいさつ 交通アクセス 施設案内 ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ ⼀覧ページのサムネイル画像 選択... カテゴリ ▼ ⼀覧ページのテキスト 画像 選択... ドラフトを保存送信して公開 下書きの破棄 どんなカテゴリがあるのか、どの要素がカテゴリに影 響されるのか、サイト全体の構造理解が必要になった。 このカテゴリを選ぶと どのページのどこに 反映されるわけ？
- 19. 19 ⾃社サイトの外に表⽰される： 学長あいさつ 交通アクセス 施設案内 ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ▼ ⼀覧ページのテキスト 画像 選択... ドラフトを保存送信して公開 下書きの破棄
- 20. 20 ⾃社サイトの外に表⽰される： 学長あいさつ 交通アクセス 施設案内 ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ▼ ⼀覧ページのテキスト 画像 選択... ドラフトを保存送信して公開 下書きの破棄 ⾃社サイトで⾒えている範囲だけでなく、ウェブ全体 のエコシステムの理解がいるようになった。 og:imageって何・・・？
- 21. 21 他社サービスと連携する： 学長あいさつ 交通アクセス 施設案内 ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ▼ ⼀覧ページのテキスト 画像 選択... utmパラメータ ドラフトを保存送信して公開 下書きの破棄
- 22. 22 学長あいさつ 交通アクセス 施設案内 ニュースリリース一覧 （年別に全件表示） ニュース記事 ニュース記事 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ▼ ⼀覧ページのテキスト 画像 選択... utmパラメータ ドラフトを保存送信して公開 下書きの破棄 他社サービスと連携する： システムという、⽬に⾒えない部分の理解も必要に なった。 utmパラメータって何・・・？ もうムリ・・・
- 23.
- 24.
- 25. 25 これはちゃんと⾒える： 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー 本⽂ ドラフトを保存送信して公開 下書きの破棄 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇ カレンダー プレビュー 本⽂ ドラフトを保存送信して公開 下書きの破棄
- 26. 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ⼀覧ページのテキスト 画像 選択... utmパラメータ ドラフトを保存送信して公開 下書きの破棄 こうなると、じつはこう⾒える： 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇ カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ⼀覧ページのテキスト 画像 選択... utmパラメータ ドラフトを保存送信して公開 下書きの破棄
- 27. 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ⼀覧ページのテキスト 画像 選択... utmパラメータ ドラフトを保存送信して公開 下書きの破棄 こうなると、じつはこう⾒える： 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇ カレンダー プレビュー og:title og:description 本⽂ ⼀覧ページのサムネイル画像 選択... og:image 選択... カテゴリ ⼀覧ページのテキスト 画像 選択... utmパラメータ ドラフトを保存送信して公開 下書きの破棄 なんかボヤけた 四⾓形の「かたまり」が 並んでる・・・
- 28. 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description og:image 選択... じつはスクロールバーの⻑さも⾒ている： 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇ カレンダー プレビュー 本⽂ ドラフトを保存送信して公開 下書きの破棄
- 29. 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇カレンダー プレビュー og:title og:description og:image 選択... じつはスクロールバーの⻑さも⾒ている： 道⽞坂⼤学 ニュースリリース ニュース記事 学科・コース 学⽣⽣活 ⼊試情報 就職情報 ⼤学院 新規記事の登録 タイトル サブタイトル 公開⽇ 年 ⽉ ⽇ カレンダー プレビュー 本⽂ ドラフトを保存送信して公開 下書きの破棄 スクロールバー短っ！ ⼊⼒項⽬ めっちゃ多くね！？
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. 37 覚悟すべきこと： • バージョンアップで苦労するのは、もう覚悟するし かない。カスタムフィールドを増やすということは、 そういうことだ。 • PowerCMSが Movable Type の管理画⾯を改修し たのは英断だったと思う。
- 38.
- 39. 39 メンタルモデル ユーザーへの共感から⽣まれるUXデザイン戦略 Amazonで購⼊： http://www.amazon.co.jp/dp/4621088068 コンピュータ・IT > インターネット・Web開発> Web開発 最⾼「1位」 コンピュータ・IT 総合 最⾼「9位」
- 40. 40 ありがとうございました ⽻⼭ 祥樹 Twitter: @storywriter Facebook:storywriter.jp Facebook、ぜひ、つながってください！
- 41.