【実体験あり】WEBデザイナーが知っておきたいコーディングの基礎知識

【実体験あり】WEBデザイナーが知っておきたいコーディングの基礎知識

【実体験あり】WEBデザイナーが知っておきたいコーディングの基礎知識

WEBデザイナーの方、WEBデザイナーを目指している方の中には、

「デザインだけできればいいの？」、「コーディングはどこまで必要？」

と疑問に感じる方は多いのではないでしょうか。

結論から言うと、WEBデザイナーにもコーディングの基礎知識は必要です。
すべてを完璧に書ける必要はありませんが、理解しているかどうかで仕事の幅や評価が大きく変わります。

この記事では、WEBデザイナーが最低限知っておきたいコーディングの基礎知識を、未経験者向けにわかりやすく解説します。

なぜWEBデザイナーにコーディング知識が必要なのか

近年のWEB制作現場では、「デザインだけ」「コーディングだけ」という分業が減りつつあります。

理由として、次のような背景があります。

デザインと実装のズレを防ぐため
修正・更新をスピーディーに行うため
小規模案件では一人で兼任するケースが多い

コーディングの知識があるWEBデザイナーは、

実装を考慮したデザインができる
エンジニアとのやり取りがスムーズ
軽微な修正を自分で対応できる

といった点で、現場で重宝されやすい存在になります。

ぺれ

必ずしもコーディングができる必要はありませんが、コーディングによってどんなデザインや動きが実装できるのか？の想像ができないと、デザイン作成の際に選択肢が少なくなってしまったり、実際には実装の難しいデザインを提案してしまったり、という危険性があります。

WEBデザイナーが知っておきたいコーディングの範囲

WEBデザイナーに求められるのは、プログラマー並みの高度なスキルではありません。

基本的には、

仕組みを理解している
簡単な修正・調整ができる

このレベルを目指すのが現実的です。

HTMLの基礎知識

HTMLは、WEBページの構造を作る言語です。

WEBデザイナーが押さえておきたいポイントは、

見出し（h1〜h6）の正しい使い分け
段落・リスト・リンクの構造
画像の配置とalt属性

などです。デザインだけでなく、SEOやアクセシビリティにも関わる重要な要素なので、基本構造は必ず理解しておきたい部分です。基本的なエラーなどにも対応できるようになるため、最低限の知識を身につけておきましょう。

CSSの基礎知識

CSSは、WEBページの見た目を整える言語です。

WEBデザイナーにとって、最も重要なコーディング分野と言えます。

色・フォント・文字サイズ
余白（margin・padding）の考え方
レイアウト（Flexbox・Grid）の基礎
レスポンシブデザイン

「なぜこのデザインが崩れるのか？」、「カンプ通りに作れていないのか？」を理解できるだけでも、修正対応力が大きく変わります。

JavaScriptはどこまで必要？

JavaScriptは、WEBページに動きをつけるための言語です。

HTML、CSSと比較すると学習のコストが高く、WEBデザイナーの場合、やや難度が高いです。

基本文法を完璧に覚える必要はない
既存コードを見て何をしているか分かる

このレベルで十分なケースが多いです。具体的には、

ボタンをクリックしたときの動き
メニューの開閉
スライダーやアニメーション

など、よく使われる動きの仕組みを理解すること、どの動きがJavascriptを用いて実装されているかを理解できる程度の知識を身につけることが大切です。

ぺれ

WEBデザイナーの主な仕事にカンプ作成がありますが、現在はカンプ作成の段階でもアニメーションを想定することが多いです。どんなアニメーションが実装できるのか？の選択肢はWEBデザイナーも持っていた方が有利です。

WordPressを扱うためのコーディング知識

WEBデザイナー案件では、WordPressを扱う機会が非常に多くあります。

最低限知っておきたいのは、

HTML・CSSでの見た目調整
テーマ構造の基本的な考え方
既存テーマのカスタマイズ

です。「ゼロからテーマを作れる」必要はありませんが、修正や調整ができるだけで対応できる案件が増えます。

ぺれ

WEBデザインに関連する求人でも「Wordpress」に関する経験者を求めるものは多いです。特にWordpressテーマの簡単なカスタマイズなどはWEBデザイナーでも把握しておきたい部分です。

コーディングが苦手でもWEBデザイナーになれる？

答えは「可能」です。ただし、

完全にコーディングを避ける
仕組みを理解しない

という状態だと、案件や就職のの選択肢はかなり狭くなります。

また、WEBデザイナーとして経験を積むとWEBディレクターに近い業務も増える傾向にあります。その場合、業務全体を把握する必要があるため、よりコーディングの基礎知識は持っておくべきと言えます。デザインを活かしつつ、基礎だけでもコーディングを理解しておくことが、長くWEBデザイナーとして働くためのポイントです。