| 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形式で書き出しが可能
