![](https://soft-no-sosa.com/wp/wp-content/uploads/2023/01/artboard_logo.png)
Figmaを使ってみようーワイヤフレーム作成ー
![デザインツールFigmaを使ってみよう ワイヤーフレーム作成](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/a565eff4102f6da9c0f7d78f676f13a8.png)
Figmaとは?
Figmaはフリーのデザインツールです。
WEB上・デスクトップ上どちらでも使用可能で、作成したデータをhtml・cssに書き出すこともできます。
また、作成したデータを複数人で共有・編集もできます。
データにコメントを残すこともできるのでコミュニケーションツールとしても活用できます。
デザイナーだけでなくディレクター・コーダー・プログラマーの方などと共有しながらスムーズに仕事が進められる可能性があります。
最近はFigmaをメインで作業するデザイナーさんもいらっしゃいます。
FigmaがあればWEB作成が捗りそうですね。
ダウンロード
https://www.figma.com/downloads/
ワイヤーフレームを作ってみよう
実際にFigmaでワイヤーフレームを作りながら使い方を紹介してみようと思います。
今回はWEB上で作っていきますのでFigmaに登録しましょう。
※DL・登録方法については割愛させて頂きます。
日本語化しよう
Figmaは残念ながらまだ日本語サポートされていません。
ですが、メニューの表記を日本語化してくれるChrome拡張機能があるのでこちらを導入しましょう。
新規ドキュメントを作成
①figma.com/にアクセス
https://www.figma.com/にアクセスしましょう。
②丸いアイコンをクリック
アクセスしたら丸いアイコンをクリックしましょう。
![Figmaワイヤーフレーム作成1](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/1-1.png)
③デザインファイルを作成
マイページに入ったので「New design file」をクリックします。
![Figmaワイヤーフレーム作成2](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/2.png)
④フレームサイズの指定
「フレーム」をクリックすると右にフレームの一覧が出るので作りたいサイズのフレームを選びます。
![Figmaワイヤーフレーム作成3](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/3.png)
オブジェクトを作成
①シェイプツールで長方形を選択
「シェイプツール」から「長方形」を選択します。
![Figmaワイヤーフレーム作成4](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/4-2.jpg)
②サイズの指定
ドラッグしてオブジェクトを作ります。ドラッグ時にサイズが表記されるので任意のサイズになったらマウスを離します。
![Figmaワイヤーフレーム作成5](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/5-2.jpg)
色の変更
①色を変えたいオブジェクトを選択
移動ツール(ショートカット:V)で色を変更したいオブジェクトを選択
![Figmaワイヤーフレーム作成6](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/6-1.jpg)
②色を選択
右側の「塗り」から現在の色のアイコンをクリック、カラーピッカーが表示されるので任意の色を選択する。
![Figmaワイヤーフレーム作成7](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/7.png)
均等配置
①シェイプツールから直線を作成
ハンバーガーメニューのアイコンを作りたいので「シェイプツール」から「直線」を選択し作成します。
![Figmaワイヤーフレーム作成8](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/8-2.jpg)
②直線をコピー
作成した線を「option」キー押しながらドラッグして複製を作成。これを2回行う。
![Figmaワイヤーフレーム作成9](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/9-2.jpg)
③直線を均等配置
全ての線を選択し、マウスカーソルを選択したものの中央に置くと「三本線」のアイコンが表示されます。
そのアイコンをクリックすると均等配置されます。
![Figmaワイヤーフレーム作成10](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/10-2.jpg)
変形
ハンバーガーメニューのサイズ調整
先程のハンバーガーメニュー用の線を選択、縦幅を横幅と同じサイズにしたいので同じサイズになるまで上から下にドラッグします。
![Figmaワイヤーフレーム作成11](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/11.png)
グループ化
ハンバーガーメニューのグループ化
先程のハンバーガーメニュー用の線をすべて選択、右クリックして「グループ化」を選びます。
ショートカットは「command+G」です。
![Figmaワイヤーフレーム作成12](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/12-2.jpg)
整列
①整列させるオブシェクトの配置
先程のハンバーガーメニュー用の線の色を白にして、「オブジェクトを作成」の際に作った長方形の上に持ってきます。
![Figmaワイヤーフレーム作成13](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/13-3.jpg)
②配置したオブシェクトを整列
ドラッグしてハンバーガーメニューと長方形の2つを選択します。
長方形に対してハンバーガメニューを縦中央に配置したいので、右側の「Aligin vertical center」のアイコンをクリックします。
![Figmaワイヤーフレーム作成14](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/14.png)
※オブジェクトを1つしか選んでない場合はフレームに対して整列されます。
文字の作成
①文字ツールを選択
左上の「T」アイコンをクリックします。(ショートカットT)
![Figmaワイヤーフレーム作成15](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/15-2.jpg)
②文字を入力
文字を打ちたい場所にクリックするとカーソルが出るので文字を打ちます。
![Figmaワイヤーフレーム作成16](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/16-2.jpg)
文字サイズの変更
変更したい文字を選択し、右側の「テキスト」の数値を入力もしくは「∨」をクリックすると数値一覧が出るのでそこから選びます。
![Figmaワイヤーフレーム作成17_1](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/17_1.jpg)
![Figmaワイヤーフレーム作成17_2](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/17_2.jpg)
フォントの変更
①プラグインの導入
右側の「テキスト」からも変更できるのですがサンプルが出なくて不便なので、プラグインを導入してサンプルが見れるようにします。
「Font Viewer」を導入しますので下記のリンクに飛びます。
https://www.figma.com/community/plugin/1027863721483813752/Font-Viewer
②プラグインのインストール
リンクに飛んだら「Install」ボタンをクリックするだけで導入は完了です。
③プラグインから「Font Viewer」を選択
フォントを変えたい文字を選択し、右クリックでメニューを表示「プラグイン」から先程追加した「Font Viewer」を選びます。
![Figmaワイヤーフレーム作成18](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/18-2.jpg)
プラグインはFigmaアイコンの「Main menue」からも開けます。
④フォントの選択
「Font Viewer」が起動されフォントのサンプルが見れるようになりますので好きなフォントを選びましょう。
「Type to preview」に文字を打つとサンプルもその文字に変わります。
![Figmaワイヤーフレーム作成19](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/19-2.jpg)
いろんなフォントを使いたい
①Google fontにアクセス
Figmaは「Google font」が使えるのでデフォルト以外のフォントを使いたい場合は「Google font」から探します。
Google font:https://fonts.google.com/
②使いたいフォントのコピー
使いたいフォント名をコピーします。
![Figmaワイヤーフレーム作成20](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/20-2.jpg)
③フォントの適応
フォントを変えたい文字を選択し、「テキスト」のフォント名に先程コピーしたフォント名を貼り付けると変更されます。
![Figmaワイヤーフレーム作成21](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/21-1.png)
※PCに入っているフォントを使いたい場合がデスクトップ版を使用してください。
ガイドを作成
①ガイドを配置
Shift+Rで定規を表示させ、定規の上からドラッグするとガイドが現れます。
後は任意の場所に置きましょう。
![Figmaワイヤーフレーム作成22](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/22.png)
②ガイドの削除
ガイドを削除したい場合はガイドをクリック(ガイドが青くなる)し「delete」キーを押します。
![Figmaワイヤーフレーム作成23](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/23.png)
ここまでの作業でヘッダー部分が完成しました。
後は今までの作業を応用してメインコンテンツとフッターを作っていきます。
![Figmaワイヤーフレーム作成24](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/24-2.jpg)
フレームのサイズ変更
メインコンテンツを作っていたらフレームの縦幅が足りなくなったので伸ばします。
①レイヤー内のフレームを選択します。
※フレームのレイヤーには「#」のようなアイコンが付いています。
![Figmaワイヤーフレーム作成25](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/25.png)
②フレームの端にマースカーソルを合わせると矢印が出ます。
矢印が出たらフレームのサイズが変更できるので、今回は縦幅を伸ばすので下にドラッグします。
後は任意の位置で止めてください。
![Figmaワイヤーフレーム作成26](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/26-1.png)
アイコンの配置
フッターを作っていたらSNSのアイコンを使いたくなりました。
「画像を配置」からもできますが素材を探すのが手間なのでプラグインを導入します。
①「Iconify」を導入しますので下記のリンクに飛び「Install」ボタンを押します。
https://www.figma.com/community/plugin/735098390272716381/Iconify
②右クリックでメニューを表示、「プラグイン」から「Iconify」を選びます。
![Figmaワイヤーフレーム作成27](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/27-1.jpg)
③「Iconify」が起動したら「Search all icon」にキーワードを入力します。
入力すると下にキーワードに合ったアイコンが検索されますので好きなものを選んでクリックします。
![Figmaワイヤーフレーム作成28](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/28.png)
④下に詳細が出るので、カラーやサイズを入力したら「import icon」をクリックするとアイコンが配置されます。
「import icon」をクリックしたら「Iconify」は閉じてください。
![Figmaワイヤーフレーム作成29](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/29.png)
⑤配置された後もサイズや色は変更できるので微調整してください。
![Figmaワイヤーフレーム作成30](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/30-1.jpg)
フッター部分が完成しました。
![Figmaワイヤーフレーム作成31](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/31-1.jpg)
アンカーリンクの設定
Figmaはアンカーリンクの設定ができます。
①まず右端を「プロトタイプ」に切り替えます。
![Figmaワイヤーフレーム作成32](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/c5436626bef371622745418baf048903.png)
②リンクを付けたいオブジェクトをクリックすると端に「○」が表示されます
![Figmaワイヤーフレーム作成33](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/791520961c1409c76fb06d40d29feadf.png)
③先程表示された「○」をドラッグしてリンク先にしたいフレームや場所まで矢印をつなげます。
![Figmaワイヤーフレーム作成34](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/79f6bd0b4f478c57bd06df6c1383686c.jpg)
④右端に「インタラクションの詳細」が表示されるので設定します。
「on tap」になっていればボタンをタップしたときにリンク先に移動します。
![Figmaワイヤーフレーム作成35](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/cba2de35b9491a678b469c0cb49e97a2.jpg)
⑤きちんとリンクが動くか確認します。
フレームの左横に「Flow1 ▷」が表示されるのでクリックします。
![Figmaワイヤーフレーム作成36](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/d860e2fa95d40442cbbe6f3adfb1f7b6.png)
⑥クリックすると実際のスマホに表示されたような画面が出ます。
本物サイトのように動くのでリンクボタンを押して確認します。
![Figmaワイヤーフレーム作成37](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/2dd3e3c510f2182c91835cf846e1500f.gif)
完成
これでワイヤーフレームが完成しました。
![Figmaワイヤーフレーム完成](https://soft-no-sosa.com/wp/wp-content/uploads/2022/01/4021cad7afa992ae7afb53ac15a91aeb.png)
まとめ
今回使用したプラグインなど
Figma 日本語化
ワークスペースを日本語化するChrome拡張機能です。
導入はこちら
Font Viewer
フォントの見た目のサンプルを見ながら選べるプラグインです。
導入はこちら
Iconify
多数のアイコンを使用できるプラグインです。
導入はこちら
感想
今回始めて使用してみて使いにくいと感じるところはありませんでした。
操作性やショートカットキーもIllustratorとほとんど同じなので、Illustratorを普段使用される方は違和感なく使えると思います。
多種多様なプラグインがあり導入次第ではもっと使いやすい環境が作れそうです。
とても好印象なツールなので日本語サポートが待ち遠しいです。