記事の監修者
「マークアップとコーディングって、どう違う？」
プログラミングを学び始めて、このような疑問を持ったことはありませんか。
カタカナで似たような雰囲気を持っていて、こんがらがってしまいますよね。
そこで今回は、マークアップとコーディングについて、解説します。
①マークアップとコンピューターからの見え方
マークアップとは、「WEB上に表示される文章の構造を、ハッキリさせること」です。
”見出し”や”箇条書き”などの意味を持たせ、文章をわかりやすく表示させるために行います。
「見出しや箇条書きは、見ればわかるのでは？」
そう思った方がほとんどでしょう。
確かに「人の目」であれば、どこが見出しで、どこが箇条書きなのか、理解できるはずです。
例えば、以下のような文章があります。
エンジニアになるために習得が必要なプログラミング言語
・HTML
・CSS
・Ruby
・Java
・Python
これらのプログラミング言語を習得することで、エンジニアを目指すことができます。
いかがでしょうか。
見出し、箇条書き、テキストがどれに当たるのか、ある程度分かると思います。
では、この文章が「コンピューターの目」からは、どのように見えるのでしょうか？
実は、コンピュータの目からでは、上記の例文が「同じ文章」として認識されるのです。
つまり、文章を構成する要素（見出し、箇条書き、テキストなど…)がどこに当たるのか？
それが全く分からない状態なのです。
そのため、マークアップを怠ると、「見出しや箇条書きがわからない文章」として表示されます。
だからこそ、この作業でコンピューターに文章の要素を、教えてあげる必要があります。
さらに、マークアップという作業にはもう一つ、大きな役割があります。
それは、「SEO対策」というものです。
「SEO対策って、何？」
そんな疑問を持っていることでしょう。
そこで、次の段落では、「SEO対策」について解説します。
②SEO対策について
SEO対策とは、「検索結果で上位表示させる施策」です。
みなさんは、調べ物をするときに「Google」を活用すると思います。
検索窓に「プログラミング 副業」といったキーワードを入力し検索をすると、無数のWEBサイトが表示されます。
検索によって表示されるWEBサイトを、いかにして最初に表示させるか？
これが「SEO対策」です。
Googleなどの検索結果から、WEBサイトを最初に表示させるための施策が「SEO対策は分かったけど、それがマークアップと、どう繋がるの？」
といった疑問を持っていることでしょう。
次の段落では、マークアップがもたらすSEO対策について、紹介します。
③マークアップがもたらすSEO対策
マークアップがもたらす「SEO対策」。
それは、「文章の構造化」にあります。
なぜ、文章の構造化が「SEO対策」につながるのでしょうか？
その理由は、Googleのシステムが関係しているからです。
Googleでは、わかりやすいWEBサイトを上位表示させます。
この「わかりやすい」には、文章の分かりやすさ以外にも、「構造の分かりやすさ」も含まれているのです。
例えば、先ほどの例文。
エンジニアになるために習得が必要なプログラミング言語
・HTML
・CSS
・Ruby
・Java
・Python
これらのプログラミング言語を習得することで、エンジニアを目指すことができます。
この文章を、2つの方法でマークアップします。
Aは「段落分けのみ」。
Bは段落分けの他に「見出し、箇条書き」をマークアップ。
どちらが上位表示されやすくなるでしょうか？
Googleでは、構造がわかりやすい文章を評価します。
そのため、Aの条件よりも、Bの条件の方がGoogleに評価されやすくなります。
人の目からも、コンピューターの目からも、情報をわかりやすく伝えるために、整理する。
それが、「マークアップ」という作業です。
①コーディングとは
コーディングとは、「プログラミング言語を用いて、ソースコード全体を記述すること」です。
「ソースコードって何？」
そんな疑問を持った方もいるでしょう。
ソースコードとは、コンピューターに指示を与え、プログラムを動かすための文章です。
例えば、仕事の指示を受けたとします。
もし、その内容がわからない場合、どうなるでしょう？
おそらく、どんな行動をすればいいのかわからず、仕事を進められない。
といった状況になると思います。
それと同じで、コンピューターは、プログラミング言語による的確な指示がなければ、何もできません。
サイトやHPをWEB上に正しく表示させるために、プログラミング言語で指示書を書き進めていく。
それが、コーディングという作業になります。
「じゃあ、コーディングをするために必要なプログラミング言語って、何？」
そう思っている方がほとんどでしょう。
次の項目では、コーディングに必要なプログラミング言語を紹介します。
②コーディングに必要なプログラミング言語
コーディングに必要なプログラミング言語は、主に3つです。
1.HTML
2. CSS
3. ⅲ, JavaScript
HTML
HTMLとは、「WEBページの”構造をつくる”ための言語」です。
一言で言うと、「レイアウトを整える言語」ですね。
見出しや箇条書き、段落といった文章の要素を示し、WEB上で正しく表示させるために行います。
先ほど紹介した「マークアップ」という作業は、このHTMLで行うのです。
CSS
CSSとは、「WEB上に表示されている”文章の見た目を設定する”ための言語」です。
一言で言うと、「デザインを整える言語」ですね。
文字の大きさや色、背景などを整え、伝えたいことをハッキリと表現するために行います。
このCSSは、HTMLとセットで扱います。
HTMLで文章のレイアウトを決め、CSSで文章のデザインを加えるといったイメージです。
JavaScript
JavaScriptとは、「WEBページに”動きを生み出す”ための言語」です。
HTMLとCSSを使って、レイアウトとデザインを決めた場合、その設定どおりに表示されます。
そのため、時間を使った表現（上下左右への移動、拡大表示など）がなく、見ごたえがありません。
そこで、JavaScriptを使うことで、動きを生み出すことができます。
画像を拡大させて見やすくできたり、アニメーションをつけて使いやすくできたりと、利便性を上げることも可能です。
いかがでしょうか。
紹介したプログラミング言語を使いこなすことによって、見やすくわかりやすいWEBページを作ることができるのです。
「WEBページを作るには、3つのプログラミング言語を学ぶ必要がある」
「見やすくわかりやすいWEBページを作るために、意識することはないのか？」
そんな声が聞こえてきそうです。
最後の項目では、「UI / UX」について、紹介します。
③UI / UXについて
UIとは、「ユーザーインターフェース」の略称です。
WEBサイトに来てくれた人が見る、すべての要素を指します。
一方のUXとは、「ユーザーエクスペリエンス」の略称です。
これは、来てくれた人がWEBサイトを閲覧して、得られる体験を指します。
「どうしてUI / UXの知識が必要なの？」
そう思った方がほとんどだと思います。
UI / UXの知識が必要な理由。
それは、「WEBサイトに来てくれた人をファンにするため」です。
例えば、あるWEBサイトをクリックし、訪問したとします。
そのサイトは、すべての文字が同じ大きさで、文字に使われている色は黒色のみです。
背景は白色だけで、画像もありません。
まるで、論文を淡々と読むようなサイトです。
このようなサイトに、もう一度来てみたいと思うでしょうか？
おそらく、ほとんどの方が「来たくない」と答えるでしょう。 （＊論文が好きな人は除きます）
だからこそ、UI / UXを意識したコーディングが必要なのです。
WEBサイトに来てくれた人に、満足してもらう。
そのためには、見やすくわかりやすいサイト作りが欠かせません。
来てくれた人が「ためになった」と思ってもらえるようなサイトを作り続ける。
それが、ファン作りの大切な一歩になるのです。
まとめ
今回は、マークアップとコーディングについて紹介しました。
ここで、マークアップとコーディングについて、おさらいをしておきます。
・マークアップ…「文章の構造をハッキリさせる」
・コーディング…「プログラムを動かすための文章を記述する」
この2つのスキルは、「ファンを生み出すWEBサイト」を作る上で欠かせないスキルです。
ぜひ、活用できるように、プログラミングの勉強を頑張ってくださいね。
全国どこにいても学べる！超優良のプログラミングスクールまとめました【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール
自分の住んでるエリアでプログラミングスクールを探したい⭐️
エリア別で、おすすめのプログラミングスクールをまとめました。
ぜひ参考にしてみてくださいね。
北海道 / 東北
関東
群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川
中部
福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟
近畿
兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山
