目次

目次

• ワイヤーフレーム
• トップ画面の完成画像
• PC版の組み立て
• テキストなし版とText
• スマホ版の組み立て
• PDFへの書き出し

完成画像

部品

Text

PC / スマホ

ワイヤーフレーム

ワイヤーフレーム

• 実務テクニック: ワイヤーフレーム
• 見出し、文章、画像、CTAの位置を決める画面
• 色や装飾を完成させる前に、情報の順番を確かめる
• 実際に使う見出し、文章、画像、CTAを置く
• 上から順番に見た時に、内容と次の行動がつながるようにする

見出し

画像

文章

CTA

トップ画面の完成画像

トップ画面の完成画像

• 第9回でFigmaへ置いたトップ画面の完成画像を使う
• PC版とスマホ版を、それぞれ組み立てる時の見本にする
• 完成画像の文字、画像、CTA、配置、余白を見る

PC完成画像

スマホ完成画像

組み立てる時の見本

PC版のFrame

PC版のFrame

• 新しいFrameを作る
• Frame名をトップページ_PCにする
• 幅をPC版の完成画像と合わせる
• 高さはトップページ全体が収まる長さにする

F

Frame

トップページ_PC

部品を並べる

部品を並べる

• テキストあり版からトップページで使う部品を選ぶ
• 完成画像を上から見ながら同じ順番で置く
• ヘッダーからフッターまで配置する
• 同じ部品を重ねて置かない
• 部品名ではなく、完成画像の見た目と位置を見て対応させる

完成画像を見る

部品を選ぶ

Frameへ置く

大きさと余白

大きさと余白

• 完成画像と作成中のFrameを見比べる
• 部品の幅、高さ、左右の位置を合わせる
• 見出しと文章の間、部品同士の間を合わせる
• 画像切れ、文字重なり、横方向のはみ出しを直す

大きさ

位置

余白

テキストなし版とText

テキストなし版とText

• 配置したテキストあり版を、対応するテキストなし版へ置き換える
• 置換前後で部品の位置と大きさを変えない
• テキストあり版は、文言と配置を確認する見本として残す
• Tを押し、見出し、文章、CTAをTextとして置く
• Textを画像へ焼き込まず、Figmaで編集できる状態にする

テキストあり版
見本

テキストなし版

Text

文言を直す

文言を直す

• テキストあり版を見ながら、元の意味と情報を引き継ぐ
• Figma上でページ全体を見ながら文言を書き直す
• 内部管理用語を、訪問者が読む自然な言葉へ直す
• 長すぎる文章は、意味を変えず短くする
• CTAは、押した後に何が起きるか分かる言葉にする
• 位置、幅、改行を部品に合わせる

見出し

短い文章

CTA

商品ラインナップを確認

スマホ版を組み立てる

スマホ版を組み立てる

• スマホ用Frameを作り、Frame名をトップページ_スマホにする
• スマホ版の完成画像を見本として使う
• テキストあり版の部品を、完成画像と同じ順番で置く
• PC版を縮小せず、スマホに合わせて縦に並べる
• 配置後、テキストなし版とTextへ置き換える
• 改行、画像の表示範囲、CTAの幅を調整する

スマホ完成画像

部品を配置

テキストなし版

Text

トップページワイヤーフレーム

トップページワイヤーフレーム

• PC版とスマホ版を同じSectionへ並べる
• 完成画像とワイヤーフレームを見比べる
• テキストあり画像が作業中のFrameに残っていないか確認する
• PC版とスマホ版をPDFへ書き出す
• ファイル名をトップページワイヤーフレーム.pdfにする

提出: Figmaの閲覧リンク / トップページワイヤーフレーム.pdf

PC版

スマホ版

Export

PDF