MENU

WEBデザインのプログラミングとコーディングの違いって何?

こんにちは!フリーランス1年目WEBデザイナーの香里です。
今回はWEBデザインでよく聞く疑問について考えてみました。

WEBデザインをするときによく聞くのは「コーディング」という言葉です。
でもこれ、実際に行う作業を見ると「プログラミング」と同じ気がするという意見も。

コーディングとプログラミングではどこが違うのか。
初心者でもわかりやすく説明を頑張るので、参考にしてみてください。

基本的にはどちらもコンピューターを動かすために指示をすること

基本的なことを言えば、コーディングとプログラミングはどちらもコンピューターを
動かすための指示をすることです。

コンピューターを動かすためにはちゃんと指示を出す必要があります。
でも普通に私達が使っている言葉は、コンピューターには理解が出来ません。

そこで「コンピューターが分かる言葉」を使って支持を出すことが一般的には
プログラミングと言われるのです。

でもプログラミングにも色々な種類があります。
単純に言えば、コンピューターに指示を出すための言葉の種類が違うのです。

そして使っているコンピューター用の言葉の種類によって、出来ることも変わります。
これが「プログラミング」と「コーディング」の違いになるのです!

言い方を変えれば「コーディングはプログラミングの中の1つ」ということになります。
ただし現状ではコーディングとプログラミングははっきりと区別されているのです。

ではもう少し詳しくプログラミングとコーディングの違いを説明しましょう。

プログラミングはコンピューターに複雑な計算をさせる指示をすること

まずはプログラミングについて。
先ほどの説明で言うなら「コンピューターを動かすために専用言語で指示を出す」こと。

でもそれはコーディングも基本的には同じことです。
ではコーディングとの違いはどこにあるのでしょうか。

プログラミングでは「コンピューターに計算をさせる指示を出す」ということです。
ちょっと砕けた言い方をすれば、コンピューターが考えて結果を出す事になります。

例えば通販サイトで在庫数の表示がある場合、同じ画面が表示されているはずの人でも
在庫数に違いが出る可能性はありますよね?

もっと単純に言えば、サイトの来場者数はそのサイトを見た人によって違います。
これらは全てコンピューターがその状況を見て画面を表示している事になります。

このようにその時の状況によってコンピューターが計算(演算)をして画面を表示させる
という指示を出すために行われるのがプログラミングです。

使うコンピューター用言語も昔から使われているC言語やBASIC、最近ではPHPや
Pythonなどを使って行うことになります。

基本的には「~のときに~をする」ということを、専用言語でコンピューターに
指示することをプログラムと呼びます。

コーディングは決まった内容の伝達、表示をするためのコードを使うこと

次にコーディングについて。
こちらは「決められた内容の伝達、表示の指示をする」プログラムになります。

コードと呼ばれる、プログラムの中での目印になる言語を使って決まった内容を
画面に表示させることに使われることが多いです。

例えばブログのタイトルを表示させるときに、タイトルに決まった文字列をつけることで
コンピューターが識別できるようになり、決まったところに表示させてくれます。

使われるのも普通のプログラム言語と違って、「目印」という意味のマークアップ言語を
使ってコンピューターに指示を出します。

WEBデザインでよく使われる「HTML」と「CSS」はこのマークアップ言語です。
つまりこれらを使ってプログラムすることを「コーディング」と呼ぶのです!

コーディングに使われるHTMLやCSSでは「文字を表示する」や「色をつける」など
決まった指示の文字列を使います。

これが「コード」で、これをプログラムするために「コーディング」となります。
WEBデザインではホームページなどの装飾によく使われています。

コンピューターが計算をするかによってコーディングとプログラミングが分けられる

ちょっと大雑把になりましたが、プログラミングとコーディングの違いを説明しました。
現状ではこんな感じではっきりと区別されています。

ではもう少し簡単にプログラミングとコーディングの違いを説明します。
ずばり、「コンピューターが計算をするか」が違いとなります。

PHPを使った「プログラミング」では、コンピューターがその時の情報を判断して
~のときには~をする、○○の時には

をすると指示を出します。

CSSを使った「コーディング」では、文字に色を付ける、記号を入れるなど状況では
変わらない指示を出す事になります。

それにWEBデザインの場合には、コーディングは画面に関わる事が多く、プログラムは
WEBサイト根本のことなので画面に見えることは少ないです。

ただJavaScriptなど動きを指示するプログラミングをサイトでも使うことがあるので
完全に分けるのは難しいところになるのですが。

でも先ほど説明した「コンピューターに計算をさせるのか」ということについては
完全にプログラミングとコーディングを区別するために使う事ができます。

まずは完全に区別されている言葉、ということを覚えておきましょう。

WEBデザインのコーディングのやり方を確認してみる

WEBデザインをするときにプログラミングやコーディングはどのように使われるのか。
そのやり方を確認していくことにしましょう!

サイトを作る時には基本的に「HTMLで土台を作る」ことをしてから「CSSで装飾」を
行うという流れになることが多いです。

つまり基本的にはコーディングをして、サイトを作っていくことになります。
ただしサイトによっては動きが必要になる事もありますよね。

その時にはJavaScriptやPHPを使ってプログラミングで動きをつけることになります。
これを繰り返して、1つのサイトを作っていきます。

出来上がったらちゃんとブラウザで表示されるのか、実際に使われているブラウザで
コーディングしたものを見てみることも重要なことです。

いわゆるデバッグ作業、コーディングの指示を間違えていないか、正しく表示されるかを
確認していくことになります。

ではそれぞれの作業のもう少し詳しい流れを説明していきましょう。

HTMLを使ってデザイン通りのサイトを作っていく

まずはHTMLを使って、クライアントの希望に合うサイトを作ります。
事前にサイトの完成予想図をデザイナーやクライアントと相談して決めておきます。

その完成図を元に「どこにどんな文字が書かれているか」や「どんな図形が入るのか」を
HTMLでコンピューターに指示をしていくことになります。

基本的にはHTMLエディタという専用ソフトを使うのですが、人によっては
テキストエディタで作るという人もいるようですが…

私の印象としては、コーディングは統一されているものを使ったほうがわかりやすいです。
他の人が見てわからないコーディングは修正がとても大変です。

多くの人が使っているHTMLエディタなら使える人も多いので、誰が見てもわかる
コーディングとなることが多いです。

WEBデザイナーがコーディングの知識を持っていれば、簡単な修正をしてくれる
ということにも期待ができます。

そんなHTMLエディタを使って、まずはサイトの土台となるコーディングをします。

CSSを使って装飾をする

HTMLで基本的なサイトの土台ができたら、今度はそれをきれいに見せるための
コーディングを行います。

ここで使うのがCSSというコンピューター用言語で、HTMLと同じく「マークアップ言語」
と呼ばれているものです。

プログラムの途中に注釈(マーク)をつけてコンピューターに指示を出すことから
マークアップ言語と呼ばれるようになりました。

HTMLでは基本的な指示を出していて、そのときに使ったマークと同じものを指定して
装飾させることが出来ます。

CSSでは「文字の色を変える」「文字の周りに枠をつける」「文字の前に記号をつける」
というような装飾をして、サイトをきれいに見せるために使われます。

他にも、別のサイトへのリンクをボタンにして表示するということもCSSで指示をして
行うことになります。

実際のブラウザで表示できるか確認してみる

HTMLで構築したサイトをCSSで装飾したら、実際にブラウザでちゃんと表示されるか
確認する作業になります。

HTMLエディタで作ったファイルをGoogle Chromeなど実際に使われているブラウザに
ドラッグアンドドロップすればサイトとして表示されます。

ちゃんと表示されていなければ、その部分のコーディングを確認して間違いを探して
修正をしていきます。

これを繰り返して、ちゃんと表示されれば完成!

でも別のブラウザでも正しく表示されるのか、ということも確認が必要です。
意外に地味な作業ですが、このデバッグはとても重要なのです。

HTMLエディタによってはこのブラウザでの確認がショートカットキーで出来る
というものもあるようです。

細かく確認をしながらコーディングをしたい、という方にはその機能がついている
エディタを使うことをおすすめします。

HTMLとCSSは別のファイルで作るのが基本

ちなみにCSSもHTMLエディタを使ってコーディングすることが出来ます。
ただしHTMLファイルとは別のファイルを作ってコーディングするのが一般的です。

デバック作業中に間違いを見つけやすくなる、ということでファイルを分けるのが
普通ですが別の理由で分けるという方もいます。

同じCSSコーディングで複数の部分の処理をすることができる、という理由も合って
基本的にはCSSとHTMLは別ファイルで作られることが多いです。

同じコーディングなのですが、HTMLとCSSではその役割が完全に違っています。
でもそのおかげでWEBデザインとしてはかなり多彩なことができる様になりました。

現在ではこの2つのコーディングを使ったサイト作りが主流となっています。
WEBサイト作りの職業を目指すなら、このコーディングを使えるようになりましょう。

コーダーになるためのコーディングを学ぶ方法

私は「WEBデザイナー」として仕事を始めています。
やっとクライアントも増えてきて、なんとか食べていけるようになってきました。

そんな私はサイト作りでは「サイトのデザインをする人」となります。
知識としてコーディングも覚えるという選択肢があるのですが…

基本的には「サイトの完成図を作る」ことを仕事にしているので、コーディングの知識は
多く持っていません。

そしてサイト作りに欠かすことが出来ない「コーディングをする人」はデザイナーとは
別に必要になるのです!

この人のことを「コーダー」と呼んでいて、基本的にはコーディングをする専門の人
ということになります。

コーディングに興味があり、それを仕事にしたいと考えるならコーダーになることを
おすすめします。

でもコーダーになるためにはどうすればいいのでしょうか?
コーディングを学ぶために出来ることを考えてみました。

コーディングを教えてくれるスクールに入って勉強をする

今でも多くの方に注目されているのがWEBデザイン関係の仕事です。
その勉強をするために多くのスクールも開校しています。

そんなスクールに入ってコーディングの勉強をする、という方法です。
私もWEBデザイナーの勉強をするスクールに入ってから、フリーランスになりました。

私の場合はデザインの勉強ができるスクールに入りましたが、コーダーになるなら
コーディングを教えてくれるスクールに入る事になります。

大手のスクールもありますが、女性なら女性専門のコーディングスクールに入るのも
いいかもしれません。

入学金や授業料等、最初に必要となるお金があるのはちょっとした負担でもあります。
私も前職でためた貯蓄を切り崩しながら勉強をしました。

でもちゃんと学んでおけば、即戦力となる技術を習得することが出来ます!
就職の他にもフリーランスで活躍するという選択肢も選べるのは大きな魅力です。

広くおすすめしやすい方法が、こちらのスクールに通うことです。

新人研修をしてくれる会社に就職をする

コーディングについて勉強をする、というだけならすぐに就職してコーダーについて
実践で学ぶという方法もあります。

企業によっては初心者OK、未経験者の新人を募集してくれるところもあります。
それに新人研修をしてくれるなら、そこでコーディングを学ぶことも出来るはずです。

何より周囲には「実際にコーディングをしている先輩」が大勢いるのです。
仕事に使えるテクニックなど、いきなり体験できるというのはかなり魅力的です。

それに就職をすれば、給料が出ます。
新人や研修期間中は安い可能性が高いのですが、こちらは少しでも収入がある。

これはスクールでの支払いのみに比べるとかなり生活に余裕を持つことが出来て
金銭的な負担が少ないというメリットも出来るのです。

ただ慣れない仕事をすることに関するストレスなど、精神的な負担は大きくなる
という可能性もあるのですが。

メタル的な問題が解消できて、コネを持っていてすぐにでも就職できるなら
飛び込んでしまうというのも実践的な学びという意味では効果的な方法です。

コーディングは独学でも学ぶことが出来る

いきなり仕事をするのは難しいし、スクールに通うためのお金もない。
という場合でもコーディングを学ぶことは出来ます。

独学でもコーディングを学ぶことは出来るのです。
実際にコーディングの方法を説明している書籍はかなり多く発売されています。

コーディングをするためのソフトも無料で使えるものもあります。
以前はテキストエディタでコーディングをしていた、という方もいるくらいですし。

ただこちらの方法では、インターネットにつながるパソコンが必要になります。
それに書籍やソフト購入にかかるコストもあります。

でもはっきり言えばスクールに通うよりもかなり安く勉強が出来るのは確実です。
パソコンを持っていない場合はちょっと初期費用が高くなるのですが。

何より自分の好きな時間に勉強できるので、自分のペースで学ぶことが出来ます!
転職を考えている場合も、すぐに辞める必要がないという魅力もあります。

働きながら勉強をするのは大変ですが、まず自分がコーディングの勉強を続けて
仕事にできるのかを確認するには最適の方法がこちらです。

プログラミング、コーディングともに勉強してスキルアップが出来る

プログラミングとコーディングには基本的な違いがあります。
現状では完全に別のものとして区別されているというのは分かってもらえたと考えます。

WEBデザインでは主にコーディングを使う事が多く、一部の人の意見では
WEBデザイナーでもコーディングの知識を持っている方がいいという意見もあります。

確かに知識を豊富に持っている、という意味ではデザイナーでもコーディングが出来れば
使いやすいと判断されることもあるのですが…

私としては、それぞれの専門分野のスキルをしっかりと高めることのほうが重要だと
感じることが多いのです。

これはWEBデザイナーだけではなく、コーダーやプログラマーでも同じです。
実際にWEB関連では技術が革新的に進むことも多くあります。

そのときに、新しい技術を学んで対応できなくなれば仕事がなくなる可能性もあります。
逆にしっかりと勉強をして対応できれば、ずっと仕事が続けられるのです。

プログラミングでは、以前主流だったBASICやC言語を今でも使うことは少なく
最近ではPythonやPHPなどが主に使われるようになりました。

これらは基本的に別のプログラム言語なので、ちゃんと勉強をし直すことが必要です。
同じようにコーディングでもCSSが発展してCSS3となっています。

現状のCSS3では以前出来なかったことが簡単にできる様になり、デザインの幅が広がる
という大きなメリットが出来ました。

どんな職業を目指す場合でも、勉強を続けて知識を吸収することを忘れなければ仕事は
続けられるようになると考えています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次