-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎⑤
デザインラフについて
2限目
学科 ECサイトデザイン基礎⑤
HTML/CSSをイメージしたレイアウト考案について
3限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備
4限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備
5限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備
ワイヤーフレームからデザインラフへ
デザインラフとは？
コーディング（HTMLとCSS）を知らない人に見せるもの
HTMLとCSSでコーディングした時と同じ見た目のモノを作成すること。
実際のWebサイトにするのには、HTMLとCSSでコーディングをする必要がありますが、クライアント（発注者）さまに、こんな感じのデザインにしましょうか？ こんな感じではいかがですか？ という感じで、完成のイメージを画像で作成するのが、「デザインラフ」の役割。
逆に「コーディング（HTML・CSSにする）」については、デザインラフをクライアント（発注者）さまに見せて、OKを頂いたら行う作業になる。
要するに完成イメージをしっかりとクライアント（発注者）さまと共有して、 「コーディング（HTML・CSSにする）」 は、「デザインラフ」の見た目をそのまま形にする作業になる。
ワンポイントアドバイス
制作の順番はデザインの基本通り
やるべきことは、バナーの時と同じ。
まずは「レイアウト」をしっかりと考える。
ただしこれはワイヤーフレームの段階でしっかりと行っていれば時短になる。
次に「文字」をどうするか？を考える。
Webサイトなので、何処を画像にするのか？どこをテキストにするのか？をしっかりと考えてデザインをまとめる。
最後に「配色」。
色をどう使うかで、大きくイメージが変わってしまいますのでしっかりと考えてまとめていく。
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
レイアウトデザインのおさらい
「layout」は、デザインや建築設計、インテリア、書籍や雑誌などにおいて「何をどこに、どのように配置するか」を指す言葉。
■レイアウトの目的は情報の明確化
作品を制作するには、文字や文章、図形や写真などの要素を整理し、レイアウトしなければならない。
情報の整理とは、情報の構造や情報同士の関係を明確にすること。
盛り込みたい要素（情報）について、各要素の従属関係（親子にあたる関係）・並列関係（対等な関係）、さらには情報の優先度や因果関係なども明確にすることで、情報が「伝わりやすく」なる。これがレイアウトの目的。
■レイアウトの５つの基本原則
情報の構造を明確にするには、「余白をとる」「揃える」「グループ化する」「強弱をつける」「繰り返す」という法則を守る必要がある。
まず全体の圧迫感をなくすために、紙面に「余白」をとり、また従属関係・並列関係を明確化するために、各要素を「揃え、グループ化し、強弱をつけ」る。
強弱をつけることで、優先度も明示。そして、一定のルールの下で、広告全体を通じて５つの法則を守り続け「繰り
返す」ことで、従属関係・並列関係がより明確になる。
一見手間のかかる作業に思えるかもしれませんが、ルールを一度覚えれば、時間の短縮につながる。
コーディングに向けての注意点①
注意点① 画面サイズはどうする？
昨今のWebサイトの横幅はニュートラル。
様々なデバイス（スマホ・タブレット）に対応する必要がありますが、まずはPCを基準に考える。
出荷台数、また基準とされるもPCのモニターサイズの多くは「１３６６ｐｘ」が現在は多い。
そこで、特に理由がなければ「１２８０ｐｘ」を画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難。
ちなみに、現時点でのＥＣサイトの楽天市場やヤフーショッピング店の推奨サイズが「９６０ｐｘ～９８０ｐｘ」になる。
注意点② 見出し（ｈ１～ｈ６）をどうするのかを意識する
Webページのデザインにおいて重要なのがHTMLの文法。
見出し（ｈ１～ｈ６）の使い方とルールをしっかり確認しておく。
まずページの最初にｈ１（ページ全体の見出し）が必要になる。
ＨＴＭＬ５の文法上では、セクショニングタグ毎に複数ｈ１を設けることが出来ますが、１ページにｈ１は一つがＳＥＯ的にも解り易いかと思う。
それに続く、ｈ２やｈ３の構成も大見出し（ｈ１）に対して小見出し（ｈ２以下）という順序と内容をしっかりと意識して作成。
注意点③ 見出し（h1～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成
見出し（ｈ１～ｈ６）があったら必ず、その内容が必要。
見出しの次に段落（ｐ）やリスト（ul li ol li）などの内容を入れておく。
制作のコツとして、文法構造に不安な時はタグチェッカーなどを利用してみるのが一番早い。
検索して読んだり、書籍を調べるのも大事ですが、作ってみるのが一番手っ取り早いですので、効率よく進めてみる。
ちなみに、悩んだらpタグ（段落）として考えておけば間違いは無い。
注意点④ 画像（img）リンク（a）や強調（strong,em）などの構成
それぞれの見出し（ｈ１～ｈ６）、段落（ｐ）やリスト（ul li ol li）の入れ子（インライン要素）として、画像（img）やリンク（a）、強調（strong,em）などのタグをイメージしてデザインを
整えておく。
入れ子構造（インライン要素）の文法については、HTML５では少しややこしいところがありますが、考え方として上記の②③の内側に、
画像（img）やリンク（a）、強調（strong,em）などをマークアップするものと考えておくと間違いは無い。
コーディングに向けての注意点②
注意点① どこを画像にするのかテキストにするのか？
Webページのデザインから、コーディングで最も悩まされるのが、どこを画像にするのか？何処をテキストにするのか？
画像よりテキストの方がSEO対策やユーザビリティ・アクセシビリティとして、有効。
CSSで実現可能なデザインであれば、積極的にCSSで表現してみる。
ただし、デザイン重視で表現しなければならない場合もある。そんな時は画像にしても間違いではない。
注意点② 画像文字にするのかテキストにするのか？
例えば、ロゴの部分の文字はデバイス環境によってフォントが変化しては都合が悪い場合がある。
そんな時には、画像文字としてデザインすると良い。
注意点③ HTMLなら「img」CSSなら「background」
コーディング（HTML・CSS）を意識して考えるときの最も重要な注意点として「img」はHTMLなので、文法として意味が必要。
逆に「background」ならCSSで文法としての意味は必要無いと考える。
何処を、「img」にするのか、何処を「background」にするのかをよく考えて「デザインラフ」を作成。
注意点④ テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる。
画像は単純に重たい。
SEO（検索エンジン上位表示）の対策として、ページが表示されにくいのは避けたい。
実際に、サイトの表示スピードは検索順位への評価にも影響するとgoogleも正式に公表。
Webサイトの制作のポイントは、出来るだけ画像部分を減らしてテキストで構成するのが理想。
フォントは既にデザインされたもの
フォント（文字）はデザインが既に出来ている。
デザインを考えるとき、方向性や目的に合わせてフォントを選ぶ。
注意点としては、闇雲に様々なフォントを使ってしまってデザインの交通渋滞になってしまわないように、「何処で何をどういう風に使う。」を整理。
コーディングに向けての注意点③
注意点① 配色はデザインラフですべて決定しましょう。
デザインラフでは、最終的なデザインの仕上がりをクライアント（発注者）さまと共有するわけですので、コーディングの作業時に色を考えることは無い。
デザインラフの段階で、配色は全て決定し、万が一コーディングの時に行うのは応急処置程度の話だと思って準備をしていく。
注意点② 16進数のカラーの表記なのかRGB表記なのかを統一しておきましょう。
①にあるように、コーディングで色を考えることはない。
また正確な16進数のカラー「例： #ｆｆ００００」なのかＲＧＢ「例： rgb(255,0,0) 」のコードを控えておく。
コーディングの時は、出来上がったデザインから「スポイトツール」で正確なカラーコードを使う。
注意点③ 透過表現は、RGBAか、PNG画像の利用か決定しておきましょう。
透過表現は、CSSで「 例：rgba(255,0,0,0.7) 」という記載方法が使える。
また画像そのものを透過表現する方法として、PNG画像を利用する方法がある。
どちらをどの様に使うかもしっかりとイメージして準備をしておく。
色について
配色テクニック 真っ黒（#000）を避けるか否か？
グラフィックデザインの世界で使ってはいけない色の常識といわれているのが「真っ黒#000(Black)」。
理由を一言で表すとこれです。純黒は目にキツイ、目が疲れるから。
そもそも日常生活のなかでも、“黒い”と思っているものをよく見てみると、意外と違う色が入ってる。
人工物だと黒いものありますが、それも理論上の黒であって、目で見るときには光源により若干の色味がついているこ
とが多い。
ただし、Webページで、よく「真っ黒#000(Black)」を見かける。
それは、昨今の各デバイスのモニターは、データ（CSSコード）では「真っ黒#000(Black)」でも、実際にモニターで
見ているものは、目にやさしくなるように微調整されている場合がある。
配色テクニック 色を使わない
「白」と「黒」という色は「無彩色」と呼ばれている。 「彩りが無い色」、つまり色味を感じない、鮮やかさが無い色になる。
白と黒の中間色となる「灰色」もこれに該当。
明度(色の明るさ)の話を含めると、「白」が「最も明るい
色」、「黒」が「最も暗い色」となる。
ワイヤーフレームやデザインカンプの作成などは白黒で作成することにより、配色イメージに引っ張られずレイアウトデ
ザインを考えることに集中できるかと思う。
最終的なデザインでもそれぞれの配色の脇役となる存在として使うことも可能。
配色テクニック 美しい配色バランス（3色がおすすめ）
配色の効果は、色相、明度、彩度、分量（面積）、配置によって変わる。
これらの要素をうまくコントロールしながら組み合わせることで、情報を目立たせたり、イメージを表現したり、雰囲気のある空間を演出したりと目的に合わせた効果を発揮することができる。
一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされ
ている。
コーディングに向けての注意点④
注意点① 静止画像なので、補足事項は別途説明しておきましょう。
例えばスクロールしても固定位置にいるナビゲーションやボタン、背景などは1枚の画像で表現が難しい。
そんなデザインをクライアント（発注者）さまに提出する場合は、言葉で補足。
最近ではAdobe XDで表現する方法などもありますので、
大事なのはクライアント（発注者）さまと、イメージを共有する事になりますから上手に伝えれるように工夫。
注意点② 実はセクショニングは後回しでも良い？
デザインラフでセクションを意味するタグ（ header,nav,maiｎ,section,footerなど）を考えるのは、後回しでも大丈夫かも。
当然意識しておくのはベストだが、これらのタグはHTML５からの登場で、それ以前は全て「div」。
デザインラフの段階では「囲っている箱」として意識をしていれば、「デザインラフ」は成立。
コーディングのマークアップ作業の時に考えても遅くはない。
注意点③ リテイク（修正・出戻り・やり直し）に強いデータにしておきましょう。
バナーやロゴ・ピクトグラム、名刺やチラシなどと同じく、クライアント（発注者）さまの思いと異なることは多々あり。
「かっこいい」「かわいい」など、素敵なデザインが出来るようになるのも大切ですが、実務では「リテイクに強い」事も重要なデザイナーの技術として求められる。
「スマートオブジェクト化」し非破壊データの利用、アウトライン化のタイミングなどしっかりと作成をしながら復習。
Webサイトについて
LP（ランディングページ）とWebサイトの一番の違いは、単一ページなのか？複数ページなのか？です。
印刷物で言えば、チラシなのか？パンフレットなのか？の違い。
複数ページの作品となる為、より複雑なストーリーを考える必要がありますが、考え方は同じです。まずはしっかりとLP（ランディングページ）を作成して、次のステップとしてWebサイトにチャレンジ。
Webサイトで必要なもの① サイトマップを考える
Webサイトになれば複数ページにわたるもの。
まず制作前に「サイトマップ」を考えておく。
「トップページ」「会社概要」「お問合せ」「アクセス」など複数ページでのストーリーを考える必要がありますので、まずは「サイトマップ」を用意。
Webサイトで必要なもの② グローバルナビを考える
複数ページという事は、それぞれのページに「リンク（a）」が必要になる訳。
そこでグローバルナビゲーションという存在が重要になる。ちなみに、昨今ではハンバーガーメニュー（正式名称はナビゲーションドロワー）などが有効。
CSS3でも実装出来ますが今後学ぶ「Javascript（jQuery）」を利用したものも多いので、どんなデザインがあるのかなど下調べなどしておくと良い。
Webサイトで必要なもの③ 新着情報等の日々の情報提供のコンテンツを考える
LP（ランディングページ）でも使う場合はありますが、Webサイトでよく見かける「新着情報」などというコンテンツを利用する事がある。
これは、そのWebサイトの運営として、ユーザーに対して、常に新しい情報提供をお届けする為のコンテンツ。
実装するためにSNSのタイムラインを埋め込んだり、Wordpressを利用し簡易的に更新出来るように、またクライアント（発注者）さま側で、運用できるようにする工夫する事も多い。
こちらも後の講義で行いますので下調べなどしておくと良い。
Webサイトで必要なもの番外編 スマートフォン対策を考える。
これも後の講義で行いますが、PC用のサイトが出来たら、次のステップとして「マルチデバイス対応（スマホ・タブレットへの対応）」を考えるのも大切。