こんにちは。ぽつです。
Webデザイナーを目指しているけどこんな悩みを抱えている人はいませんか？
- 習得すべき言語が分からない
- 強してるけど次の言語が分からない
- Webデザインでどんな言語が使われているか分からない
- 言語の特徴を比較して知りたい
Webデザインには複数の言語を使うのが当たり前ですが、それぞれに特徴があり、文法や用途は全く違います。
そこで今回は上のお悩みにお答えすべく、Webデザインで使われる言語を一覧にして比較、解説していきます。
これからWebデザイナーを目指したい人や、すでに勉強中の人も参考になる内容ですので、最後までご覧ください。
目次
「プログラミング言語」と「マークアップ言語」の違い
Webデザインで使われる言語を解説する上で、理解してもらいたいのが、「プログラミング言語」と「マークアップ言語」の違いです。
Webデザイナーとネットで調べると、「未経験OK」や「誰でもなれる」などと紹介されています。
さらに調べると、「プログラミング言語」と言う言葉もよく目にするようになるのではないでしょうか。
プログラミングと聞けば、アプリの開発や、専門性が高い領域で、難しいコードを書くイメージを持ちますよね。
そんな難しいプログラミング言語を覚える必要があるのでしょうか。
そこでまずはそれぞれの違いを解説したいと思います。
プログラミング言語とは
プログラミングとは「コンピューターに命令し、データ処理や計算をさせるためのコンピューター専門の言語を入力すること」をいいます。
プログラミング言語はそのときに使われる言語のことです。
具体的にプログラミング言語には「JavaScript」「PHP」「Java」「Ruby」「python」などがあります。
Webデザインでよく使われるのは「JavaScript」です。Webサイトのポップアップ画面やスライドショーなど、動的なデザインを作る事ができます。
「PHP」はお問合せフォームやショッピングサイトの構築に利用されています。
マークアップ言語とは
一方でマークアップ言語と呼ばれる言語は、「HTML」と「CSS」です。
データ処理や計算をする事がないので、プログラミング言語には分類されません。
コンピューターに指示する点ではプログラミング言語と一緒ですが、マークアップ言語の役割は、Webサイトの「ここが見出し、ここが画像」といったように、構造を定義する事です。マークアップ言語は「タグ」を活用して文章に構造的な意味を持たせるために使用される言語です。
HTMLとCSSに関しては次の章で詳しく解説します。
Webデザイナーに必要な言語一覧
では、プログラミング言語とマークアップ言語の違いがわかったところで、Webデザインで実際に必要な言語をみていきましょう。
HTML/CSS
まずはWebサイトに必要不可欠な「HTML」と「CSS」です。
HTMLは主に文章、タイトル、画像などWebサイトの基盤を定義する役割を持ちます。
家で例えると柱や床、屋根のように、これがないと始まらない（家が建たない）大切な要素です。
CSSは主に文字や画像だけのWebサイトにならないように色や配置などデザインを整える役目を担います。
家で言うと、インテリアのようなイメージです。
どちらもマークアップ言語と言われ、プログラミング言語には分類されません。
プログラミング言語を扱うことを「プログラミング」と呼ぶのに対し、マークアップ言語を扱うことを「コーディング」と呼びます。
HTMLとCSSはWebデザイナーなら習得していない人の方が少ないくらい、Webサイトを構築するには必要不可欠な言語です。
JavaScript
次に習得すべき言語は「JavaScript」です。
JavaScriptは前述の通り、ポップアップやスライドショーなど動きのあるデザインを作る事ができ、より個性的なWebサイトを作る事ができます。
プログラミング言語の一種で、HTMLとCSSをある程度習得すると次に学ぶ人が多い言語です。
JavaScriptはWebサイトの他にアプリやWebサービスにも使われています。
具体的には
- ニコニコ動画
- Hulu
身近なものばかりですよね。今やUI/UXデザインにおいて必要不可欠な言語の1つです。
PHP
次にWEBデザインでよく使われる言語は「PHP」です。
HTMLで作成するWEBサイトは「静的ページ」と呼ばれ、誰が閲覧しても同じものが表示されます。
一方、PHPはアクセスした人物やタイミング、状況などによって表示される内容が変わる「動的なページ」を作成する事が可能です。
具体的にはショッピングサイトの購入履歴や、掲示板サイト、お問合せフォームなどが挙げられます。
ブログで使われるWordPressもPHPを用いた有名なアプリです。
ワードプレスで作成されたWebページにユーザーがアクセスするたびにPHPがHTMLを生成して表示します。
ユーザーが記事を投稿するたびに新規投稿として表示されたり、関連記事として紹介する記事が自動的に更新されたりするのもPHPの処理のおかげです。
Webデザイン言語一覧表
| 言語 | 種類 | 難易度 | 用途 | 習得優先度 | 具体例 |
|---|---|---|---|---|---|
| HTML | マークアップ言語 | 簡単 | タイトルや画像などの基盤作り | ⭐️⭐️⭐️⭐️⭐️ | 全てのWebサイト |
| CSS | マークアップ言語 | 簡単 | 色や配置などのデザイン装飾 | ⭐️⭐️⭐️⭐️⭐️ | 全てのWebサイト |
| JavaScript | プログラミング言語 | 難しい | ポップアップやスライドショーなどの動的なデザイン | ⭐️⭐️⭐️⭐️ | Twitter Facebppk |
| PHP | プログラミング言語 | やや難しい | ショッピング機能など動的サイト構築 | ⭐️⭐️⭐️⭐️ | Amazon Rakuten市場 |
Webデザインを学ぶ方法
未経験からWebデザイナーになるためにはいくつかの方法が考えられます。
勉強方法もそれぞれです。個別にみていきましょう。
独学で勉強する
本で勉強する
本での勉強は、基本的な内容を一通り学習するのにオススメです。特に、デザインとコーディングの基本をマスターできるこの2冊がオススメです。
デザインのオススメ書籍：「なるほどデザイン」
・「デザインに正解はない」
・「どんな人に」「何を」「なぜ」「いつ・どこで」伝えるのか
など、デザインをする「心構え」をわかりやすく、楽しく解説してくれています。
見ているだけで楽しく、本が苦手な人でも楽しんで読むことができるので、かなりオススメの本です。
Webデザインのオススメ書籍：「HTML&CSSとWebデザインが1冊できちんと身につく本」
僕も最初はこれで勉強していました。
この一冊を読み終えた頃には、
・HTMLとCSSのコーディングが身につく
・自分で一つのWebサイトを完成させることができる
内容になっています。かなり濃い内容！
画像付きで解説が丁寧にされており、初心者にもってこいの一冊です。
Youtubeや無料専門サイトで勉強する
最近では無料で勉強できるサイトや動画が増えています。
コーディング実践サイト：「progate」
こちらの「progate」というサイトでは3時間半でコーディングの基本を体験できる内容で、時間がない人にはかなりオススメできます。
スライドを見ながら実践もできる実践に優れた教材です。初心者の方には特にお勧めです。
無料版だと各言語の初級を体験ができますが、有料版を購入する価値は十分にあると思います。
短時間でサクッとできるので、限られた時間しかない人にもお勧めです。
オススメYoutube動画：ヒロコードさん
Youtubeではこちらの動画で実際の作業風景を見ることができるので、仕事のイメージを掴むことができますよ。
Webデザインスクールや専門学校に通う
Webデザインスクールや専門学校に通い、デザインスキルを学ぶこともできます。
同じ志を持つ者が集まる場で学ぶことで、モチベーションも上がりますよね。
また、実用性の高い専門知識を身につけることで、実践の場で活躍しやすくなります。
しかし、実際通う時間がなかったりしますよね。
そのため、オンラインスクールに絞られると思うのですが、特にオススメしたいのはデイトラ
です。
HPよりデイトラの強みはかなり多いです。
・とにかく費用が安い！
・教材が閲覧無期限（いつでも見れる！）
・現役プロのメンターに教えてもらえる
・仲間と繋がることができる（オンラインでは珍しい！）
特に「仲間と繋がる」ことができるのは、かなり強いですね。オフラインスクールのいいところをとったオンラインスクールです。
モチベーションが上がりますよね。
短期間で専門知識を磨くことを求めるのであればオンラインスクールという選択肢もありです。
未経験者歓迎の求人に応募する
転職を考えている人や、すぐにWebデザイナーとして仕事した人にオススメなのが、未経験歓迎の求人に応募することです。
同期の人と切磋琢磨してスキルアップしながら、収入を得ることができることがメリットです。
特にオススメなのはWeb系専門の就職支援サービスです。
IT求人ナビ転職の強みは以下の通りです。
・給料をもらいながら最大3ヶ月のIT研修
・1on1のキャリアコンサルティング
・豊富な求人数
業界未経験の方でも研修から就職後まで充実したサポートをしてくれます。
キャリアップをしたい方は是非登録してみてください！
アルバイトやインターン等で実務経験を積む
美容師や寿司職人を目指す人が仕事を通じて技術を磨くのと同じように、Webデザイナーとしての技術を仕事を通して学ぶというのも選択肢としてあります。
ただし、この場合は未経験OKの職場を選ばなくてはなりません。
年齢的に難しい場合もあると思うので、できれば若いうちに職場を探しておきましょう！
そのほかにも、学校に通っているなら、インターンを活用するのも手です。
短期間ではあるものの、実践に必要となる知識や技術を知ることができます。
その短期間で専門スキルをマスターするのは難しくても、経験を処理に活かす事ができれば十分メリットがあります。
まとめ
いかがでしたか？今回はWebデザインで使われる言語を4つ紹介しました。
マークアップ言語はHTMLとCSSですが、プログラミング言語はまだまだあります。
さらにスキルアップしたい人は他の言語にもチャレンジしてみましょう。
比較表は以下の通りです。
| 言語 | 種類 | 難易度 | 用途 | 習得優先度 | 具体例 |
|---|---|---|---|---|---|
| HTML | マークアップ言語 | 簡単 | タイトルや画像などの基盤作り | ⭐️⭐️⭐️⭐️⭐️ | 全てのWebサイト |
| CSS | マークアップ言語 | 簡単 | 色や配置などのデザイン装飾 | ⭐️⭐️⭐️⭐️⭐️ | 全てのWebサイト |
| JavaScript | プログラミング言語 | 難しい | ポップアップやスライドショーなどの動的なデザイン | ⭐️⭐️⭐️⭐️ | Twitter Facebppk |
| PHP | プログラミング言語 | やや難しい | ショッピング機能など動的サイト構築 | ⭐️⭐️⭐️⭐️ | Amazon Rakuten市場 |
Webデザインは言語も大切ですが、デザインスキルも忘れてはいけません。PhotoshopやIllustratorなどの画像編集ツールを駆使してデザインを磨くことも忘れないようにしましょう。
最後までご覧いただきありがとうございました！