これまでの学習では、
Figmaを使って画面を作成し、
コンポーネントや変数を管理し、
Prototypeで操作やアニメーションを設定する方法
を学んできました。
しかし、実際の制作では、
いきなり画面をデザインし始めるとは限りません。
何を作るべきかを考えたり、
情報を整理したり、
複数のアイデアを比較したり、
チームで認識を合わせたりする工程も必要です。
こうした作業に役立つのが、
FigJam（フィグジャム） です。
FigJamは、アイデアや情報を自由に配置し、図や付箋などを使って整理できるオンラインのホワイトボードツールです。
Figmaと連携して使えますが、主な目的はUIを細かくデザインすることではなく、
考えや情報を整理し、共有することです。
今回は、FigJamの基本操作を覚えながら、Webサイト制作の
アイデアを整理するボードを作ってみましょう。
FigJamとは
FigJamは、自由なキャンバス上に情報を配置して、考えを整理したり、他の人と共有するためのツールです。
よくあるホワイトボードに、付箋、図形、矢印、テキストなどを
自由に配置できるイメージです。
例えば、次のような用途があります。
- ブレインストーミング
- マインドマップ
- 会議の議事録や論点整理
- Webサイトの構成検討
- ユーザーの行動フローの整理
- タスクの洗い出し
- チームでのアイデア共有
Figmaのデザインファイルでは、Frameやレイヤーを使って画面の構造を設計します。
一方、FigJamでは、情報を自由に置きながら、
考えを整理していく作業が中心になります。
FigmaとFigJamの違い
| 比較項目 | Figma Design | FigJam |
|---|
| 主な目的 | UIや画面のデザイン | アイデアや情報の整理 |
| 基本的な作業 | Frame、レイヤー、コンポーネントの作成 | 付箋、図形、矢印、テキストの配置 |
| 得意なこと | 画面設計、デザインシステム、プロトタイプ | ブレインストーミング、議論、フロー整理 |
| 成果物の例 | Web画面、アプリ画面、UI部品 | マインドマップ、業務フロー、構成案 |
どちらか一方だけを使うのではなく、
目的に応じて使い分けることが大切です。
例えば、FigJamでサイトの構成や必要な機能を整理し、
その結果をもとにFigma Designで画面を作る、という流れが考えられます。
FigJamを開く
手順1：Figmaのホームを開く
Figmaにログインして、ホーム画面を開きます。
新しいファイルを作成するための操作を探します。
FigJamの新規ファイルを選択します。
注意
Figmaのホーム画面は更新されることがあるため、ボタンの位置や名称は環境によって異なる場合があります。
重要なのは、通常のDesignファイルではなく、FigJamのファイルを作成することです。
手順2：ファイル名を変更する
今回の練習では、ファイル名を「Web制作アイデア整理」にします。
ファイル名は、後から見たときに何を整理したボードなのかがわかる名前にしておくと便利です。
手順3：キャンバスを確認する
FigJamを開いたら、広いキャンバスが表示されます。
キャンバス上には、付箋、図形、テキスト、線や矢印などを配置できます。
Figma Designと同じように、キャンバス上に情報を配置していきますが、
FigJamでは厳密な画面レイアウトよりも、
情報同士の関係や全体の流れを見えるようにすることを意識します。
付箋を使ってアイデアを出す
FigJamの基本となる要素のひとつが、付箋です。
付箋は、短いアイデアや課題を1つずつ書き出すのに適しています。
今回は、「会社のWebサイトを改善する」というテーマでアイデアを出してみましょう。
手順1：付箋を追加する
1. FigJamのツールバーから付箋ツールを選択します。
2. キャンバス上をクリックして付箋を配置します。
3. テキストを入力します。
4. 同じ操作を繰り返して、複数の付箋を作ります。
ショートカットやツールバーの配置は変更される場合があるため、まずはツールバーから付箋を追加する方法を覚えれば十分です。
手順2：アイデアを書き出す
例えば、次のようなアイデアを付箋に書きます。
サービス内容をわかりやすくする
問い合わせボタンを目立たせる
制作実績を掲載する
スマートフォンで見やすくする
ページの表示速度を改善する
お客様の声を掲載する
最初から完璧なアイデアを出す必要はありません。
思いついたことを短い文章で書き出すことが目的です。
手順3：付箋を並べる
付箋をキャンバス上に並べてみましょう。
このとき、最初からきれいに整列させる必要はありません。
アイデアを出している段階では、自由に配置しながら考えることを優先します。
後から分類や整理を行えばよいため、まずは情報を見える状態にすることが大切です。
図形と矢印で情報の関係を整理する
付箋でアイデアを出したら、次は情報同士の関係を整理します。
文章だけでは、どの情報が原因で、どの情報が結果なのか、どの順番で処理するのかがわかりにくいことがあります。
そのような場合は、図形や矢印を使います。
手順1：情報をグループに分ける
先ほど作成した付箋を、内容ごとにまとめます。
例えば、次の3つに分類します。
1. コンテンツ改善
2. 操作性改善
3. 技術面の改善
それぞれの分類の近くに、該当する付箋を移動させます。
分類は、最初から正解を決める必要はありません。情報を整理する過程で、分類を変更しても構いません。
手順2：見出しを付ける
それぞれのグループにテキストや見出しを追加します。
見出しを付けることで、ボードを見た人が情報のまとまりを理解しやすくなります。
手順3：矢印で流れを表現する
次に、必要に応じて図形や矢印を追加します。
矢印を使うことで、情報が並んでいるだけの状態から、作業の流れや関係性がわかる図に変わります。
ただし、関係性がない情報同士を無理につなぐ必要はありません。矢印は、順序や因果関係などを表現したいときに使います。
マインドマップで考えを広げる
FigJamでは、1つのテーマから関連するアイデアを広げていく
マインドマップも作成できます。
例えば、中央に「Webサイト改善」というテーマを置き、
そこから関連する項目を広げていきます。
コンテンツ
デザイン
操作性
SEO
パフォーマンス
問い合わせ導線
さらに、「コンテンツ」から制作実績、事例紹介、FAQなどに枝分かれさせることもできます。
マインドマップの目的は、情報を順番に並べることではなく、関連する考えを広げて、全体像を把握することです。
順序を表したいときはフロー図、アイデアを広げたいときはマインドマップ、というように目的に合わせて表現方法を選びましょう。
FigJamでWebサイトの構成を整理する
ここまでの操作を使って、Webサイト制作の準備に取り組んでみます。
今回は、会社のWebサイトを作る前段階として、
必要なページや機能を整理します。
手順1：テーマを決める
ボードの中央に、今回のテーマを配置します。
「会社のWebサイトを改善する」のテキストを置きます。
手順2：必要なページを書き出す
付箋を使って、必要なページを洗い出します。
トップページ
会社概要
サービス紹介
制作実績
お知らせ
お問い合わせ
手順3：必要な機能を書き出す
ページとは別に、機能も洗い出します。
お問い合わせフォーム
スマートフォン対応
お知らせの更新
実績の絞り込み
アクセス情報の掲載
手順4：ページと機能を整理する
ページと機能を並べて、どのページにどの機能が必要かを考えます。
例えば、お問い合わせフォームはお問い合わせページに配置します。お知らせの更新機能は、お知らせ一覧や詳細ページと関連します。
このように情報を整理すると、実際に画面デザインを始める前に、必要なページや機能を把握できます。
この段階では、まだ色やボタンの形などの細かいデザインを決める必要はありません。
FigJamを共同作業に使う
FigJamは、複数の人が同じボードを見ながら作業する用途にも向いています。
例えば、会議でWebサイトの改善案を検討する場合、参加者がそれぞれ付箋を追加し、似た意見をまとめ、優先順位を決めることができます。
共同作業では、次のような使い方が考えられます。
- 会議の前にアイデアを書き出しておく
- 会議中に意見を付箋で追加する
- 似た意見をグループ化する
- 投票などを利用して優先順位を整理する
- 決まったことや次の作業をボードに残す
利用できる機能や操作は、Figmaのプランや現在のUIによって異なる場合があります。
また、複数人で作業するときは、情報を自由に追加する場所と、決定事項をまとめる場所を分けておくと、ボードが見やすくなります。
FigJamとFigma Designを連携させる
FigJamは、Figma Designの代わりに使うものではありません。
それぞれの得意分野を組み合わせることで、制作の流れを整理できます。
例えば、Webサイト制作では次のような流れが考えられます。
1. FigJamでアイデアを出す
2. FigJamで必要なページや機能を整理する
3. FigJamでユーザーの行動フローを整理する
4. Figma Designで画面のレイアウトを作成する
5. ComponentやVariablesを使ってデザインを整理する
6. Prototypeで操作の流れを確認する
FigJamで情報を整理しておけば、デザインを始めてから必要なページが足りないことに気付いたり、機能の目的が曖昧になったりする問題を減らせます。
ただし、必ずこの順番で進めなければならないわけではありません。
制作の規模や目的に合わせて、必要な工程を選択します。
あとがき
Webサイトを作るとき、最初から画面をデザインしたくなることがよくあります。
しかし、目的や必要な情報が整理されていなければ、見た目は整っていても、
ユーザーが必要な情報にたどり着けないサイトになってしまう可能性が高いです。
FigJamを使うと、頭の中にある考えを外に出し、他の人と共有しながら整理できます。
大切なのは、きれいな図を作ることそのものではありません。
情報を見えるようにすることで、考えを深め、次に何をすべきかを判断しやすくすることです。
0 件のコメント:
コメントを投稿