今日皆さんにお伝えしたいのは、
図、書けってことなんですよ。
図って理解を助けてくれるし、誰かに説明するためにはすごく便利なんです。言うまでもなく。
でも、ぶっちゃけ面倒ですよね？
わかる。コレすごいわかる。
でも「ラクに書く」ために設計されたドロー (作図) ツール使うと、拍子抜けするほど簡単に書けるんですよ。
そこで今回は作図初心者におすすめのツール「Excalidraw」の基本的な使い方と、Obsidianプラグインとしての「Excalidraw」の魅力をお伝えしたいと思います。
ExcalidrawはWebブラウザで動作するドローツール
Excalidrawは元々Google ChromeなどのWebブラウザで動作するドローツール。
ドローツールといえば他にも業界標準のAdobe Illustratorや買い切りのAffinity Designer、無料ソフトならインストール型のInkscapeとか、Diagrams.net (旧Draw.io) なんかも有名です。
でも特にInkscapeとか、とっつきにくくて難しいんですよ。実際過去に2度挫折した経験がある僕が言うんだから間違いない。イメージで言えばこんな感じ。
もうね、難しいドローツールって「Hell」なのよマジで。
その点Excalidrawは誰でも簡単に作図できるので、初めてドローツールに触れる初心者の方にはすごくおすすめできます。
Excalidrawを試してみよう
Excalidrawがどれほど簡単に始められるか。百聞は一見にしかずということで、一緒に使ってみましょう。アカウント登録すら不要なので、アクセスすればすぐに使えます。
開いた画面上部に表示されているのが描画ツール。
この描画ツールを選択して画面内をクリック or ドラッグするのが基本的な操作です。
四角形を描く
まず描画ツールから四角形を選択するかキーボードの2を押して、画面上を適当にドラッグ。
長方形ができました。周囲に表示される8つの□をドラッグするとサイズ変更、◯をドラッグすると回転できます。
なお正方形を描くにはShiftを押しながらドラッグです。この操作は円でもひし形でも共通なので、ぜひ押さえておきましょう。
テキストを入力する
テキストを入力するには画面上の任意の場所をダブルクリック。
半角文字を入力すると特徴的な手書き風フォントで描画されます。日本語も入力可能。
この文字を四角形の中にドラッグすると、
なんとなくボタンっぽくなりました。
複数のオブジェクトを組み合わせる – グルーピング
しかしこの状態では単に「2つのオブジェクトがこの位置にある」というだけ。テキストと長方形はバラバラの存在です。
この2つを組み合わせて、1つのオブジェクトを作りましょう。複数のオブジェクトを組み合わせるにはShiftを押しながら個々のオブジェクトをクリックするか、全体を囲むようにドラッグして両方選択します。
この状態でCtrl (⌘) + Gを押すと、
テキストの枠が消え、2つのオブジェクトが1つにまとまりました。これがグルーピング。ドローツールでは必須の機能です。
オブジェクトのコピー/ペースト
ではこのオブジェクトをコピペして、もう1つ長方形を作りましょう。
コピペといえばCtrl (⌘) + C でコピーしてVで貼り付け？ それももちろん可能ですが、ドローツールではもっとラクな方法があります。
コピーしたいオブジェクトを選択 → Alt (Option)を押しながらドラッグです。
オブジェクトの見た目を変更する
新しいオブジェクトを適当な場所に配置できたら、せっかくなので枠線やカラーなど、オブジェクトの見た目をあなた好みに変更しましょう。
オブジェクトを選択した状態なら、左サイドバーで様々な要素を変更できます。
| 項目名 | 意味 |
|---|---|
| Stroke | 枠線やテキスト色 |
| Background | 背景色 |
| Fill | 塗りつぶしのスタイル |
| Stroke width | StrokeやFillの太さ |
| Stroke style | 枠を実線や点線に変更 |
| Sloppiness | 枠線の乱れ (手書きっぽさを表現する) |
| Edges | 枠の角を選択 (角丸など) |
| Font size | 文字の大きさ |
| Font Family | 手書き風フォント、通常フォント、等幅フォントを選択 |
| Text align | 文字の配置 (左寄せ、中央寄せ、右寄せ) |
| Opacity | オブジェクトの透明度 |
| Layers | 重なり合うオブジェクトの優先順位 (前面、背面) を指定 |
| Align | 複数オブジェクトの並びを指定 (等間隔で並べる、水平方向に整列など) |
オブジェクト内のテキストを編集する
次に新しいオブジェクトのテキストを編集します。グループ化されたオブジェクト内のテキストを編集するには、テキスト部分を2度ダブルクリック。水色になれば編集可能です。
矢印ツールでオブジェクトをつなぐ
これで2つの異なるオブジェクトができました。この2つを線でつないでみましょう。
オブジェクトをつなぐのに便利なのが矢印ツールです。5を押してツールを選択し、始点をクリック → そのまま終点までドラッグします。
オブジェクトの周りに薄い色のガイドが出るので、そこで手を離してください。
2つのオブジェクトは矢印でつながりました。片方のオブジェクトをドラッグして移動してみましょう。
その他の描画ツール
Excalidrawには上でご紹介した矢印や四角形以外にも、豊富な描画ツールが用意されています。試してみてください。
| キーと名称 | 働きと簡単な使い方 |
|---|---|
| 1 – 選択ツール | クリックでオブジェクトを選択 ドラッグで移動 / 変形 |
| 2 – 四角形ツール | 長方形を描画 Shiftを押しながら正方形を描画 |
| 3 – ひし形ツール | ひし形や平行四辺形を描画 |
| 4 – 円ツール | 楕円や正円を描画 |
| 5 – 矢印ツール | 矢印や直線、曲線でオブジェクト同士を接続 |
| 6 – ラインツール | 始点と終点をクリックすると直線が引ける 始点と終点をつなぐと図形オブジェクトとして認識される 描画を停止するにはESCかEnter |
| 7 – フリーハンドツール | ドラッグで自由な線を描画 |
| 8 – テキストツール | 文字列を入力 |
| 9 – イメージツール | 画像ファイルを選択して配置 |
| 0 – ライブラリ | 「Browse libraries」で他ユーザーが作成した図形を登録/ダウンロード 登録した図形はワンタッチで使用できる |
ファイルとして保存する
この状態でひとまず保存しておきましょう。ファイルとして保存するにはサイドバー上部のアイコン (Export) をクリック。
「Save to disk」で名前を付けて保存します。
ExcalidrawをObsidianプラグインとして起動する
ではここからObsidianに移動して作業を進めていきましょう。
【Settings】> 【Community Plugins】からExcalidrawプラグインをインストールしておいてください。設定はそのままでOK。
ファイルを新規作成 or 開く
インストールすると、画面左端のアイコンやコマンドパレットからExcalidrawファイルを新規作成できます。
今回は既にWebブラウザで作成したファイルがあるので、それを使いましょう。保存しておいたファイルを「Excalidraw」フォルダにドラッグ。
このファイルを開くと、続きから作業を始められます。
ただし『.excalidraw』拡張子のファイルはそのままではプラグインの全機能を利用できません。Obsidianのプラグインとして最適化するにはファイルを右クリックし、『.md』ファイルに変換してください。
Excalidrawプラグインの魅力
ファイルが作成できたところで、先に1つの疑問を解決しておくことにします。
ExcalidrawはWebブラウザで軽快に動作するドローツールですが、それをなぜわざわざObsidianのプラグインとして利用するのか？ そのメリットとは何なのか？
この疑問をスッキリ解決するにはObsidianからアプローチするのが近道です。「Obsidianがどんなアプリか？」を今一度考えてみましょう。
オフラインでも起動可能
当然ながら、Web上のExcalidrawをオフライン環境で起動することはできません。しかしObsidianはオフラインでも動作するインストール型のアプリ。
プラグインとしてObsidianにビルトインしてしまえば、ネット環境に依らずExcalidrawを利用できます。
複数端末でファイルをシームレスに同期できる
Obsidianは現在モバイルアプリもリリースされ、Vault同期方法もいくつかの方法が確立されています。
つまりパソコンで描いた図形はiPadやスマホとシームレスに同期できるし、iPad上で描いた図形はそのままパソコン上で使えるということ。
他のノートやブロックにリンクできる
Obsidianといえばノート間リンク。そして今開いているこのファイルは、まさにObsidianのノートです。
ということは、このページは他のノートから参照できるし、このページから他のノートやノート内ブロックにリンクできると考えるのが自然でしょう。
Excalidrawプラグインのリンク機能
ではどうすればExcalidrawの図形と他のノートをリンクできるのか。ここからはExcalidrawプラグインの「リンク機能」を少し深堀りしていきます。
別ページにリンクする
リンク機能は現在、テキストツールで描画した文字列でのみ有効。
Obsidianのぺージ間リンクの表記である[[リンク先]]で動作を確認してみましょう。
テキストの左側に赤いピンのアイコンが追加されました。これがリンクの証です。
リンク先を開くには素のObsidian同様、Ctrl (⌘) + クリック。
アイコン部分の表記は【Excalidrawプラグインの設定】>【Link prefix】で自由に設定でき、【Show[[brackets]] arround links】で[[ ]]の表示を切り替えられます。
その他のリンク方法
またブロック/セクションへのリンクや表記指定も可能。
Ctrl (⌘) を押しながらマウスオーバーするとポップアッププレビュー。
ページの埋め込みも機能します。
もちろん外部リンクも。
Obsidianが対応している形式は全て利用可能です。
図形を他ファイルから参照する
逆にExcalidrawで作成した図形を他のページから参照するにはどうすれば良いでしょう？
単純なページリンクや埋め込みでは編集画面で図形を表示できないし、ポップアッププレビューも完全ではありません。
そこで便利なのが「Ozan’s Image in Editor Plugin」。
埋め込んだPDFや画像を編集画面で表示できるプラグインですが、なんとExcalidrawにも対応しています。
プラグインの設定画面で【Render Excalidraw in Editor】をONにするだけでOK。
モバイルアプリには残念ながら対応していませんが、パソコンで編集画面を開いていることが多い方には特におすすめです。
Excalidrawの活用法は無限大
- 図形を自由に配置できるドローツール
- 極めてシンプルな操作性
- 他のページ、または外部へのリンク機能を有する
こういった特徴を持つExcalidrawプラグインは、単に物事への理解を助けたり他人に説明するのに便利なだけではありません。
例えば小規模なMOC (Map Of Contents / インデックスページ) をExcalidrawで作成してみるのはどうでしょうか？
図を使うことでつながりを可視化でき、そこから各ファイルにリンクすることで、一覧性と詳細な情報を両立させることが可能になります。
マークダウン記法だけではどうしても難しかった「配置の自由度」を手に入れることで、あなたのObsidianはさらに先のステージへと進むことができるでしょう。