はじめに

アプリ開発を進める上で、画面遷移図まとめるの悩みますよね。

本記事では、デザインツール「Figma」を使って画面遷移図を作成する方法について解説します。アプリを作りたいけれど、画面遷移図の作り方や適切なツールに悩んでいる方に向けてまとめました。
数多くのデザインツールがありますが、「Figma」を使えば一通りの作業を問題なく進められるでしょう。

この記事が皆さんのお役に立てば嬉しいです。

基本のやり方

まずはFigmaに登録して、プロジェクトを開きましょう。

1.アートボード

「アートボード」は、デザインやページ画面を作成するためのフレームで、土台となるものです。

この上に、要素を作っていきます。

やり方は、キーボードの「A」を押してドラッグで範囲を決めて配置します。今回はPC用なので、横幅を「1280px」とします。

レスポンシブを想定した幅のため、必要に応じて変更してください。(スマホなら375〜400px等)

横幅は、右のメニューから変更することもできます。

2.インナー

インナーはコンテンツが表示される領域の幅のことです。

インナーの有無の違いは、横幅MAXまでコンテンツを見せるか、一定の余白をとってコンテンツをキレイに見せるかということです。

今回は、余白「40px」分を取って、「1200px」のインナーにします。
インナーは、キーボードの「R」を押して、アートボードと同様にフレーム上に配置します。

高さをアートボードと同様にして、中央に揃えます。(右メニューから中央に配置も可能)

その後、右メニューの塗りの「-」を押して透明にし、線を「+」にします。

さらに、インナーを余計に動かしたり消したりできないように左メニューで鍵をつけます。

これで準備は整いました。

3.どんどん作っていく

あとは好きなように、作っていきましょう。参考程度に作ってみます。

ヘッダー

1.「R」を押して、横幅をフレームに合わせて、高さを80pxくらいにする。背景色もつけます。

2.その上に、「T」を押して、ロゴやナビメニューを作成していく。下記はテキスト設定の一例です。

フォントサイズ上げる「command+shift+.(ドット)」
太字「command+B」
テキストカラーを変更
あとは、矢印キーで位置を調整(option⌥を押しながらやるとpxが見えるのでやりやすいです)

3.「shift」を押しながら、作成したものをクリックして、「command + G」を押してグループ化(任意)。グループ化するとヘッダー要素をまとめて動かすことができます。

4.インナーが隠れてしまうので、左メニューから前面に持ってくるようにします。(もしくは「command + ]」を何度か押す)

フッター

ヘッダーと作り方は同じです。

1.「R」を押して、横幅をフレームに合わせて、高さを150pxくらいにする。(シンプルに作るなら80pxでも良いかも)

2.その上に、「T」を押して、ロゴやフッターメニュー、コピーライトを作成していく。

3.「shift」を押しながら、作成したものをクリックして、「コマンド + G」を押してグループ化する。

作成したものがこちら

Xやfacebook、instagramアイコンを導入する方法ですが、
Figmaのプラグインで「iconify」を使うとできます。

プラグインやり方

上部メニュー「T」の右隣をクリック　→　「プラグイン」選択　→　検索

Iconfyをクリックするとさらにアイコンが検索できるので、「X」にしてみます。
お好みのものを選択します。

カラー(color)やheight(高さ)を指定してimportします。

後から変更も可能です。

コンテンツ

基本的な作り方は一緒ですので詳しい説明は省きます。最終的にこんな感じのを作ってみました。

やり方はヘッダーフッターとほぼ変わらないので、下記に必要そうなところだけまとめております。

Figmaに画像を取り入れる

やり方は、「ドラグ&ドロップ」でいけます。

ボタンの作成

四角を用意して、幅と高さ、角丸、背景色を調整します。

テキストを載せて位置を調整してグループ化して完了です。

こんな感じで、他のページも作っていきましょう。

新規登録ページ
ログインページ
投稿一覧ページ
投稿詳細ページ
などなど

画像は、「Adove Stock」と「PhotoAC」で探しました。

仕様書(コーディングルール)

ルールをまとめた仕様書も作っておく規則性があって良いかも知れません。

仕様書はこんな感じです。

書くべきこととしては

カラー(フォント、背景色等)
フォントサイズ、フォントファミリー
コンポーネント(ボタン、パーツ)
幅や高さ
その他注意点

などです。

「Web制作コーディングルール」などと検索すると必要な内容が出てきますので、参考にしながら作ると良いかも知れません。

こちらのように作成すると良いかもしれません。

4.画面遷移図

Autoflowで矢印を書く

プラグインから「Autoflow」を開きます。

アートボードクリックして、「shift」を押しながら他のアードボードをクリックすると簡単に矢印が引けます。

※Flowsは無料で使えますが、Shapesを使うには有料になります。ただ、矢印が引ければ十分という方であれば課金する必要はないかと思われます。

同様に他のページも繋いで画面遷移図を作っていきましょう。

便利キー

ショートカットキー	説明
T	テキスト
A	アートボード
R	四角形
L	線
option(⌥)	他要素との間隔(px単位)がみれる
コマンド(⌘)+G	グループ化
コマンド(⌘)+shift+G	グループ化解除
コマンド(⌘)+B	太字
コマンド(⌘)+D	複製
コマンド(⌘)+shift+.(ドット)	フォントサイズアップ
コマンド(⌘)+shift+,(カンマ)	フォントサイズダウン
↑↓←→(矢印キー)	1pxずつ要素移動
↑↓←→(矢印キー)+shift	10pxずつ要素移動

参考

おわりに

この記事は当初、自己満足で終わる予定だったのですが、多くの方から「もっと早く見たかった」「助かった」といった声をいただき、とても嬉しく思っています。この記事を通じて何か気づいたことや質問などがありましたら、ぜひ教えてください。

画面遷移図をしっかり作成して、開発をさらに頑張りましょう！