全ページワイヤーフレーム

実務テクニック: ワイヤーフレーム
トップページで使った方法を、修正版サイトマップ.mdにある全ページへ広げる
各ページをPC版とスマホ版で作る
完成画像を見ながら、ページ全体を同じ順番で組み立てる
実際に使う見出し、文章、画像、CTAを置く

トップ
ページ

全ページ

PC版

スマホ版

全ページのPC版

トップページ以外の各ページに、PC用のFrameを作る
Frame名をページ名_PCにする
各ページのPC版完成画像を見本にする
トップページと同じ手順で、ヘッダーからフッターまで組み立てる
完成画像と見比べて、順番、大きさ、位置、余白を合わせる

PC版
完成画像

ページ名
_PC

ページ
全体

全ページのスマホ版

各ページに、スマホ用のFrameを作る
Frame名をページ名_スマホにする
各ページのスマホ版完成画像を見本にする
PC版を縮小せず、スマホ版の順番と幅で組み立てる
改行、画像の表示範囲、CTAの幅、横方向のはみ出しを直す

スマホ版
完成画像

ページ名
_スマホ

ページ
全体

PNGへの書き出し

各ページのPC版Frameとスマホ版FrameをPNGへ書き出す
PC版はページ名_PC.pngにする
スマホ版はページ名_スマホ.pngにする
修正版サイトマップ.mdにある全ページで、PC版とスマホ版をそろえる
Figmaの閲覧リンクと全ページのPNGを残す

プロンプト作成プロンプト

AI活用テクニック: プロンプト作成プロンプト
前提、外せない条件、目的だけをCodexへ伝える
実行に必要な詳しいプロンプトはCodex自身に作ってもらう
作ったプロンプトは、名前を付けたMarkdownファイルへ保存してもらう
今回は、PNGを読み取り、現在のWebサイトを修正するためのプロンプトを作る

# 画像からのサイト更新プロンプト作成

## 前提

- 現在のWebサイトと全ページの
  PC版・スマホ版PNGがある
- 作成するプロンプトはCodexで実行する

## 条件

- PNGに書かれたテキストを勝手に変えない
- 「色を変更」と書かれていない限り、
  元のHTMLとCSSにある部品の色を変えない
- PNGで元のテキストを隠すために塗った色は
  再現せず、テキストだけをPNGの内容へ置き換える
- 作成したプロンプトを
  `画像からのサイト更新プロンプト.md`へ保存する

## 目的

各ページのPNGを読み取り、
現在のWebサイトを画像に合わせて修正する
プロンプトを作成してください。

提出するもの

全ページのページ名_PC.png
全ページのページ名_スマホ.png
7日目_ランブック.md

PC版PNG

スマホ版PNG

ランブック

目次

全ページワイヤーフレーム

全ページのPC版

全ページのスマホ版

PNGへの書き出し

プロンプト作成プロンプト

提出するもの