管理画面ログインMakeShopトップ成功ノウハウ制作ノウハウコーディングの基礎知識コーディングって何?初心者向けのコーディング基礎知識ツイートシェアそもそもコーディングとは何か?実はデザインの制作が完了しただけでは、ネットショップサイトはまだできていません。そのデザインをもとに、HTMLやCSS(のちほど詳しく解説します)といったマークアップ言語(コーディングをするための記述方法)で見出しをつけたり、リンクを設定したり、文字を太くしたりして、制作したデザインをブラウザ(Webページを見るソフト)で見える形にすることをコーディングといいます。コーディングは、HTMLやCSSの仕様に沿って形成していく作業で、Web制作には欠かせない工程のひとつです。これを読めば、コーディングの基礎から、具体的なポイント、コーディングを外注する場合に気をつけるべき点までわかるようになるでしょう。初心者だけでなく、すでにある程度わかっているという方も、確認のチェックリストとして是非ご活用ください。ネットショップを成功させたい方必見!7年連続ショップ売上No.1のMakeShopを、15日間無料体験できます。モールよりも自由度が高いMakeShopでは顧客データを保持してリピーター促進に活用できるほか、Instagram連携や送料無料ラインの自由設定も可能です。0円でプレミアムショッププランを試す目次コーディングの基礎知識Googleが推奨するコーディングルールコーディングのポイントとクロスブラウザチェックコーディングを外注先に依頼コーディングの基礎知識デザインが終わったら、制作したデザインをそのままWeb上で表現していきます。ここでは、制作したデザインをどうやってWeb上に表示させるかを考えます。このとき必要になってくるのがHTMLとCSSの知識です。HTMLとはWebページを作るための最も基本的なマークアップ言語のひとつです。コンピューターが人間に代わって文書を適切に分析できるようにするための言語です。CSSとはおもにHTML文書に対する表示、およびデザイン(文書の見栄え)などを指定します。HTMLで記述した文章を黒色から赤色にしたいと思った場合、CSSの記述を使って変更します。動きのないサイトを作るならHTMLとCSSだけでじゅうぶんですが、よくトップページで使われているような写真がスライドして動くデザインをしたいときは、JavaScript(jQuery)などの知識も必要になってきます。コーディングは、好き勝手に記述していいものではありません。Webサイト制作では、複数の人たちが集まって作業を分担することも多いです。ルールがないと記述がバラバラになりメンテナンスも悪くなります。一貫性のあるWebサイトを構築するために、会社やプロジェクトによって、あらかじめコーディングルールを決めておくことで、メンテナンスや拡張など容易にできるようになります。途中からプロジェクトに参加した方がスムーズに入っていけることも重要になってきます。今回は検索エンジンのGoogleが推奨しているHTML、CSSのコーディングルールを一部ご説明します。しても専門的な知識が必要なため、すべてを一度に理解することは大変です。ここでは、コーディング方法には下記のような考え方にもとづいて制作する必要があるという認識のもと、読み進めてください。参考:Google推奨コーディングガイドライン(Google)※すべて英文です。Googleが推奨するコーディングルールHTMLのコーディングルールHTML5を使用する以下ではじまる形式で書き、XHTML5は不可。html>HTML5とはWebページの記述などに用いるマークアップ言語、HTMLの第5版の事です。今までWeb上で表現できなかった技術が、この言語を使うことによって、動画・音声・グラフィックの描画をかんたんに表現することができます。画像にはalt属性を追加する画像には、意味のある代替テキストをalt属性として、動画・オーディオコンテンツにはキャプションを記述してください。装飾的な用途の場合など意味を持たない画像については、代替テキストは記述せずにalt=""としてください。id=”text”&gtサンプルテキスト</p&gtと記述したとします。CSSでサンプルテキストを赤に変えたいと思った場合、CSSファイルで下記にようにidを指定することによって変化させることができます。idは文書内で同じ値のものは一度しか使うことができないので、同じ値を使いたい場合は、classを使うといいでしょう。#f00;}id、classの命名idとclassにはちゃんと意味のわかる名前を使うことが推奨されています。見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前をつけるといいでしょう。{}コーディングのポイントとクロスブラウザチェック複雑なHTMLやCSSは、検索エンジンの評価が低くなるだけでなく、サイト表示時のパフォーマンス低下にも繋がるため、下記の点を注意してコーディングをするといいでしょう。HTMLは文書構造、CSSはデザインをあてるものという役割をしっかり考えたうえでコーディングをすることがポイントです。HTML・無駄な改行や余計なスペースをなくし、見出し(h1、h2など)、段落(p)、リスト(ul、liなど)、定義(dl、dt、dd)などの役割にあったタグで正しく構築する。CSS・外部ファイルに書いてリンクさせる。・汎用性のあるセレクタ(*1)はclass(*2)で指定する、font(size、weight、styleなど)やbackgroud(color、image、position)などの複数あるプロパティ(*3)は、まとめて記述するなどの簡潔な書き方をする。{color:red;}というスタイルがあった場合、bodyの部分がセレクタです。{color:red;}のような記述方法で指定します。{color:red;}というスタイルがあった場合、colorの部分がプロパティです。クロスブラウザチェックの必要性デザインをもとに一通りコーディングが終わったら、クロスブラウザチェックをしましょう。Chromeで確認することが一般的となっています。Explorer(11.0)が23.04%、Firefoxが15.7%、Edgeが4.85%となっています。制作したネットショップが、ブラウザによってレイアウトが崩れ商品の購入ができないとなると、いい商材を扱っていても売り上げに繋がらなくなってしまいます。それを未然に防ぐためにも、クロスブラウザチェックは重要です。コーディングを外注先に依頼デザイン制作同様、コーディングの知識も専門的で難しく、自分ではできない場合があります。その場合は、コーディングを外注先へ依頼し、作業してもらうこともひとつの手段でしょう。コーディングだけ請け負ってくれる制作会社も多数あり、MakeShopでもコーディング代行プランというものがあります。コーディングを外注先に依頼する場合は、下記のような点にも注意するといいでしょう。・Webサイトを使って集客をしたいのか、売り上げに繋げたいのか、などの目的を見積もり時にはっきりと伝え、どのような方針やスケジュールでいくのかを確認しましょう。・依頼したらそれで終わりではありません。制作スケジュールを確認して、こちら側で発生する作業(おもにWebサイトに載せる原稿の用意など)を遅れないように準備していく必要があります。・一度作って終わりというわけにはいかないので、Webサイトを作ったあとの運用まで見越して、フォローやフォロー時の料金まで確認しておくといいでしょう。コーディングの記述が整っていると、検索エンジンであるGoogleからの判定もよく、上位表示してもらえる可能性が増え、集客効果も高まる可能性があります。まとめおおまかではありますが、コーディングについていかがでしたか?コーディングとは、Web制作には欠かせない工程のひとつであり、記述が整っているとサイト表示時のパフォーマンスも上がり、検索エンジンで上位に表示してもらえる可能性が増えて集客効果が高まる可能性があります。Googleが推奨するコーディングルールにもとづきネットショップを構築することによって、一層上位表示に効果的なWebサイトを作ることが可能です。自分でコーディングができない場合は外注先に依頼するのもいいでしょう。その場合は、Webサイトでの目的を明確に伝えることと、しっかりと制作スケジュールを把握し、制作が円滑に進むよう、こちら側も努めなければいけません。Webサイトを作ったあとの運用のことも考え、外注先からのフォローやフォロー時の費用まで考慮しておくといいでしょう。以上のことをふまえ、コーディングを進めていただきたいと思います。「リソース不足で困っている」そんな不安を解消!業界No.1※のネットショップ構築サービスMakeShopには、売上改善に役立つ豊富な機能と、運営上の不安を払しょくするためのサポート体制が揃っています。ネットショップ開業に少しでも興味がある方は、ぜひご利用ください。毎日たくさんの方にお申し込みいただいております。0円でプレミアムショッププランを試すツイートシェアこの記事を書いた人オオハシデザイナーこれまでに数多くのWebサイトやスマホサイトの制作を経験。いくつかのWeb制作会社を渡り歩き、実制作やディレクションなど様々な経験をしてきたので幅広く知識を持っている。悩みは趣味がないこと。Reserved.ページトップへ。