こんにちは、みいです。プログラミングやWebサイトに興味がある人はコーディングという言葉を聞いたことがあるかもしれません。
コーディングとは簡単に言ってしまえばデザインされたサイトをインターネット上に表示できるようにすることです。
この記事ではコーディングの基礎知識やどんな人がコーディングを勉強するべきかについてお伝えします。Web関係の仕事に興味がある人にぜひ読んで欲しい内容になっています。
目次
コーディングの基礎知識
コーディングはWebサイトを作る時に必要なデザインをブラウザ上で表示させる工程です。
Web制作の流れ
コーディングを知るためにはWeb制作の流れからおさらいしましょう。
2.Webデザイン
3.コーディング
4.開発
5.テスト
コーディングとはWebデザインが出来上がった次の工程です。デザイン案をマークアップ言語を使ってコードを書き、ブラウザ上に表現します。（マークアップ言語については次の項目で紹介しています。）
つまりWebデザイン案を見てそれをそっくりそのままコードを使ってオンライン上で表現する必要があります。実際にはコーディングが終わるとデザイン案と比較し、デザインの崩れや見落としなどがないか確認が入ります。
コーディングに使われる言語(HTML/CSS)
マークアップ言語とはコーディングの際に使われるHTMLやCSSなどの言語のことをいいます。先ほど「デザインをコードで書く」と説明しましたがちょっと分かりにくいと感じた人も多いはず。
デザインなのに文字で書けるの？
マークアップ言語で何をしているのかというと、コンピューターに「注目してほしいポイント」や「段落などの意味のまとまり」を伝えることで文章の定義付けをしています。
主にHTMLで文章を書き、CSSでその文章にデザインを加えます。つまり表現したいデザインを一度コードという文章でコンピュータに伝え再度オンライン上で見れるようにしているんですね。
目で見たデザインをコードで表現するコーディングってなんだか凄いですよね！
コーディングの専門家コーダーって？
コーダーと呼ばれる人達はWeb制作の中でも主にコーディングを担当している人のことです。コーディングが専門とはいっても実際にはHTMLやCSSだけではなく、JavaScriptなどの動きを付ける部分までコードが書ける人が多いです。
Web制作では仕事の境界線が薄くなってきているので、Webデザイナーがコーディングまで行う場合もあり、コーダーという職種は将来的には無くなるのではないかとも言われています。
Web業界もマルチに働ける人が求められているので、コーダーというコーディング専門職がなくなってしまう可能性はありますが、Web制作においてコーディングという作業が無くなるわけではありません。
そしてフリーランスなどの求人案件を見るとWeb制作の案件ではコーディングのみで応募できる案件もまだまだある印象です。
初心者でもコーディングに挑戦できる
プログラミング初心者におすすめのコーディングから始めてみましょう！
コーディングって意外と簡単
って思ったりしてませんか？コーディングに使われるHTML/CSSって実は初心者にとっても始めやすい言語なんです。
イメージとしてはまずHTMLで文の全体構造を作っていきます。段落を分けたり、見出しなどでポイントを強調したりといった具合です。
次にCSSで打ち込んだ文章に装飾を加えていきます。文字の色や大きさを変えたり、ボックスなどで囲んでみたりという流れです。
文字での説明よりも実際に体験した方がきっとイメージが付きやすいとおもいます。次の項目で実際に触ってみてくださいね！
実際のコーディングを体験してみよう
コーディングを始めるために最低限必要なモノ
・パソコン
・ネット環境
・テキストエディタ
テキストエディタとは実際にコードを書いていく時に使うテキストファイルを編集するソフトです。使い勝手もシンプルで初心者にも分かりやすいため、そんなに身構えなくても大丈夫です。
ここでは実際のコードを触ってもらいましょう。文字の色を変えてみてください。
CSSタブの色指定の部分に色を入力します。
・gray → グレーに変わる
・blue → 青に変わる
・yellow → 黄色に変わる
・red → 赤に変わる
See the Pen
文字の色を変える by mi (@mi_86)
on CodePen.
どうですか？こんなにすぐに目に見えて反応して変わるんです！
思ったより楽しそうと感じたんではないでしょうか？その好奇心からプログラミングを始めてみるのもいい機会だと思います。
コーディングのおすすめ勉強方法
ひとつめの勉強方法はオンライン教材のprobateです。
実際に私もProgateからコーディングをスタートしました。初心者にもとにかく分かりやすいスライドと、可愛いキャラクターを育成してゲーム感覚で進められるのがポイントです。
またProgateを使えば上で説明したコーディングの必須アイテムであるテキストエディタも必要ありません！手軽に始められるのでとにかくコーディングがどんなものか知りたい人にもおすすめです！
まずは無料でお試しもできるので気になる方はぜひトライしてみてくださいね。
ふたつめにおすすめする勉強方法はプログラミングスクールに通うことです。プログラミングの挫折率が高い理由はエラーなどが出てしまった時に、助けてくれる人がいないという点です。
ウェブカツ!!では熟練した講師陣が初心者にも分かりやすくサポートしてくれます。しかもウェブカツ!!では仮入部登録(無料)をすることで一部のレッスンを体験することもできるんです。
自分に合ったプログラミングスクールを探すにはありがたい制度ですよね！ひとりで勉強するのに不安がある人にはプログラミングスクールで勉強するのをおすすめします。
コーディングを勉強すべき人は？
さぁ、コーディングがどんなものか分かった所できになるのは「自分がコーディングを勉強するべきかどうか」ですよね。ずばりWeb関係の仕事をしたい人にはコーディングが必須です！
Web企画者
Web制作の上流部分に携わるWeb企画にも実はコーディングが関係してくるんです。Web企画者は作りたいサイトの構想をしデザイナーや開発エンジニアに分かりやすいWebサイトの画面設計図を作るのが仕事です。
Webサイトを実際に手を動かして作るわけではないといっても、その文書を読むのはWeb制作の専門家たちです。入力フォームひとつをとっても、一行のみの入力フォームと複数行の入力フォームではコーディングの際に使うタグが変わってきます。
企画者がコーディングの知識を持っていることで、それ以降の工程で作業する人達が二度手間で確認をしなくて済むのはおおきなメリットです。
Webデザイナー
Webデザイナーもコーディングの知識が必要な仕事です。現在のWebサイトの多くはレスポンシブデザインと呼ばれるパソコンとスマホの両方に対応したサイトです。
両方の形態に合わせてデザインをする必要がある為、Webデザイナーもコーディングの知識が必須です。またWebデザインはコーディングのひとつ前の段階であるため、コーディングに理解があるWebデザイナーのデザインは実際にコーディングし易いとも言われています。
もちろんコーディングの事を優先すぎるとデザインに制限が出てしまう事もありますのでバランスが難しい部分です。しかしWebデザイナーを目指している人はコーディングは最低限持っていたい知識です。
Webマーケター
WebマーケターとはWebサイトのマーケティングを行う人のことです。日本でも少しずつ知名度が上がってきていますが、まだ企業ではWeb担当がサイトの運営とマーケティングを総合的に担当している場合が多いです。
Webマーケティングを専門に行う場合でもマーケティングのスキルだけしか持っていなければ難しいのが実情です。それはWebに関わる求人を見てみると企画からデザイン、コーディング、開発、そしてマーケティングと総合的な知識を持っている人が求められているからです。
Webのスペシャリストになるにもコーディングは欠かせないのが分かります。
まとめ
コーディングについての知識とWeb関係の仕事についてまとめてみました。コーディングはプログラミングを始める第一歩としてぴったりです。
今プログラミングが気になっている人、将来的にWeb関係の仕事に就きたい人はぜひコーディングに挑戦してみてください。ゲーム感覚で進められるオンライン教材やスマホアプリなども活用すれば、ハードルも低くなるはずです。
これからWeb業界で活躍するためには欠かせないコーディングの知識をしっかり付けていきましょう。
