Tips 7 | オンラインで簡単にフローチャートを描きたい | Tool |
>> | point あらかじめパーツが準備されており簡単 | ||
>> | point 完成した図はJPEGやPNG形式で書き出し可能 |
Webブラウザがあれば、簡単にフローチャートやユーザーインターフェイスの図を作成できるサービス「gliffy」(gliffy.com/)を紹介しよう。
サイトのトップページで[Get Starded Now]をクリックし、メールアドレスなどの必要情報を入力してアカウントを取得する。そのままログイン状態になるので、「Document Manager」左上の[new document]をクリック。公開しないドキュメントであれば「Account Document」が選択されている状態にしておこう。ドキュメント名を入力し[OK]をクリックすると、新規ダイアグラム作成画面になる【1】。
【1】新規ダイアグラム作成画面
左側のLibraryメニュー内の"Flow Chart"を選択すると、図を作成する際のパーツが準備されているので、方眼紙のエリア内にドラッグ&ドロップする【2】。Web制作者にとっては、Libraryメニュー→"Network"【3】や"User Interface"【4】のパーツを使った図の作成も便利だろう。間をつなぐ線などは、上部メニューに用意されている"Connector Tool"や"Line Tool"を使って作成しよう【5】。
【2】配置したパーツは大きさの変更や回転も可能
【3】「Network」セクションには、PCやサーバ、電話などのアイコンがある
【4】「User Interface」セクションには、フォームや地図などの部品がある
【5】日本語で説明を入力することも可能
図が作成できたら、上部のfileメニュー内の"Export as JPEG"などで書き出すこともできる【6】。なお、最初の30日間は無料だが、そのあとは最低月額5ドルからの有料プランにすることが必要だ。
【6】SVG、JPEG、PNG形式で書き出しが可能
サイトのトップページで[Get Starded Now]をクリックし、メールアドレスなどの必要情報を入力してアカウントを取得する。そのままログイン状態になるので、「Document Manager」左上の[new document]をクリック。公開しないドキュメントであれば「Account Document」が選択されている状態にしておこう。ドキュメント名を入力し[OK]をクリックすると、新規ダイアグラム作成画面になる【1】。
【1】新規ダイアグラム作成画面
左側のLibraryメニュー内の"Flow Chart"を選択すると、図を作成する際のパーツが準備されているので、方眼紙のエリア内にドラッグ&ドロップする【2】。Web制作者にとっては、Libraryメニュー→"Network"【3】や"User Interface"【4】のパーツを使った図の作成も便利だろう。間をつなぐ線などは、上部メニューに用意されている"Connector Tool"や"Line Tool"を使って作成しよう【5】。
【2】配置したパーツは大きさの変更や回転も可能
【3】「Network」セクションには、PCやサーバ、電話などのアイコンがある
【4】「User Interface」セクションには、フォームや地図などの部品がある
【5】日本語で説明を入力することも可能
図が作成できたら、上部のfileメニュー内の"Export as JPEG"などで書き出すこともできる【6】。なお、最初の30日間は無料だが、そのあとは最低月額5ドルからの有料プランにすることが必要だ。
【6】SVG、JPEG、PNG形式で書き出しが可能