目次

目次

  • UIとUX
  • 視覚階層づくり
  • Figma
  • Figmaに登録
  • Frameを作る
  • 画像と文字を置く
  • 閲覧リンクを共有
  • Webサイトを部品に分ける
  • 文字合体版と文字分離版
  • 全ページの完成例
  • Figmaに全部品を配置
  • レイアウト方針一覧

UI / UX

Figma

全部品

一覧

UIとUX

UIとUX

  • UIは、画面に見えて操作する文字、画像、ボタン、配置
  • UXは、必要な情報を見つけ、迷わず次へ進める体験
  • 見た目を変える時も、見る人が目的を果たせる流れを守る

見る

分かる

進める

視覚階層づくり

視覚階層づくり

  • 実務テクニック: 視覚階層づくり
  • 見出し、画像、CTAのうち、最初に見せるものを決める
  • 次に見せる順番に合わせて、大きさ、余白、配置を変える
  • 文字を外しても、見る順番が分かる画面にする

最初に見るもの

次に見るもの

CTA

Figma

Figma

  • Webページを作る前に、画面の見せ方を並べて試せる道具
  • Frameの中へ画像と文字を別々に置ける
  • お客さんと同じ画面を共有し、複数人で一緒に操作・確認できる

Frame

Image

Text

Figmaに登録

Figmaに登録

  • figma.com/signupを開く
  • Googleアカウントまたはメールアドレスで登録する
  • figma.newを開き、自分のDraftsにDesignファイルを作る
  • ファイル名を自サイト_レイアウト方針にする

Sign up

figma.new

Design file

Frameを作る

Frameを作る

  • Fを押してFrameを選ぶ
  • PC用のFrameを1440×900で作る
  • スマホ用のFrameを390×844で作る
  • Frame名を配置練習_PCと配置練習_スマホにする

PC
1440×900

スマホ
390×844

画像と文字を置く

画像と文字を置く

  • 練習用の画像をFrameへドラッグする
  • Tを押し、画像の上へ短い見出しを置く
  • 画像と文字を別々に選び、動かせることを確かめる
  • PC用Frameを複製し、スマホ用Frameでも並べ直す

画像

T

文字

別々に移動

閲覧リンクを共有

閲覧リンクを共有

  • 右上のShareを開く
  • Anyoneとviewを選ぶ
  • Copy linkを押す
  • コピーしたリンクを開き、閲覧できることを確かめる

Share

Anyone

view

Copy link

Webサイトを部品に分ける

Webサイトを部品に分ける

  • AI活用テクニック: 内部ブラウザによる部品別キャプチャ
  • 現在のHTMLと全ページをCodexに読ませる
  • 部品の種類や名前は先に決めず、サイトの構成から判断させる
  • 全部品を組み合わせて元のページへ戻せる状態にする 
# Webサイト部品別・透過PNG出力プロンプト

## 前提

- 作業フォルダ内にある現在のWebサイトを対象にする
- HTML、CSS、JavaScript、画像、フォント、ルート定義を実ファイルから確認する
- 既存の方法でローカルサーバーを起動し、全ページをブラウザで表示できる状態にする
- Figma MCPは使用しない
- 作成した素材は、次の工程でFigmaへ配置して使う
- 全部品を指定された親子関係と順番で組み合わせると、現在のサイトを再現できる状態を目指す

## 条件

- ルーター、ナビゲーション、サイト内リンク、サイトマップ、HTMLファイルを照合し、対象サイトの全ページを確認する
- 画面と部品の確認・撮影には、現在利用できる内部ブラウザ機能を使用する
- PC版は1440×900、スマホ版は390×844で、実際のレスポンシブ表示を確認する
- 部品の種類、数、境界、名前、再利用単位を先に決めない
- 実ファイル、各ページの表示、役割、親子関係、配置、動作、PC版とスマホ版の違いを読み取り、そのサイトに適した部品の分け方を決める
- 実サイトから決めた部品分類を、フォルダ、ファイル名、マニフェストで一致させる
- 部品名は画面上の役割が分かる自然な日本語にし、DOMタグ、CSSクラス、セレクターを表示名にしない
- 共通部品とページ固有部品を分け、同じ部品を使う各場所には別のinstanceIdを付ける
- 各部品について、現在の文字と画像を含む「文字合体版」の透過PNGを作る
- 各部品について、見た目のPNG、編集する文字、差し替える画像を分けた「文字分離版」を作る
- 文字合体版と文字分離版は、同じpartId、キャンバスサイズ、座標原点で対応させる
- 文字と画像を分離しても、元の位置、幅、高さ、余白、背景、枠線、影を変えない
- 文字合体版は部品の外側だけを透明にし、部品内部の白い背景、画像、枠線、影を消さない
- 文字分離版は編集する文字と差し替える画像だけを分離し、それ以外の背景、画像、枠線、影を残す
- PC版とスマホ版の両方を作り、片方だけにある部品と表示の違いも記録する
- 部品ごとの文字、画像、親子関係、表示順、位置、寸法、重なり、使用ページをJSONへ保存する
- component-screenshots-manifest.jsonに部品の定義と保存先を記録する
- page-assembly-manifest.jsonに全ページの部品構成と各instanceIdを記録する
- 全部品を確認できるparts.htmlを作る
- 全ページについて、現在の文字を含む完成例と、文字だけを外して画像と見た目を残した完成例を、PC版とスマホ版で作る
- 文字分離版と2つのマニフェストだけを使って全ページを再構成し、PC版とスマホ版で撮影する
- 元ページと再構成ページを比較し、差分画像とreconstruction-check.jsonを作る
- 部品の重複、欠落、文字や画像の焼き込み、位置ずれ、表示順の違いがあれば、部品の分け方または再構成情報を直して比較をやり直す
- 再構成に未解消の差がある場合は完了扱いにせず、対象ページ、対象部品、理由を知らせる
- 部品を分ける方法と画像を作る方法は、以上の条件を満たすように対象サイトを読んで決める

保存先はcomponent-screenshots/とする

最後に、確認したページ数、抽出した部品数、作成したPNG数、各保存先、未解消の差を知らせる

## 目的

対象サイトの実際の構成をもとに、Figmaで文字や画像を差し替えながら組み替えられる素材を作成してください。

一般的な部品一覧へ当てはめるのではなく、そのサイトに必要な全部品をAIが判断して分けてください。

完成判定はPNGの枚数ではなく、作成した部品だけで現在の全ページを再構成し、元ページと一致することを根拠にしてください。

文字合体版と文字分離版

文字合体版と文字分離版

  • 文字合体版は、現在の見た目を確認する画像
  • 文字分離版は、見た目の画像、編集する文字、差し替える画像を分けた素材
  • 同じ部品の2種類を、同じpartIdで対応させる
  • 文字分離版だけで元ページを再構成し、部品漏れを見つける

文字合体版
見本

文字分離版
Figmaで使う素材

全ページの完成例

全ページの完成例

  • 全ページのPC版とスマホ版を用意する
  • 文字ありは、現在の完成画面を確認するために使う
  • 文字なしは、配置、画像、余白を見比べるために使う
  • ページ名とPC・スマホの区別が分かる名前にする

PC
文字あり

PC
文字なし

スマホ
文字あり

スマホ
文字なし

Figmaに全部品を配置

Figmaに全部品を配置

  • Figmaに全ページの完成例とWebサイトの部品というSectionを作る
  • 全ページの文字あり・文字なし画像をまとめて選び、全ページの完成例へ貼り付ける
  • 文字合体版と文字分離版の全部品をまとめて貼り付け、同じpartIdごとに並べる
  • 分離した文字は、全部品について対応するpartIdの近くへTextとして置く

フォルダ

全選択

Figmaへ
ドラッグ

Section

レイアウト方針一覧

レイアウト方針一覧

  • Figmaにレイアウト方針一覧というSectionを作る
  • 全ページの完成例と、次に使う部品をこのSectionへ並べる
  • Sectionを選び、右側のExportからPDFを書き出す
  • ファイル名をレイアウト方針一覧.pdfにする

提出: Figmaの閲覧リンク / レイアウト方針一覧.pdf

Section

Export

PDF