この記事の概要
画面遷移図の作成にFigmaが便利です。
プラグインを導入することでさらに便利に。
痒いところに手が届きます。
実際に作成したものがこちらです↓
目次
Figmaとは？
Figmaはオンライン上で使えるデザインツールサービスです。
アカウント作成をすれば誰でも無料で利用できます。
自分はGoogleアカウントでログインしました。
基本英語ですが日本語化するアドオンがGoogleChromeにあります。
- [Figma 日本語化]
(https://chrome.google.com/webstore/detail/figma-%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96/ekodckpnalonppfcddgnkoapajahbahc?hl=ja)
使い方はこちらを参考にしました。
基本的に図形作成時はPowerPointの使い方とほぼ変わらないです。
しかし、図形とアイコンと文字がゴチャゴチャした際に管理する仕組みがとても素晴らしかったです。
具体的に私はグループ化と要素のドラッグで整理を行っただけですが、
上の画像左側のようにリネームすることでそれなりにまとまって見やすくなりました。
また、要素をまとめて移動したい時は、
1.左側でグループ化を何かひとつの要素に行う
2.そのグループにまとめて動かしたい要素を全部入れる
3.真ん中の画面でそのグループを選択してドラッグ
これだけです。グループの中にさらにグループがあるという多重構造も可能。
フォルダ階層そのものなのでとても分かりやすいですね。
使用したプラグイン
プラグインは右クリックまたは左上の ”三” と書かれたメニューバーから開けます。
Googleアドオンのように下記リンク先からインストール後、使用できます。
Iconify
アイコンを挿入できます。
検索から使いたいアイコンについてそうな英単語を入れると複数表示されます。
私はそこから色を選択しただけです。大きさは他の図形と同じく後から調整できます。
Unsplash
いい感じの写真を挿入できます。
公式サイトにプロの写真を無料で自由に利用できると書かれています。
安心ですね。
使い方は挿入したい図形を選択しつつUnsplash起動、あとはIconifyと同じです。
Autoflow
画面遷移図に必要な矢印を引くことができます。
Autoflow起動後、
1.真ん中の画面で線を引き始めたいフレームを押す
2.shifrキーを押しながら線を引き終わるフレームをクリック
これだけです。
フレームを動かしても矢印がついてくるので余計な引き直しが必要なく、
PowerPointより圧倒的に使いやすいです。