Web初心者がコーディングを学習する方法：ネットショップの開設に向けて

2023年6月5日

ネットショップを自分の力で作り上げていく場合、Web制作のスキルは欠かせません。特に、イメージしたデザインをパソコンまたはスマホ上で表示できる形にしていく「コーディング」という作業は、デザイン性・機能性の高いネットショップを構築していく上で重要です。

しかし、今までWebサイトを制作したことがなくて、コーディングが上手くできるかどうか不安に感じている方もいらっしゃるでしょう。そこで、この記事では、Webショップの制作に欠かせないコーティングの基礎知識やおすすめの学習サービスを解説しようと思います。

コーディングに必要なHTMLとCSS

Webショップの構築に欠かせないコーディングという作業には、最低限HTMLとCSSの知識が必要です。まずは、HTMLとCSSについて解説いたします。

Webサイト制作に欠かせないHTML

Webショップを含むWebサイトを作る上で、最も基本的な言語がHTML（ハイパーテキスト・マークアップ・ランゲージ）です。私たちが普段から利用しているWebサイトの多くにHTMLが使われています。

実際にWebページのHTMLを見てみましょう。Google Chromeなら右クリックで「ページのソースを表示」を選んでください。Microsoft edgeの場合は右クリックで「ページのソースの表示」を選びましょう。すると、そのページのHTMLが表示されます。

英語がズラリと並んでいると思います。これら一つ一つがHTMLタグで構成されています。HTMLタグを使うことで、どこにどのような文章を表示させるか、どこにどんなサイズで画像を表示させるかをコーディングできるようになっています。

思い通りにデザインするためのCSS

CSSはHTMLとセットで使われる言語で、Webページ上のデザインを設定する役割を担っています。例えば、見出し部分の文字のカラーや大きさを設定したり、あるページの背景色を指定したりと、思い通りのWebページがデザインできるようになっています。

Webデザイン初心者がコーディングを勉強する方法

先ほどご覧いただいたとおり、最初はHTMLを見ても何が何だか分からないと思います。しかし、分かってくると意外と簡単に使えるようになるのがHTMLとCSSの特徴です。

Webショップを立ち上げる前に、まずはコーディングの学習からスタートしてみましょう。

独学でコーディングを学ぶ

Webサイトのコーディングは、独りでも学習できます。書店にもHTMLやCSSに関する分かりやすい書籍が多く売られています。そのどれかを買って読み進めていけば、始めは意味不明に感じるコーディング作業も何となく分かってくるはずです。

ただ、書籍を眺めているだけではコーディングスキルは身につきません。書籍から得たコーディングに関する知識を実践で使えるようにするためには、自分自身で手を動かしていくことが重要です。

そこで役に立つのが、パソコンやスマホアプリで簡単にコーディングを学習できるサービスです。「Progate」はHTMLやCSSの他、実務で使えるプログラミング言語を学習できるサービスです。

参考：progate

HTMLの超基礎から教えてくれるので、これからコーディングを学ぼうという初心者でも安心です。

なお、パソコン版の「Progate」が難しくてついていけない場合は、スマホアプリ版がおすすめです。スマホアプリ版なら、HTMLやCSSのコードを穴埋めしていくだけなので難易度が低いです。さらに、ベッドに寝ころびながらでも気軽に取り組めるというメリットもあります。

スクールでコーディングを学ぶ

独学でコーディングを勉強しようとしても、ついつい他のことに気が散ってしまい学習が疎かになることってありますよね。そんなときは、思い切ってスクールに申し込んでしまうのがおすすめです。

スクールでコーディングを学ぼうとすると数万円から数十万円のお金がかかります。しかし、「あれだけ支払ったのだから、何とかマスターしないと！」という気持ちが強くなるので、独学よりもスキルUPの速度が速くなる傾向にあります。

コーディングは、1つ分からないことがあったりエラーが出てしまったりすると、学習がストップしてしまうのが難点。その点、スクールを利用していれば、分からないことがあってもインストラクターに質問ができます。

最近では、通学型とオンライン型のスクールがあります。通学型なら同じ目標を持った仲間ができるでしょう。一方、オンライン型なら、スクールのFacebookや掲示板などを通してコーディングを学ぶことができます。

気を付けて！コーディング初心者がやってしまいがちな学習方法

独学の場合、自己流でやってしまう人がいます。自分なりの学習方法を身につけるのは悪いことではありませんが、方法が間違っていると本来必要なスキルが身につかないことも多々あります。

そこで、ここからはコーディング初心者がやってしまいがちな間違った学習方法について解説しようと思います。以下のいずれかに当てはまる方は、一度学習方法を見直してみましょう。

英単語のように丸暗記しようとしてしまう

中学生の時に英単語を覚えたときのように、HTMLやCSS言語も丸暗記して覚えようと頑張ってしまう人がいます。確かに、コードを暗記していると、コーディングする時にスラスラと入力できるかもしれません。

しかし、Webショップを含むWebサイト制作においては、「使うコードはググったらダメ、本を見てはダメ」なんていうルールはありません。覚えていないコードがあっても、その場で調べれば十分です。

コーディングに必要なのは、コードを丸暗記することよりも、どのようなコードがどんな場合に活用できるか等、コードの意味や必要性を理解しておくことです。

手書きでノートに書いてしまう

コーディングに必要なコードをノートに手書きで書いている方もいます。手を動かしてコードを書くことは必要ですが、それなら手書きするよりもパソコン上で打っていく方がおすすめです。

実際にWebサイトを制作する時は、コードを手書きでノートに書いていくことはありません。実践ではパソコン上でコーディングを行うことになるので、キーボードを使って正確かつスピーディにコーディングする練習を優先させましょう。

コードを完璧に覚えようとしてしまう

HTMLでもCSSでも、Webサイト制作で使うコードはたくさんあります。特に完璧主義の方はコード全てを覚えようとしがちですが、その全てを覚えようとすると、かなりの時間がかかってしまうでしょう。

しかし、コードを覚えることよりも、Webサイト制作においては、必要なコードを見つけ出す「検索力」の方が大事です。

例えば、お手本となるWebショップを見たときに、そのWebショップのコーディングを実際に調べてそのコードを模写するようにしていれば、自分が作りたいウェブショップを簡単に作り出せるようになるでしょう。

コーディングとプログラミングは違う

コーディングを勉強していると、ある時、「あれ、コーディングとプログラミングってどう違うんだろう」と思うことでしょう。コーディングとプログラミングの違いって、分かっているようでイマイチ分かりませんよね。

そこで、コーディングとプログラミングの違いについて見ていきましょう。

見た目を整えるのがコーディング

コーディングとは「コードを書くこと」を意味します。HTMLやCSSを駆使して入力したい文字や表示したい画像を指定しつつ、見た目を整えていく作業がコーディングです。

何をどうするか設定するのがプログラミング

プログラミングは「プログラムを作ること」です。例えば、「条件Aを満たした時に条件Bを実行する」というように、何をどうするかを設定する作業をプログラミングといいます。

ネットショップのWebサイトを作成する手順

ここからは、具体的にWebサイトを作っていく手順を解説します。Webページを作成する場合も、ネットショップを作成する場合も手順は同じなので、参考になさってくださいね。

組み込みたい内容を考える

まずは、Webサイトに盛り込みたい内容を決めます。ネットショップの場合は、商品一覧ページや各商品の詳細ページ、その他にも会社概要やよくある質問など、複数のページが必要ですよね。

どのような内容のページを掲載するかを箇条書きで記載していっても構いませんが、頭の中が混乱してしまう場合は、マインドマップツールを使うと考えやすくなります。マインドマップとは、思考を整理し表現する際に役立つツールのことです。

ユーザーをイメージする

Webサイトを制作していく上でユーザーを想定しておくのは重要なことです。あなたが商品を販売したい人はどんな人でしょうか。キャリアを積んだ男性かもしれませんし、あるいはオシャレを楽しみたい女子大学生かもしれません。

まずはターゲットを想定し、その人がどのようなWebサイトを好むのかをイメージしつつネットショップ全体のカラーや構成を決めていきましょう。

ワイヤーフレームを制作する

だいたいのデザインが決まったら、次にワイヤーフレームを作成します。ワイヤーフレームとは、Webサイトの下書きのようなものです。ワイヤーフレームの作り方はウェブデザイナーによって異なりますが、AdobeのPhotoshopで作成する人が多いです。

ワイヤーフレームでネットショップ全体のデザインを見える化していくことで、「ここはもっと明るい色にした方が良いのではないか」と具体的に修正を加えていけるようになります。

HTMLやCSSを保存するためのフォルダを作る

ワイヤーフレームが完成したら、次にデザインをHTMLやCSSで書き出していきます。いよいよコーディング作業と言いたいところですが、まずは事前準備が必要です。Webサイト上のデータは、主にHTML・CSS・イメージ画像に分けられます。

これらのデータがごちゃごちゃにならないように、各ファイルを保存するためのフォルダを作成しておきましょう。

HTMLを書く

HTMLを記述していきます。Webページは、例えば「head」「main」「side」「hooter」に分けられます。HTMLはそれぞれのパーツごとに作り上げていくイメージです。ごちゃごちゃになってしまわないように、まずは「head」、次に「main」という風に順序だてて記載していきましょう。