実技 2025.10.30

授業内容

• ワイヤーフレーム制作の準備
• ワイヤーフレーム制作のポイント
• 課題制作

習得内容

• ワイヤーフレーム制作の準備

■制作のポイント
情報をしっかりまとめてからレイアウトを考えよう。そのレイアウトが、HTMLとCSSというルールに変わるだけ。HTML、CSSを意識して親子の枠組みがどうなるかを意識しながら制作してみる。まずは、PCサイズとしてコンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみよう。1280pxは画面幅のシャア率が高いサイズになる。画面幅のシャア率はWebサイトで検索して確認することができる。実際の仕事では会社で決めている場合が多い。

■ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多い。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなる。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみよう。
リンクはあまり増やさないようにする。

• 課題制作

■クラフト系資材ショップのワークショップ申し込みLPのワイヤーフレーム

---

□SITE IMAGE
ITOYAやユザワヤよりも小規模で裁縫道具店レベルのお店で開催しているワークショップ申し込みページ
□制作時間　110分

□ROUGH　SKECH

□WIRE FRAME

□POINT
●白いボックスはテキストの表示、グレーのボックスは画像表示です。
●ヘッダーのボタンはなるべく速くピンポイントで見たい情報にたどりつけるように先頭に配置しました。
●スケッチでは開催日程を選択できるボタンを考えていましたが、LPなので無くしました。
●講師の内容を最後の方において、CVボタンを消費者が推す最後の一押しの誘導ができるかと思いましたが、ワークショップ内容のそばに置いた方が情報のまとまりを感じたので詳細内容の下に配置しました。
●支払い方法のボックスは詳細内容の中の情報と仲間にできると思い無くしました。
●CVボタンは他の情報の邪魔にならない大きさにし、いつでもすぐ押せるようにしてみました。
●アクセスマップはスケッチ段階ではイメージ画像より大きかったので、小さくして詳細内容の中に配置しました。
●割引告知はワークショップの割引と資材商品の割引の２種類が考えられた為、2つ用意しました。