FigmaはWebサイトだけではなく、スマートフォンアプリや業務システムなどの画面設計にも使えます。
さらに、FigJamを使えば、アイデアを出したり、情報を整理したり、フローを図にしたりすることもできます。
つまりFigmaは、単純に「絵を描く場所」というより、
頭の中にあるものを、画面上に整理していく場所
と考えたほうが分かりやすそうです。
実際にFigmaを触ってて最初に気になるのが、
「この画面に置いたものって、どこに配置（保存）されているのか？」
という疑問です。
Figmaには、作ったものを整理するために、
・Canvas
・Page
・Section
という考え方があります。
この3つを理解しておくと、Figmaの画面がかなり分かりやすくなるので、今回はこれらの解説をしてみたいと思います。
Campas
Figmaを開いてファイルを作ると、
広い何もない空間が表示されます。
これが
Canvasです。
イメージとしては、巨大なホワイトボードや机のようなものです。
その上に、いろいろなものを自由に配置していきます。
例えば、
Webサイトの画面
スマートフォンの画面
ボタン
画像
メモ
図形
などを置くことができます。
Webページを作る場合なら、Canvasの上に
PC用の画面や
スマートフォン用の画面を並べていく、といった使い方ができます。
ここで面白いのは、Canvasには「画面の端」があり、実際にはかなり自由に広げて使えることです。
紙に例えるなら、
「A4の紙にデザインする」
というより、
「巨大な机の上に、必要なものをどんどん並べていく」
という感覚に近いでしょう。
Canvas操作
新しいデザインファイルを作り、何もないCanvasを表示してください。
Figmaのファイル一覧のページの上部メニューの「Design」ボタンをクリック
Canvasが表示されます。
そして、適当にいくつかの図形を置いてみます。
画面下部にある、ツールバーで図形を選択できます。
四角形を3個
円を2個
テキストを1個
このくらいで十分です。
きれいに並べる必要はありません。
むしろ、適当にバラバラに置いてみたほうが分かりやすいです。
「このCanvasの上に、いろいろなものを自由に置ける」
という感覚をつかむことが目的です。
この段階では、まだWebサイトを完成させる必要はありません。
Canvasとおいう概念が理解できるだけでいいです。
Page
Figmaでは、1つのファイルの中に複数の
Pageを作ることができます。
これは、Web制作で考えると比較的イメージしやすいかもしれません。
例えば、1つのWebサイトを作るとします。
Webサイト
├─ トップページ
├─ 会社概要
├─ サービス
├─ お問い合わせ
└─ プライバシーポリシー
これらを全部1枚のCanvasに置いても構いません。
しかし、ページ数が増えてくると、だんだん整理しづらくなります。
そこでPageを分けて整理することができます。。
例えば、
Page
├─ Webサイト
├─ スマートフォン
└─ プロトタイプ
のように、目的ごとに
Canvasを分けることができます。
つまり、
Canvasが「作業する広い場所」なら、
Pageは「作業場所を分ける単位」と考えると分かりやすいでしょう。
Page操作
Figmaの左側にあるPageの部分を確認してみます。
Pageの横にある「+ボタン」を押して、「新しいPage」を追加してみましょう。
先程Canvasで作った、画像やテキストをそれぞれ、別のページに配置してみましょう。
（コピペで簡単に移動できます）
Page 1には四角形
Page 2には円
Page 3にはテキスト
Pageを切り替えてみると、
「同じFigmaファイルの中なのに、別の作業場所になっている」
ことが分かります。
Figmaでは、ファイルをたくさん作って管理するだけではなく、
1つのファイルの中でも
Pageを使って情報を整理できるという事です。
Section
Sectionは、
Canvas上にある複数の要素を、
ひとまとまりとして整理するためのものです。
例えば、1つのCanvasの中に、
- トップページ
- 会社概要
- サービス紹介
- お問い合わせ
という4つの要素を並べているとします。
このままでも作業できます。
でも、これらを、それぞれの要素で、ひとまとまりとして（グループ分けして）扱いたい場合があります。
そういう場合に、
Sectionを使います。
イメージとしては、
Canvasの上に「ここからここまでが、このグループですよ」と領域を作る、ようなものです。
Sectionn操作
下部のツールバーから「Section（セクション）」を選択します。
画面にドラッグで要素を囲うと、左のインジケータリストで階層として取り込まれたのが確認できます。
Sectionにタイトルをつけて管理するとわかりやすくなります。
Sectionは複数登録して管理できますが、Sectionの中にSectionを作ることもできるので、階層を確認しながら管理しましょう。
Sectionで管理しておくと、並びの順番を入れ替えるのも一瞬でできるので、管理する上で使わない手はないですね。
構造管理の概念
Canvas , Page , Section が理解できたら、これらを用いて、どういう風にデザインを構築するかを設計してみましょう。
ホームページを作る場合は、
PCページ、スマホページをページで分けて管理して、
それぞれの、内容をSectionで管理する・・・
そうすることで、デザイン管理も整理しやすくなるはずです。
あとがき
デザインするというのは、絵を描くことや、色を塗ることではありません。
情報をいかに整理するかという事も、デザインの作業です。
今回は、基本の３つの改装としてのCanvas,Page,Sectionを学習してみました。
これだけ知っているだけでも、Figmaを使い始める事はできますが、まだまだ知っておけば便利な機能はたくさんあるので、
次回移行テクニックも含めて学習を進めていきたいと思います。
0 件のコメント:
コメントを投稿