通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ネットショップの作り方 > ネットショップの作り方11 > 自作によるネットショップの作り方

自作によるネットショップの作り方

自作トップバナー

自作とは文字通り「自分で作る」ことです。今でこそ通販ウェブアプリが当たり前になりましたが、かつては自作するのがが一般的でした。

お店を始める場合、まずはレンタルサーバー(空箱)を借り、棚作りから内装外装、レジの設置など、すべて自分で行うのです。まるで日曜大工(DIY)でお店を作るような感じです。

もちろん、実店舗ではないのでノコギリや金槌は使いません。その代わり、HTML、CGI、JavaScript、SSI、PHPなどショッピングサイトを構築するためのプログラミングのようなことを習得して夜な夜な作業に取り組んだりするのです。

※ネットショプ成功事例無料パンフレット配布中

自作の楽しみを追求したい場合

通販システムのショップサーブを借りれば簡単にネットショップが持てます。でも、「そう簡単にお店が持てるのはおもしろくない。自分の手で作りたい。勉強ならいくらでもしてやる!」そんなバイタリティーあふれる方にはまずホームページ・ビルダーの入手をおすすめします。

例え、通販システムを借りたとしても持っていればめちゃくちゃ便利なソフトです。名前の通りホームページを作るためのソフトですが通販サイトの構築でもバリバリに使えます。というかガンガンに使い倒します。

そして、HTMLやCSSをしっかりマスターします(\_(・ω・`)ココ重要!)。もちろん、FTPも使えるようになってください。Java ScriptやPHPなどは正直あまりいらないです。今は、高度なテクニック、例えばリアルタイム受注状況といったお店の一部に貼り付けるようなパーツはjQueryという技術を使います。技術と言ってもコピペするだけですけどね。ただ、様々な仕組みを理解していないと使えないです。

後は、画像編集ソフトはマストです。これは自作でなくても使いまくるので、フォトショップのような高額なソフトはいらないですが、フォトショップ・エレメンツなどの安価なソフトは持っておくと良いです。GimpやPhotoscapeなどの無料ソフトでも良いですが、クオリティーを求める方はぜひ買って下さい。

通販サイトのしくみは理解できていますか?

HTMLやCSSが使えても、通販サイトの仕組みが理解できていないとネットショップの完成があやういです。

簡単に説明すると、通販サイトは普通のホームページと違って「ショッピングカート」という機能を使います。普通のページが「静」だとすれば、カートは「動」です。この静と動を組み合わせるポイントになるのがHTMLの<FORM>タグです。

HTMLでページが作れても、<FORM>のように水面下でデータを動かすタグを理解していないと、ドッキングができません。HTMLで表面を形作り、その水面下で<FORM>を使ってカートと接続するというイメージです。難しいですか?w

ま、そーいう難しいことせずに、「通販サイトを始めたい!」場合は、通販専用のシステムを借りてください。普通ビジネスとしてやる場合はそっちですからw

自作で通販サイト完成までの8ステップ

ちょっと古い情報で、各ページの更新が遅れていますが、個人的にやっていた手法を簡単に紹介します。

ステップ1 ドメインを取得とサーバーを借りる

何と言っても最初はドメイン!そして、サーバーも借ります。(ドメイン名はちゃんと集客力を考えて適切なネーミングを!)サーバーは、どこでも良いです。最近は大差ないです。CGIやPHP、wordpressが使えればOKです。

このサイトはさくらインターネットですが、このサーバーはオールマイティーで使えるのでおすすめですよ。月額500円ですよ(笑)。ワンコインで100ギガです。とても使い切れない容量です。wordpressもかんたんインストールできますし、マルチドメインもバッチリです。

ステップ2 作成するページを決める

あれもこれも作ろうと思うと手がつけられなくなるので、まずは(1)トップページ、(2)商品ページ(テンプレート)、(3)特定商取引法のページです。

ステップ3 ショッピングカートを決める

どんな販売手法を取るのかによってカート選びが変わります。クレジットカードを使う場合は、対応しているカートを使わないと、非対応のカートを使ってしまうと後から追加ができません。非対応のカートも対応させられないことはないですが、プログラマーに外注して10万20万という費用を払う羽目になります。

ステップ3 商品写真と素材集

商品写真を用意します。「とりあえず作っていく」なのですが、使う写真はハイクオリティーがおすすめです。テンションがあがってきますから。そして、商材にあったデザイン(ブルー系とかオレンジ系など、クール系やポップ系)を決めて、それにマッチするような素材を集めたり作ります。

ステップ4 トップページのデザインとレイアウト

お店の顔トップページのデザインです。と言っても、2カラムにするか3カラムにするか選択するだけです。後は、サイドナビの幅などを決めます。枠が決まれば、後はバナーを埋め込むだけですから。

商品数が1,000点を超えるような場合は、トップページは3カラムにすることがあります。通常は2カラムです。商品ページも2カラムなので、トップページをコピペして商品ページのテンプレートを作ることができるので手間が省けます。

2カラムと3カラムの図

ステップ5 商品ページは自動作成CGIを使う

ネットショップの場合、1商品1ページというのが基本になっています。だからと言って、「100点あれば100ページ作るのか?」と言えば、とんでもない!そんなことしてたら地球は滅亡します。

商品ページで固有の情報と言えば、「その商品に関することだけ」です。だから、その他のヘッダーの看板やサイドナビゲーション、フッターなど、「どのページでも同じ表示のパーツはいちいち作らない!」とういのが鉄則です。

データベースCGIを使って、商品ページは自動的に作成するように組み立てます。 作り込みが必要なのは、商品ページのテンプレートだけです。今、この方式でつくるなら、おすすめのデータベースCGIは「CoolandCool」というサイトで配布されている「Database Factorty 2」というスクリプトが使いやすいです。カスタマイズはかなりする必要はありますが、それは一度やればすみますからね。

数は、データファイルと、テンプレートの関係を図に示したものです。商品データファイルの一行をテンプレートに挿入して表示させるのがデータベースCGIの仕事です。

データベースの仕組み

ちなみに、商品データファイルに商品写真のファイル名を入れることもあれば、入れないこともあります。(ショップサーブは入れる)。通常は、「品番.jpg」など、商品番号を商品写真のファイル名にします。 それをしないと、管理が大変になるので、「品番」=「商品写真ファイル名」という基本ルールを覚えておいてください。

ステップ6 商品データの入力

これは先にやっておいても良いのですが、データベースCGIを使う場合は、商品データはCSVファイルに一覧として作成します。このデータファイルの一行一行が、商品ページテンプレートに組み込まれて、商品ぺージとして登場するわけです。

商品データ
これはショップサーブの商品データファイル(エクセル形式)ですが、実際は、カテゴリーや送料無料のオンやオフなど20以上の項目があります。最初の入力だけが大変ですが、一度データ化してしまえば後は楽ちんです。とにかく最初は頑張らないといけませんね。

すんなり行けば良いのですが、商品名に設定したところに説明文が来たり、価格に設定したはずが「0円」表示になったり、何かと小さなトラブルが発生します。冷静にひとつひとつ見ていけば解決します。

ただし、 CGIプログラムの内部は、Perlなどのプログラミングの知識がない人はいじらないようにしてください。修復不可能になりますから。もし、変更を加える場合は、変更前に一回一回コピーしてバックアップを取ったうえでいじくります。これを忘れると、振り出しに戻る!

まとめ

ながながと自作の方法について熱く?語りましたが、ウェブ制作のスキルも極めながらネットショップをやりたい人はぜひお仲間になって下さい。そうではなく、楽してネット販売をしたい人は、さくっとウェブアプリを借りて通販サイトを開店して下さい。

自分が借りているショップサーブをこっそりアピールしてみましたが、月商100万以上を目指す場合はオススメですよ。安いサービスを使うと「もっと上を目指したい!」というときに、必ず後悔することになります。これは間違いないですから。

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP