投稿者: 本日のテーマ
コーディングの準備をしましょう
1限目
学科 ECサイトデザイン基礎⑤
デザインラフとは？
2限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点
3限目
学科 ECサイトデザイン基礎⑤
XDの活用について
4限目
学科 ECサイトデザイン基礎⑤
課題制作
5限目
学科 ECサイトデザイン基礎⑤
課題制作
WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
デザインラフとは？
Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。
ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。
ワンポイントアドバイス
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。サイトの完成イメージを画像でお客様に見せる為です。
ここでOKが出たらコーディングに進みます。
コーディングでは「デザインラフ通りに再現する事」が求められます。
HTML/CSSをしっかりと意識して作成しましょう。
逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。
XD データ連携について
Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。
ワンポイントアドバイス
実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。
MEMO
画面幅は1280px、コンテンツ幅は960〜980px
※コンテンツ幅・・・コンテンツが表示される幅。視認性、読みやすさはコンバージョン率に影響する。
「コーディングの考え方」
注意点① 画面サイズはどうする？
注意点② 見出し（ｈ１～ｈ６）をどうするのかを意識する
注意点③ 見出し（h1～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成
注意点④ 画像（img）リンク（a）や強調（strong,em）などの構成
真っ黒（#000）は目にキツく疲れるため使わない。
配色の黄金比率（ベースカラー：メインカラー（サブカラー）：アクセントカラー）＝70：25：5
カラーコードは16進数かRGBか統一する