2025.11.24 学習記録 ～ワイヤーフレーム作成実習～

本日の実習作品

百貨店催事、スコーン＆紅茶イベントの特設サイトのワイヤーフレームを作成した。

備考・メモ

コンテンツ部分が960px、外側部分を入れて幅1280pxでワイヤーフレームを作成。
※Webの解像度は一律72ppi。

Webサイズ本文の文字サイズは14～16pxが一般的。
Google推奨サイズ：16px
ユーザビリティ観点：14px以上、最小10px。12px以上推奨。

セクション間の余白は60～100pxが基準。8の倍数が扱いやすい。

レイヤーをグループ化しておく。例⇩

• TOPグループ→TOPフォト、ヘッダー
• グループ１→コンテンツグループ１
• グループ２→コンテンツグループ２
• グループ３→マップやロゴやフッター部分
• テキスト→配置スペース上の文字

切り抜きツールを使うとアートボードのサイズを伸ばせる！
※縦横比が変わらない場合、比率のリンクがかかっているので解除する必要あり。

テキストもダミーで文字入れると良い。
（フォントや文字サイズが見られるので）

ガイドの作成…表示→定規　Ctrl＋R

ガイドをロック…表示→ガイド→ガイドをロック　Alt+ctrl+;

横書き文字ツール…T

キーオブジェクトに対して整列したい
選択範囲を作成する（Ctrl押しながらサムネイルを選択）→整列したいレイヤーを選択→整列を実行