- Webデザインの基礎知識を知りたい
- Webデザインに興味があるので、入門知識を知っておきたい
この記事はこれからWebデザインを勉強したい方や、Web世界に興味のある方向け。
この記事でわかること
- Webサイト全体に関わる基礎知識
- Webサイト完成までのワークフロー
- Webページ内で使われるデザインパーツ
- Webサイトの色彩、配色の基礎知識
本記事を書いている私は、2021年6月からWebデザイン職業訓練校に6ヶ月通い、修了しました。
本記事では、Webデザイン基礎知識からWeb構成やワークフロー、画像、色彩知識などをまとめました。
職業訓練13〜14日目に学んだWebデザイン入門知識を「Webデザイン良質見本帳」を参考にアウトプットしました。
パソコン基礎知識については、職業訓練2日目に自己紹介はなく他己紹介【パソコン基本知識を学ぶ】でまとめています。
Contents
【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】
Webデザインは「印象」と「機能」からできています。
Webデザインの基礎知識
デザインとは？
スティーブ・ジョブズは「デザインとは単にどのように見えるか、どのように感じるかではない。どう機能するかだ」といいます。
デザインとは以下です。
- 客観的
- 実用的なもの
- 人に情報や目的を伝える
アートとは以下です。
- 主観的
- 自己表現
- 万人に理解されなくても成立
印象（見た目）×機能（情報）＝Webデザイン（トレンド）
Webデザイナーの役割
クライアント＝伝えたいことがある人（ゴールは？）
↓
Webデザイナー＝情報の整理・魅力的に見せる・使いやすくする
↓
ターゲットユーザー＝伝えたい人（男女、年齢、BtoB、BtoC？）
紙デザインとWebデザインの違い
紙デザインは以下です。
- 決められた紙サイズでレイアウト
- 色はCMYK（シアン、マゼンタ、イエロー、キープレート）
- 距離単位mm／文字単位 pt、級
- タイポグラフィ、写真、配色、素材を組み合わせる
- 納品したら修正不可
Webデザインとは以下です。
- PC、スマホなどさまざまな媒体、見え方変化
- 色はRGB（red、green、blue）256の3乗
- 距離単位 px／文字単位px,em,%,rem,vw,vh
- タイポグラフィ、写真、配色、素材、プログラムを組み合わせる
- 納品してから育てるので運用を見越したデザイン必須
Webデザインが上達するコツ
- 参考サイトをたくさん見る
- Webデザインのトレンドを知る
- 参考サイトの機能、印象を考える
- 良質なデザインサイトを再現してみる
- デザイン制作ソフトの機能を使いこなす
- タイポグラフィ、配色、レイアウトを学ぶ
- 感覚で作らない、良いものをひたすらパクる
究極は良いものをパクることを繰り返す。
Webページの構成とワークフロー
Webページの構成
- HTML：テキストにリンクを貼ったり、画像、動画、音声を埋め込める、SEO対策にもなる
- CSS、JavaScript：レイアウト調整、動きを調整する
- Illustrator：印刷のソフト、CMYKを無理にドットで作っている感じ（以前はWebとの相性はそんなに良くないが今は使える）
- Photoshop：Webサイトとの相性が良い（写真はpxの集まりだから）
- プロトタイプWebデザインXDやmacのスケッチ：パワポみたいに簡単に作れるグラフィックソフト
ワークフロー
受注
↓
ヒアリング
↓
調査分析
↓
サイト設計
↓
ワイヤーフレーム作成
↓
デザイン
↓
コーディング
↓
プログラミング・CMS実装
↓
テストアップ
↓
納品
↓
運用
↓
改修
クライアントが目指すデザインをヒアリング時にくみ取り、リリース後の運用面も考えたサイト設計が重要です。
クライアントと会わないこともあるようです。
Webディレクターの仕事は、上流工程です（人間力が必要）。
Webページに入るデザインパーツ
Webページの基本的な構造
トップページの構成例です。
- ヘッダー
- グローバルナビゲーション
- メインカラム
- フッター
下層ページの構成例です。
- グローバルナビゲーション
- メインカラム
- サイドカラム
- フッター
レイアウトの4つの法則（4つの基本原則）
- 近接
- 整列
- 反復
- コントラスト（対比、強弱）
人の視線の流れ
- Z型の法則：初めてアクセスしたサイトで全体を見るとき
- F型の法則：具体的な情報を得るために読むとき
この流れに沿って訴求したい要素を配置すると、ユーザーに効果的に掲載内容を伝えられます。
Webブラウザとはウェブサイトを閲覧する際に使用するソフトウェア。
Google Chrome（世界で50%のシェア）やEdgeが多い。
Webデザインは複数ブラウザでのチェックが大事。
Fire foxは拡張機能が多いので開発者に人気があったが、アップデートが盛んで、拡張機能をつくる開発者もついていけなくなりChromeに流れた背景がある。
Webサイトで扱う画像
Webサイトで扱う画像の形式
- ビットマップデータ形式：グラデーションがきれい。ピクセルの集合（JPEG、GIF、PNG）
- ベクターデータ形式：たとえるならプログラム。点の座標を結ぶ線などの数式データで書かれている。拡大しても縮小しても見た目が綺麗。ロゴマークやアイコンなど。
✔︎ ビットマップデータ形式の画像3種類
【JPEG】Joint Photographic Experts Group
色数の多い写真に最適。
メリット →
- PNGより軽い
- 圧縮率を指定可
画像サイズを小さくできる
デメリット →
- 上書き保存すると画質が落ちる
- 画質を一度下げると元に戻せない
- イラストなど色のはっきりした画像は、ぼやけることがある
【GIF】Graphics Interchange Format
ロゴ、アイコン、図形、アニメーションをさせたい画像に最適。
PNG画像が普及する前に使われていた。
メリット →
- 透過が可
- サイズが軽い
- アニメーション機能がある
デメリット →
- 256色まで
- 高精細ディスプレイで劣化しやすい
【PNG】Portable Network Graphics
色数の多い写真や、透過させたい画像に最適。
メリット →
- 透過が可
- 画質を保ったまま保存できる
- 256色のPNG-8と、フルカラーのPNG-24がある
デメリット →
- JPEGより重い
✔︎ ベクターデータ形式
【SVG】
ロゴ、アイコン、図形、アニメーションをさせたい画像に最適。
メリット →
- アニメーション設定
- 拡大、縮小してもぼやけない
- 高精細ディスプレイ対応向き
デメリット →
- 写真やイラストには適さない
- 複雑な形状だとサイズが重くなる
解像度とカラーモード
解像度とは「1インチあたりに入っている点の密度」です（pxの大きさ）。
ウェブサイト用の画像は解像度72dpiで、カラーモードはRGBカラー。
印刷用の解像度は300dpi以上で、カラーモードはCMYKカラー、グレースケール、モノクロ2階調のいずれか。
印刷しないならなんでもOK。
なぜ72dpiという中途半端な数字なのか？
→ 10数年前のmacが72dpiで、そこからの慣習やなんとなくの流れ。
dpi（ディーピーアイ、DPIとも表記）とは、dots per inchの略で、ドット密度の単位である。
1インチ（1平方インチではない）の幅の中にどれだけのドットを表現できるかを表す。
プリントサイズと対にすることでコンピュータ上で用いる画像データの精度を表す単位としても用いられる。
モニターサイズ
日本国内のモニターシェアの統計で、1番多いのが「1920px × 1080px」、HDサイズの「1366px × 768px」と続いています。
フルサイズで表示させたい画像は最大1366px以上で切り出せば、多くの環境できれいに表示できます。
Webデザインとタイポグラフィ
美しく読みやすいサイトを作るには、コンセプトに適した書体を選択したり文字サイズや行間、太さを変化させてユーザにわかりやすく情報を伝えること。
タイポグラフィについては「Webデザイナーなら知っておきたいWebタイポグラフィの基本」にまとまっています。
主なフォント種類
- 和文：行書体 明朝体 ゴシック体 手書き
- 欧文：スクリプト体 セリフ体 サンセリフ体 手書き
フォントの印象
- 行書体：年配、改まった
- 明朝体、セリフ体：女性的、繊細
- ゴシック体、サンセリフ体：男性的、力強い（デメリットは野暮ったさ）
- 手書き：若い、親しみ
- スクリプト体：エレガント
- 手書き：若い、親しみ
行間を調整して読みやすく
字サイズやフォントで左右されますが、日本語だと150〜200%程度空けると読みやすいと言われています。
- 150%：line-height 1.5
- 200%：line-height 2
アクセシビリティーのガイドラインでは1行内の文字は全国の場合は40字以内を推奨されています。
コントラスト
フォントサイズにメリハリをつけて文章にコントラストを作ります。
ユーザは斜め読みや飛ばし読みをするから、見出しだけで内容がわかるようにします。
見出しは2倍以上のサイズを設定し、文字の太さでも差別化するとわかりやすくなります。
色彩の基礎知識
光の3原色（RGB＝加法混色）
- red
- blue
- green
色の混色につれて明るくなり、すべて重なると白色です。
CSSで色を設定する場合は、以下です。
- 16進数で赤は「#ff0000」
- RGBで赤は「255、0、0、0.5」（最後の0.5は透明度）
色料の3原色（CMYK＝減法混色）
- C：シアン
- M：マゼンダ
- Y：イエロー
印刷などで使う色の混色が「色料の3原色」です。
色を重ねると濃くなっていきます。
黒を作るためにKを追加してCMYKと表します。
※どこで出力させるかで、使うものが変わる。
- モニター：RGB
- 家庭用の印刷：RGBが多いはず
- 印刷所：CMYKが多いはず
ポートフォリオは「Webサイトと印刷物」の2種類あるのが良い。
ハローワークに作品を送ったり、面接に使ったりできるから。
作品がないと面接にすら行けない。
色の3属性とトーン
- 色相：色の種類
- 明度：明るさの度合い
- 彩度：色の鮮やかさの度合い
「無彩色」とは、色みのない白、灰色、黒。
「有彩色」とは、赤、青、緑などの色みある色。
「トーン」とは、明度と彩度を組み合わせた色の概念。
トーンの名前は、以下です。
- p：ペール（薄い、可愛い、女性的）
- lt：ライト（浅い、子どもっぽい、爽やかな）
- b：ブライト（明るい、健康的な、陽気な）
- ltg：ライトグレイッシュ（落ち着いた、おとなしい、渋い）
- sf：ソフト（柔らかな、穏やかな、ぼんやりした）
- s：ストロング（強い、くどい、動的な）
- v：ビビッド（さえた、鮮やかな、派手な）
- g：グレイッシュ（濁った、灰みの、地味な）
- d：ダル（にぶい、くすんだ、中間色的）
- dp：ディープ（濃い、深い、伝統的な）
- dkg：ダークグレイッシュ（男性的、暗い灰みの重い）
- dk：ダーク（暗い、大人っぽい、円熟した）
Webセーフカラー
Webセーフカラーは216色あり、どのモニターで見ても印象が変わりにくい色で構成。
色覚異常の人は男性で20人に1人、女性で500人に1人の割合。
色覚異常でもWebデザイナーにはなれる。
色の持つイメージまとめ
✔︎ 赤：red
- ポジティブ：愛 興奮 生命 活動 情熱 衝動 積極的
- ネガティブ：危険破壊怒り争い
- 適したサイト：飲食、キャペーン
✔︎ 黄：yellow
- ポジティブ：明るい、楽しい、活発、好奇心、向上心、幸福、躍動、軽快、陽気
- ネガティブ：臆病、裏切り、危険、注意、幼さ
- 適したサイト：食品、スポーツ
✔︎ 桃：pink
- ポジティブ：かわいい、やさしい、甘い、若い、幸せ、ロマンチック、ロマンス、女らしい、優美
- ネガティブ：幼稚、繊細、弱い、豚
- 適したサイト：ブライダル、女性向けのサイト
✔︎ 橙：orange
- ポジティブ：にぎやか、陽気、家庭、楽しさ、自由、暖かい、好奇心、親しみ
- ネガティブ：わがまま、騒々しい、軽薄
- 適したサイト：コミュニティ、キッズ、飲食
✔︎ 紫：purple
- ポジティブ：エキゾチック、感性、高級、優雅、上品、神秘
- ネガティブ：不安、嫉妬、孤独
- 適したサイト：ファッション、ジュエリー、占い
✔︎ 茶：brown
- ポジティブ：温和、安定、伝統、堅実、安心、穏やか、自然、渋い
- ネガティブ：地味、頑固、汚い
- 適したサイト：ホテル、旅館、インテリア、クラシック、レトロ
✔︎ 青：blue
- ポジティブ：爽やか、安全、冷静、知性、誠実、清潔、若い、開放感、夏
- ネガティブ：さみしさ、冷たい、悲しみ、臆病
- 適したサイト：コーポレート、医療、化学
✔︎ 白：white
- ポジティブ：清潔、無垢、潔さ、美しさ、純粋、神聖
- ネガティブ：空虚、殺風景、冷たい
- 適したサイト：医療、ニュース、EC、美容、コーポレーション
✔︎ 緑：green
- ポジティブ：穏やかさ、リラックス、エコ、調和、自然、平和、若さ、バランス、安全、健康
- ネガティブ：保守的、未熟
- 適したサイト：アウトドア、飲食
✔︎ 灰：gray
- ポジティブ：実用、穏やか、控えめ、調和、落ち着き、クール、上品
- ネガティブ：陰気、曖昧、疑惑、不透明、寂しさ、地味、無機質
- 適したサイト：工業、家電、ファッション
✔︎ 黄緑：yellow green
- ポジティブ：フレッシュ、ナチュラル、若々しい、新しい
- ネガティブ：未熟、子どもっぽい
- 適したサイト：新生活、新年度、先進的なサイト
✔︎ 黒：black
- ポジティブ：高級、エレガント、洗練、クール、威厳
- ネガティブ：暗闇・死・恐怖・悪・威厳、不安、絶望
- 適したサイト：車、ジュエリー、ファッション
配色の基礎知識
色相環を使えば調和のとれた組み合わせになる
- 向かい合う2色
- 等間隔に三角形を形成する3色
- 長方形を形成する4色
- 擬似色：色相環上で近い位置にある色同士（自然に調和しやすい）
- 補色：色相環上で正反対にある色同士
- 対照色：補色と隣り合わせか近い位置にある色
- 暖色：暖かいのある色。興奮色。進出色
- 寒色：寒い感じを与える色。沈静色。収縮色、後退色
- 中性色：暖色、寒色のどちらにも属さない中間色
メインカラーを決めるのが大事です。
Hue360サイトを活用して、色を決めるのもあり。
参考サイト一覧
参考サイトの特徴は、下記記事で解説しています。
»【初心者向け11選＋α】Webデザインギャラリー・参考サイトまとめ
まとめ：運用・管理も視野に入れて、Webデザイン基礎知識を学ぼう
Webサイト作成は簡単
先生の言葉で「ホームページを作るのは簡単。作ってからがスタート」が印象的でした。
「ホームページを作るのが難しい」と思っていたからです。
HTML、CSSを学び始めたばかりなので、難しく感じるのはしようがないです。
ただWebサイトは作ってからがスタートなのは想定外でした。
Webサイト作成は儲かるが、定期収入になるのは運用・管理
ただ運用・管理を見越したほうが儲かるのです。
毎月の定期収入になるからです。
旅行会社でいうところの企業の出張案件の獲得です。
旅行会社は、企業と出張契約を結べれば定期的な収入につながります。
団体旅行は金額大きいですが、失注もあり不安定です。
旅行会社にたとえると以下のイメージです。
- 企業の出張案件 ⇄ Webサイトの運用
- 企業の団体旅行 ⇄ Webサイトの制作
Webサイト運用だけの会社も、Webサイト制作だけの会社もある
就職してもWebサイトの運用しかやらない企業もあるそうです。
逆に「Webサイト制作」しかやらない会社もあるとか。
Web制作だけの会社は鬼のように忙しいとのこと。
「Webサイト制作しかできないフリーランスは忙しいのでは？」と疑問が浮かびました。
企業がどんな比重で仕事をしているのかを知ることが大事です。
企業選びの基準になるからです。
Web制作会社に入社しても、まずはサイト更新からスタートです。
「1年で1つサイトをつくる機会があるなら多い」と知り、衝撃でした。
これからどの道に進みたいのか、自分でもわからなくなってきました。
以上です。
P.S.ただ「勉強だけはしておこう」と心に決めました。
関連記事職業訓練校のWebデザイン授業についていけない【3つの解決策】
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由