Webデザイナーが勉強しなければならないことってたくさんありますよね。
今は書籍以外でも、仕事に役立つノウハウがSNSやメディアサイトに溢れています。しかし、ただインプットの数を増やしても、肝心な時に引き出すことができなければ意味がありません。私も今まで「これは使える！」と思ったものをWebアプリやノートにまとめてきましたが、実践できているとは言えませんでした。
しかし、昨年より利用開始した情報管理ツール「Notion」によって、インプットしたノウハウを実践できるようになったと実感しています。今回は10ヶ月以上の利用経験を経て、私自身が感じたNotionの魅力について、実践サンプルを交えて紹介したいと思います。
目次
Notionとは？
Notionが優れている点
Notionの整理する機能
1. ブロック編集
2. マークダウン記法
3. 自由なレイアウト
4. 埋め込み機能
Notionの実践サンプル
1. HTML&SCSS
2. デザイン
3. jQuery
4. ツールのショートカット
おわりに
Notionとは？
【 Notion公式サイト 】
Notionとは、あらゆる情報を一元管理できるオールインワンの情報管理ツールです。
- 対応環境：Windows / Mac / Android / iOS
- 利用方法：ブラウザ or アプリ
- 料金：個人利用は無料
「all-in-one」と謳っている通り、これまでデータ形式に応じて別々のツールで管理していた情報（例：テキスト → Evernote、画像 → Pinterest、ブックマーク → Pocketなど）を、Notionひとつで管理できます。Notionで一元管理することで「あの資料どこにあったっけ？」と各ツールを検索して回る必要はなくなります。
Notionが優れている点
Notionを利用するまで、私はインプットを実践するには「すべて覚えなければならない」と思っていました。そのためインプットした直後は「早く実践しよう」と意気込むものの、活かせる場がないと徐々に忘れてしまい、いざという時に引き出すことができませんでした。
インプットした情報を忘れずに、引き出せるようになるにはどうすればいいのか？
Notionを利用してわかったことは「情報は整理されていれば、いつでも引き出せる」ということです。インプットした情報をNotionで整理しておけば、すべて覚える必要はありませんでした。公認アンバサダーによる紹介ページでも、以下のように記されています。
Notionのキーポイントは構造化とページ遷移、そしてUI設計に尽きます。 言うなれば、情報にたどりつくための “UX設計” です。この設計が完璧に機能したとき、完璧な生産性を提供してくれます。
筆者では今まで保存やブックマークして満足していた情報が、日々のNotion上のワークスペースで過去の情報を取り出すことが可能になりました。言うなれば未来の自分(または誰か)へのプレゼントです。
そして、Notionが他サービスと比べて、もっとも優れていると思う点は「情報を整理する機能」です。ここからはNotionの整理する機能について紹介します。
Notionの整理する機能
1. ブロック編集
Notionでは画像や文字自体の行を「ブロック」という単位で表現しています。ブロックはドラッグ＆ドロップで自由に移動させることができるので、積み木を組み立てるように情報を整理することができます。
※画像では「ダークモード」を使用しているため、背景が暗くなっています。
2. マークダウン記法
見出し（3種類）、区切り線、リスト、チェックボックス、トグルなど、通常のマークダウン記法を使用することができます（左図）。また「/（スラッシュ）」と入力すれば、マークダウン記法のショートカットコマンドも使用できます（右図）。
マークダウンでのメモ作業はサイト制作に近い感覚です。ただ日記を書くだけでも、クリエイティブな楽しさを感じることができます。
3. 自由なレイアウト
2列、3列の段組みもドラッグ＆ドロップで作ることができます。列幅や画像のサイズ変更も、あらかじめ区切られたグリッドにスナップするように変形してくれるので、自然ときれいなレイアウトが実現できます。きれいにまとまったページは何度でも見返したくなります。
4. 埋め込み機能
ほとんどのファイルを埋め込むことができます。画像・音声・動画ファイルやWebサイト、YouTubeの動画やツイートも埋め込むことができます。Googleドライブのファイルにも対応しているので、Googleドキュメントやスプレッドシートにまとめていた資料も参照することができます。
―
紹介したもの以外にも、Notionには便利な機能がたくさんあります。しかし万能すぎるが故に、いざ利用開始してみると「どう使えばいいのかわからない…」といった悩みが生じやすいです。ここからは私が実践しているNotionのまとめの一部を紹介します。
Notionの実践サンプル
私がNotionを利用する目的は二つあります。一つは「インプットを実践で活かす」こと。もう一つは「同じ作業を繰り返さない」です。すべての機能を使いこなす必要はないので、目的達成のためにはどう整理するのが良いかを考えて、適宜カスタマイズしていきましょう。
1. HTML&SCSS
コーディングで悩む時間を減らすために、日々の業務や勉強で得た知見をまとめます。「フォント」「レイアウト」「モーダル」など多くのカテゴリーがありますが、見返しやすさを優先して１ページに収めています。コーディングの知識は積み上げるほど、作業時間を減らすことができるのでオススメです。
2. デザイン
デザインのアイデアをストックしておきます。選んだ理由や使用場面などのコメントも添えておくと、トリガーとなって発想しやすくなります。「見出し」「ナビゲーション」「カード」など多くのカテゴリーがありますが、どのように整理するのが良いか、まだまだ試行錯誤中です。
3. jQuery
案件で実装したプラグインやコードをまとめます。完成コードだけでなく、作業工程での気付き、疑問、反省点を残しておくことで同じミスの繰り返しを防ぎます。
4. ツールのショートカット
業務効率を上げるのに最も手軽な方法はショートカットを覚えることです。キーボードとマウス操作の差はコンマ数秒だとしても、毎日繰り返していると大きなロスになります。しばらく使っていないと調べ直すことが多いので、自分が使うものだけをまとめています。
―
以上、私のNotionまとめの一部を紹介しました。
画像を見ると、あまりきれいにまとまっているとは言えませんが、私が一番見返しやすく実践できる形を求めた結果こうなりました。Notionを利用していると整理自体が楽しくなって、情報を詰め込みすぎたり、きれいなレイアウトにこだわりがちです。しかし、それで本来の目的が達成できなくなっては本末転倒です。きれいに整理できたけど実践できない、と悩んでいる方は整理の仕方を見直してみましょう。
おわりに
Notionを活用したインプットの実践方法について紹介しましたが、いかがでしたでしょうか？
私はNotionを利用してから、ページが増える度に「また一つ、成長できたな」と実感することができ、インプットすることが楽しくなりました。また、変化の早いWeb業界では、新たに覚えた知識もあっという間に古くなってしまいます。頭の中を最新の状態に保つためには、Notionのようなツールで情報を整理しておくことが大切だと思いました。
この記事がインプットを実践できないと悩んでいる方にとって、問題解決のきっかけとなれば幸いです。
弊社では士業やメディア、医療関係を中心にサイト制作を行っております。
Webサイトについてお悩みのある方はお気軽にお問い合わせください。
