個人からチームまで、情報・タスク管理の一元化はNotionにお任せ！

議事録は Google ドキュメント？それとも Dropbox Paper？タスク管理は Trello？それとも Backlog？ドキュメントは esa？表は Google スプレッドシート？このプロジェクトの議事録どこだっけ？あのプロジェクトのサーバ情報なんだっけ？

もうこんなストレスにはサヨナラしましょう。このセッションでは Notion とは何か、そしてキテレツでの具体的な活用方法を紹介したうえで、それを実現するための基本から応用までの操作方法を詳しく解説します。 11日に追加された待望の新機能についての解説も…！？

Transcript

1. 　 Notion 個人からチームまで 情報・タスク管理の一元化は にお任せ！
2. 自己紹介 Designer Programmer Director WordPress Core Contributer Ruby on Rails Contributor React Contributor Vue CLI Contributor Kite KITERETZ inc. CEO & Founder kite.koga / ixkaito
3. 自己紹介 / Wocker https://wocker.dev/ Docker ベース WordPress 開発環境 ★ Star 481
4. 自己紹介 / Bathe https://ixkaito.github.io/bathe/ Sass、Webpack などが設定済みの超シ ンプル WordPress スターターテーマ
5. 自己紹介 / KTRZ Font https://ixkaito.github.io/ktrz-font/ 超ミニマルな幾何学フォント
6. 自己紹介 / Japanese Dummy Text https://www.figma.com/community/ plugin/884977600755027488/Japan ese-Dummy-Text 日本語ダミーテキストを生成する Figma プラグイン
7. 自己紹介 / 世界一わかりやすい WordPress 導入とサイト制作の教科書
8. Notion とは What’s Notion?
9. Notion とは オールインワン情報管理ツール All-in-one workspace One tool for your whole team. Write, plan, and get organized.
10. Notion とは / ドキュメント・ノートツール Google Docs Dropbox Paper Evernote Confluence OneNote esa Scrapbox HackMD
11. Notion とは / タスク管理ツール Trello Asana Jira Backlog Redmine
12. Notion とは / スプレッドシート・データベース Google Sheets Excel Airtable
13. Notion とは / その他の使い方 Pocket Pinterest
14. 具体的な利活用方法 Use Cases
15. 具体的な利活用方法 / キテレツの利用ツール Notion Slack Figma GitLab
16. 具体的な利活用方法 / チーム理念の共有
17. 具体的な利活用方法 / オフィス情報 オフィスの住所、Wi-Fi・郵便受け・自転 車の暗証番号などをこのページにまとめ ています。
18. 具体的な利活用方法 / メンバー管理
19. 具体的な利活用方法 / メンバー管理 / 個別ページ メンバーの個別ページにはフルネーム、 カナ、スペル、ハンドルネーム、メールア ドレス、電話番号などを記載。 メンバー同士でこれらの情報が必要に なったときはここを参照します。
20. 具体的な利活用方法 / プロジェクト管理
21. 具体的な利活用方法 / プロジェクト管理 / プロジェクト個別ページ
22. 具体的な利活用方法 / プロジェクト管理 / プロジェクト個別ページ ガントチャート 上記タスクを同じ画面で でも表示します。 フィルタリング カンバンで表示 プロジェクトに関するタスクをこのペー ジに して します。 プロジェクトに関するドキュメントはす べてこのページにまとめます。 クライアントから提供された外部ドキュ メントはここにリンクを張ります。 ドキュメントが増えれば、サブページな どを作って整理します。
23. 具体的な利活用方法 / タスク管理 したすべてのタスク を一括管理します。 プロジェクトを横断 1つのデータベース 全タスクは に入 れます。プロジェクトページには フィルタリングして表示します。
24. 具体的な利活用方法 / タスク管理 カンバン表示 ガントチャート 表示 タスクを 、 などで切り替えることができます。
25. 具体的な利活用方法 / タスク管理 のタスクのみを表示したペー ジも簡単に作ることができます。 自分が担当
26. 具体的な利活用方法 / タスク管理 自分が担当のタスク ガントチャート表示 プロジェクトごとのタスク カンバン表示 、 でタスクを編 集しても、ほかの場所にも で反映されます。 どのページ どの表示方法 リアルタイム
27. 具体的な利活用方法 / 議事録管理 プロジェクトと 関連付ける 全議事録を一括管理し、 ことで、プロジェクトページ からも簡単にアクセスできます。
28. 具体的な利活用方法 / 経費精算 未精算金額合計 各自に経費を入力してもらい、メンバー ごとの を表示できます。
29. 具体的な利活用方法 / ブックマーク・後で読む (Chrome / Firefox 拡張機能) を使えば、気になった記事やサ イトを簡単に保存・管理できます。 Notion Web Clipper
30. 具体的な利活用方法 / 自分だけのデザインギャラリー などで整理すれば、自分だけのデザ インギャラリーも作れます。 タグ
31. 操作方法 / 基本 Basics
32. 操作方法 / 基本 / 全体像 Private ▼ 　 ▶ ▼ 　 ▼ 　 　 ▶ ▼ 　 ▶ ▶ ▼ 　 ▼ 　 　 ▶ ▶ Workspace ▼ 　 ▶ ▼ 　 ▼ 　 　 ▶ ▼ 　 ▶ Private ▼ 　 ▶ ▶ Workspace ▼ 　 ▶ ▼ 　 ▼ 　 　 ▶ ▼ 　 ▶ Private ▼ 　 ▶ ▶ Workspace ▼ 　 ▶ ▼ 　 ▼ 　 　 ▶ ▼ 　 ▶ Private ▼ 　 ▶ ▶ Account
33. 操作方法 / 基本 / サイドバー Favorites お気に入り。よく利用するページにアクセスしやすくできます。 Workspace ワークスペースの全員がアクセスできるページ。 Shared ワークスペース内で個別に自分に共有されたページ。 Private 自分しかアクセスできないページ。
34. 操作方法 / 基本 / ページとデータベース (通常の) ページ データベース コンテンツの最大単位は か Page Database
35. 操作方法 / 基本 / ページ ブロック 見出し、テキスト、リスト、画像など、 さまざまなコンテンツ を記述で きます。
36. 操作方法 / 基本 / データベース プロパティ 同様な (メタデータ) を持った ページの集まり。テーブル、カンバン、 カード、ガントチャートなどの表示形式 を切り替えられる。
37. 操作方法 / 基本 / ページ作成 第一階層 何もない状態でページを作成するとワー クスペースの に作成されます。 第一階層には何ページでも作成できる が、第一階層のページを一覧できるペー ジは存在しない (サイドバーからしか確認 できない) ため、ページが増えたときはそ れらをまとめるページの作成をおすすめ します。
38. 操作方法 / 基本 / ページ作成 リンク サイドバー サブページを作成すると、ページ内のど こかに必ず が表示されます。 サブページは にも表示されま す。
39. 操作方法 / 基本 / ブロック Heading 見出し Text テキスト To-do list チェックリスト Bulleted list 箇条書きリスト Numbered list 順序付きリスト
40. 操作方法 / 基本 / ブロック Toggle list アコーディオン Quote 引用 Callout アイコン・背景付きブロック Code コードブロック
41. 操作方法 / 基本 / データベース作成 view データベースは種類がたくさんあるよう に見えますが、どれを選んでも (表 示方法) を変更することで最終的には同じ ものができます。
42. 操作方法 / 基本 / Table (表) データベースの操作に何かと便利なの で、とりあえずここからスタート、もし くは view に追加しておいてもいいかも。
43. 操作方法 / 基本 / Board (カンバン) view に追加するとき、グループ化できる プロパティがない場合はセレクトプロパ ティが自動的に作成されます。
44. 操作方法 / 基本 / Calendar (カレンダー) view に追加するとき、日付プロパティが ない場合は自動的に作成されます。
45. 操作方法 / 基本 / Gallery (ギャラリー) カバー画像 本 文 なし 最初の画像 カードのプレビューは 、 、 から選択できます。 本文にした場合、本文中に画像があれば が適用されます。
46. 操作方法 / 基本 / Timeline (ガントチャート) view に追加したとき、日付プロパティが ない場合は自動的に作成されます。
47. 操作方法 / 基本 / ️ プロパティ データベースの子ページのメタデータ。
48. 操作方法 / 基本 / ️ プロパティ Table view ではプロパティはカラムとし て表示されます。 Title プロパティは削除や非表示に できません。
49. 操作方法 / 基本 / ️ プロパティ Select 単一選択タグ Multi-select 複数選択タグ Person ワークスペース内の Notion ユーザ Checkbox 真偽値 Formula 関数 Relation 関係データベース Rollup 関係データベースのプロパティへの参照
50. 操作方法 / 応用 Hands-on
51. 操作方法 / 応用 / ホームページを作成 プロジェクトやタスクをまとめるページ を作成しておきます。
52. 操作方法 / 応用 / プロジェクト用データベースを作成 「Tags」プロパティは削除しても大丈夫 です。
53. 操作方法 / 応用 / タスク用データベースを作成 、 、 などの必要なプロパティを 作っておきます。 ステータス (Select) 日程 (Date) 担 当 (Person) カッコ内はプロパティタイプ
54. 操作方法 / 応用 / ↗ ️タスクとプロジェクトを関連付ける Project Relation 「 (任意) 」という名前のプロパ ティを追加し、プロパティタイプを にします。
55. 操作方法 / 応用 / ↗ タスクとプロジェクトを関連付ける Project Relation の対象に「 」データ ベースを選択し、「Create relation」を 押します。
56. 操作方法 / 応用 / ↗ タスクとプロジェクトを関連付ける これでタスクとプロジェクトを関連付け ることができました。 ついでに見やすいよう「Project」プロパ ティを一番左側に移動しておきます。
57. 操作方法 / 応用 / ↗ タスクとプロジェクトを関連付ける Related to Tasks (Project) Tasks プロジェクト側では自動的に「 」プロパティが作成さ れます。 プロパティ名は変更できるの で「 」に変更しておきます。
58. 操作方法 / 応用 / ↗ タスクとプロジェクトを関連付ける また、この画面でプロジェクトごとのタ スクを見ることは基本的にはないと思い ますので、非表示にしておいてもいいで しょう。 今回はタスクデータベース側から Relation を作りましたが、プロジェクト 側から作ってもまったく同じ結果になり ます。
59. 操作方法 / 応用 / カンバンでタスクを表示 を押して を選択し て表示方法を追加します。 + Add a view Board
60. 操作方法 / 応用 / カンバンでタスクを表示 を押して を選択し、 チームに応じてステータスを追加しま す。 Group by … Status ス テータスなし No Status = Todo Trello と違って、Notion では 状態がありえるの で、キテレツでは Todo ステータ スは作らずに としています。 ほかに Review (Doing と Done の間)、Pending、Wontfix を 作っています。
61. 操作方法 / 応用 / ガントチャートでタスクを表示 を押して を選択 して表示方法を追加します。 + Add a view Timeline
62. 操作方法 / 応用 / ガントチャートでタスクを表示 を押してテーブル側の を表示させておきます。 ほかはお好みで。 Properties Project
63. 操作方法 / 応用 / ガントチャートでタスクを表示 プロパティタイプがない場合は自動 的にプロパティが作成されます。 1つの場合は自動的にそれが利用されま す。 複数ある場合は から で 選択できます。 Date ･･･ Timeline by
64. 操作方法 / 応用 / ガントチャートでタスクを表示 Sort 見やすいよう でプロジェクト→日程 順にしておきます。
65. 操作方法 / 応用 / 日付表示変更 Date format & timezone Date format Year/Month/Day デフォルトの日付表示は日本人には読み にくいと思いますので、タスクをどれか 開き、日付を押して → から を選ぶと読みやすくな ります。
66. 操作方法 / 応用 / ホームページでタスク一覧を確認できるようにする ･･･ Turn into inline Tasks の から を押 します。
67. 操作方法 / 応用 / ホームページでタスク一覧を確認できるようにする Turn into page これでホームページからチーム全体の進 行状況やスケジュールを確認できるよう になりました。 でいつでもインライン表 示からリンクに戻すこともできます。
68. 操作方法 / 応用 / ホームページでタスク一覧を確認できるようにする ･･･ Full width カンバンやガントチャートなどをインラ イン表示するにはページ幅が狭すぎるの で、文章を書くことがないホームのよう なページでは、ページ右上の から にしてもよいでしょう。
69. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 ボタン横の から を押します。 New  + New template
70. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 New project ･･･ Customize page Always hide テンプレート名を「 」にし ます。 タイトル下にプロパティの Tasks があり ますが、特に見やすくはないので、ペー ジ右上の から を押 して Tasks プロパティを に しておきます。
71. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 New project ･･･ Customize page Always hide テンプレート名を「 」にし ます。 タイトル下にプロパティの Tasks があり ますが、特に見やすくはないので、ペー ジ右上の から を押 して Tasks プロパティを に しておきます。
72. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 見出しなどをつけて、ドキュメントをま とめるエリアとタスクを表示するエリア を用意しておきます。
73. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 /linked Create linked database タスクエリアで と入力して が表示されたら エンターを押します。
74. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 データベースを選択します。 Tasks データベースが多い場合はそのま ま検索できます。
75. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 を追加して、 Table view は 削除してもいいでしょう。 データベース右側の から を押 します。 Board view ･･･ Filter
76. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 で Where「 」「 」「 」フィルタを設定します。 + Add a filter Project Contains New project New project 「 」はこのテンプ レート自身という意味。このテン プレートで作成したプロジェクト は自動的にフィルタとしてそのプ ロジェクトが利用されます。
77. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 Timeline view ガントチャートも表示したいので、さき ほどの Linked Database に view を追加 してもいいんですが、見るときいちいち切 り替えないといけません。 Linked Database は何個でも作れますの で、同様な手順で の Linked Database をもう1つ作れば、カ ンバンとガントチャートを1つの画面で確 認できます。
78. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 And Status Is not Done ガントチャートではタスクが増えるとど んどん縦が長くなるので、フィルタに 「 」「 」「 」「 」を入れておくといいで しょう。
79. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 New project 既存のプロジェクトを開いて、中身がま だなにもない状態であれば、 テンプレートを適用できます。
80. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 を押すとテンプレートが適 用されて、それぞれのプロジェクトのタ スクのみが表示されます。 New project
81. 操作方法 / 応用 / プロジェクトページで関連タスクのみを表示 プロジェ クトが入力された状態 プロジェクトページでタスクを作成すれ ば、自動的にプロパティにその で作成されます。
82. 操作方法 / 応用 / その他 自分だけのタスク 議事録 クライアント タスクの親子関係 同様な手順で をフィル タリングしたり、 や データベースを作成してプロジェクトと 関連付けたり、タスクデータベースを自 分自身と関連付けて、 を作ったりすることができます。
83. Thank You! https://twitter.com/ixkaito/ https://kiteretz.webflow.io https://kiteretz.studio.site/