目次

目次

• ワイヤーフレーム
• 4つの配置例
• 完成画像の読み取り
• PC版の組み立て
• Textで文言を直す
• スマホ版とPNG

配置例

完成画像

部品とText

PC / スマホ

ワイヤーフレーム

ワイヤーフレーム

• 実務テクニック: ワイヤーフレーム
• 見出し、文章、画像を置く場所、CTAの位置を決める画面
• 画像は、置く場所と大きさが分かる枠だけでもよい
• 今回は用意済みの画像部品を使い、表示範囲まで確かめる
• 色や装飾を決める前に、読む順番と次の行動を確かめる

見出し

画像枠
または実画像

文章

CTA

上部メニュー

上部メニュー

• ロゴと主要ページを画面上部へ横に並べる
• 主要ページが多すぎず、階層が浅いサイトで使いやすい
• 横幅に収まらない場合や下位ページが多い場合は、別の配置も組み合わせる

サイドメニュー

サイドメニュー

• 同じ区分の下位ページを画面の左側へ縦に並べる
• 現在いるページと、同じ区分の移動先を見せる
• ページが少ない場合は、サイドメニューを増やさない

2カラム

2カラム

• 主な内容を広い列、関連情報を狭い列へ分ける
• 文章、画像、リンクを役割ごとに左右へ置く
• スマホでは主な内容を先にし、2列を縦に並べる
• 左右へ分ける理由がないページは1列で見せる

1ページ

1ページ

• 必要な内容をセクションに分け、1ページへ上から並べる
• メニューやボタンから、同じページの見出しへ移動できる
• 主な行動と必要な内容を絞れるサイトで使う
• 詳しい説明や複雑なフォームが必要なら別ページへ分ける

トップ画面の完成画像

トップ画面の完成画像

• レイアウト方針一覧.pdfと、前回Figmaへ置いたトップ画面の完成画像を開く
• メニューが上部か左側かを確認する
• 本文が1列か2列かを確認する
• 同じページ内で続くか、別ページへ移るかを確認する
• 4つの配置例は組み合わせて使える

メニュー位置

本文の列

ページの続き方

PC版のFrame

PC版のFrame

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

F

Frame

トップページ_PC

部品を並べる

部品を並べる

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

完成画像を見る

部品を選ぶ

Frameへ置く

大きさと余白

大きさと余白

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

大きさ

位置

余白

テキストなし版とText

テキストなし版とText

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

テキストあり版
見本

テキストなし版

Text

文言を直す

文言を直す

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

見出し

短い文章

CTA

商品ラインナップを確認

スマホ版を組み立てる

スマホ版を組み立てる

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

スマホ完成画像

部品を配置

テキストなし版

Text

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

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

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

提出: Figmaの閲覧リンク / トップページ_PC.png / トップページ_スマホ.png

PC版

PC.png

スマホ版

スマホ.png