投稿者: 本日のテーマ
Webサイト制作にあたり、まずは
『ワイヤーフレーム』
の制作のコツを学びましょう。
1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて
2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて
3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて
4限目
学科 ECサイトデザイン基礎④
制作に向けての準備
5限目
学科 ECサイトデザイン基礎④
制作に向けての準備
WEBサイト制作の流れ
◆ヒアリング、ワイヤーフレーム制作◆
↓↓↓
デザインラフ制作
↓↓↓
コーディング
ワイヤーフレームとは？
単に「ワイヤー」と呼ぶこともあります。
Webサイトの目的に沿って、「どの情報を」「どこに」「どのように配置するか」をチーム内やクライアントと共有するための重要なものです。
デザインを決める前に作るもので、サイトの骨組みとなるものですのでしっかり設計しましょう。
まずは絵を描くときの下書きのように、手書きスケッチ(ラフ)してみましょう。
いきなりワイヤーフレームを作ったりというケースもありますが、事前にラフを描いておくことでより一層スムーズに制作が進められるようになります。
制作のポイント
・使用ソフトはPhotoshopです。
・まずは色を入れず、白黒で制作しましょう。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・メインイメージなどはブラウザの横幅いっぱいでも構いませんが、文章などのコンテンツ幅は960〜980px程度に収めると良いでしょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える
手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
MEMO
商品説明の部分が画像が多いとSEO対策できない
デザインの変更があった時にHTMLの方が変更しやすい