Webデザイナーの基本を完全解説｜初心者からプロになるための基礎知識

公的な職業情報から見るWebデザイナーの基本

厚生労働省の職業情報提供サイト（job tag）のWebデザイナーのページでは、この職業について次のような特徴が示されています。

表現力に加えて「インターネットの特性を生かして情報を伝える技術」が求められている点は、この記事で紹介する設計の考え方やHTML/CSSの基礎に対応しています。仕事の全体像はWebデザイナーとはどんな仕事かを解説した記事でも紹介しています。

ワイヤーフレームで骨組みを固める

ワイヤーフレームは、色や装飾を省き、情報の配置だけを線と箱で描いた設計図です。この段階で「何をどの順番で見せるか」を固めておかないと、デザインがほぼ完成してから「やっぱりメニューの位置を変えたい」といった大きな修正が起こります。特に、スクロールせずに見える最初の画面（ファーストビュー）に何を置くかは、サイトの印象を左右する重要な判断です。

デザインカンプは数値で仕様を決める

デザインカンプでは、見た目を整えるだけでなく、余白や文字サイズ、コンテンツの最大幅などを数値で決めていきます。感覚ではなく数値で管理しておくと、コーディングするときの認識のずれを防げます。

コーディングまで担当するかは職場による

デザインだけを担当し、コーディングはエンジニアに任せる職場もあれば、Webデザイナーがコーディングまで担当する職場もあります。どちらの場合も、HTMLとCSSの仕組みを理解していると、実装しやすいデザインを作れるようになります。

近接・整列・反復・対比の原則

関連する情報を近づける「近接」、要素の端をそろえる「整列」、同じ役割の要素に同じスタイルを繰り返す「反復」、重要な部分を大きさや色で目立たせる「対比」の4つです。たとえば近接を意識するだけで、見出しとその説明文がひとかたまりに見え、ユーザーは迷わず読み進められるようになります。

配色は役割を決めて使う

配色は、背景などの広い面積に使うベースカラー、サイトの印象を決めるメインカラー、ボタンなど目立たせたい部分に使うアクセントカラーと、役割を分けて考えるのが基本です。色にはそれぞれ与えやすい印象があり、たとえば青系は落ち着きや誠実さ、オレンジ系は親しみや活気を感じさせやすいとされます。「なぜこの色にしたのか」を説明できると、クライアントへの提案に説得力が生まれます。

あわせて、文字と背景の色の差にも注意が必要です。Webアクセシビリティの国際的な基準であるWCAG 2.2では、通常の文字で4.5対1以上のコントラスト比を求めています。見た目の印象だけでなく、誰にとっても読みやすい色の組み合わせかを確認しましょう。

文字は読みやすさを最優先にする

Webの本文は、16px前後の文字サイズと、文字サイズの1.5〜1.8倍程度の行間が読みやすさの一つの目安です。また、使うフォントの種類を見出し用と本文用の2種類程度に絞ると、サイト全体に統一感が出ます。いずれも絶対のルールではありませんが、迷ったときの出発点になります。

HTMLは構造、CSSは見た目を担当する

HTMLは「これは見出し」「これは段落」「これは画像」といった文書の構造を記述する言語で、CSSは色や大きさ、配置などの見た目を指定する言語です。ページ上の要素はすべて四角い箱として扱われ、その箱の内側と外側の余白で配置が決まります。この考え方を知っておくと、「このデザインはCSSで再現できるか」「動きをつけるにはJavaScriptが必要か」を判断できるようになり、エンジニアとのやり取りもスムーズになります。

レスポンシブデザインで端末ごとの表示を整える

レスポンシブデザインは、画面の幅に応じてレイアウトを切り替え、一つのページでスマートフォンにもパソコンにも対応させる手法です。パソコンで3列に並べていた要素をスマートフォンでは1列に並べ直す、といった設計をデザインの段階から考えておく必要があります。制作中は、パソコンの画面だけで判断せず、スマートフォンの画面幅での表示もこまめに確認する習慣をつけましょう。

最初の一つはFigmaがおすすめ

Figmaは、ワイヤーフレームからデザインカンプ、画面をつないだ動く試作品まで一つのツールで作れるデザインツールです。公式の料金ページでは無料のスタータープランが案内されており、学び始めの一つとして選びやすいのが特徴です。PhotoshopやIllustratorは、バナーやロゴの制作が必要になった段階で加えていけば十分です。

UIは画面上の接点の使いやすさ

UIは、ボタンや文字、アイコンなどユーザーが直接触れる部分のことです。たとえばWCAG 2.2では、操作対象の大きさについて原則として24×24 CSSピクセル以上という最低限の基準が示されています。こうした基準を知っておくと、「押しやすいボタン」を感覚ではなく根拠をもって作れます。UIとUXをさらに深めたい場合は、UI/UXデザイナーの基本の記事も参考になります。

UXはサイトを通じた体験全体

UXは、サイトを訪れてから目的を達成するまでの体験全体を指します。「探していた商品がすぐに見つかった」「入力フォームでつまずかなかった」といった体験を積み重ねることが、問い合わせや購入につながります。ページの表示速度やエラーメッセージの分かりやすさもUXの一部です。

デザインの段階でできるSEOと表示速度

SEOは、検索結果で上位に表示されやすくするための取り組みです。デザインやコーディングの段階でできることとして、見出しの階層を正しく設計する、画像のファイルサイズを軽くして表示を速くする、画像に内容を説明する代替テキストを設定する、といった基本があります。

表示の速さや安定性については、GoogleがCore Web Vitalsという指標で基準を示しています。デザインと関わりの深い内容なので、目安を知っておきましょう。

最初に優れたサイトを模写する

プロが作ったサイトを、同じように再現してみる練習です。文字サイズや余白の取り方、配色のバランスを手を動かしながら体感できます。大切なのは完璧に真似ることより、「なぜここの余白は広いのか」「なぜこの色なのか」を考えながら作ることです。この問いを繰り返すことで、ほかのデザインにも応用できる力が育ちます。

次に架空のサイトを一つ完成させる

架空のカフェや美容室などのサイトを自分で企画し、ヒアリング内容の想定からワイヤーフレーム、デザイン、コーディングまでを一通り行います。一つのサイトを最後まで作りきる経験が、仕事の流れ全体の理解につながります。完成した作品は、Webデザイナーのポートフォリオの材料として活用できます。

仕上げに第三者に見てもらいフィードバックを受ける

Webデザインの良し悪しは、自分が納得できるかではなく、他人が使いやすいと感じるかで決まります。SNSや勉強会、知人などに作品を見てもらい、「どこで迷ったか」を聞く機会を意識して作りましょう。

到達度をウェブデザイン技能検定で確かめる

基本が身についてきたら、job tagで関連資格として挙げられているウェブデザイン技能検定で到達度を確かめる方法もあります。試験を実施する特定非営利活動法人インターネットスキル認定普及協会の受検資格の案内では、3級の受検資格が「ウェブデザインの業務に従事している者、または従事しようとしている者」とされており、これから仕事にしたい人も挑戦できます。詳しくはWebデザイナーの資格の記事で紹介しています。

絵心や芸術的なセンスは必要ですか

Webデザインで求められるのは、絵を描く力より「なぜこの色なのか」「なぜこの場所に置くのか」を説明できる論理です。この記事で紹介した原則を使えば、センスに自信がない人でも、理由を説明できるデザインに近づけます。

独学で基本は身につきますか

身につけることは可能です。ただし独学では、自分のデザインが使いやすいかどうかを判断しにくいという弱点があります。第三者に見てもらう機会を意識して設けるようにしましょう。添削を受けながら学びたい場合は、Webデザインスクールの選び方も参考になります。個別のサービスを検討する段階では、WEBCOACHの評判を紹介した記事、Winスクールの評判、デジタルハリウッドSTUDIO by LIGの口コミと特徴の整理、rimomo（リモモ）の評判を読み比べ、カリキュラムやサポート内容が自分の目的に合うかを確かめてみてください。

AIの普及で仕事はなくなりませんか

画像の生成やコードの作成をAIが手伝えるようになった一方で、「誰に何を伝えるか」を整理し、デザインの理由を説明する役割は人に求められています。job tagでも、生成AIを使ったWebデザインとの競合が生じており、顧客のニーズに合った高品質なデザインがこれまで以上に求められているとされています。基本の原則を理解していれば、AIを作業を速める道具として使いこなしやすくなります。今後の見通しはWebデザイナーの将来性で解説しています。