WordPressからデータ構造設計のヒントを得る / Data Structure Design Tips from WordPress

Transcript

1. View Slide

2. ⽊下 裕哉
   Yuya Kinoshita
   デザイナー
   フロントエンドエンジニア
   yuyakinoshita.com
   @yuyaink
   

   View Slide

3. はじめに
   

   View Slide

4. この資料のゴール
   データ構造について知ることで
   情報設計のヒントを得る
   

   View Slide

5. さらなる狙い
   ユーザーにとってより使いやすい
   データ構造を意識できるようになること
   

   View Slide

6. 主な対象者
   Webサイト、アプリなどの
   ユーザーインターフェイス設計に関わる⽅
   UIデザイナー、ディレクター、フロントエンドエンジニアなど。
   

   View Slide

7. Index 1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   データの流れについて基本を振り返る
   データ構造を意識するメリット
   WordPressを題材に選んだ理由
   コンテンツ管理システムの全体像
   WordPressにおけるオブジェクトの全体像
   記事のデータ構造
   記事の公開状態
   記事の公開⽇時と並び順
   記事の分類属性（カテゴリーとタグ）
   カテゴリー分類とタグ分類の違い
   階層あり分類のコウモリ問題とは？
   複数の検索⼿段が必要な理由（検索キーの設計）
   データの⾏き来のしやすさ
   

   View Slide

8. データの流れについて
   基本を振り返る
   1
   

   View Slide

9. まずはデータの流れの基本を知る
   （共通の基本要素を抑える）
   ※前回の資料の内容からの振り返りです。
   

   View Slide

10. データのアクションは作成、読み出し、変更、
    削除の4つが基本です。
    

    View Slide

11. データの基本アクション
    •作成（Create）
    •読み出し（Read）
    •変更（Update）
    •削除（Delete）
    Data
    Create
    Update Delete
    Read
    4つの頭⽂字からCRUDとも
    呼ばれるようです。
    

    View Slide

12. データ構造を意識するメリット
    2
    

    View Slide

13. そもそもデータ構造って何？
    

    View Slide

14. “コンピュータプログラミングでの、データの集
    まりの形式化された構成である。格納された各
    データの参照や修正といった管理を容易にする
    ための構成である”
    From: Wikipedia
    Wikipediaから引⽤
    

    View Slide

15. このように解釈しています
    •データを扱いやすくするための構造
    •⻑期的にサービスを拡張するための⾻組み
    •⼤事なのは拡張性とデータの⾏き来のしやすさ
    

    View Slide

16. データ構造を意識するメリットは？
    

    View Slide

17. データ構造を意識するメリット
    •データのつながりを把握しやすくなる
    •データへのアクセス⽅法がシンプルになる
    •サービス全体の構造を整理しやすくなる
    ユーザーにとってより使いやすいサービスに近づくと考えています。
    

    View Slide

18. データ構造について知るために、WordPress
    を参考にしながら⾒ていきます。
    ※構造の参考であり、WordPressの使い⽅紹介は⽬的としていません。
    

    View Slide

19. 3
    WordPressを
    題材に選んだ理由
    

    View Slide

20. そもそもWordPressってどんなもの？
    

    View Slide

21. Webサイトのコンテンツを管理するためのシス
    テムです。主にブログ、メディアサイト、企業サ
    イトなどのコンテンツ管理に使われています。
    

    View Slide

22. 管理画⾯
    WordPressの管理画⾯で
    す。時系列によるコンテンツ
    管理に優れています。
    

    View Slide

23. 表⽰されるページ
    管理画⾯から登録したデータ
    （データベース）と、構築し
    たデザインテンプレートを元
    にページが⽣成されます。
    

    View Slide

24. なぜデータ構造を学ぶために
    WordPressを題材にするの？
    

    View Slide

25. 主な理由
    •データの基本構成を学べる
    •時系列の概念やデータ分類について学べる
    •アプリケーション開発やUI設計に応⽤できる
    オープンソースで⼿軽に試しやすいことも理由の1つです。
    

    View Slide

26. 過去にフルスクラッチによる約180画⾯のシス
    テムのUI設計や開発にも関わったのですが、デ
    ータをどう扱うかの基礎として、WordPress
    から応⽤できることが多いと感じています。
    Movable Type、WordPress、MODXなどのCMSに触れてきました。
    

    View Slide

27. 4
    コンテンツ管理システムの全体像
    

    View Slide

28. WordPressについて⾒ていく前に、まずはコ
    ンテンツ管理システム（CMS）の概要や全体像
    を⾒ていきたいと思います。
    

    View Slide

29. 突然ですが質問です。次の図のXとYは何かを表
    しています。何を表しているでしょうか？
    Q
    

    View Slide

30. 閲覧ユーザー
    ??????
    ???
    データの
    登録・読み出し・
    編集・削除
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    管理ユーザー
    X Y
    

    View Slide

31. CMS
    アプリケーション、業務システム、コンテンツ
    管理画⾯、WordPressなども正解です。
    DB、phpMyAdmin、リレーショナルデータ
    ベースなども正解です。
    データベース
    X Y
    正解は
    

    View Slide

32. データベースって何？
    いろいろ新しい⽤語が出てきた…
    

    View Slide

33. “データベース（英: database）は、電⼦的に
    保存され、アクセスできる組織化されたデータ
    の集合である。”
    From: Wikipedia
    Wikipediaから引⽤
    

    View Slide

34. どういうこと？
    

    View Slide

35. ⼤まかにこのように解釈しています
    •たくさんのデータの集合体
    •データは「種類」と「値」で構成される
    •Googleスプレッドシートのようなイメージ
    データの種類はキー（Key）、値はバリュー（Value）と表現されます。
    

    View Slide

36. 簡略化したイメージで
    データベースを⾒てみます
    

    View Slide

37. 名前
    ID ⾊
    リンゴ
    バナナ
    ブドウ
    1
    2
    3
    ⾚
    ⻩
    紫
    

    View Slide

38. データベースでは、データが種類（Key）と値
    （Value）によって管理されます。
    

    View Slide

39. 名前
    ID ⾊
    リンゴ
    バナナ
    ブドウ
    1
    2
    3
    ⾚
    ⻩
    紫
    Key
    Key
    Key
    

    View Slide

40. ⻩⾊いセルの部分がデータの種類（Key）を表
    しています。この表では、ID、名前、⾊がデー
    タベース上の種類（Key）です。
    

    View Slide

41. 名前
    ID ⾊
    リンゴ
    バナナ
    ブドウ
    1
    2
    3
    ⾚
    ⻩
    紫
    Value
    Value
    Value
    Value
    Value
    Value
    Value
    Value
    Value
    

    View Slide

42. データの種類に対する値がValueです。例えば
    IDが「1」のデータでは名前に「リンゴ」とい
    うデータを持っています。IDが「2」の場合は名
    前に「バナナ」というデータを持っています。
    

    View Slide

43. ⼀般的にデータの主軸となる種類（Key）はID
    であることが多いと感じます。例えば『IDが
    「2」のデータの名前は「バナナ」です』という
    使われ⽅が多いのではないかと思います。
    IDは他と重複しない（ユニークである）とう前提があるからだと考えます。
    

    View Slide

44. 実際のデータベースはより多くのデータを扱いま
    すが、イメージとしてはこのように捉えておけば
    ⼤丈夫だと思います。
    データベースの概念について⼤まかに捉えたうえで、全体図を⾒てみます。
    

    View Slide

45. 閲覧ユーザー
    データベース
    CMS
    データの
    登録・読み出し・
    編集・削除
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    管理ユーザー
    

    View Slide

46. 情報量が多くやや複雑なので、それぞれのユー
    ザーごとに注⽬してみます。
    

    View Slide

47. 管理ユーザーの場合
    ユーザーごとの視点
    

    View Slide

48. 閲覧ユーザー
    データベース
    CMS
    データの
    登録・読み出し・
    編集・削除
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    管理ユーザー
    

    View Slide

49. 閲覧ユーザー
    データベース
    CMS
    データの
    登録・読み出し・
    編集・削除
    構造化された
    データの集まり
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    データ
    管理画⾯
    データ管理⽤の
    インターフェイス（接点）
    データの登録・読み出し・
    編集・削除
    管理ユーザー
    

    View Slide

50. 管理ユーザーの視点でのコンテンツ管理システム（CMS）とは？
    •CMSを通してデータベースにアクセスする
    •データの登録・読み出し・編集・削除ができる
    •データ管理⽤のインターフェイス（接点）
    と⼤まかに考えられます。
    

    View Slide

51. 閲覧ユーザーの場合
    ユーザーごとの視点
    

    View Slide

52. 閲覧ユーザー
    データベース
    CMS
    データの
    登録・読み出し・
    編集・削除
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    管理ユーザー
    

    View Slide

53. 閲覧ユーザー
    データベース
    CMS
    データの
    登録・読み出し・
    編集・削除
    構造化された
    データの集まり
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    デザイン
    テンプレート
    管理ユーザー
    ページ⽣成⽤の
    インターフェイス（接点）
    データの
    読み出し
    

    View Slide

54. 閲覧ユーザーの視点でのコンテンツ管理システム（CMS）とは？
    •CMSを通してデータベースにアクセスする
    •データの読み出しができる
    •ページ⽣成⽤のインターフェイス（接点）
    と⼤まかに考えられます。
    

    View Slide

55. 全体像を⾒てみます
    

    View Slide

56. 閲覧ユーザー
    データベース
    CMS
    データの
    登録・読み出し・
    編集・削除
    構造化された
    データの集まり
    構造化された
    データの集まり
    管理画⾯に
    ログイン
    ページを表⽰
    ページが⾒たい
    データの読み出し
    データの要求
    データ
    管理画⾯
    データ管理⽤の
    インターフェイス（接点）
    データの登録・読み出し・
    編集・削除
    デザイン
    テンプレート
    管理ユーザー
    ページ⽣成⽤の
    インターフェイス（接点）
    データの
    読み出し
    

    View Slide

57. 役割に注⽬してみると、コンテンツ管理システ
    ム（CMS）がおこなっていることはデータベー
    スへのデータの登録・読み出し・変更・削除の
    どれかだということが⾒えてきます。
    

    View Slide

58. データの基本アクション
    •作成（Create）
    •読み出し（Read）
    •変更（Update）
    •削除（Delete）
    Data
    Create
    Update Delete
    Read
    実はCMSがやっていること
    も基本アクションの4つ。
    CMSも同じ
    

    View Slide

59. •CMSを通してデータベースにアクセスする
    •CMSはデータへアクセスを簡単にしている
    •UIデザインとはデータへのアクセス⽅法の設計
    と考えられるのではないでしょうか。
    まとめると
    

    View Slide

60. 5
    WordPressにおける
    オブジェクトの全体像
    

    View Slide

61. WordPressで特に重要な記事、カテゴリー、
    タグ、ユーザーのデータ構造を⾒ていきます。
    カテゴリー タグ ユーザー
    記事
    

    View Slide

62. データを機能名と区別して対象物として捉える
    ため、ここではオブジェクトと呼びます。
    記事
    オブジェクト
    ユーザー
    オブジェクト
    タグ
    オブジェクト
    カテゴリー
    オブジェクト
    

    View Slide

63. 全体像を知りたい
    

    View Slide

64. 全体像とつながり
    記事オブジェクトと各オブジ
    ェクトが紐付いた構造になっ
    ています。
    •記事
    •カテゴリー
    •タグ
    •ユーザー
    補⾜
    オブジェクトの種類
    記事オブジェクト
    カテゴリー
    オブジェクト
    タグ
    オブジェクト
    ユーザー
    オブジェクト
    

    View Slide

65. 記事のデータ構造
    6
    

    View Slide

66. WordPressが扱うメインのデータが記事で
    す。記事オブジェクトがどんな属性を持ってい
    るかを⾒ていきます。
    

    View Slide

67. 記事オブジェクト
    カテゴリー
    オブジェクト
    タグ
    オブジェクト
    ユーザー
    オブジェクト
    This
    

    View Slide

68. 記事オブジェクト
    メインコンテンツ
    概要情報
    分類属性（ひも付いているオブジェクト）
    •記事タイトル
    •記事本⽂・画像・動画など
    •表⽰状態（公開 / ⾮公開）
    •公開⽇時
    •URLスラッグ
    •アイキャッチ画像
    •カテゴリー
    •タグ
    

    View Slide

69. それぞれの記事オブジェクトがこれらの属性
    （情報）を持っています。ユーザーは新規に記事
    をつくり、関連する属性情報を合わせて登録す
    ることでコンテンツを管理します。
    

    View Slide

70. アプリケーション設計に活かす観点は？
    

    View Slide

71. •対象物をオブジェクト（名詞）として捉える
    •データの核となるオブジェクトが何かを考える
    •そのオブジェクトにひも付ける属性を考える
    Point
    

    View Slide

72. 記事の公開状態
    7
    

    View Slide

73. 記事の公開状態
    WordPressでは記事の公開状態に、公開、⾮
    公開、パスワード保護の3種類があります。
    

    View Slide

74. 記事オブジェクト
    カテゴリー
    オブジェクト
    タグ
    オブジェクト
    ユーザー
    オブジェクト
    This
    

    View Slide

75. View Slide

76. 公開状態
    •公開
    •⾮公開
    •パスワード保護
    •ラジオボタンで単⼀選択
    •初期状態は「公開」
    属性
    補⾜
    

    View Slide

77. どういった使い分けが考えられるか？
    •公開：記事を公開するための通常の状態
    •⾮公開：公開後に⼀時的に⾮公開にする
    •パスワード保護：特定ユーザーのみに表⽰する
    

    View Slide

78. アプリケーション設計に活かす観点は？
    

    View Slide

79. •要素に⾮公開の状態が必要か？
    •パスワード保護のアクセス⼿段を⽤意するか？
    •公開・⾮公開のどちらを初期状態とするか？
    オブジェクトの公開管理機能の設計観点に役⽴つかもしれません。
    Point
    

    View Slide

80. 記事の公開⽇時と並び順
    8
    

    View Slide

81. 公開⽇時と並び順
    WordPressの初期設定では、公開⽇時が新し
    い記事から表⽰されます。記事の並び順（ソー
    ト順）を公開⽇時によって管理します。
    

    View Slide

82. 記事オブジェクト
    カテゴリー
    オブジェクト
    タグ
    オブジェクト
    ユーザー
    オブジェクト
    This
    

    View Slide

83. View Slide

84. 公開⽇時
    •⽇付
    •時刻
    属性
    •作成時点の⽇時が⾃動反映
    •カレンダーピッカーを併⽤
    補⾜
    

    View Slide

85. アプリケーション設計に活かす観点は？
    

    View Slide

86. •要素は公開⽇時順で表⽰するか？
    •ユーザーにとってより便利な並び順の条件は？
    •そもそも公開⽇時が属性として必要なのか？
    他の並び順には、名前、更新⽇時、価格、⼈気（評価）などもあります。
    Point
    

    View Slide

87. 記事の分類属性
    （カテゴリーとタグ）
    9
    

    View Slide

88. 記事の分類属性
    カテゴリーやタグは、WordPressに備わって
    いる記事の分類属性です。ここではタグがどん
    なユーザーインターフェイスとして表現されてい
    るかを⾒てみます。
    

    View Slide

89. 記事オブジェクト
    カテゴリー
    オブジェクト
    タグ
    オブジェクト
    ユーザー
    オブジェクト
    This
    

    View Slide

90. タグ⼀覧
    •タグ名
    •タグスラッグ（URL)
    •タグの説明
    属性
    •オブジェクトで管理
    •フリーワードで検索できる
    •複数タグを⼀括削除できる
    •該当する記事数がわかる
    •該当の記事⼀覧へ遷移する
    補⾜
    

    View Slide

91. タグオブジェクト
    •タグ名
    •タグスラッグ（URL)
    •タグの説明
    属性
    •オブジェクトで管理
    •いつでも再編集が可能
    •詳細ページからも削除可能
    補⾜
    

    View Slide

92. アプリケーション設計に活かす観点は？
    

    View Slide

93. •カテゴリーやタグはいつでも編集できるように
    •対象要素とのアクセスの双⽅向性を保つ
    •フリーワード検索など、検索しやすい構造に
    Point
    

    View Slide

94. カテゴリー分類とタグ分類の違い
    10
    

    View Slide

95. WordPressには記事の分類⽅法として、カテ
    ゴリー分類とタグ分類の2種類が存在します。こ
    れらによって記事を分類して管理します。
    カテゴリー分類とタグ分類の違い
    

    View Slide

96. 記事オブジェクト
    カテゴリー
    オブジェクト
    タグ
    オブジェクト
    ユーザー
    オブジェクト
    This
    This
    

    View Slide

97. WordPressのカテゴリー分類とタグ分類は
    何が違うでしょうか？
    Q
    

    View Slide

98. 正解は階層構造になっているかどうかです
    階層あり
    カテゴリー分類
    階層なし
    タグ分類
    

    View Slide

99. “categories: a hierarchical taxonomy that organizes content
    in the post Post Type
    tags: a non-hierarchical taxonomy that organizes content in
    the post Post Type”
    From: WordPress Developer Resources
    公式ドキュメントからの引⽤
    

    View Slide

100. カテゴリーは階層構造を持っており、タグは階
     層構造を持っていません。
     

     View Slide

101. この考え⽅をデザインにどう活かすの？
     

     View Slide

102. データを分類するときに「階層構造にする・し
     ない」の判断基準として活⽤します。
     

     View Slide

103. どういうこと？
     

     View Slide

104. データの分類は「階層構造あり」が適した場合
     と「階層構造なし」が適した場合があり、状況
     によって使い分ける必要があると考えています。
     

     View Slide

105. ⼀般的なフォルダ構造は階層ありだし、
     階層ありだけじゃ駄⽬なの？
     

     View Slide

106. 階層ありのほうが⼈間にとってわかりやすく、
     適している場合が多いと思います。その⼀⽅で
     階層ありにはコウモリ問題と呼ばれる分類上の
     問題が存在します。
     

     View Slide

107. 階層あり分類の
     コウモリ問題とは？
     11
     

     View Slide

108. 例えば「デザイン」と「コーディング」という
     分類属性があるとして、その両⽅に当てはまる
     記事の場合にどちらに分類すれば良いのか迷っ
     てしまうことはないでしょうか？
     

     View Slide

109. 「複数の属性から何を選んで分けるか」という
     悩みは、コウモリ問題という名前が付いている
     ほどに⼀般的な問題のようです。
     

     View Slide

110. “すべてのものや情報は、利⽤される⽂脈に応じて複数の属性を持ち得る。し
     かし、階層構造のように、各項⽬を⽊構造の末端にあてはめて分類する⽅式
     （図書館資料など）では、項⽬が持つ複数の属性のうちの⼀つだけに着⽬し
     なければならないという制約がある。”
     From: Wikipedia
     Wikipediaから引⽤
     

     View Slide

111. コウモリ問題を解決する⼀般的な⽅法が、複数
     の属性付けを可能にするタグ分類だと考えてい
     ます。
     

     View Slide

112. それならタグ分類のような
     階層なしの分類にしておけば良いの？
     

     View Slide

113. いいえ、扱うデータやユーザーが使う状況によ
     って「階層あり」と「階層なし」の使い分けが
     必要だと考えています。
     それぞれにメリットとデメリットがあります。
     

     View Slide

114. データの親⼦関係や構造が
     わかりやすい。
     2つ以上の分類属性を持っ
     たままデータを管理でき、
     分類に悩まなくて済む。
     2つ以上の分類属性を持つ
     ことができず、1つに絞ら
     なければならない。
     親⼦関係のようなデータの
     関係性は持てない。
     メリット デメリット
     階層あり
     階層なし
     

     View Slide

115. 階層ありと階層なしの
     使い分けはどうすれば良い？
     

     View Slide

116. 状況によって判断が必要になりますが、⼤まか
     にどちらに向いているかを整理してみました。
     

     View Slide

117. •明確な整理ルールが必要
     •構造のわかりやすさ重視
     •厳格な管理者がいる
     •⼤まかな整理に留める
     •複数の属性を持たせたい
     •厳格な管理者がいない
     •⼤まかな整理に留める
     •複数の属性を持たせたい
     •厳格な管理者がいない
     •明確な整理ルールが必要
     •構造のわかりやすさ重視
     •厳格な管理者がいる
     向いている 向いていない
     階層あり
     階層なし
     

     View Slide

118. WordPress以外にも参考に
     なるサービスやアプリケーシ
     ョンはたくさんあります。
     階層の有無や、どういった分
     類を使いやすいと感じるかを
     意識してみるのも⾯⽩いかも
     しれません。
     Which is
     better?
     Hierarchical
     Non-
     Hierarchical
     

     View Slide

119. アプリケーション設計に活かす観点は？
     

     View Slide

120. •要素の分類に階層構造が必要かを考える
     •⼤まかに分類するのか、細かく管理するのか？
     •要素の分類を管理する体勢は整っているか？
     Point
     

     View Slide

121. 複数の検索⼿段が必要な理由
     （検索キーの設計）
     12
     

     View Slide

122. 検索キーが複数あること
     WordPressには記事の検索⽅法として、カテ
     ゴリー、タグ、投稿者、⽇付、フリーワードな
     どによる検索機能が標準で備わっています。
     

     View Slide

123. 記事オブジェクト
     カテゴリー
     オブジェクト
     タグ
     オブジェクト
     ユーザー
     オブジェクト
     This
     

     View Slide

124. 記事⼀覧
     •投稿者
     •カテゴリー
     •タグ
     •フリーワード
     検索キー（Key）
     •属性で絞り込める
     •フリーワードで検索できる
     補⾜
     

     View Slide

125. 記事⼀覧
     •⽇付（⽉別表⽰）
     •カテゴリー
     絞り込み条件
     •⽉ごとに絞り込める
     •検索キーと組み合わせ可能
     補⾜
     

     View Slide

126. もし検索機能がなかったら？
     

     View Slide

127. データ件数が増えるにつれて、1つ1つ探すのは
     とても⼤変です。その解決策として何らかの絞
     り込み検索が必要になります。
     

     View Slide

128. メインオブジェクト（記事）が
     1000件以上のように
     ⼤量のデータになった場合の課題は？
     例えば
     

     View Slide

129. 1つの検索キー（Key）では、必要な記事を絞り
     込めない可能性が⾼いことです。もしくは記事
     に付けたカテゴリーやタグを覚えていない場合
     に記事を⾒つけにくくなります。
     

     View Slide

130. 設定したカテゴリーやタグを覚えていない場合
     の解決⽅法に、フリーワード検索があります。
     フリーワード検索は多くのアプリケーションに
     備わっており、ユーザーが基本機能として期待
     している可能性が⾼いです。
     

     View Slide

131. フリーワード検索は⼀般的な検索機能である⼀
     ⽅で、検索結果の出し⽅によって使い勝⼿に⼤
     きく差が出る機能だと考えています。使いやす
     いフリーワード検索機能を実装するためには、
     必要な観点が多いです。
     

     View Slide

132. •曖昧なキーワードによる検索を許容するか？
     •検索対象とするデータベースの範囲は？
     •複数キーワードによる絞り込みを許可するか？
     例えば
     検索結果を出⼒する反応速度やサーバーへの負荷も検討が必要です。
     

     View Slide

133. アプリケーション設計に活かす観点は？
     

     View Slide

134. •投稿者、カテゴリーなどの属性で絞り込める
     •公開⽇時や更新⽇時で絞り込める
     •フリーワードで検索できる（検討事項が多い）
     これらの検索機能の必要性は優先的に検討したいです。
     Point
     

     View Slide

135. データの⾏き来のしやすさ
     13
     

     View Slide

136. 検索キーが複数あること
     ここではデータ同⼠のつながりに注⽬してみま
     す。記事とタグはそれぞれがオブジェクトとして
     のデータ構造を備えつつ、データのつながりが
     あります。
     

     View Slide

137. 記事オブジェクト
     カテゴリー
     オブジェクト
     タグ
     オブジェクト
     ユーザー
     オブジェクト
     This
     This
     

     View Slide

138. 記事⼀覧
     記事オブジェクトにはタグが
     設定でき、設定済みのタグが
     関連付けられています。
     

     View Slide

139. 記事⼀覧
     試しに「制作環境」というタ
     グを選ぶと、制作環境タグの
     付いている記事オブジェクト
     が並びます。
     

     View Slide

140. 次はタグ側から⾒てみます
     

     View Slide

141. タグ⼀覧
     カウントという表⽰項⽬があ
     ります。これはこのタグが関
     連付けられている記事数を表
     しています。
     試しに制作環境タグの右側に
     あるカウント欄の「4」を選
     んでみます。
     

     View Slide

142. 遷移先の記事⼀覧
     そうすると「制作環境」タグ
     で絞り込んだ記事⼀覧ページ
     が表⽰されました。
     記事オブジェクトとタグオブ
     ジェクトがデータのつながり
     によって関連付けられている
     ので、スムーズにアクセスで
     きます。
     

     View Slide

143. 関連情報にアクセスしやすい構造
     記事⼀覧ページ タグ⼀覧ページ
     

     View Slide

144. 関連データへの⾏き来のしやすさ（アクセスの
     双⽅向性）を考えて設計すると、より使いやす
     いUIに近付くと考えています。
     WordPressのタグ⼀覧ページから記事⼀覧ページへの導線は⼀⽅通⾏です
     が、データの関連付けの参考になります。
     

     View Slide

145. アプリケーション設計に活かす観点は？
     

     View Slide

146. •データの⾏き来のしやすさ（双⽅向性）を意識
     •オブジェクトはそれぞれで常時編集できる
     •ユーザーが使いやすいデータのつながりを探す
     ⼿書きメモやプロトタイプで⾏き来してみると、改善点に気付きやすいです。
     Point
     

     View Slide

147. この資料で重要な
     ポイントをおさらい
     

     View Slide

148. データの核となる対象物をオ
     ブジェクト（名詞）として捉
     え、そのオブジェクトにひも
     付く属性を考える。
     

     View Slide

149. 対象物は何か？
     WordPressなら、記事、カ
     テゴリー、タグ、ユーザーを
     主要オブジェクトと捉えてい
     ます。
     オブジェクトとして捉える
     記事オブジェクト
     カテゴリー
     オブジェクト
     タグ
     オブジェクト
     ユーザー
     オブジェクト
     

     View Slide

150. オブジェクトは、それぞれが
     常時編集できる構造とする。
     

     View Slide

151. 常に編集できる
     例えばタイトルを変える、
     URLを変えるなどの属性の
     編集・追加・削除が常にでき
     る構造として設計すると、耐
     久性が上がり⻑持ちします。
     常時編集できる構造に
     

     View Slide

152. データの⾏き来のしやすさと
     して、アクセスの双⽅向性を
     保てているかを意識する。
     ユーザーがより便利にサービスを使えるよう
     に、データオブジェクト同⼠をスムーズに⾏き
     来できるように設計することが望ましいです。
     

     View Slide

153. データの双⽅向性を意識する
     記事⼀覧ページ タグ⼀覧ページ
     

     View Slide

154. 迷ったら全体像を⾒直して、
     誰に向けて何をつくっているのかを
     振り返ってみる
     

     View Slide

155. 閲覧ユーザー
     データベース
     CMS
     データの
     登録・読み出し・
     編集・削除
     構造化された
     データの集まり
     構造化された
     データの集まり
     管理画⾯に
     ログイン
     ページを表⽰
     ページが⾒たい
     データの読み出し
     データの要求
     データ
     管理画⾯
     データ管理⽤の
     インターフェイス（接点）
     データの登録・読み出し・
     編集・削除
     デザイン
     テンプレート
     管理ユーザー
     ページ⽣成⽤の
     インターフェイス（接点）
     データの
     読み出し
     

     View Slide

156. おわりに
     

     View Slide

157. デザイナーやディレクターがデータベースを設計
     することは稀かもしれません。ですがどんなデ
     ータがあったらユーザーにとってより便利かを
     考え、提案する機会はあると思っています。
     この資料がそのようなきっかけになったら幸いです。
     

     View Slide

158. ありがとうございました
     

     View Slide