Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

デザインツールFigmaを使ってみよう ワイヤーフレーム作成

Others

Figmaを使ってみようーワイヤフレーム作成ー

使用ソフト: Figma  

Figmaとは?

Figmaはフリーのデザインツールです。
WEB上・デスクトップ上どちらでも使用可能で、作成したデータをhtml・cssに書き出すこともできます。
また、作成したデータを複数人で共有・編集もできます。
データにコメントを残すこともできるのでコミュニケーションツールとしても活用できます。
デザイナーだけでなくディレクター・コーダー・プログラマーの方などと共有しながらスムーズに仕事が進められる可能性があります。

最近はFigmaをメインで作業するデザイナーさんもいらっしゃいます。
FigmaがあればWEB作成が捗りそうですね。

登録
https://www.figma.com/

ダウンロード
https://www.figma.com/downloads/

ワイヤーフレームを作ってみよう

実際にFigmaでワイヤーフレームを作りながら使い方を紹介してみようと思います。
今回はWEB上で作っていきますのでFigmaに登録しましょう。
※DL・登録方法については割愛させて頂きます。

日本語化しよう

Figmaは残念ながらまだ日本語サポートされていません。
ですが、メニューの表記を日本語化してくれるChrome拡張機能があるのでこちらを導入しましょう。

導入はこちら
https://chrome.google.com/webstore/detail/figma-%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%8C%96/ekodckpnalonppfcddgnkoapajahbahc?hl=ja

新規ドキュメントを作成

https://www.figma.com/にアクセスしましょう。

②アクセスしたら丸いアイコンをクリックしましょう。
Figmaワイヤーフレーム作成1

③マイページに入ったので「New design file」をクリックします。
Figmaワイヤーフレーム作成2

④「フレーム」をクリックすると右にフレームの一覧が出るので作りたいサイズのフレームを選びます。
Figmaワイヤーフレーム作成3

オブジェクトを作成

①「シェイプツール」から「長方形」を選択します。
Figmaワイヤーフレーム作成4

②ドラッグしてオブジェクトを作ります。ドラッグ時にサイズが表記されるので任意のサイズになったらマウスを離します。
Figmaワイヤーフレーム作成5

色の変更

①移動ツール(ショートカット:V)で色を変更したいオブジェクトを選択
Figmaワイヤーフレーム作成6

②右側の「塗り」から現在の色のアイコンをクリック、カラーピッカーが表示されるので任意の色を選択する。
Figmaワイヤーフレーム作成7

均等配置

①ハンバーガーメニューのアイコンを作りたいので「シェイプツール」から「直線」を選択し作成します。
Figmaワイヤーフレーム作成8

②作成した線を「option」キー押しながらドラッグして複製を作成。これを2回行う。
Figmaワイヤーフレーム作成9

③全ての線を選択し、マウスカーソルを選択したものの中央に置くと「三本線」のアイコンが表示されます。
そのアイコンをクリックすると均等配置されます。
Figmaワイヤーフレーム作成10

変形

①先程のハンバーガーメニュー用の線を選択、縦幅を横幅と同じサイズにしたいので同じサイズになるまで上から下にドラッグします。
Figmaワイヤーフレーム作成11

グループ化

①先程のハンバーガーメニュー用の線をすべて選択、右クリックして「グループ化」を選びます。
ショートカットは「command+G」です。
Figmaワイヤーフレーム作成12

整列

①先程のハンバーガーメニュー用の線の色を白にして、「オブジェクトを作成」の際に作った長方形の上に持ってきます。
Figmaワイヤーフレーム作成13

②ドラッグしてハンバーガーメニューと長方形の2つを選択します。
長方形に対してハンバーガメニューを縦中央に配置したいので、右側の「Aligin vertical center」のアイコンをクリックします。
Figmaワイヤーフレーム作成14

※オブジェクトを1つしか選んでない場合はフレームに対して整列されます。

文字の作成

①左上の「T」アイコンをクリックします。(ショートカットT)
Figmaワイヤーフレーム作成15

②文字を打ちたい場所にクリックするとカーソルが出るので文字を打ちます。
Figmaワイヤーフレーム作成16

文字サイズの変更

①変更したい文字を選択し、右側の「テキスト」の数値を入力もしくは「∨」をクリックすると数値一覧が出るのでそこから選びます。
Figmaワイヤーフレーム作成17_1

Figmaワイヤーフレーム作成17_2

フォントの変更

①右側の「テキスト」からも変更できるのですがサンプルが出なくて不便なので、プラグインを導入してサンプルが見れるようにします。
「Font Viewer」を導入しますので下記のリンクに飛びます。
https://www.figma.com/community/plugin/1027863721483813752/Font-Viewer

②リンクに飛んだら「Install」ボタンをクリックするだけで導入は完了です。

③フォントを変えたい文字を選択し、右クリックでメニューを表示「プラグイン」から先程追加した「Font Viewer」を選びます。
Figmaワイヤーフレーム作成18

プラグインはFigmaアイコンの「Main menue」からも開けます。

④「Font Viewer」が起動されフォントのサンプルが見れるようになりますので好きなフォントを選びましょう。
「Type to preview」に文字を打つとサンプルもその文字に変わります。
Figmaワイヤーフレーム作成19

いろんなフォントを使いたい

①Figmaは「Google font」が使えるのでデフォルト以外のフォントを使いたい場合は「Google font」から探します。
Google font:https://fonts.google.com/

②使いたいフォント名をコピーします。
Figmaワイヤーフレーム作成20

③フォントを変えたい文字を選択し、「テキスト」のフォント名に先程コピーしたフォント名を貼り付けると変更されます。
Figmaワイヤーフレーム作成21

※PCに入っているフォントを使いたい場合がデスクトップ版を使用してください。

ガイドを作成

①Shift+Rで定規を表示させ、定規の上からドラッグするとガイドが現れます。
後は任意の場所に置きましょう。
Figmaワイヤーフレーム作成22

②ガイドを削除したい場合はガイドをクリック(ガイドが青くなる)し「delete」キーを押します。
Figmaワイヤーフレーム作成23

ここまでの作業でヘッダー部分が完成しました。
後は今までの作業を応用してメインコンテンツとフッターを作っていきます。
Figmaワイヤーフレーム作成24

フレームのサイズ変更

メインコンテンツを作っていたらフレームの縦幅が足りなくなったので伸ばします。
①レイヤー内のフレームを選択します。
※フレームのレイヤーには「#」のようなアイコンが付いています。
Figmaワイヤーフレーム作成25

②フレームの端にマースカーソルを合わせると矢印が出ます。
矢印が出たらフレームのサイズが変更できるので、今回は縦幅を伸ばすので下にドラッグします。
後は任意の位置で止めてください。
Figmaワイヤーフレーム作成26

アイコンの配置

フッターを作っていたらSNSのアイコンを使いたくなりました。
「画像を配置」からもできますが素材を探すのが手間なのでプラグインを導入します。
①「Iconify」を導入しますので下記のリンクに飛び「Install」ボタンを押します。
https://www.figma.com/community/plugin/735098390272716381/Iconify

②右クリックでメニューを表示、「プラグイン」から「Iconify」を選びます。
Figmaワイヤーフレーム作成27

③「Iconify」が起動したら「Search all icon」にキーワードを入力します。
入力すると下にキーワードに合ったアイコンが検索されますので好きなものを選んでクリックします。
Figmaワイヤーフレーム作成28

④下に詳細が出るので、カラーやサイズを入力したら「import icon」をクリックするとアイコンが配置されます。
「import icon」をクリックしたら「Iconify」は閉じてください。
Figmaワイヤーフレーム作成29

⑤配置された後もサイズや色は変更できるので微調整してください。
Figmaワイヤーフレーム作成30

フッター部分が完成しました。
Figmaワイヤーフレーム作成31

アンカーリンクの設定

Figmaはアンカーリンクの設定ができます。
①まず右端を「プロトタイプ」に切り替えます。
Figmaワイヤーフレーム作成32

②リンクを付けたいオブジェクトをクリックすると端に「○」が表示されます
Figmaワイヤーフレーム作成33

③先程表示された「○」をドラッグしてリンク先にしたいフレームや場所まで矢印をつなげます。
Figmaワイヤーフレーム作成34

④右端に「インタラクションの詳細」が表示されるので設定します。
「on tap」になっていればボタンをタップしたときにリンク先に移動します。
Figmaワイヤーフレーム作成35

⑤きちんとリンクが動くか確認します。
フレームの左横に「Flow1 ▷」が表示されるのでクリックします。
Figmaワイヤーフレーム作成36

⑥クリックすると実際のスマホに表示されたような画面が出ます。
本物サイトのように動くのでリンクボタンを押して確認します。
Figmaワイヤーフレーム作成37

完成

これでワイヤーフレームが完成しました。
Figmaワイヤーフレーム完成

まとめ

今回使用したプラグインなど

Figma 日本語化

ワークスペースを日本語化するChrome拡張機能です。
導入はこちら

Font Viewer

フォントの見た目のサンプルを見ながら選べるプラグインです。
導入はこちら

Iconify

多数のアイコンを使用できるプラグインです。
導入はこちら

感想

今回始めて使用してみて使いにくいと感じるところはありませんでした。
操作性やショートカットキーもIllustratorとほとんど同じなので、Illustratorを普段使用される方は違和感なく使えると思います。
多種多様なプラグインがあり導入次第ではもっと使いやすい環境が作れそうです。
とても好印象なツールなので日本語サポートが待ち遠しいです。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. 華やかなサンプル

    Others

    ヴィンテージなデザインが簡単に作れるツール

    ヴィンテージなデザインが簡単に作れるWebツール「Heritage D…

  2. Illustrator

    Illustratorで集中線を作ろう

    今回は漫画や写真のフレームとして使える集中線の作り方をご紹介します。…

  3. ART

    木でQRコードをつくった!

    木片を見て、ふと思った。「木の面の陰影で何かできないか…」…

  4. Others

    レタッチとは?その意味と役割、使用するソフトとレタッチを行う為の3つのポイントについて

    このページでは、「レタッチ」という画像編集ソフトを使用した画像調整…

  5. 左右で画面の明るさを分けたハンバーガー

    Others

    適正露出の写真を撮る・前編(絞り、シャッタースピード、ISO感度の関係)

    露出とは何でしょう?スマホで写真を撮ったり、一眼レフやミラーレスカ…

  6. フラットデザインが簡単に作れるフリー素材イラストサイト3選

    Others

    フラットデザインが簡単に作れるフリー素材イラストサイト3選

    webサイトで良く見かけるフラットデザイン最近のwebサイトで良く…

人気の記事

おすすめの参考書

PAGE TOP