学科【オンライン】　2025.10.31

授業内容

• デザインラフとは？
• コーディングに向けての注意点
• XDの活用について
• 課題制作

習得内容

■WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング

• デザインラフとは？

コーディング（HTMLとCSS）を知らない人に見せるものWebサイトの完成見本のこと。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。
ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。
デザインラフ≒デザインカンプ≒ワイヤーフレーム、現場によって呼び方が違うので確認しながらすすめる。

■HTMLとCSSでコーディングした時と同じ見た目のモノを作成しよう。
実際のWebサイトにするのには、HTMLとCSSでコーディングをする必要があるが、クライアント（発注者）さまに、こんな感じのデザインにしましょうか？ こんな感じではいかがですか？ という感じで、完成のイメージを画像で作成するのが、「デザインラフ」の役割。
逆に「コーディング（HTML・CSSにする）」については、デザインラフをクライアント（発注者）さまに見せて、OKを頂いたら行う作業になる。
要するに完成イメージをしっかりとクライアント（発注者）さまと共有して、 「コーディング（HTML・CSSにする）」 は、「デザインラフ」の見た目をそのまま形にする作業になる。

■ワンポイントアドバイス
制作の順番はデザインの基本通り
やるべきことは、バナーの時と同じ。まずは「レイアウト」をしっかりと考える。ただしこれはワイヤーフレームの段階でしっかりと行っていれば時短になる。次に「文字」をどうするか？を考えよう。
Webサイトなので、何処を画像にするのか？どこをテキストにするのか？をしっかりと考えてデザインをまとめよう。最後に「配色」。色をどう使うかで、大きくイメージが変わってしまうのでしっかりと考えてまとめていこう。
制作の順番はデザインの基本通り
１．最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
2．次に「文字」に注目
「読みやすさ」を徹底的に意識
３．最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか

■レイアウトデザインのおさらい

▢レイアウトの目的は情報の明確化
作品を制作するには、文字や文章、図形や写真などの要素を整理し、レイアウトしなければならない。情報の整理とは、情報の構造や情報同士の関係を明確にすること。盛り込みたい要素（情報）について、各要素の従属関係（親子にあたる関係）・並列関係（対等な関係）、さらには情報の優先度や因果関係なども明確にすることで、情報が「伝わりやすく」なる。これがレイアウトの目的。

▢レイアウトの５つの基本原則
情報の構造を明確にするには、「余白をとる」「揃える」「グループ化する」「強弱をつける」「繰り返す」という法則を守る必要がある。
まず全体の圧迫感をなくすために、紙面に「余白」をとる。また従属関係・並列関係を明確化するために、各要素を「揃え、グループ化し、強弱をつける」。強弱をつけることで、優先度も明示させる。そして、一定のルールの下で、広告全体を通じて５つの法則を守り続け「繰り返す」ことで、従属関係・並列関係がより明確になる。一見手間のかかる作業に思えるかもしれないが、ルールを一度覚えれば、時間の短縮につながる。

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

■注意点①
以下の順番は制作していくにあたって大事になる。

1.　画面サイズはどうする？
昨今のWebサイトの横幅はニュートラルである。様々なデバイス（スマホ・タブレット）に対応する必要があるが、まずはPCを基準に考えてみよう。
出荷台数、また基準とされるPCのモニターサイズの多くは「１３６６ｐｘ」が現在は多い。そこで、特に理由がなければ「１２８０ｐｘ」を画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難。
ちなみに、現時点でのＥＣサイトの楽天市場やヤフーショッピング店の推奨サイズが「９６０ｐｘ～９８０ｐｘ」になる。
画面サイズを決めるときの参考として画面シェア率を参考にする。画面シェア率はサイトで「画面シェア率」で検索すると出てくるのでそれを参考にする。実際の仕事ではクライアントや勤務先の企業からの指定、指示で決められていることが多い。

2.　見出し（ｈ１～ｈ６）をどうするのかを意識する
Webページのデザインにおいて重要なのがHTMLの文法。見出し（ｈ１～ｈ６）の使い方とルールをしっかり確認しておこう。
まずページの最初にｈ１（ページ全体の見出し）が必要になる。
ＨＴＭＬ５の文法上では、セクショニングタグ毎に複数ｈ１を設けることが出来るが、１ページにｈ１は一つがＳＥＯ的にも解り易い。それに続く、ｈ２やｈ３の構成も大見出し（ｈ１）に対して小見出し（ｈ２以下）という順序と内容をしっかりと意識して作成してみよう。

3.　見出し（h1～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成
見出し（ｈ１～ｈ６）があったら必ず、その内容が必要になる。見出しの次に段落（ｐ）やリスト（ul li ol li）などの内容を入れていこう。
制作のコツとして、文法構造に不安な時はタグチェッカーなどを利用してみるのが一番早い。
検索して読んだり、書籍を調べるのも大事ですが、作ってみるのが一番手っ取り早いので、効率よく進めてみよう。ちなみに、悩んだらpタグ（段落）として考えておけば間違いは無い。

4.　画像（img）リンク（a）や強調（strong,em）などの構成
それぞれの見出し（ｈ１～ｈ６）、段落（ｐ）やリスト（ul li ol li）の入れ子（インライン要素）として、画像（img）やリンク（a）、強調（strong,em）などのタグをイメージしてデザインを整えておこう。
入れ子構造（インライン要素）の文法については、HTML５では少しややこしいところがあるが、考え方として上記の（ｈ１～ｈ６）（ｐ）やリスト（ul li ol li）の内側に、画像（img）やリンク（a）、強調（strong,em）などをマークアップするものと考えておくと間違いは無い。

■注意点②

1.　どこを画像にするのかテキストにするのか？
Webページのデザインから、コーディングで最も悩まされるのが、どこを画像にするのか？どこをテキストにするのか？である。
画像よりテキストの方がSEO対策やユーザビリティ・アクセシビリティとして、有効。
CSSで実現可能なデザインであれば、積極的にCSSで表現してみよう。
ただし、デザイン重視で表現しなければならない場合もある。そんな時は画像にしても間違いではない。

2.　画像文字にするのかテキストにするのか？
例えば、ロゴの部分の文字はデバイス環境によってフォントが変化しては都合が悪い場合がある。そんな時には、画像文字としてデザインすると良い。

3.　HTMLなら「img」CSSなら「background」
コーディング（HTML・CSS）を意識して考えるときの最も重要な注意点として「img」はHTMLなので、文法として意味が必要になる。逆に「background」ならCSSで文法としての意味は必要無いと考える。
何処を、「img」にするのか、何処を「background」にするのかをよく考えて「デザインラフ」を作成してみよう。

4.　テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる。
画像のデータ量は重たいのでSEO（検索エンジン上位表示）の対策として、ページが表示されにくいのは避けたい。検索エンジンで上位表示されるには色々とチェックポイントが設けられているが、その一つとしてWebページの表示に時間がかからないことが上げられている。消費者がGoogleやYahooで検索した時に一番上に来た方がクリックしていただける回数が増える。
実際に、サイトの表示スピードは検索順位への評価にも影響するとgoogleも正式に公表しています。
Webサイトの制作のポイントは、出来るだけ画像部分を減らしてテキストで構成するのが理想。

■注意点③
クライアント（発注者）さまへは複数提案を出して選択肢を用意しよう。
「デザインラフ」は必ず２提案以上作るのが制作のポイント。そもそもクライアント（発注者）さまの頭の中のイメージを具現化するお仕事。１つのデザインでストライクを取るのは至難の技。最初はまず提案。複数の提案を用意して目的に寄せていく、理想に近づけるのが、デザイナーの役割。バナーなどの作品と同じように複数の提案を「レイアウト」「文字」「配色」を変えて作成してみよう。

1.　配色はデザインラフですべて決定しよう。
デザインラフでは、最終的なデザインの仕上がりをクライアント（発注者）さまと共有するので、コーディングの作業時に色を考えることは無い。デザインラフの段階で、配色は全て決定し、万が一コーディングの時に行うのは応急処置程度の話だと思って準備をしよう。

2.　16進数のカラーの表記なのかRGB表記なのかを統一しておこう。
1にあるように、コーディングで色を考えることはない。また正確な16進数のカラー「例： #ｆｆ００００」かＲＧＢ「例： rgb(255,0,0) 」のコードを控えておこう。コーディングの時は、出来上がったデザインから「スポイトツール」で正確なカラーコードを使う。16進数のカラーがおススメ。

3.　透過表現は、RGBAか、PNG画像の利用か決定しておこう。
透過表現は、CSSで「 例：rgba(255,0,0,0.7) 」という記載方法が使える。また画像そのものを透過表現する方法として、PNG画像を利用する方法がある。どちらをどの様に使うかもしっかりとイメージして準備をしておこう。

■注意点④
つまらないデザインにならないように注意しよう！！
魅力的なデザインにするには、やっぱり「お洒落な画像文字」や「美しい写真」や「かわいいイラスト」等々が必要。サイトの構成・特徴を理解し、どこで使うのかをしっかり考えてデザインしてみよう。
※ECサイト（特に楽天市場）などは、システムのルール上画像ばかりになる。媒体や目的によっては、画像で構成する事もある。

1.　静止画像なので、補足事項は別途説明しておこう。
例えばスクロールしても固定位置にいるナビゲーションやボタン、背景などは1枚の画像で表現が難しいです。
そんなデザインをクライアント（発注者）さまに提出する場合は、言葉で補足しておこう。最近ではAdobe XDで表現する方法などもあるので、大事なのはクライアント（発注者）さまと、イメージを共有する事になるから上手に伝えられるように工夫をしてみよう。

2.　実はセクショニングは後回しでも良い？
デザインラフでセクションを意味するタグ（ header,nav,maiｎ,section,footerなど）を考えるのは、後回しでも大丈夫かもしれない。
当然意識しておくのはベストだが、これらのタグはHTML５からの登場で、それ以前は全て「div」だった。デザインラフの段階では「囲っている箱」として意識をしていれば、「デザインラフ」は成立する。コーディングのマークアップ作業の時に考えても遅くはない。

3.　リテイク（修正・出戻り・やり直し）に強いデータにしておこう。
バナーやロゴ・ピクトグラム、名刺やチラシなどと同じく、クライアント（発注者）さまの思いと異なることは多々ある。絶対にそうなると覚悟しておこう。
「かっこいい」「かわいい」など、素敵なデザインが出来るようになるのも大切ですが、実務では「リテイクに強い」事も重要なデザイナーの技術として求められる。「スマートオブジェクト化」し非破壊データの利用、アウトライン化のタイミングなどしっかりと作成をしながら復習しておこう。

■レイアウト表現・ワンポイントテクニック
「CSS　見出し　デザイン」で検索しても色々なものがある。CSSで表現できるのであればそれを使用した方が、Webページの表示速度は速くできる。

▢フォントの歴史と選び方と考え方
フォントは既にデザインされたもの
フォント（文字）はデザインが既に出来ている。デザインを考えるとき、方向性や目的に合わせてフォントを選んでいこう。注意点としては、闇雲に様々なフォントを使ってしまってデザインの交通渋滞になってしまわないように、「何処で何をどういう風に使う。」を整理していこう。フォントは大きく分けて4種類に分類できる。

---

---

---

この4つのフォントは覚えておこう。
▲オールドタイプについて
フォント選びのポイントとして、Webサイトの歴史と印刷業界の歴史の長さの違いを意識しておくと良い。古くから良いと言われているフォント（オールドタイプ）のフォントは、好まれるし、使い勝手も良く実績豊富だが、Webに対応していない場合、特にWebフォントに対応していなければ、画像文字にしなければならない。Webサイト時代のフォントでサイト構築を考える必要性も意識しておこう。
▲バンドルフォントについて
バンドルフォント（標準フォント）とは、Webサイトの閲覧者のパソコンやスマートフォンにインストールされているフォント。 OS標準フォントやバンドルフォントなどとも呼ばれる。MacとWindowsでインストールされているフォントは違う。
CSSによって標準フォントを指定することで、どんな環境でもある程度統一された表示が担保されるため、Webサイトの見栄えを安定させることができる。デバイスの進化も意識して下記にあるWebフォントを使わない（通信環境依存対策として）場合というのも視野に入れておこう。
▲プロポーショナルフォントについて
プロポーショナルフォントとは、フォント（書体）の分類の一つで、文字ごとに適した幅が設定されたもの。各文字の表示枠が文字の実際の幅に合わせて調整され、例えば「i」は狭く、「W」は広く表示される。また同じフォントでも太さやゴシック、明朝などがあるので、同じルールでデザインされたフォントで様々な表現が可能になる。積極的に利用してみよう。ちなみに、マイクロソフトが開発したメイリオは、CSSで太字と斜体が出来ない。文字を読み難くなる為にそう設定されている。
▲Webフォントについて
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術。
これまでのWebサイトでは、制作サイドであらかじめ要素ごとに使用するフォントを指定しておき、Webブラウザが各端末にインストールされているフォントを用いて文字を表示させる方法が主流だった。しかし、この方法では、指定したフォントが閲覧者のPCにインストールされていないと、別のフォントが代用されてしまい、作成者が意図しない見え方になってしまう問題があった。そこで有効な手段として注目を集めているのがWebフォントになる。ただし、昨今ではデバイスに上記にあるバンドルフォントが進化して標準搭載されているので、通信環境に左右される事を考えて使いどころの判断を考えるのもポイント。

■「配色」には必ず意味と目的を
配色には意味が必要になる。適当に配色を決めることなどない。例えば下記の「赤・青・黄」の3色は生活の中で良くある色だが「赤は止まれ」「青は進め」「黄色は注意」の信号機。
配色デザインを考えるとき必ず意味と目的を考えて配色を考えていこう。

▢配色テクニック① イメージカラーを使う
Webページのイメージを大きく左右するメインカラーは一番初めに決める。
メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、明度を低くした色が使用しやすいとされている。また、サイトに使うロゴのカラーをメインカラーに使用しているサイトも多く見かける。
実際、最初の制作はロゴの考案から進めていくことが多い。既にある場合は、そのイメージと配色を上手く活用し
ていこう。
▢配色テクニック② 真っ黒（#000）を避けるか否か？
グラフィックデザインの世界で使ってはいけない色の常識といわれているのが「真っ黒#000(Black)」。理由を一言で表すと純黒は目にキツイ、目が疲れるから。そもそも日常生活のなかでも、“黒い”と思っているものをよく見てみると、意外と違う色が入ってる。人工物だと黒いものありますが、それも理論上の黒であって、目で見るときには光源により若干の色味がついていることが多い。ただし、Webページで、よく「真っ黒#000(Black)」を見かける。それは、昨今の各デバイスのモニターは、データ（CSSコード）では「真っ黒#000(Black)」でも、実際にモニターで見ているものは、目にやさしくなるように微調整されている場合がある。利用シーンや内容に合わせて使い方を考えてみよう。
▢配色テクニック③ 色を使わない
「白」と「黒」という色は「無彩色」と呼ばれている。 「彩りが無い色」、つまり色味を感じない、鮮やかさが無い色になる。 白と黒の中間色となる「灰色」もこれに該当する。 明度(色の明るさ)の話を含めると、「白」が「最も明るい色」、「黒」が「最も暗い色」となる。
ワイヤーフレームやデザインカンプの作成などは白黒で作成することにより、配色イメージに引っ張られずレイアウトデザインを考えることに集中できる。最終的なデザインでもそれぞれの配色の脇役となる存在として使うこと
も可能。「白」「黒」「灰」の「無彩色」を上手く活用するのも試してみよう。
▢配色テクニック④ 美しい配色バランス（3色がおすすめ）
配色の効果は、色相、明度、彩度、分量（面積）、配置によって変わる。
これらの要素をうまくコントロールしながら組み合わせることで、情報を目立たせたり、イメージを表現したり、雰囲気のある空間を演出したりと目的に合わせた効果を発揮することができる。
一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされている。

▢色の黄金比率 70：25：5
絶対的にこの比率にする必要はないし、だいたいこのぐらいかな？でもしっくりくることはある。
また2色や4色の方が目的に適している場合もある。
ただ実際に配色をして「違和感」や「目的とは違う印象」になった場合には、ぜひ参考にしてみよう。

▲ベースカラー
主に背景として使う色で、大きな面積を占める。文章の可読性を担保して、余白にも使いメインカラーとアクセントカラーを引き立てる。
▲メインカラー（サブカラー）
サイト内で２番目に広い面積を占める色。サイトのトンマナを決め、ユーザーへの印象を大きく左右するカラー。
※トンマナとはトーン（tone）＆マナー（manner）の略称。
▲アクセントカラー
強調したい箇所に使うカラーで、ページ内のメリハリをつける。

■悩んだらデザインの基本から改めて見直そう
制作のコツは、最初は癖の無いフォントと色で「①レイアウト」に集中し作成を進めよう。
ある程度形になったら、改めて「①レイアウト」を見直していこう。しっかりと違和感を消せるように調整が出来たら、次に「②フォント」を変えてみよう。そして最後に「③カラー」。
それでも、違和感や目的との違いを感じたら、改めて「①レイアウト」から見直して、「②フォント」と「③カラー」を見ていこう。

■Webサイトについて
LP（ランディングページ）とWebサイトの一番の違いは、単一ページなのか？複数ページなのか？である。
印刷物で言えば、チラシなのか？パンフレットなのか？の違い。
複数ページの作品となる為、より複雑なストーリーを考える必要があるが、考え方は同じ。まずはしっかりとLP（ランディングページ）を作成して、次のステップとしてWebサイトにチャレンジしてみよう。

▢Webサイトで必要なもの① サイトマップを考える
Webサイトになれば複数ページにわたるものになる。まず制作前に「サイトマップ」を考えておこう。「トップページ」「会社概要」「お問合せ」「アクセス」など複数ページでのストーリーを考える必要があるので、まずは「サイトマップ」を用意してみよう。
▢Webサイトで必要なもの② グローバルナビを考える
複数ページという事は、それぞれのページに「リンク（a）」が必要になる。そこでグローバルナビゲーションという存在が重要になる。ちなみに、昨今ではハンバーガーメニュー（正式名称はナビゲーションドロワー）などが有効。CSS3でも実装出来るが「Javascript（jQuery）」を利用したものも多いので、どんなデザインがあるのかなど下調べなどしておくと良い。グローバルナビを適当にやると売り上げが落ちる。
▢Webサイトで必要なもの③ 新着情報等の日々の情報提供のコンテンツを考える
LP（ランディングページ）でも使う場合はあるが、Webサイトでよく見かける「新着情報」などというコンテンツを利用する事がある。これは、そのWebサイトの運営として、ユーザーに対して、常に新しい情報提供をお届けする為のコンテンツ。実装するためにSNSのタイムラインを埋め込んだり、Wordpressを利用し簡易的に更新出来るように、またクライアント（発注者）さま側で、運用できるようにする事も多い。
▢Webサイトで必要なもの番外編 スマートフォン対策を考える
PC用のサイトが出来たら、次のステップとして「マルチデバイス対応（スマホ・タブレットへの対応）」を
考えるのも大切になる。こちらもどんなデザインになるのかなど下調べなどしておくと良い。