🎨

エンジニアが楽しくUI設計するならFigJam

に公開
Figma
UI
FigJam
Figma Make
zennfes2025free
idea

画面イメージをサクッと作るのにFigJamが便利だったので紹介します。

伝えたいこと

FigJamを使えば良い感じの画面イメージを素早く作成できます！

読んでほしい人

  • 手早く良い感じの画面イメージを作りたいエンジニア
  • PowerPointは使いづらい
  • Figmaはハードルが高い

使用するツール

FigJam（無料版）

UI設計の流れ（我流）

  • 灰色：手書き
  • ピンク：FigJam ※本記事で説明する箇所
  • 青緑：コードエディタ

画面イメージを作成してみよう

AIチャットアプリ（Gemini）の画面イメージを作成してみます。

0. 手書きで書いたもの

1. レイアウトとサイドメニューを作る

1-a. アイコンを選択

  1. Material Design iconsをFigmaで開きます。
  2. Figmaアイコンセットから利用したいアイコンを選択します。
  3. アイコンの色を任意の色に変更します。

1-b. 要素を整列する

  1. アイコンとテキスト、図形（楕円、線無し）を使って要素を整列します。

Tips
  • 基本テキストの大きさは「中」がおすすめ。テキストの大きさで要素の強弱をつける時に便利なため。
    • 本画面では、基本要素は「中」、カテゴリは「小」としている。
  • テキストの色が決まっているのであれば、カラー選択 > カスタム から色を指定できます。
    • 本画面では、Gemini公式画面に合わせて「#575B5F」としています。
  • 図形はの縦横比を維持したい場合は、Shiftキーを押しながら拡大・縮小します。

1-c. 背景を後ろに配置する

  1. 図形（四角、線無し）を使ってサイドメニューを作成します。
  2. サイドメニューを要素に被せ、「最背面に移動」します。
  3. 図形（四角、線無し）を使って画面枠を作成します。
  4. 画面枠を要素に被せ、「最背面に移動」します。

1-d. 調整

1.要素の間隔を調整したら、レイアウトの完成です。

Tips
  • 要素を選択しキーボードの「↑」「↓」「←」「→」をクリックすると、配置を細かく調整できます。

2. ヘッダーを作る

  1. アイコンとテキスト、図形（楕円、四角）を使ってヘッダー要素を整列します。

  2. ヘッダー要素にレイアウトを被せ、「最背面に移動」します。

  3. 要素の間隔を調整したら、ヘッダーの完成です。

3. メインコンテンツを作る

  1. アイコンとテキスト、図形（角丸四角）を使ってチャット欄を作成します。

  1. アイコンとテキスト、図形（楕円、四角）を使ってテンプレートエリアを作成します。

  2. 作成済みのUIをメインコンテンツに被せ、「最背面に移動」します。

  3. 要素の間隔を調整したら、画面の完成です。

Tips

小さい要素から作成する

背景に図形などのアイテムがある状態だと、要素の一括選択がしづらく、間隔調整に手間がかかってしまいます。
なので、小さいコンポーネントから作成し、後から大きい要素と統合する流れで進めると早く作成できます。

例）チャット欄の場合、以下の順番で作成するのがおすすめです。

  1. ボタン、テキスト（Geminiに相談）を作成
  2. 入力エリアを作成
  3. チャット欄を作成済みUIに統合する

アイコンはFigmaアイコンセットを利用する

Figmaで無料のアイコン素材集を利用する方法
Material Design icons

※Figma Communityで公開されているファイルは、基本的に CC4.0ライセンスが適用されます。私用・商用ともに複製や再配布、改変も含めて無償で利用できます。ただし、利用する際はクレジットとライセンスへのリンクを表示する必要があります。また、ファイルごとに独自の利用規約が設定されている場合もありますので、よく確認して利用してください。

細かい色も選択できる

カラー選択 > カスタム から色を指定できます。


コンポーネントをまとめると便利

作成画面が増えると使いまわしたいコンポーネントが増えます。
汎用コンポーネントはまとめて配置しておくと便利です。

選択範囲を画像として保存できる

画像としてエクスポートできます。

チーム共有が簡単

編集権限や閲覧権限で、チームメンバーを招待できます。
URLだけ共有しておけば最新状態を共有できるので便利です。

直線の作り方

  1. 「エンドポイントがないコネクタ」を選択します

  2. 任意の場所をクリックして線を引きます。この時、近くに図形があると勝手に終点を決めてしまうので、図形から離れた場所で線を引いてください。

FigJamの注意点

共有設定を変更する

デフォルトだと共有設定になっています。
ボードを作成した時は「招待されたユーザのみ」に変更してください。

Figma Make を商用利用するならアップグレードする

UI設計する上でFigma Makeを使いたくなる場合もあると思います。
無料プランだとAIのオプトアウト設定ができないため、商用利用の場合は有料プランにアップグレードすることをおすすめします。

個人的に使った感想としては、要件やを加味したUI設計する上では細かい調整がしづらい印象でした。
アイディア出しとして使用すると新しい着想が得られて面白かったです。

本記事で使用している画像・アイコン素材は、以下の通りです。

Discussion