Web・UI/UXデザイナーはコーディングができるべき？│にっこりWebデザイン

※記事内に商品プロモーションが含まれる場合があります

こんな方に向けて書いたよ

未経験からWebデザイナー、UI/UXデザイナーを目指しています
コーディングって実際どれくらい勉強したらいいの？
現場でコーディングする場面ってどれくらいあるの？

この記事の内容だよ

未経験からWebデザイナー、UI/UXデザイナーを目指すなら、とりあえずWebサイトを作れるくらいのコーディングスキルは必要だよ
実際に現場でどれくらいコーディングするかは、会社によりけりなところがあるよ

詳しく見ていきましょう。

はじめに
そもそもコーディングとは？
Webデザイナー、UI/UXデザイナーにコーディングスキルは必要？
- 結論、「必要！」
- Webデザイナー、UI/UXデザイナーがコーディングを身につけるメリット
どこまでのスキルが必要なの？
コーディングの勉強方法
まとめ

はじめに

ぼく

先生、コーディングの勉強しすぎて死にそうです。ゴフッ

だ、大丈夫か…？

先生

ぼく

「未経験からWebデザイナーやUI/UXデザイナーに転職するならHTMLとCSSのコーディングスキルは必須！」ってよく言いますけど、実際会社に入ったらコーディングってあんまりやらないんじゃないんですか？どれくらいまで勉強しておいたらいいものなんです？

まあ確かに、会社によってはほとんどコーディングをやらないところもあるぞ。しかし結果的にHTMLとCSSのスキルはあった方がいろいろと有利なんじゃ。少なくとも自分でWebサイトを作れるくらいのスキルはあった方がいいぞ。

先生

ぼく

ふむふむ。

未経験からWebデザイナー、UI/UXデザイナーを目指していると、「HTMLとCSSのコーディングスキルは絶対に必要！」という言葉を耳にするかと思います。

ただし実際、どの程度のスキルが必要かは会社によってまちまちです。
会社によってはWebデザイナー・UI/UXデザイナーがコーディングをまったくしないところもありますし、逆にJavaScriptも含めてバリバリコーディングをするようなところもあります。

また、最近だとClaudeなどのAIにコーディングを一任するケースも増えてきており、人間がコードを理解していなくても、問題なく実装を済ませることができたりします。

とはいえ個人的には、行きたい会社に関わらずコーディングスキルをある程度身につけておくのはWebデザイナー・UI/UXデザイナーとして大切なことだと思っています。

このページでは、未経験からWebデザイナーやUI/UXデザイナーを目指すにあたって、コーディングとどう向き合ったら良いかについてまとめてみました。

何かしらのご参考になれば幸いです。

そもそもコーディングとは？

Modisさんの下記サイトによると、コーディングは次のように定義されています。

「プログラミング言語を使ってソースコードを作成すること」

参考コーディングとは？プログラミングとの違いについて解説！学習方法と活かせる仕事Modis

一般的に「コーディング」と言うと、HTMLやCSS、JavaScriptを使ってソースコードを書き、作ったデザイン通りにWebサイトのレイアウトを整えたり画面に動きをつけたりすることを指します。

また、HTMLやCSS、JavaScriptを使って画面実装をメインで行う人を「コーダー」と呼ぶこともあります。

MEMO

「コーディング」と似たような単語で「プログラミング」というものもありますが、先ほどのModisさんの記事ではその違いを下記のように説明しています。

コーディングとは「プログラミング言語を使ってソースコードを作成すること」。一方、プログラミングは「プログラムを作成する作業全般」を指します。つまり、コーディングはプログラミングの作業の一部、ということになります。

ちなみにスマホのアプリとかはHTMLやCSSではなく、別のプログラミング言語で実装されています。ですので、アプリ開発の現場ではコーダーはほとんど出てきません。

Webデザイナー、UI/UXデザイナーにコーディングスキルは必要？

結論、「必要！」

何度も言いますが、Webデザイナー、UI/UXデザイナーになるのであれば、少なくともHTMLとCSSのコーディングスキルは絶対に必要です。

確かに会社によっては業務でコーディングを行わないところもありますが、「会社で必要になるかどうか」はいったんさておき、Webデザイナー、UI/UXデザイナーを目指すならば少なくとも自分でWebサイトを立ち上げられるくらいのコーディングスキルを身につけておくべきです。これはもう、半ば常識みたいなものです。

Webデザイナー、UI/UXデザイナーがコーディングスキルを身につけると下記のようなメリットがあります。

Web・UI/UXデザイナーがコーディングスキルを身につけるメリット

コーディングを意識したデザイン設計ができるようになる
キャリアの幅が広がる
AIが書いたコードを自分で判断し、直せる

それぞれ見ていきましょう。

Webデザイナー、UI/UXデザイナーがコーディングを身につけるメリット

コーディングを意識したデザイン設計ができるようになる

WebデザイナーやUI/UXデザイナーは、単に魅力的で美しいデザインが作れればいいというものではありません。デザインを作る際、実際にその画面をPCやスマホで表示させることができるのかといった実装側のことも考慮しなければならないのです。

HTMLとCSSでWebサイトを作った経験があれば、「このレイアウトだとコーディングするときに厳しそう…」とか、「このフォントはWebで使えるのかな？」といった配慮をすることができます。この配慮ができると、Webサイトの制作や改修・改善においてプロジェクトをスムーズに進めることができ、非常にラクです。

MEMO

自分も昔、DTPのデザイナーさんにWebサイトのデザインを作ってもらったことがあるのですが、それを実装しようとしたときにコーディングの作業工数がかなりかかってしまい四苦八苦した経験があります。

DTPデザインの世界だとわりとレイアウトを自由に組めるのですが、Webデザイン、UI/UXデザインの世界だとコーディングやプログラミングといった工程が絡んでくるので、その分レイアウトが制限されてきます。
同じ「デザイナー」ではありますが、DTPとWebはだいぶ世界が違うと思っておいた方がいいです。

キャリアの幅が広がる

一言で「Webデザイナー」「UI/UXデザイナー」と言っても、その仕事内容はけっこう会社によってまちまちです。

WebデザイナーやUI/UXデザイナーは、大きく分けると「設計・デザイン寄り」と「コーダー寄り」の２タイプに分けられるとぼくは考えているのですが、HTMLやCSS（場合によってはJavaScriptも）のコーディングができると、「コーダー寄り」のキャリアも視野に入れることができ、転職時にキャリアの幅を広げることができます。

ちなみに下図はWebサイトの制作や改修・改善を行うときの大まかなフローをまとめたものなのですが、Webデザイナー、UI/UXデザイナーは「開発実装」「リリース」以外のフローのどこかしらに携わるイメージです。どこに携わるのかは会社次第、というかんじです。

AIが書いたコードを自分で判断し、直せる

最近は、AIにデザインを渡せば、HTMLやCSSをかなりの精度で書いてくれるようになりました。
ぼくも副業のLP制作では、ClaudeにFigmaのデザインデータを読ませてコーディングさせてますし。

ただ、AIが書いたコードがいつも正しいとは限りません。
レイアウトが崩れていたり、色が違ったり、余計な記述が入っていたりします。

HTMLとCSSの仕組みがわかっていれば、どこがおかしいのかを自分で見つけて直したり、AIにコードレベルで修正を指示したりできます。

MEMO

もちろん、自然言語で「〇〇を直して」と言えば直してくれるのですが、そこには”解釈”が介在します。AIが解釈を間違えると、全然違う修正をしたり、オーバーエンジニアリング（過剰な実装をしてしまうこと）が発生したりして、ソースコードがグチャったり、不毛な時間が発生したりします。

HTMLとCSSの仕組みがわかっていれば、オーバーエンジニアリングに気付いて軌道修正できたり、余計な時間をかけることなく実装を済ませることができます。

ぼく

AIに任せる部分が増えた分、出てきたものの良し悪しを判断できる力が大事になってきていると感じます。

どこまでのスキルが必要なの？

まずは「自力でWebサイトを立ち上げられる」レベルを目指そう

みなさん

コーディングのスキルが必要なことはわかったけど、どれくらい勉強したらいいものなのさ…？

…と思っている方もいらっしゃるでしょう。

未経験からWebデザイナー、UI/UXデザイナーを目指すのであれば、まず最低限必要なスキルレベルとして下記を目安としていただければ大丈夫です。

オンラインで見れる、一般的な機能を搭載した5〜10PのWebサイトを作れるレベル

ぼく

まずは不恰好でも、時間がかかってもいいので、頑張ってこのレベルのサイトを作ってみましょう。

「オンラインで見れる」というのは、レンタルサーバーとかを借りてドメインを取得し、FTPツールでソース一式をアップロードし、URLを叩けばサイトが見られるように環境を構築してみよう、ということです。Webサイト運営に必要なサーバー側のしくみを知ることができ、Webサイトの全体像をつかむことができます。

「一般的な機能」というのは、下記で挙げるような、Webサイトなら大体当たり前のように入っている機能のことです。
これらはjQueryというものを使えばわりと簡単に実装することができるので、これらのうちの2つ3つくらいを、AIに聞いたりしながら実装してみるといいと思います。

ハンバーガーメニューをタップしたらメニュー画面に切り替わる
アコーディオン表示
タブでコンテンツを切り替え表示する
スクロールした時にアニメーション（フェードインとか）をつける
マウスホバーした時にアニメーションをつける
カルーセルパネル（スライダー）
モーダル（ポップアップ）でコンテンツを出す

ぼく

jQueryについてはこちらの記事↓でもまとめているので、よければご参考ください。

2022年10月5日 jQueryとは？未経験からWebデザイナー・UI/UXデザイナーを目指す方向けに解説

SEOはいったん考えなくてもOK

コーディング、特にHTMLソースコードには、「SEOを加味した書き方」というものがあります。

SEOとは「Search Engine Optimization」の略で、日本語に訳すと「検索エンジン最適化」です。

すごくざっくり説明すると、
「グーグルで検索したときに自分たちのサイトが検索上位に来るように、あれこれ頑張ること」
とも言うことができます。

ここではSEOの細かい説明は省きますが、SEOを加味すると、けっこう色々なことを考えながらコーディングをしなければならなくなります。

例えば下記のようなソースコードがあったとしましょう。

HTML

<div>
 <p>あいさつ</p>
</div>
<div>
 <p>朝のあいさつ</p>
 <p>おはよう</p>
 <p>昼のあいさつ</p>
 <p>こんにちは</p>
</div>

これをSEOを加味した形で書くと、下記のようになります。

HTML

<section>
 <div>
  <h1>あいさつ</h1>
 </div>
 <div>
  <h2>朝のあいさつ</h2>
  <p>おはよう</p>
  <h2>昼のあいさつ</h2>
  <p>こんにちは</p>
 </div>
</section>

どちらの書き方でも、人間からするとWebサイト上での見え方に違いはない（CSSを調整すれば）のですが、コンピューターからするとまったく別物に見えています。

コンピューターからすると、前者は「ただテキストが羅列されているだけ」のもの、後者は「大見出し、小見出し、本文からなるひとまとまりのセクション」というふうに見えています。

こんなふうに、「コンピューターにもわかりやすいように、意味を持たせながらコーディングをすること」をセマンティックコーディングと呼んだりします。
SEOを加味してコーディングするということは、「人間にとってわかりやすいWebサイト」だけでなく、「コンピューターにとってわかりやすいWebサイト」にもしなければならないということです。

みなさん

ひぃ、なんだか大変そう…

…と、いろいろ説明してきましたが、未経験からWebデザイナー、UI/UXデザイナーを目指すという観点だと、いったんSEOのことまでは考えなくても大丈夫かなとは思います。

ひとまず参考書などでおすすめされているコーディングのやり方を真似て、一通りWebサイトが作れれば十分です。
セマンティックコーディングは入社後に身につけるのでも十分なので、焦らず徐々に慣らしていけばいいかなと思います。

ぼく

SEOについてはこちら↓の記事でもまとめているので、よければご参考ください。