ワイヤーフレーム制作【所要時間4.5時間】
pet salon ambre
-本日のアジェンダ-
1限目
実技 WEBデザイン実習①
ワイヤーフレーム制作の準備
2限目
実技 WEBデザイン実習①
ワイヤーフレーム制作のポイント
3限目
実技 WEBデザイン実習①
課題制作
4限目
実技 WEBデザイン実習①
課題制作
5限目
実技 WEBデザイン実習①
課題制作
本日のテーマ
早速作ってみましょう。
制作のポイント
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。
ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
本日の課題
白黒のワイヤーフレームを作成し5限目までにWordPressにUPしてください。
今日できたところまでで大丈夫です。
メモ
Photoshop
- ガイド線を消す→定規にドラッグして返す
- 表示 ガイド 新規ガイド 水平・垂直数値記入
- ガイド線を一時的に消す：ctrl+：け
- 100％表示：ctrl+1
- 全体を表示：ctrl+0
- ※テキストはメモ帳などに書いてコピペがおすすめ
PC表示時に最適なファーストビューのサイズ
フルHDと呼ばれる1920×1080pxモニターが最上位、その次に1366×768pxモニター
小さくても1280×720px
ファーストビューの幅は1000〜1200px、高さは550〜650pxに収める
３－２．スマホ表示時に最適なファーストビューのサイズ
スマホの場合は375×667pxが最上位、次に414×896px
大きくて414×896px、小さくて320×568px
320×568pxは第1世代のiPhone SEサイズにあたりシェアもさほど多くはないため、考慮しないという手もあります。
そのため、スマホ表示時のベースは幅350〜365px、高さは600〜650pxで作成
レスポンシブで作成している場合は幅310×500pxのブレークポイントを追加して320×520pxで要素の調整をすればよい