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

Notion小噺 - NIFTY Tech Talk #10

Notion小噺 - NIFTY Tech Talk #10

More Decks by ニフティ株式会社

Other Decks in Technology

Transcript

  1. Copyright © NIFTY Corporation All Rights Reserved. 

    Notion小噺
    会員システムグループ 第二開発チーム
    松阪 僚子

    View Slide

  2. Profile
    松阪 僚子
    2021年4月入社
    会員システムグループ 第二開発チーム
    備考:セクラバ、ヅカオタ
    2

    View Slide

  3. 3
    Purpose
    世界一
    利便性が高くてかっこいい
    プロダクトwikiを目指す

    View Slide

  4. :latest
    4

    View Slide

  5. :v1
    5
    1年前...

    View Slide

  6. :v1
    6

    View Slide

  7. :v1
    7
    Manual Minutes Logs

    View Slide

  8. :v1
    8
    半年後...

    View Slide

  9. :v1
    9
    めちゃくちゃ使いにくくない!?

    View Slide

  10. :v1
    10
    ● 保守性の低い設計
    ● 階層構造が必要な
    ドキュメント
    プロパティの拡張
    →崩壊

    View Slide

  11. :v2
    11

    View Slide

  12. 体制
    サブ
    ページ
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サブ
    ページ
    ───
    DB
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    12
    :v2

    View Slide

  13. 体制
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    13
    :v2
    階層を持つように変更
    ● 階層を保持したいページ
    ● linkedDBで表示するページ
    ● 企画/開発のみが使うページ
    → 分けておくと秩序が
      保てる
    サブ
    ページ
    サブ
    ページ
    ───
    DB
    サブページ
    開発
    サブページ
    トップ サブページ
    DesignDocs

    View Slide

  14. 体制
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    14
    :v2
    階層を持つように変更
    ● 階層を保持したいページ
    ● linkedDBで表示するページ
    ● 企画/開発のみが使うページ
    → 分けておくと秩序が
      保てる
    サブ
    ページ
    サブ
    ページ
    ───
    DB

    View Slide

  15. 体制
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    15
    :v2
    階層を持つように変更
    ● 階層を保持したいページ
    ● linkedDBで表示するページ
    ● 企画/開発のみが使うページ
    → 分けておくと秩序が
      保てる
    サブ
    ページ
    サブ
    ページ
    ───
    DB

    View Slide

  16. 体制
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    16
    :v2
    階層を持つように変更
    ● 階層を保持したいページ
    ● linkedDBで表示するページ
    ● 企画/開発のみが使うページ
    → 分けておくと秩序が
      保てる
    サブ
    ページ
    サブ
    ページ
    ───
    DB
    サブページ
    開発
    サブページ
    トップ サブページ
    DesignDocs

    View Slide

  17. リンク集
    リンク集
    サブ
    ページ
    サブ
    ページ
    ───
    DB
    体制
    サービスの目的・目標・手段
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    メン
    バー
    17
    :v2
    孫ページへの
    ショートカット追加
    リンク集新設

    View Slide

  18. リンク集
    リンク集
    サブ
    ページ
    サブ
    ページ
    ───
    DB
    体制
    サービスの目的・目標・手段
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    メン
    バー
    18
    :v2
    孫ページへの
    ショートカット追加
    リンク集新設

    View Slide

  19. リンク集
    リンク集
    サブ
    ページ
    サブ
    ページ
    ───
    DB
    体制
    サービスの目的・目標・手段
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    メン
    バー
    19
    :v2
    孫ページへの
    ショートカット追加
    リンク集新設

    View Slide

  20. リンク集
    リンク集
    サブ
    ページ
    サブ
    ページ
    ───
    DB
    体制
    サービスの目的・目標・手段
    メン
    バー
    体制
    サービスの目的・目標・手段
    (インセプションデッキ)
    メン
    バー
    20
    :v2
    孫ページへの
    ショートカット追加
    リンク集新設

    View Slide

  21. 体制
    サービスの目的・目標・手段
    体制
    サービスの目的・目標・手段
    ────────────
    インセプション ッキ
    サブ
    ページ
    リンク集
    メン
    バー
    サブ
    ページ
    ───
    DB
    リンク集
    メン
    バー
    21
    :v2
    常に意識してほしいものを設置

    View Slide

  22. 体制
    サブ
    ページ
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サブ
    ページ
    ───
    DB
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    22
    :v2
    体制
    体制
    Chrome拡張で編集可能
    埋め込み画像を
    draw.ioに置き換え

    View Slide

  23. 体制
    サブ
    ページ
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サブ
    ページ
    ───
    DB
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    23
    :v2
    体制
    体制
    Chrome拡張で編集可能
    埋め込み画像を
    draw.ioに置き換え

    View Slide

  24. 体制
    サブ
    ページ
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サブ
    ページ
    ───
    DB
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    24
    :v2
    体制
    体制
    Chrome拡張で編集可能
    埋め込み画像を
    draw.ioに置き換え

    View Slide

  25. :v2
    25
    なんか...ダサいな...

    View Slide

  26. :v2
    26
    なんか...ダサいな...

    View Slide

  27. :v2
    27
    なんか...ダサいな...

    View Slide

  28. 体制
    サブ
    ページ
    サービスの目的・目標・手段
    リンク集
    メン
    バー
    体制
    サブ
    ページ
    ───
    DB
    サービスの目的・目標・手段
    (インセプションデッキ)
    リンク集
    メン
    バー
    28
    :v2
    長い!
    長い
    全体的に
    間延びした印象
    トップに必要か?
    グルーピングが分かりにくい

    View Slide

  29. :latest
    29

    View Slide

  30. プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    30
    :latest

    View Slide

  31. プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    31
    :latest

    View Slide

  32. プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    32
    :latest

    View Slide

  33. プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    33
    :latest
    一目でページの
    趣旨が理解できる

    View Slide

  34. プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    34
    :latest
    一目でページの
    趣旨が理解できる

    View Slide

  35. プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    35
    :latest
    一目でページの
    趣旨が理解できる

    View Slide

  36. やること やらないこと
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    メン
    バー
    議事録
    リンクドDB
    36
    :latest
    ファーストビュー外
    に配置
    プロダクトの目的
    製品ページへのリンク
    リスト→コールアウトに
    変更

    View Slide

  37. やること やらないこと
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    メン
    バー
    議事録
    リンクドDB
    37
    :latest
    ファーストビュー外
    に配置
    プロダクトの目的
    製品ページへのリンク
    リスト→コールアウトに
    変更

    View Slide

  38. やること やらないこと
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    メン
    バー
    議事録
    リンクドDB
    38
    :latest
    ファーストビュー外
    に配置
    プロダクトの目的
    製品ページへのリンク
    リスト→コールアウトに
    変更

    View Slide

  39. 製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    プロダクトの目的
    製品ページへのリンク
    リンク

    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    39
    :latest
    サブページ群を
    並列配置に変更
    カテゴリ毎に分類

    View Slide

  40. 製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    プロダクトの目的
    製品ページへのリンク
    リンク

    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    40
    :latest
    サブページ群を
    並列配置に変更
    カテゴリ毎に分類

    View Slide

  41. 製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    プロダクトの目的
    製品ページへのリンク
    リンク

    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    41
    :latest
    サブページ群を
    並列配置に変更
    カテゴリ毎に分類

    View Slide

  42. リンク

    プロダクトの目的
    製品ページへのリンク
    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    42
    :latest
    リンク集を
    コールアウトで装飾
    ページ全体の見た目を
    揃える

    View Slide

  43. リンク

    プロダクトの目的
    製品ページへのリンク
    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    43
    :latest
    リンク集を
    コールアウトで装飾
    ページ全体の見た目を
    揃える

    View Slide

  44. リンク

    プロダクトの目的
    製品ページへのリンク
    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    議事録
    リンクドDB
    44
    :latest
    リンク集を
    コールアウトで装飾
    ページ全体の見た目を
    揃える

    View Slide

  45. 議事録
    リンクドDB
    プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    45
    :latest
    議事録を
    トップページへ
    読み込み制限を10に設定

    View Slide

  46. 議事録
    リンクドDB
    プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    46
    :latest
    議事録を
    トップページへ
    読み込み制限を10に設定

    View Slide

  47. 議事録
    リンクドDB
    プロダクトの目的
    製品ページへのリンク
    リンク

    製品について
    サブページ
    イドライン
    サブページ
    企画
    サブページ
    開発
    サブページ
    DB
    やること やらないこと
    メン
    バー
    47
    :latest
    議事録を
    トップページへ
    読み込み制限を10に設定

    View Slide

  48. :latest
    48

    View Slide

  49. 49
    Key Takeaways
    ● 企画と開発のページは分離
    ● 必要に応じて階層を保つ
    ● 画像を埋め込むなら
    draw.io(かMermaid)を使う
    ● 頻用ページはショートカットを
    トップに設置
    v2
    ● ファーストビューの要素を精査
    ● 見た目で困ったら
    コールアウトを活用する
    ● 縦長にならないようにする
    ● グルーピングを意識
    v3

    View Slide