icon
icon

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

初心者向けにデザインツールgliffyの使い方を解説。オンライン上で作図ができるツールとして使われていますが、フローチャートやインフォグラフィックなども作成することが可能です。実際に作成しながら説明していきます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

 

gliffyとは

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

 

gliffyの使い方

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

https://www.gliffy.com/

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

gliff_p_1

 

[PR] Webデザインで副業する方法とは

gliffyで何か作ってみる

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

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

gliff_p_2

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

gliff_p_3r

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

gliff_p_4r

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

gliff_p_5r

gliff_p_6

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

gliff_p_7

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

gliff_p_8

 

Shapesから素材を使用する

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

gliff_p_9

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

gliff_p_10

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

gliff_p_11

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

gliff_p_12

 

画像を使用する

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

gliff_p_13

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

gliff_p_14

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

gliff_p_15

 

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

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

gliff_p_16

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

gliff_p_17

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

gliff_p_18

 

保存とエクスポート

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

gliff_p_19

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

gliff_p_20

 

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

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

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