-本日のアジェンダ-
1限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作の準備
アートボード:WEBで1366×3000程度
縦は後ほど伸ばせるのでだいたいでOK
ファーストビューとなる
コンテンツ領域の四角形:960~980×768~800
下のラインに線を引きファーストビューのラインが分かるようにする。
・ネット調べ
推奨されるロゴの箱サイズウェブサイトのロゴサイズに「万人向けの標準」はありませんが、多くのウェブサイトで採用されている一般的な目安はあります。
高さ:50px 〜 100px 程度 横幅:250px 〜 400px 程度
・ポートフォリオサイトの画像がぼける
→投稿ページの該当の画像を選択→解像度 フルサイズ
2限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作のポイント
3限目
実技 ECサイトデザイン実習④
課題制作
4限目
実技 ECサイトデザイン実習④
課題制作
5限目
実技 ECサイトデザイン実習④
課題制作
本日のテーマ
早速作ってみましょう。
制作のポイント
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

ワンポイントアドバイス
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望(相手の気持ち)をしっかり理解する事を心掛けて制作をしてみましょう。
本日の課題
白黒のワイヤーフレームを作成し5限目までにWordPressにUPしてください。
今日できたところまでで大丈夫です。
・紅茶福袋ワイヤーフレーム

本日学んだこと
ワイヤーフレームの作成方法について
ファーストビュー
コンテンツファーストビューについて
感想
本日はワイヤーフレームの作成を行いました。
ファーストビューもそうですが、それ以外のページにおいても実際に見るときにどの幅までスクロールしながら見るのかを考えながら作成することを心掛けました。
また、これまでまだLPを作成したことがないこともあり、白黒のフレームだけでレイアウトを考えるのはイメージがしづらい部分もあり難しくも感じました。今後様々なLPサイトを作ったり、見たりすることでフレームワークの段階でも完成後のイメージができるようになれたらと思います。
