こんにちは。デジタルエデュケーション部の田中天（@10TEN10TAN10）です。現在、私はデジタルハリウッドSTUDIO by LIG（通称：デジLIG）の運営を担当しています。
みなさん「コーディング」ってどんなイメージを持っていますか？ Web制作に必要なもの？ ずらずらと英語や数字が並んでいるもの？
なんだか難しそうなコーディングですが、コーディングを行いWebサイトに動きを付けることで、ユーザーを楽しませてサイトの滞在時間を伸ばすことができたり、リピート率を高くしたりもすることができます。
本記事では、そもそもコーディングとはなにをすることなのか、どんなときに必要になるのか、そして学ぶことのメリットをご紹介します。この記事を通して少しでもコーディングと仲良くなれればと思っています。
目次
Webデザインのコーディングとは？ 必要なの？
Web制作において、見た目のデザインだけをしても、そのままではホームページとして動かすことはできません。
コーディングとは、簡単にいうとHTMLやCSSといった言語を用いて、制作したデザインをブラウザ（コンピュータ）上に表示させたり、動かしたりできるようにする作業をいいます。
「Google Chrome」「Safari」などのブラウザや、「パソコン」「スマートフォン」「タブレット」などのさまざまな端末に、レイアウトが崩れずに表示されるのもコーディングをしているからです。
Web制作において、コーディングは必要であるというのが回答になります。
一人でコーディングまですべてできないといけないの？
「Webクリエイター」には、デザイナー、エンジニア、ディレクターなどさまざまな職種がありますが、どの職種においてもまずは基礎知識としてコーディングを理解しておく必要があります。
当然エンジニアを目指すとなれば、コーディングは必須になりますが、Webデザイナーの場合でも基礎知識としてコーディングの構造を知っておく必要があります。実際、デジLIGのWebデザイナーを対象とした講座でも、2ヶ月目からはコーディングを学びます。
コーディングは、エンジニアを目指すのであれば熟知する必要がありますが、デザイナーやディレクターを目指す上でも知識として持っておくことはかなり重要！ 食わず嫌いにならず取り組みましょう。
コーディングに使われるソフト
実際にコードを打ち込むために使用するテキストエディタにはいくつか種類があり、企業によって推奨しているソフトが異なります。代表的なものに、「Atom（アトム）」や「Visual Studio Code（通称：VS Code）」「Dreamweaver」というものがあります。
どれもWindows版/Mac版、有料/無料版があるので、ご自身の環境にあったテキストエディタを選択することができます。
コーディングで使われる言語
今ご覧になっているこちらのサイトも、複数の言語から制作されています。
文字の表示をHTMLで、その文字の大きさや画像の配置をCSSを使って調整し、Webサイトとして表示させています。この2つの言語がWebサイト制作の8割を占めているといわれています。
最近のWebサイトは写真がスライドショーになったりと動きのあるデザインも多く、この動きをつけているのがJavaScriptという言語です。それではこの3つの言語を詳しく説明します。
HTML
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Web制作においてもっとも基本的なマークアップ言語で、初心者でも学びやすい言語です。
ページの中に段落や見出し、表を定義したり、画像を入れたりすることができます。Webデザイナーを目指す方がHTMLを学ぶ際には、自分でゼロからコードは書けなくても、それぞれの意味やなにが書かれているかを理解できるようにしておくと良いでしょう。
CSS
CSSとは、Cascading Style Sheets（コーディング・スタイル・シート）の略で、「スタイルシート」とも呼ばれています。
HTMLで制作された文書や画像対して、文字の大きさやレイアウトなどのデザイン（文書の見栄え）などを指定することができます。昔はHTMLのみで制作されたサイトもありましたが、今はHTMLとCSSはセットで使われています。
JavaScript
JavaScriptは、Webブラウザの機能を制御し、写真がスライドして動く、タイムリーなコンテンツの更新、操作可能な地図を表示させるなど、動的な表示をさせたいときに使用します。
初学者の方向けに説明すると……HTMLで「この文章は本文」「ここはしっかり見られるように見出しに！」を要素を指示して、CSSで「この文字は太文字にして中央に配置してね！」「写真は右上に表示してね！」とレイアウトを指示して、JavaScriptで「複数ある写真を3秒おきにスライドショーさせて見せてね！」と動き指示している。といった感じです。
Webデザイナーがコーディングの知識をつけるメリット
多くの制作会社では分業化されているため、WebデザイナーやWebディレクターの業務としてがっつりコーディングをする！ という場面は少ないかもしれません。しかし知識として持っておくことで、多方面で活用ができます。
Webサイトにどう表示されるか理解してデザインができる
実際に自分の作成したデザインが、どのようにWebサイトに表示されるかを理解できていると、デザインの調整や修正が減り、プロジェクトがよりスムーズに進みます。
パソコン・スマートフォン・タブレットなど表示される端末に合わせて、配置が自動的に変わることを「レスポンシブデザイン」といい、最近はこのレスポンシブデザインを取り入れたサイト制作が主流になっています。
デザインの段階でコーディングの内容をある程度理解しておけば、スムーズなレスポンシブデザインが可能になります。
コーダーとのやりとりがスムーズになる
分業体制とはいえ、チームで動く制作現場で円滑なコミュニケーションを取るためにも、コーディングの知識は求められます。
どんな実装が可能でどこまでが難しいのかを把握したうえで、ワイヤーフレームやデザインカンプを制作していくことになります。デザインの視点だけではない配慮ができると、コミュニケーションコストの削減にも繋がります。
Webディレクターなど、ステップアップが目指せる
デザインスキル、コーディングスキルを身に着けていれば、デザイナーやエンジニアを目指すことができますし、さらに全体のスケジュール管理やこれまでのコミュニケーション力を活かしてディレクターを目指すことも可能です。
ディレクターの場合、デザイナーやエンジニアとクライアントとの架け橋となることが多く、コーディングの知識があればより円滑なやり取りが可能です。
コーディングを学ぶ方法
コーディングを学ぶにはさまざまな方法があります。HTML・CSSは初心者でも学びやすいとはいいつつ「一から覚えられるだろうか」と不安になる方も多いはず。そんなみなさんにおすすめの学習方法をまとめました。
スクール
スクールに通うことで、最短でスキルを身につけることが目指せますが、やっぱり「勉強をする」って本当に大変です。お仕事や育児との両立、価格、期間など、ご自身のライフスタイルに合わせて最短でスキルを身につけることができるスクール選びをおすすめします。
オンラインスクール
| メリット | 住んでいる地域や時間に縛られずにスキルの習得が目指せる |
|---|---|
| デメリット | 自走力も求められ、追加受講も気軽にできることが多く長期化することもある |
CodeCamp
オンライン完結型のプログラミングスクールで、現役のエンジニアから学ぶことができ、受講者数も50,000人を越えています。
デジハリオンライン
「いつでも」「どこでも」学習できるオンラインスクールとし、現役のトップクリエイターによる動画学習を取り入れています。
通学型のスクール
| メリット | スキル習得に期限を定めて、仲間と共に取り組める |
|---|---|
| デメリット | 住んでいる地域や授業の時間に縛られてしまう |
東京デザインプレックス研究所
渋谷に校舎があり、平日夜間クラス／土or日集中クラス／昼間部集中クラス／昼間部1年制があるため、お仕事と平行される方も多くいらっしゃいます。
バンタンデザイン研究所キャリアカレッジ
東京（恵比寿）・大阪（心斎橋）・愛知（名古屋）に校舎があり、6ヶ月、12ヶ月とコースも豊富で、完全オフライン少人数での授業形式で学習を進めることができます。
通学とオンラインのハイブリッド型
| メリット | 状況に合わせて、通学とオンラインでの学習を自分で選択することができる |
|---|---|
| デメリット | 自走力が求められ、内容によってはスケジュールの調整が難しいケースがある |
デジタルハリウッドSTUDIO by LIG
デジタルハリウッドと制作会社LIGが運営するスクールで、上野・池袋・大宮・北千住・川崎・町田にSTUDIOがあります。来校とオンラインで学習を進めることが可能で、現役クリエイターからオフライン/オンラインで質問のやり取りやデザインフィードバックを受けることができます。
デジタルハリウッドが24年間をかけて開発した確実にスキルが身につく「ハイブリッドラーニング」と、LIGクリエイターが講師を務めるアウトプット中心の実践講座により、実務に近い学びの環境を作っています。
ヒューマンアカデミー
全国で29校の校舎があり、来校とオンラインで学習を進めることが可能です。内定獲得率90.9%（2017年度）と手厚い就職支援が受けられます。
SHE likes
女性向けキャリアスクールで、東京（銀座）・愛知（名古屋）・大阪（梅田）に拠点があり、オンラインで完結させることも可能です。コミュニティが充実しており、45種類以上の豊富な職種スキルが定額で学び放題なのも魅力の一つです。
私が運営を担当しているデジタルハリウッドSTUDIO by LIGは、通称デジLIGと呼ばれています。LIGのマーケターやデザイナーによる現場のノウハウ満載の「LIVE授業」が受けられるのは、制作会社が運営するスクールならでは！
💡関連記事 通学したい人におすすめのWebデザインスクール7選【2024年6月】
Jumpei Hayashi
おすすめのWebデザインスクール11校29講座を比較【2024】
Jumpei Hayashi
書籍を使う
コーディング初学者の方におすすめしている書籍をご紹介します。
『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』
デジLIGのトレーナーも執筆に関わっている書籍で、多くのメディアでも取り上げられています。最新のWeb標準に準拠した内容は初級〜中級レベルの方まで活用ができます。
『これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本』
HTML・CSSの基礎から応用まで網羅されており、初心者がまずWebデザインの世界に入る第一歩として指標としても活用できる一冊です。
『できるポケット Web制作必携 HTML&CSS全事典』
デジLIGのSTUDIOの本棚にもあるこの一冊。基本的なHTMLタグの使い方やCSSプロパティの詳細を、辞書のように調べることができる構成になっています。
自分に合う書籍を選ぶのがおすすめです。本屋さんに行ってみて、ぱらぱらページをめくってみたりして、自分が読みやすい、学べそうだな！と感じ、今の自分のレベルに合う書籍を見つけましょう。
独学で頑張ってみる
独学で学ぶ方法についてもご紹介します。
YouTube
多くのデザイナーやクリエイターが発信をしており、「コーディング 初心者」などの検索ワードでも多くの動画がヒットします。
元LIGのせいとさんのチャンネルもおすすめです。
動画配信プラットフォーム
| ドットインストール | 価格：月額プラン/年間プラン 特徴：手軽に短いコースが多くゲーム感覚で学べる |
|---|---|
| Udemy | 価格：各コースごとに価格が異なる（割引やセールもあり） 特徴：210,000以上のコースから幅広く学ぶ事ができる |
| Progate | 価格：月額プラン/年間プラン 特徴：演習問題も多く初学者にもおすすめ |
これらのプラットフォームは無料で学習を始めることが可能です。
独学で進めるという方はここで紹介した書籍や、動画プラットフォーム、YouTubeのすべてを並行して学習している方もいらっしゃいます。時間があるのであれば、まずは独学でやってみて、スクールを検討するという流れがおすすめです。
Webデザインch by デジLIGでもWebデザインに関するHow toを公開しているので必見です！
いかがでしたか？
デザイナーを目指すとしても、コーディングの知識を身につけるメリットを感じていただくことはできましたでしょうか？
現在はノーコードでサイトが作れるサービスも増えてきたこともあり、必須のスキルではなくなってきているのはたしかですが、基礎知識としてスキルを身につけることで、自身の市場価値が上がり、キャリアの選択肢が広がります。
デザインと違い、ゴールが明確なのもコーディングの面白いところです。ぜひ今回の記事でコーディングの理解を深め、学習を始めるきっかけになれば嬉しいです。
天でした◎
