Help us understand the problem. What is going on with this article?

draw.ioの初期設定手順

社内プロジェクトで設計書のテンプレートを作ることになり、画面レイアウトのモックアップを手軽に作成できるサービスを探していたところ、draw.ioを見つけました。
GitHubとの相性もよさそうなので、布教用に使用手順を残します。

draw.ioとは

draw.ioはブラウザ上で手軽にER図や画面レイアウトを作成・シェアできるWebサービスです。

特徴

  • 無料
    全ての機能が完全無料で使用可能です。
  • ユーザー登録不要
    作成ファイルの保存先をGoogleDrive、OneDrive、ローカル環境のいずれかから選択するだけですぐに使用できます。
  • 日本語に対応
    全ての項目ではありませんが、日本語表示に対応しています。
  • 直感的な操作
    様々な図やテンプレートが用意され、ドラッグ&ドロップで配置・調整できます。
  • パーツ単位でHtmlの直接編集が可能
    例えばテーブルレイアウトを変更する際は、画面上からだけでなく編集したhtml(この場合は<table>タグとその中身)を直接貼り付けることでも思い通りの列・行数、styleの適用が可能です。
  • GitHubに直接コミットできる
    編集した画像をGitHubにコミットできる為、レイアウトのメンテナンスの手間が減ります。もちろんGoogleDriveやローカルへのエクスポートも可能です。

利用方法

1. 以下のサイトにアクセスします。

draw.io

このような画面が表示されます。
キャプチャ.PNG

2. 「Start using draw.io」をクリック

少し下へスクロールするとリンクボタンが出てくるので、それをクリック。
キャプチャ2.PNG

3. ファイルの保存先を選択

GoogleDrive、OneDrive、デバイス(ローカル環境)のいずれかに保存先を設定します。
ここではGoogleDriveを選択しました。

また、保存先によってはGoogleアカウントへの認証を求められるので、適宜入力してください。

キャプチャ3.PNG

4. 新規ファイルの作成

「新規ファイルを作成する」を選択します。

キャプチャ4.PNG

5. テンプレートの選択

様々なテンプレートが用意されています。

キャプチャ6.PNG
キャプチャ7.PNG
キャプチャ8.PNG
キャプチャ10.PNG


ここでは以下の空白のテンプレートを選択しました。
ダイアグラム名(hoge.drawio)を入力し、「作成する」を選択します。

キャプチャ9.PNG

6. 保存先フォルダの選択

デフォルトはルートフォルダが設定されています。
ここでは保存先を変更したいので、「No, pick folder...」を選択します。

キャプチャ11.PNG

GoogleDriveのフォルダ選択画面が表示されるので、保存先のフォルダを選択し、画面左下の「選択」ボタンを押下します。
キャプチャ12.PNG

7. 編集画面の表示

空白のテンプレートが表示されます。

キャプチャ13.PNG

グリッド表示されている部分が編集画面です。
Ctrl + マウスホイール等で拡大・縮小可能なので、作業時には適宜調整してください。

8. ファイルのエクスポート

作成したファイルを様々な形式で任意の場所へエクスポートできます。

  1. ツールバーの「ファイル」>「形式を指定してエクスポート」を選択。
    キャプチャ15.PNG

  2. 保存先を選択(ここではデバイスを選択しました)
    キャプチャ17.PNG


    以下のようにローカルにエクスポートできました。
    キャプチャ18.PNG

9. 初期設定

最後に、編集前の初期設定だけ済ませてしまいます。

以下の画像の右上と右下を参照してください。

キャプチャ14.png

言語設定

現在の画面表示はおそらく英語になっていると思います。
右上の地球マークをクリックし、「日本語」を選択することで画面表示を日本語化することができます。

画面サイズ設定

右下の用紙サイズから編集画面のサイズ、横向き・縦向きを変更できます。
もし画面上で設置したテキストボックス等がグリッド表示部分を超えた場合、自動的にページ単位で編集画面が拡張されていきます。

以上になります。お疲れ様でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした