訓練日誌-2024/2/6（LPページ ワイヤーフレームについて）

目次

• ワイヤーフレーム下準備
• ワイヤーフレーム作成

ワイヤーフレーム下準備

LPページ作成　下準備

①photoshopサイズ
幅：960px
高さ：3000px
解像度：72
カラー：RGB

②ガイドをひく
ctrl＋R
縦のはじとはじにガイドを引く
※ctrl＋：を押すとガイドを非表示にできる
※表示→ガイド→新規ガイド→位置変更（横：水平、縦：垂直）

③カンバスサイズ調整
イメージ→カンバスサイズ
幅1280
高さ3000
カンバス拡張カラー：背景色（薄いグレー）

④保存
こまめに保存

■作成時の注意事項
・入れるテキストは別で用意しておいた方が良い
　理由：コードを打ちながらテキスト打つと全角と半角が間違えやすい
　　　　全角のスペースはエラーを起こしやすい

・文字サイズが大きすぎないか確認をする
　方法：カンバスサイズを100％にした時に「ctrl＋1」
　　　　元に戻す時「ctrl＋0」
　　　　※Macはctrl＋1だと50％表記になる

・ファーストビューの大きさ
　＜PC＞　　　　幅：1000～1200px、高さ：550～650px
　＜モバイル＞　幅：350～365px、高さ：600～650px

・モバイル版になった時、どういうレイアウトにするか考えておく

ワイヤーフレーム作成

目的：春に販売するアフタヌーンティーの売り上げ促進
ターゲット：20代～30代女性