Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yuya Kinoshita
February 12, 2023

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

データ構造やオブジェクトに焦点を当てて、アプリケーション設計時に意識したい点をまとめました。コンテンツ管理システムのWordPressからデータ構造のヒントを得たいと思います。

関連記事:ユーザーインターフェイス設計メモ
https://yuyakinoshita.com/blog/2022/06/08/user-interface-note/

----
Website: https://yuyakinoshita.com
Twitter: https://twitter.com/yuyaink

Yuya Kinoshita

February 12, 2023
Tweet

More Decks by Yuya Kinoshita

Other Decks in Design

Transcript

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

    View full-size slide

  2. はじめに

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. そもそもデータ構造って何?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. そもそもWordPressってどんなもの?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. どういうこと?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 名前
    ID ⾊
    リンゴ
    バナナ
    ブドウ
    1
    2
    3



    View full-size slide

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

    View full-size slide

  38. 名前
    ID ⾊
    リンゴ
    バナナ
    ブドウ
    1
    2
    3



    Key
    Key
    Key

    View full-size slide

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

    View full-size slide

  40. 名前
    ID ⾊
    リンゴ
    バナナ
    ブドウ
    1
    2
    3



    Value
    Value
    Value
    Value
    Value
    Value
    Value
    Value
    Value

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. 全体像を⾒てみます

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. 全体像を知りたい

    View full-size slide

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

    View full-size slide

  64. 記事のデータ構造
    6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. 記事の公開状態
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. 記事の分類属性
    (カテゴリーとタグ)
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  96. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  100. どういうこと?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  118. 複数の検索⼿段が必要な理由
    (検索キーの設計)
    12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  123. もし検索機能がなかったら?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  153. おわりに

    View full-size slide

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

    View full-size slide

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

    View full-size slide