この記事ではWebデザイナーの方が、エンジニアの仕事を理解する上で役立つコーディングについて解説します。
Webデザイナーがコーディングを学習するメリットや、コーディングの基礎知識（データ構造、MVC、集約etc…）、さらにはWebデザイナー向けのコーディング学習サイトも紹介しています。
「コーディングについて学びたいけど、何から手をつけていいか分からない……」という方は、ぜひこの記事を参考にしてみてください！ Webデザイナーとしてのキャリアアップにきっと繋がるでしょう。
目次
Webデザイナーがコーディングを学ぶメリット
メリット1. エンジニアの考え方や仕事の進め方を理解できる
「恋人の心を理解できたら、もっと関係がうまくいくのに……」と思ったことはありませんか？
これと同じことが、Webデザイナーとエンジニアの間にも当てはまります。
たとえばUIは、Webデザイナーの活躍の場です。しかしその一点にフォーカスするのは、建物の表面部分だけを建築するようなもの。優れたWebデザイナーは、技術基盤を充実させることがWebデザインそのものを向上させることを理解しています。
Webデザイナーがエンジニアの考え方や仕事の進め方を知っておくこと、チームにとって大きな資産になります。クライアントにも、より間違いのないアイデアを提供できるようになるはずです。
メリット2. 雇用機会が増える
Webデザイナーがコーディングの知識を身につけると、日々の業務だけでなく、新しい仕事を探すときにも役立ちます。
とくにスタートアップ企業の多くは「ハイブリッド型の人材」を求めています。
それでも新しい分野の学習に躊躇してしまう人はいるでしょう。もちろん深い知識を身につけておくに越したことはありませんが、他のWebデザイナーと差をつけるには、すこしHTMLとCSSをかじっておく程度でも十分です。
スタートアップ企業に転職したり、フリーランスとして働きたいWebデザイナーの方にとって、コーディングは大きな武器となるでしょう。
Webデザイナーが学んでおきたい言語
【基礎編】「HTML」と「CSS」
Webデザイナーがコーディングを学ぶときに、まずおすすめしたいのが「HTML（Hyper Text Markup Language）」と「CSS（Cascading Style Sheets）」です。
これらはマークアップ言語といい、プログラミングのロジックを必要としないため、コーディングをやったことがないWebデザイナーの方でも簡単にはじめられます。
HTMLは「ブラウザに表示するものを指示する」コード、CSSは「ブラウザでの表示方法を説明する」コードです。
HTMLを人体の「骨」とするなら、CSSは「身長／体の形／肌／目の色／髪の色」を決定するものといえるでしょう。実際にはCSSは、タイポグラフィ、色、位置、大きさなどを指定する役割を担います。
フロントエンド（HTML／CSS）のコーディングについて学習すれば、デバイスごとの表示方法がわかるようになります。
またHTMLとCSSに触れると、すべてが「ピクセル単位」で調整されていることにも気づくはずです。
コードの構造、つまりWebページが表示される仕組みを理解すれば、フロントエンドの開発プロセスをより深く理解できます。どのようなWebデザインが簡単で、反対にどのようなWebデザインが難しいのかがわかれば、エンジニアとの連携も上手くでき、作業の効率も上がるでしょう。
【応用編】「JavaScript」と「Ajax」
JavascriptとAjaxは、HTMLやCSSと比べると難度が上がります。しかしこれらも、Webデザイナーの強い味方になってくれるコーディングです。
JavaScriptとAjaxの知識は、とくにUIにおける「特定の機能のデザイン」など、洗練されたアイデアをエンジニアに伝えたい際などに役立つでしょう。
難度は高いものの、基本的な知識をおさえておくだけで、他のWebデザイナーとは大きく差をつけられます。なぜならHTMLやCSSを触れるWebデザイナーは多くても、JavaScriptやAjaxを触れるWebデザイナーは多くないからです。
JavaScriptとAjaxの知識は、多くの企業やチームにとってユニークな資産となりえます。
特にJavaScriptを使えるようになると、可能性が一気に広がります。JavaScriptは、HTMLとCSSの両方を変更／更新でき、データを計算／操作／検証できるのが特徴です。要素にアニメーションをつけたり、インタラクティブにしたり、バックエンドとのレスポンシブなコミュニケーションを作るときに役立ちます。
関数、オブジェクト、ロジック、そして数学、数学、数学……と考えると難しそうですが、実際にはそれほど学習難度は高くありません。他のWebデザイナーと差をつけたい場合はぜひ学習してみてください。
コーディング&プログラミングを学習できるWebサービス
学習サービス1. ドットインストール
広く浅くコーディングの知識をつけたい方におすすめのWebサービスです。HTMLやCSS、JavaScriptなどの講座を無料で受けられます。
プレミアム会員（月額1,080円）になれば、Webサイトやアプリの作成などの実践的な内容を学習できるのでそちらもおすすめです。
学習サービス2. CODEPREP
「手を動かして学ぶプログラミング」「毎日10分の成功体験」を掲げる無料のプログラミング学習サービスです。
講義は、大きく分けて入門編、基礎編、実践編の3つに分かれており、入門編ではHTML、CSS、JavaScript、PHP、jQuery、Ruby、Bootstrap、Java、Scalaなどの言語を学習できます。
講義の大半は穴埋め形式で進められるので、コーディング初心者でも安心して始められるWebサービスです。
学習サービス3. Progate
全14コース、76レッスンを無料で受けられるWebサービスです。HTMLやCSS、JavaScript、jQueryなどの言語を学習できます。
Progateはスライド学習を採用しているため、自分のペースで予習や復習を行ええるのが魅力です。
スキマ時間で効率的にコーディングの学習をしたい方におすすめ。
いずれはAIが、フロントエンドの仕事を奪う？
「コーディングを学ばなくても、いずれAIがすべて賄うようになるのでは？」と思っている方もいるかもしれません。これについては、Webデザイナーのあいだでも意見が割れています。
ドラッグ&ドロップさえすれば、AIがすべてをコード化してくれるようになれば、フロントエンドエンジニアの仕事はなくなってしまうでしょう。しかし当然ですが、すべてがいきなり劇的に変わることはありません。
少なくともしばらくの間は、コーディングもできるWebデザイナーには高い需要があるはずです。
まとめ
Webデザインがエンジニアの手によってコード変換される時に何が起こるか、その大まかな全体像が見えてきましたか？
ここまでコーディングとプログラミングについて理解していれば、次にエンジニアと一緒に仕事をする際には幸先のいいスタートが切れるでしょう。
この記事で学んだ内容を、ぜひ普段の仕事に活かしてみてください。