ドローイングツールの使い方（システムデザイン形式）
問題形式ごとの使い方ドローイングツールの使い方
システムデザイン形式の問題では、アーキテクチャ図・フロー図などを描くためのドローイングツールが利用できます。このページでは、ドローイングツールの基本的な使い方について説明します。
ドローイングツールとは
ドローイングツールは、システムデザイン形式の問題で使用する図作成ツールです。サーバー・データベース・ユーザー・ネットワークなど、システムの構成要素を図形として配置し、線や矢印でつなぐことで アーキテクチャ図 を描けます。
基本的な図形の操作
図形を追加する
- 画面左側のパネルから追加したい図形（サーバー・DBなど）を選択します。
- キャンバス上の配置したい場所にドラッグ＆ドロップします。
- 図形がキャンバスに追加されます。
図形を移動する
- 移動したい図形をクリックして選択します（選択された図形はハイライト表示されます）。
- 図形をドラッグして好みの位置に移動します。
- マウスボタンを離すと図形が固定されます。
図形を削除する
- 削除したい図形をクリックして選択します。
- Delete キーまたは Backspace キーを押します。
図形にテキストを追加する
- テキストを追加したい図形をダブルクリックします。
- テキスト入力モードになります。
- 説明文やコンポーネント名などを入力します。
- 図形の外側をクリックして入力を確定します。
接続線（矢印）の操作
図形をつなぐ
- 接続元の図形にマウスカーソルを近づけます（図形の端に 接続ポイント が表示されます）。
- 接続ポイントをクリックしたままドラッグします。
- 接続先の図形まで線を引き、接続ポイントの上でマウスボタンを離します。
- 2つの図形が矢印でつながります。
接続線にラベルを追加する
- ラベルを追加したい接続線をダブルクリックします。
- テキスト入力欄が表示されます。
- APIエンドポイント名・プロトコル・データフローなどを入力します。
- 図形の外側をクリックして確定します。
接続線を削除する
- 削除したい接続線をクリックして選択します。
- Delete キーまたは Backspace キーを押します。
キャンバスの操作
表示範囲の移動（パン）
- キャンバスの空白部分をドラッグすると、表示範囲を移動できます。
拡大・縮小（ズーム）
- マウスホイールを上下に回転させると、キャンバスを拡大・縮小できます。
- ピンチイン・ピンチアウトでも操作できます。
全体表示に戻す
- キャンバス上部またはメニューの 「フィット」 ボタンをクリックすると、作成した図全体が画面に収まるように表示が調整されます。
操作の取り消し・やり直し
| 操作 | ショートカットキー |
|---|---|
| 元に戻す | Ctrl+Z（Windows/Linux）/ Cmd+Z（Mac） |
| やり直す | Ctrl+Y / Cmd+Shift+Z |
注意事項
- 解答中はブラウザのタブを閉じないでください。誤って閉じた場合は、エントリー時に送信されたメール内のURLから再開できます。
- システムデザイン形式の問題全体の進め方については、「システムデザイン形式の進め方」のページもあわせてご参照ください。