これだけは知っておきたいWEBデザインの基礎知識

こんにちは！
デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。

見やすく情報を見つけやすいWEBデザインを作れるようになるには、WEBデザインの基礎知識を押さえましょう。
がむしゃらに作る前に、知識を持っていることで、学習や成長の速度が飛躍的に上がります！
知識を学びつつ、経験で深めていきましょう。

WEBデザインに必要な3つの知識

WEBデザインの基礎知識として知っておくべき知識は、以下の3つです。

「デザイン」と「ツールの使い方や言語の知識」「UX」の3つは、WEBデザインを学ぶ上で相互に関わり合っており、欠かせない重要な要素です。
以下から、それぞれについて詳しく解説します。

デザインの原則の知識

デザインの基本的な理論やビジュアル的な美しさを構築するために大切な要素です。
具体的には、情報の優先順位を明確にしたり、レイアウトや余白の使い方、色に関する原則やフォント選びのことを指します。

デザインの4原則

まずは4つの基本、「近接」「整列」「反復」「対比」を押さえましょう。

近接

関連する要素をグループ化し、整理する。

例えば、事例を紹介する場合に、画像とサービス内容、クライアント名の関連要素は近付けて、他の事例との余白は大きくとることで情報の関連性が伝わりやすくなります。

整列

関連する要素をルール付けして配置する。

一定のルールで揃えて配置することで、直感的に理解しやすく、視認性を上がります。

反復

同一の要素を一定のルールで繰り返す。

関連する要素で、色やフォント、レイアウトなどを統一することで、デザインに一貫性を持たせます。

対比

要素に強弱をつけます。

コントラストをつけることで、重要な情報を視覚的に明確にし、伝わるデザインになります。

カラー理論

色が持つ心理的な効果や印象を理解することで、効果的なデザインを作ることができます。
「色が与える印象」と「配色ルール」を押さえましょう。

色が与える印象の代表例

赤

活力、情熱、エネルギー、緊張感
例：セールや緊急性を訴える場面など

青

信頼、冷静、知性、安定感
例：金融やIT業界など

緑

自然、調和、成長、健康
例：環境関連、ヘルスケア、自然食品のブランドなど

黄色

明るさ、希望、幸福、注意喚起
例：楽しさを演出したい場面、若者向けのデザインなど

オレンジ

活気、親しみやすさ、陽気さ
例：エンターテイメント、スポーツ、カジュアルなブランドなど

紫

神秘、創造性、高貴、優雅
例：美容、アート、精神性を重視するデザインなど

黒

高級感、洗練、力、フォーマル
例：高級ブランド、モダンなデザインなど

白

純粋、清潔、簡素、無限
例：ミニマルデザイン、医療、クリーンな印象を与える場面など

灰色

中立、落ち着き、洗練、控えめ
例：バックグラウンドや補助色、プロフェッショナルを演出したい場面など

ピンク

愛らしさ、優しさ、女性らしさ、甘さ
例：女性向けの商品、美容関連、ロマンチックを演出したい場面など

ブランドイメージや文字と背景のコントラストを確保して可読性も意識して、色を選びましょう。

配色のルール

基本の配分は、70(ベースカラー)：25(セカンダリーカラー)：5(アクセントカラー)で配色すると美しいと言われています。
3つの色をバランスよく配置することで、色が多すぎて混乱せず、バランスと調和が保ちやすいです。

配色法には以下のようなものがあります。

トライアド配色

カラーホイール上で120度間隔に位置する3色を使います。
鮮やかでバランスの取れたデザインを作りたいときに有効です。
例：赤、青、黄色

補色配色

カラーホイール上で向かい合う2色を使う方法です。
高いコントラストを作り、目立たせたいときに使います。
例：青とオレンジ、赤と緑

類似色配色

カラーホイール上で隣り合う色を組み合わせる方法です。
柔らかく調和の取れた印象を与えたいときに有効です。
例：青、青緑、緑

モノクロ配色

一つの色（基調色）の濃淡だけを使う方法です。
シンプルで洗練されたデザインを作りたいときに適しています。
例：ライトブルーからダークブルーへのグラデーション

配色はWEBデザインの見た目や印象を大きく左右します。
ルールを理解し、ターゲットや目的に合った配色を試行錯誤し、効果的なデザインを作成しましょう。

タイポグラフィ

文字の視認性や可読性を高め、デザイン全体の調和を図る上でタイポグラフィの知識も非常に重要です。
大まかなフォント種類やフォントサイズについての基礎知識を押さえておきましょう。

WEBサイト上で使用できる文字

WEBサイト上で使用できるフォントは、以下の2種類です。

システムフォント

パソコンやスマートフォンなどにはじめからインストールされているフォント

WEBフォント

サーバー上にあるフォントデータを読み込ませて表示させるフォント

システムフォントはもともとデバイスにインストールされているもので、表示速度は速いですが、種類は限られます。
WEBフォントは料金がかかったり、フォントデータの読み込みが必要なので若干表示速度が遅くなりますが、豊富な種類からサイトに適したフォントを選ぶことができます。
Googleフォントが無料で利用でき、種類も豊富です。

以外のフォントを使用する場合は、テキストではなく画像として扱う必要があります。

フォントの組み合わせ

サイト内で使用するフォントは、2〜3種類程度に留めましょう。
見出しは明朝体、本文はゴシック体で視覚的な対比をつけるなどすると、より優先順位が分かりやすくなります。

可読性を高めるフォントの使い方

ユーザーにより見やすく、視覚的に洗練されたデザインにするためにはタイポグラフィの細やかな設定が重要です。
以下の点を意識しましょう。

フォントサイズ

PCでは本文は14～16px以上、モバイルでは16～18px以上が推奨

行間

行間はフォントサイズの 1.5倍程度が読みやすい

文字間

見出しや大文字のテキストは少し広げると読みやすい

行幅

幅が狭くても広すぎても読みにくいので、1行の文字数は50〜75文字が理想的

強調と階層を作る

見出しのスタイル

階層を明確にし、コンテンツを理解しやすくする
例：H1は最大のサイズ、H2やH3で徐々に小さくする

太字や斜体の活用

重要なポイントのみ太字を使用、多用しない
例： 商品の特徴や強調したいキーワード

文字の色

字の色で情報の優先順位をつける
例：本文は黒または濃いグレー、リンクは青など

タイポグラフィは、WEBデザインの見た目だけでなく、使いやすさや情報伝達の質にも大きく作用します。
適切なフォント選びやスタイリングを行い、ユーザーが快適に情報を読み取れるデザインを心がけましょう。

技術的な知識

デザインの見た目を形にするためのスキルや、効率的にサイトを構築・運用するための知識です。
大きく以下の3つがあります。

基本的なコーディング知識

コーディングとは、デザインをサイトの形にしていくための作業です。
WEBデザインだけするのであれば、コーディングは出来なくても問題ありません。

ただ、実際に自分がコーディング作業をしなくても、HTMLやCSSの基礎知識があればコーディングを意識したデザインができるようになります。

HTMLの最低限必要な知識

タグの使い方

h1〜h6、p、div、img、a

記述方法

見出し、段落、リスト、リンク、画像を記述できる

CSSの最低限必要な知識

基礎的なCSS

文字の色、フォント、背景、余白を調整

ボックスモデル

margin、padding、borderの理解

クラスとID

classとidでスタイリングを適用

レイアウト

flexやpositionを用いたレイアウト方法

レスポンシブデザイン

画面サイズやデバイスに応じて最適なレイアウトを提供しましょう。
デザインの段階で、どんなデバイスでも適切に表示され、ユーザーが快適に操作できるように配慮する必要があります。

以下の点を意識しましょう。

画面サイズ

スマホは幅360px〜480px、タブレットは幅768px〜1024pxが一般的です

指での操作

タッチ操作に適したボタンサイズ（推奨44px以上）や間隔を考慮する

フレキシブルレイアウト

固定幅ではなく、相対的なレイアウトを意識する
「要素が横幅100%を占める場合」と「中央寄せで最大幅を制限する場合」を区別して設計する

ビューポート

スクリーン幅にデザインが依存するときは、コンテンツが切れたり、崩れたりしない設計をする

異なるデバイス環境での、具体的な実装を意識しながらデザインを作成することで、より実現性の高いデザインが可能になります。

デザインツールの知識

実際にデザインを作成し、共有するためのツールを上手く活用出来るとクオリティーも高く、効率の良い作業が出来ます。

WEBデザインで使われるツール

ロゴ・写真加工

Photoshop・Illustrator

UIデザイン

Figma

テキストエディタ

Visual Studio Code・Dreamweaver

デザインの知識を目に見える形にするためには、ツールを使いこなす必要があります。

ユーザー体験に関する知識

デザインの中心にユーザーのニーズや行動を据え、ユーザーが使いやすいように設計しましょう。
具体的には、以下の点を注意します。

情報の構造

サイト内の情報を整理し、必要な情報を見つけやすい構造を設計する。
例：ページ構成を明確に、適切なナビゲーション、パンくずリストなど

ナビゲーション

ユーザーが迷わずに目的のページに到達できるようにする。
例：明確なメニューとリンク、視線の動きを考慮した配置など

タッチデバイス

デバイス(PC、スマートフォンなど)に応じた最適なレイアウトを提供する。
例：モバイルファーストを採用、タッチ操作が快適なボタンサイズなど

アクセシビリティ

障がいや特定の条件を持つ人でも、利用しやすいようにする。
例：色覚多様性に配慮、画像に代替テキスト設定、キーボードで操作可能など

可読性の向上

テキストが読みやすいと、ユーザーはストレスなく情報を理解できます。
例：適切なフォントサイズ、行間や文字間の設定、コントラスト比など

感情的デザイン

デザインでポジティブな感情を引き出し、愛着感を高める。
例：ユーモアや親しみやすさを感じる要素、イラストやアニメーションなど

コンテンツ設計

ユーザーにとって価値のある情報を、見やすく、わかりやすく伝える。
例：見出しや箇条書きを活用、長い文章は短い段落に分ける、行動喚起部分(お問い合わせボタンなど)を明確にするなど

ユーザーがストレスを感じず、満足度の高い体験を提供することは非常に重要です。
UXデザインは「ユーザーを理解し、ユーザー目線で考える」ことが基本です。
一人よがりにならないように、ユーザーに寄り添ったデザインを追求しましょう。

まとめ

WEBデザインの学習を始める際には、以上のようなことを意識して、まずは小規模なプロジェクトを実践すると効果的です。
知識を学びつつ、経験で深めていきましょう！