【作業効率化】Draw.ioのレイヤー機能で重なり順を気にせずに作業をする
こんにちは。Draw.ioに限らずドロー系のツール全般に言えることですが、図の重なり順を調整する作業って結構面倒ではありませんか。一番前面に持ってきたい図が一番背後になってしまい、前面の図を背面に持っていく作業、だれでもやったことがあるのではないでしょうか。
今回はDraw.ioのレイヤー機能を利用し、重なり順を調整する作業を軽減する方法を説明していきます。
レイヤー機能とは
Draw.ioのレイヤーとは透明なフィルムのようなものと理解しましょう。図を描くキャンパス上に透明なフィルムが存在し、図をフィルム上に記録するイメージです。レイヤーは何枚も積み重ねることができ、下のレイヤーに影響を与えることなく上のレイヤーを編集できます。簡単なサンプルを用いて説明したいと思います。
下の図はとあるWEBアプリケーションのハードウェアとソフトウェアの構成を表している図です。ハードウェアの中にインストールしているApache、Tomcat等のソフトウェアがインストールされていることを表現しています。このような図を表現しようとしたとき、ツール内ではハードウェアよりソフトウェアが前面に配置されていないといけません。でないとソフトウェアはハードウェアに隠れて見えなくなってしまいます。ソフトウェアを配置するたびに、重なり順を最も前面に配置するよう意識して操作しなくてはならなくなります。これがかなり面倒なのです。
ここで役に立つのがレイヤー機能です。ハードウェアのレイヤーとソフトウェアのレイヤーをあらかじめ作成し、ソフトウェアのレイヤーを前面に配置しておきます。するとソフトウェアのレイヤーに配置された図は、ハードウェアのレイヤーより必ず前面に配置されるようなります。こうしておけば重なり順を意識することが少なく作業することができ生産性が向上するのです。
レイヤーの作り方
それでは前章で紹介したレイヤーを実際に作成してみましょう。
メニューバーから[表示]＞[レイヤー]をクリックします。初期状態では[Background]というレイヤーが一つだけ配置されています。ここからハードウェアとソフトウェアのレイヤーを作っていきます。
既存のレイヤーの名前を変更する
必ず１つのレイヤーは配置されていないといけないので、[Background]のレイヤーを消すことはできません。そこで[Background]レイヤーの名前を[ハードウェア]に変更します。鉛筆のアイコンをクリックして名前を変更しましょう。
Backgroundレイヤーの名前がハードウェアに変更されていれば成功です。
新しいレイヤーを追加する
次にソフトウェアのレイヤーを追加します。＋アイコンをクリックします。Untitiled Layerというレイヤーが作成されます。
新しく作られたレイヤーの名前をソフトウェアに変更すれば完了です。
レイヤーに対して図を描く
操作したいレイヤーをクリックすると、選択状態になります。この状態でキャンパスに図を配置すると選択したレイヤーに対して図を描くことができます。
レイヤーの重なり順を変更する
レイヤーには重なり順の概念があり、上に表示されているレイヤーが前面に表示されます。また、右横の矢印で重なり順を前後させることができます。
レイヤー操作をロックする
レイヤーを作成したら編集したくないレイヤーを操作不能にしておくと便利です。操作したいレイヤーの編集に集中することができるようになるからです。南京錠のマークをクリックしするとレイヤーを操作不能にすることができます。
まとめ
今回はDraw.ioのレイヤー機能を解説しました。Draw.ioで図を作成していて重なり順の設定が面倒に感じたらレイヤー機能をうまく使うと解消することができます。皆さんも是非使用してみてください。