フローチャートも作れる！デザインツールgliffyの使い方【初心者向け】

デザインツールgliffyの使い方に関する解説記事です。

モックアップの作成などに利用されるgliffyについて、登録画面から実際に作成する方法まで紹介しています。初めてツールを使うという人はぜひ参考にしてみてください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

gliffyとは

gliffyは、ブラウザ上で無料で利用できるデザイン作成ツールです。あらかじめ用意されている素材や自分で用意した画像を使ってワイヤーフレームなどを簡単に作成することができます。

 

gliffyの使い方

まず、以下のリンクにアクセスします。

https://www.gliffy.com/

メールアドレスとパスワード、使用するチームの人数を入力し「START FREE TRIAL」をクリックします。
最初の14日間は有料の機能も使用することができます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

gliffyで何か作ってみる

プロジェクトの作成と基本の操作方法

まず、新規ファイルを作成します。
「Create A New Diagram」から今回は「Wireframe」を選択します。

上メニューの図形ツールや直線ツールを使用するとそれぞれの形を描画することができます。

てのひらツールを使用すると画面の好きな所に移動することができます。

矢印ツールを選択した状態で各要素をクリックすると拡大・縮小・移動などの操作ができるほか、右クリックで表示されるメニューからはコピーや削除などを行うことができます。

このメニューから画面表示の拡大・縮小ができるようになっています。

ここから取り消し・やり直しの操作ができます。
各上メニューの操作は、そのコマンドにカーソルを合わせた時に表示されるショートカットキーでも同様の操作が可能です。

 

Shapesから素材を使用する

左の「Shapes」メニューからドラッグ＆ドロップで各種素材を画面内に追加することができます。

各素材はドラッグで拡大・縮小・移動が可能です。

文字アイコンを選択すると画面上にテキストを入力することができます。

右に表示される青いオプションメニューからはフォントの種類や大きさを変更したり、背景の色を設定したりすることができます。

 

画像を使用する

画面内には自分で用意した画像を挿入することもできます。
デスクトップ等から画像ファイルを直接ドラッグ＆ドロップします。

追加した画像も他の素材同様に大きさを調整したり、移動したりすることができます。

また、画像のアスペクト比を維持せずにサイズを変更したい場合はオプションメニューから以下のチェックを外します。(逆に維持したい場合はチェックを入れた状態にします)

 

メニューのカスタマイズ方法

Shapesメニューのこの部分をドラッグするとシェイプの種類の順番を並び替えることができます。よく使うものを上に持ってきておくと便利です。

右の×をクリックすると、その種類のシェイプをメニューから削除することができます。

削除したシェイプを元に戻したり、他の種類を使用したい時はShapesメニュー下の「More Shapes」をクリックし、使いたいジャンルにチェックを入れます。

 

保存とエクスポート

作業中の状態を保存する場合は右上の「Save」ボタンをクリックし、名前を付けて保存します。

また、「File」→「Export」からPNG等の形式でファイルの書き出しを行うことができます。(無料版ではGliffyの形式でのみエクスポートが可能です)

 

以上、gliffyの使い方について説明しました。

特に難しいことはありませんが、機能が多いので慣れるまで難しく感じるかもしれません。ぜひ参考にしてみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。