-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎⑤
デザインラフについて
2限目
学科 ECサイトデザイン基礎⑤
HTML/CSSをイメージしたレイアウト考案について
3限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備
4限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備
5限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備
本日のテーマ
コーディングの準備をしましょう
WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
ワンポイントアドバイス
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。サイトの完成イメージを画像でお客様に見せる為です。
ここでOKが出たらコーディングに進みます。
コーディングでは「デザインラフ通りに再現する事」が求められます。
HTML/CSSをしっかりと意識して作成しましょう。
逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。
○本日の授業内容 ～デザインラフを作っていこう～
たたき台のワイヤーフレームが決定したら、実際のサイトのイメージに近付けていく作業を行います。
実際のWebページの見た目を再現した「デザインラフ」をしっかりと作成していきましょう。
※HTMLとCSSでコーディングした時と同じ見た目のモノを作成しましょう。
デザインラフ：に完成イメージをしっかりとクライアント（発注者）さまと共有
コーディング（HTML・CSSにする） ：「デザインラフ」の見た目をそのまま形にする作業
◇コーディングについての注意点◇
注意点① 画面サイズ
特に理由がなければ「１２８０ｐｘ」を画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難
注意点② 見出し（ｈ１～ｈ６）をどうするのか
ＨＴＭＬ５の文法上では、セクショニングタグ毎に複数ｈ１を設けることが出来るが、１ページにｈ１は一つがＳＥＯ的にも解り易い
注意点③段落（ｐ）やリスト（ul li ol li）などの構成
制作のコツとして、文法構造に不安な時はタグチェッカーなどを利用
注意点④ 画像（img）リンク（a）や強調（strong,em）などの構成
それぞれの見出し（ｈ１～ｈ６）、段落（ｐ）やリスト（ul li ol li）の入れ子（インライン要素）として、
画像（img）やリンク（a）、強調（strong,em）などのタグをイメージしてデザインを整えておきましょう。
入れ子構造（インライン要素）の文法については、HTML５では少しややこしいところがありますが、考え方として上記の②③の内側に、
画像（img）やリンク（a）、強調（strong,em）などをマークアップするものと考えておくと間違いは無い。
注意点⑤ 画像orテキスト
画像よりテキストの方がSEO対策やユーザビリティ・アクセシビリティとして、有効。
ただし、デザイン重視で表現しなければならない場合は画像。
サイトの表示スピードは検索順位への評価にも影響する。
注意点⑥ HTMLなら「img」CSSなら「background」
「img」はHTMLなので、文法として意味が必要。逆に「background」ならCSSで文法としての意味は必要無い。
何処を、「img」にするのか、何処を「background」にするのかをよく考えて「デザインラフ」を作成。
コメント