シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
注目記事ピックアップ
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/09/29 19:20

「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!

notion-tutorial-01
どうも、まさとらん(@0310lan)です!

みなさんは文章を書く時に、WordやGoogleドキュメントなどのツールを使うでしょうか?

もしかすると、GitHub Wikiなどで共有情報を作成したり、タスク管理にTrelloやTodoist、Asanaなどのサービスも使うかもしれません。

ただ、複数のWebサービスを併用していると、ブラウザの中であっちへこっちへ移動したり管理するのが徐々に大変になってきます。


そこで、docs・Wiki・taskなどの機能が1つにまとまったユニークなWebサービスが海外で人気を得ているのでご紹介致します!

【 Notion 】

notion-tutorial-02

「Notion」の使い方!

それでは、実際に「Notion」を使いながらどのようなサービスなのかを見ていきましょう!

まず最初に、サイトへアクセスして「①メールアドレス」を入力し、すぐに送られてくる「②ログイン用のコード」を入力してスタートします。
notion-tutorial-03 (初回のみ初期設定の画面が表示されるのでサクッと済ませておきましょう)


すると、「Notion」のメイン画面が表示されます!
notion-tutorial-04 左側に「ファイルエクスプローラー」のようなメニューがあり、すでにいくつかサンプルドキュメントが作られているのが分かります。


フォルダを作るような感覚で「ツリー構造(階層構造)」を作れるようになっており、さまざまな用途別にドキュメントを保持することができます。
notion-tutorial-05

また、個人で使う以外にも「チーム」で共同管理するために別のアカウントを作成することもできます。
notion-tutorial-06 「チーム用」も画面の見た目は同じですが、新しいURLが割り当てられるので個人用と完全に分離して管理できるので便利です。


基本的な機能の紹介!

ここからは、実際にページを作りながらどのようなことが出来るのかを詳しく見ていきましょう!

新規にページを作る方法はいくつかありますが、今回は左側のメニューから「New Page」をクリックして作成します。
notion-tutorial-07

すると、さまざまな用途にすぐ利用できる「テンプレート」が表示されます。
notion-tutorial-08 もちろん白紙のページから作ることも可能ですが、テンプレートを使うと効率よく作業できます。


例えば、Wikiのようにチーム内で共有情報を作成したり…、
notion-tutorial-09

作業の進捗などをタスク管理のようにまとめてみたり…、
notion-tutorial-10

資料や議事録などのドキュメントを作成することができます。
notion-tutorial-11

また、ページ内に階層構造を作り、別のページを新しく作ることも簡単です。
notion-tutorial-12

そして、作ったページをドラッグ&ドロップして別のページに挿入することも可能です。
notion-tutorial-13 これにより、いろんなページを寄せ集めた「まとめページ」のようなモノも簡単に作れます。


さらに、「Notion」で作ったページ以外にも、例えばGoogleスプレッドシートで資料を作ったとします。
notion-tutorial-14

そして、シェア用のURLを「Notion」のページに貼り付けて「Embed」を選択します。
notion-tutorial-15

すると、ページ内にGoogleスプレッドシートが挿入されて、1つのページとしてまとめることも出来るわけです!
notion-tutorial-16 他にも、オフィス系のファイルやPDF、GitHubのGistやInvisionで作ったプロジェクトなど、さまざまなコンテンツをどんどん追加することができます。


そして、作成したページは「①メールアドレス」を入力して送信するだけで、友人・知人とすぐに共有することができます。
notion-tutorial-17 さらに、「②Publish to Web」の項目をONにするだけで、なんとネット上に公開することも可能です!

これは、まるでWebサイトを構築して公開するような感覚に近いでしょう。

公開してしまえば、URLを知っていれば誰でも見れるし、「閲覧のみ」や「編集可」などの細かい設定もできるので便利です。


「Notion」の使いこなし術!

「Notion」のエディタはとても自由度が高く、さまざまな機能が詰まっているのでいくつかピックアップしてご紹介します!

まず、ページ内のコンテンツは自在に移動させることが可能で、例えばマウスでドラッグしながら範囲を決めます。
notion-tutorial-18

範囲指定したコンテンツをそのまま移動させたい場所まで持っていけば、その位置にコンテンツが配置されるわけです。
notion-tutorial-19 この直感的な操作により、コンテンツを横にどんどん配置すればTrelloのような進捗管理ページも簡単に実現できるというわけです。


また、新しいコンテンツを追加する時も、マウスのクリックでメニューを呼び出すだけでOK!
notion-tutorial-20

これが面倒であれば、マウスを右側へ移動するだけで表示されるコンテンツメニューからドラッグ&ドロップするだけでもOKです!
notion-tutorial-21

これも面倒であれば、/(スラッシュ)を入力するだけでもコンテンツメニューが表示されるので便利です!
notion-tutorial-22

例えば、画像を挿入したければ…スラッシュのあとに「im」と入力するだけで「Add Image」という候補が表示されるので、そのままエンターキーを叩けばOK!
notion-tutorial-23

すると、画像を挿入するためのアップローダーが表示されます!
notion-tutorial-24 このように、素早くドキュメントを作成するための機能が豊富で、他にもマークダウンに対応していたり、ショートカットキーも細かく用意されています。

埋め込みタグにも対応しているので、YouTube動画やTwitter・Instagramの投稿なども1つのページに整理できるでしょう。


まとめ

今回は、「Notion」の基本的な使い方について駆け足でご紹介しました。

「Notion」は、本当に誰でも使いやすく設計されており、とにかく素早くドキュメントを作成できるうえ、エディタが洗練されているので使っていて楽しく感じます。

久しぶりに長く使えそうなサービスだと思ったので、ぜひみなさんもトライしてみてください!


<参考>
「Notion」公式サイト


written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る