webデザインを学ぶ上で、コーディングのスキルがどれだけ必要なのか気になりますよね。
実際の制作時にコーディングはしないwebデザイナーにも、コーディングスキルは必要なのでしょうか？
この記事ではwebデザイナー志望の方向けに、コーディングの基本知識、webデザイナーがコーディングを学ぶメリット、そしてHTMLやCSSの基礎知識について詳しく解説します。
この記事を読むとわかること
・コーディングの基本知識
・webデザイナーはコーディングをどこまで習得するべきか
Webデザインにおけるコーディングの基本
コーディングとは何か？
webデザインにおけるコーディングとは、コンピュータに指示を与えるための言語を書いて、デザイン（絵）をwebサイトにする作業のことです。
webデザインでは、「HTML」「CSS」「JavaScript」などの言語を用いて、webサイトの見た目や機能を構築します。
実際のコーディング中の画面スクショ↓↓
つまり、ソースコードを書く作業のことです。
コーティング（coating）ではなく、コーディング（coding）です。
もしかしたら単なる変換ミスかもですが、駆け出しwebデザイナーさんとのチャットで、「コーティング」という表記で送られてくることがたまにありますが、ちょっと心配になりますので注意しましょう。
コーディングとデザインの関係
デザインは、webサイトの見た目やユーザー体験を決定します。
コーディングは、そのデザインをwebで実現するための技術的なエンジニアリングです。
webサイト制作では、コーディングとデザインは密接に関連しており、互いに補完し合う関係にあります。
コーディングが必要な理由、学ぶメリット
コーディングが必要な理由、どこまで習得するべきか
Webデザイナーがコーディングを学ぶ必要はあるのか。
結論を言うと基本的には学んだ方が良いと考えています。
なぜなら、コーディングをある程度理解することで、web上でデザインの意図を正確に表現できるようになり、クライアントの要望を的確に実現しやすくなるからです。
あと、コーダー目線から見ても、コーディングのやりやすさが変わってきます。
コーディングは全くわからないというデザイナーさんとわかるデザイナーさんとでは、やはりコーディングの工程に行ったときのスムーズさが全然違います。
コーディングが全く考慮されていないデザインデータでは、コーダーの工数が多くなってしまうことがよくあります。
もちろんコーディング専門のプロの様に、ゴリゴリにコーディングができる様になる必要はありません。ある程度で知識として習得するだけでも十分webデザイナーとしてのスキルアップとなります。
デザイナーがコーディングを理解することで、コーダーとのコミュニケーションが円滑になります。
Webデザイナーがコーディングを学ぶことは、デザインの表現力を高めることと、制作チームが円滑にプロジェクトを進めるためには不可欠です。
コーディングを学ぶメリットは、上記に書いた内容がそのままメリットにもなりますが、他にもいくつか考えられますので紹介します。
【メリット】スキルの差別化
コーディングスキルは、webデザイナーとしての競争力を高め、他のwebデザイナーとの差別化になります。
コーディングができるwebデザイナーは、デザインだけでなく、実装面でも貢献できるため、クライアントから高い評価を得ることが期待できます。
しかし、制作会社はデザインとコーディングを分業にする事が多いかと思います。
両方できるというのはもちろんメリットでしかないのですが、逆にお付き合いしずらいと感じる担当者もいる様です。
これは応募を受ける側の実体験でもあるのですが、制作会社に採用やパートナー応募をする時は、
「デザインとコーディング、どちらも好きですしどちらもできます。」
よりも、
「デザインが本業ですが、コーディングのスキルと理解はあります」
「コーディングが本業ですが、デザインも出来ますので、デザイン無しの部分はよしなに構築できます」
の方が扱いやすいと考える担当者もいます。
もちろん全てのクライアントがこうではなく、webのことはまとめて全部お願いしたいというクライアントもいるでしょう。
どちらが自身の本来の強みなのか、または両方とも本当にスキルが高いのかを自己分析してアピールする必要があります。
【メリット】キャリアの拡大
コーディングスキルは、webデザイナーのキャリアを拡大する可能性を広げます。
コーディングができるwebデザイナーは、フロントエンドエンジニアやフルスタックエンジニアなど、より幅広い職種への転職を検討することができます。
また、フリーランスとして独立し、自分のスキルを活かして仕事をすることも可能です。
HTML,CSSの基礎
webサイトにおけるコーディングは、基本的にHTMLとCSSで構成されます。
HTMLでページの構造・要素を作って、CSSで見た目・レイアウトを綺麗にしていくイメージです。
それぞれ解説します。
HTMLとは何か、その役割
HTML（HyperTextMarkupLanguage）は、webサイトの構造を定義するためのマークアップ言語です。
HTMLタグと呼ばれる記号を用いて、見出し、段落、画像、リンクなどの要素を記述することで、webサイトの骨組みを作成します。
つまり役割としては、HTMLはwebサイトの構造を定義し、コンテンツを整理するための役割を担います。
HTMLタグを用いて、要素を適切に配置することで、ユーザーにとって見やすく、理解しやすいwebサイトを作成することができます。
HTMLには、様々なタグが存在しますが、基本的なタグとしては、以下のようなものがあります。
<html>：HTML文書の開始と終了を定義します。
<head>：タイトルやメタ情報などを記述します。
<title>：ウェブサイトのタイトルを定義します。
<body>：ウェブサイトのコンテンツを記述します。
<h1>〜<h6>：見出しを定義します。
<p>：段落を定義します。
<img>：画像を挿入します。
<a>：リンクを定義します。
CSSとは何か、その役割
CSS（CascadingStyleSheets）は、webサイトの見た目、つまりデザインを定義するための言語です。
HTMLで記述されたwebサイトの要素に対して、色、フォント、サイズ、レイアウトなどのスタイルを適用することで、webサイトの外観をデザインします。
つまり役割としては、CSSはwebサイトのデザインを統一し、人間の視覚的に魅力的なwebサイトを作成するための役割を担います。
CSSを用いることで、webサイトの要素にスタイルを適用し、デザインの意図を表現することができます。
また、CSSは、レスポンシブデザインを実現するために不可欠な要素です。
CSSには、様々なプロパティが存在しますが、基本的なプロパティとしては、以下のようなものがあります。
color: テキストの色を指定します。
font-size: テキストのサイズを指定します。
font-family:テキストのフォントを指定します。
background-color: 背景色を指定します。
width: 幅を指定します。
height:高さを指定します。
margin: 枠外余白を指定します。
padding:枠内余白を指定します。
コーディングを学ぶための方法
コーディングを学ぶための方法は、まずは低料金のオンラインか書籍かで十分でしょう。
いきなり高額なスクールに通ってプログラミングと抱き合わせで受講する必要はありません。
いくつか紹介します。
Progate（プロゲート）で学ぶ
とりあえず最初はこれ一択で良いでしょう。
Progate（プロゲート）： https://prog-8.com/
月額1,500円くらいかかりますが、勉強するのに十分その価値はあります。
これだけでコーディングが習得できるわけではないですが、コーディングの概念や全体像がなんとなくわかります。
とりあえずこの中の「HTML＆CSS」をやってみると良いです。余裕があれば「Javascript」もやってみましょう。
YouTubeで学ぶ
YouTube上には、コーディングを解説している動画がいくつもあります。
上記のProgateで、概念や全体像が把握できたら、YouTubeで勉強してみても良いでしょう。
配信者と一緒に、同じ様に実際に手を動かすことで、コーディングについての理解が深まります。
書籍で学ぶ
コーディングを学ぶための書籍は、初心者向けの入門書から、上級者向けの専門書まで、様々なレベルのものが出版されています。
その業界の有名な人の書籍に触れることは、よりその業界と分野を感じることができます。
自分のレベルに合った書籍を選び、基礎からしっかりと学ぶことも重要です。
実践で学ぶ
実際にwebサイトを作成してみましょう。
模写コーディングでも良いですし、自信の妄想したサービスだったりの架空のwebサイトで良いです。
ただ、デザインの制作の手間があるので、模写コーディングで良いでしょう。これもYouTubeで検索すると、レクチャーしているものがいくつもあります。
簡単なwebページから始めて、徐々に複雑なものに挑戦することで、実践的なスキルを習得することができます。
まとめ
ポイントまとめ
・コーディングするつもりがないwebデザイナーでも、知識として勉強はした方が良い。
・コーディングを何となくでも理解することで、webデザインの表現が向上する。また、制作チームとの連携がスムーズになる。
webデザイナーにとって、コーディングスキルは必須ではありませんが、学ぶことでデザインの表現力を高め、キャリアを拡大することができます。
コーディングを学ぶことは、決して簡単なことではありませんが、様々な方法を活用することで、誰でも習得することができます。
ぜひ、コーディングに挑戦してみて下さい。
