学科 ECサイトデザイン基礎⑤【オンライン】

1限目
学科 ECサイトデザイン基礎⑤
デザインラフについて

2限目
学科 ECサイトデザイン基礎⑤
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備

4限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備

5限目
学科 ECサイトデザイン基礎⑤
制作に向けての準備

---

本日のテーマ

コーディングの準備をしましょう

Webページの作成

WEBサイト制作の流れ

デザインラフとは？

Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。

ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。

コーディング（HTMLとCSS）を知らない人に見せるもの

制作の順番はデザインの基本通り

１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか

コーディングに向けての注意点①

• 画面サイズはどうする？

昨今の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サイトの制作のポイントは、出来るだけ画像部分を減らしてテキストで構成するのが理想です。

フォントは既にデザインされたもの

• ゴシック体

ゴシック体の使いどころ
見出し
プレゼン資料
看板・ポスター
パソコン、スマホなどのディスプレイ など

---

線の太さが同じで均一なデザインのゴシック体は主に親近感、男らしさ、安定感、カジュアル、力強いという印
象を与えますが、フォントの太さによって見る人に与える印象が変わってきます。
太めのゴシック体は安定感があり、元気や力強さを感じさせますが、逆に細くなると、洗練された印象を与えた
り、女性的な印象を与えるようになります。

• 明朝体

明朝体の使いどころ
見出し
新聞
書籍
教科書
文字数が多い文 など

繊細さや優雅な印象を与える明朝体は、和や伝統、高級といったイメージを読む人に与えます。
細めの明朝体は繊細で上品なイメージがあり女性的な印象を与え、逆に太いフォントであれば大人や固い印象を与えます。

• デザインフォント

UDフォント（ユニバーサルデザインフォント）について
フリーフォントが多い書体
誰にとっても見やすく読みやすいユニバーサルデザインフォント（UDフォント）が近年数多く開発さ
れています。読みやすいのはもちろん、遠くからでも見やすく読み間違いがないように、可読性や視
認性、判読性が高くなるようにデザインされており、様々な製品や広告などで使われています。

フリーフォントとして配布されている作品でさまざまなデザインフォントがあります。
様々なフォントがありますので探してみるのも面白いでしょう。
ただし、商用利用として規約などしっかり確認する事と企業（会社）として扱って良いかどうかの
問題もしっかりと確認をして利用してください。
フリーフォントを使うときに気をつけたいこと
・無料で使用できる範囲はフォントによって異なる
・印刷・ウェブフォント・ゲームに内包・ロゴに使用など目的によっては使えないこともある
・使用する際に著作権表示やリンクなど制作者を明記する必要があるフォントもある

• 毛筆フォント

毛筆フォントについて
Adobe Fontsについて
毛筆フォント・筆文字とは、おもに筆で書かれた日本語フォントのことを指します。
前述の楷書体、行書体、草書体、隷書体のような伝統的な筆書体フォントのほか、歌舞伎の看板や筋書に使われる勘亭流、相撲の番付等に使われる相撲文字、千社札や提灯
の文字などに使われる籠文字等々、さまざまなフォントがあります（こうした伝統的な筆書体として扱われ、「デザインフォント」には分類されないケースが多いと言えますが、筆法
や骨格を取り入れつつ、文字のかたちや画線の処理を変えたものもあり、筆書体フォントとデザインフォントを正確に分けるのは困難です）。

---