top-bnr

ネットショップの商品ページ作成を効率よくする具体的な方法

 

エクセル

エクセルを利用した、商品ページのHTMLテンプレート化

システムなど導入すれば、商品情報を作成し登録する機能もあるかと思います。

しかし誰でも使いやすい、完璧なシステムというのはなかなか無いものです。

 

そこで自分好みの、簡単な補助ツールをエクセルを使って作っていきます。

 

まずは練習用のHTMLを準備

いきなり現在利用しているHTMLテンプレートを利用して補助ツールを作っても良いのですが、まずは簡単な例題から進めていきます。

よく使うと思われるリンク、画像、テーブルが含まれるHTMLにしたいと思います。

 

サンプルHTML表示例

上記の表示例のHTMLが下記のコードになります。

<div>
  <a href="https://www.realmax.co.jp/">リアルマックスホームページ</a>
</div>
<div>
  <a href="https://www.realmax.co.jp/wp-content/uploads/2016/03/product_1457598449.jpg">
    <img alt="エクセル" src="https://www.realmax.co.jp/wp-content/uploads/2016/03/product_1457598449-300x225.jpg" />
  </a>
</div>
<table border="1">
  <thead>
    <tr>
      <th>項目1</th>
      <th>項目2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>項目1</td>
      <td>項目2</td>
    </tr>
  </tbody>
</table>

 

これを、誰でも簡単に作成できるHTMLテンプレートをエクセルで作ります。

 

ページ別に変更したい場所を決める

ネットショップの商品説明HTMLとしたときに、商品別に変更したい場所を決めます。

それぞれデザインや表示項目はあるかと思いますが、表示例のHTMLを使って変更箇所を特定の文字に置き換えたのが以下のタグになります。

<div>
  <a href="■リンクURL■">■リンク名■</a>
</div>
<div>
  <a href="■画像リンクURL■">
    <img alt="■画像名■" src="■画像URL■" />
  </a>
</div>
<table border="1">
  <thead>
    <tr>
      ■項目名■
    </tr>
  </thead>
  <tbody>
      ■項目内容■
  </tbody>
</table>

 

■で囲っている部分を、エクセルのセルに入力すれば置き換わるように作っていきます。

 

エクセルでHTMLテンプレートを作成

まず入力してほしい項目の表を作成します。

エクセル入力項目一覧

 

次にエクセルのC1セルに、上記のHTMLタグを貼り付けます。

エクセルにHTML貼り付け

 

次にタグを貼り付けた下のC2セルに、計算式を追加します。

計算式は、=CLEAN(SUBSTITUTE(C1,"■リンクURL■",B2)) と入力します。

エクセル計算式

SUBSTITUTE関数では、C1に張り付けたHTMLタグの『■リンクURL■』文字をB2に入力した値に置き換える処理になります。

CLEAN関数は、本来セル内の改行を削除する関数ですが、今回はセルをコピーしたときにダブルクォーテーション「”」が正しくコピーされないことを防ぐために利用しています。

 

同じように、画像URLの部分まで関数を設定していきます。

セル番号 入力内容
C2 =CLEAN(SUBSTITUTE(C1,"■リンクURL■",B2))
C3 =CLEAN(SUBSTITUTE(C2,"■リンク名■",B3))
C4 =CLEAN(SUBSTITUTE(C3,"■画像リンクURL■",B4))
C5 =CLEAN(SUBSTITUTE(C4,"■画像名■",B5))
C6 =CLEAN(SUBSTITUTE(C5,"■画像URL■",B6))

 

最後にテーブル項目名と、テーブル項目内容の部分ですが、情報に応じて列数や行数に変化が付けられるようにしたいので、いままでの設定と少し異なる設定を行います。

C7セルに =IF(LEN(B7),"" & B7 & "","") と入力します。

これは、B7に入力があった場合、タグとなるようにする設定になります。

それぞれのセルの入力内容は以下のようになります。

セル番号 入力内容
C7

=IF(LEN(B7),"<th>" & B7 & "</th>","")

C8 =IF(LEN(B8),"<th>" & B8 & "</th>","")
C9 =IF(LEN(B9),"<th>" & B9 & "</th>","")
C10 =IF(LEN(B10),"<th>" & B10 & "</th>","")
C11 =IF(LEN(B11),"<th>" & B11 & "</th>","")
C12 =IF(LEN(B12),"<tr><td>" & B12 & "</td></tr>","")
C13 =IF(LEN(B13),"<tr><td>" & B13 & "</td></tr>","")
C14 =IF(LEN(B14),"<tr><td>" & B14 & "</td></tr>","")
C15 =IF(LEN(B15),"<tr><td>" & B15 & "</td></tr>","")
C16 =IF(LEN(B16),"<tr><td>" & B16 & "</td></tr>","")

 

最後にD列からのセルを結合して、以下のような設定を行います。

=CLEAN(SUBSTITUTE(SUBSTITUTE(C6,"■項目名■",C7&C8&C9&C10&C11)," ■項目内容■",C12&C13&C14&C15&C16))

 

エクセルで作ったHTMLテンプレートの確認

計算式を入力したC列は、誤って削除してしまうこともあるので、C列を選択して非表示にしておきます。

正しく表示されるかを確認するために、このサイトの楽天記事をまとめる情報を入力してみました。

エクセル動作確認

 

入力して表示された結合Dセルをコピーして、簡単にHTMLを確認できるサイトに張り付けて確認してみます。

高機能なサイトもあるのですが、今回はシンプルなこちらのHTML確認サイトを利用させていただきました。

上部にHTMLタグを貼り付けると、下部に表示されることが確認できると思います。

 

HTMLテンプレートまとめ

今回は説明のために、簡単でシンプルなページのテンプレートを作成しました。

このようなテンプレートを作成しておくメリットとしては、HTMLの知識が無い人でもある程度ページを作成できるところにあります。

 

高いシステムを導入する前に、エクセルなどで簡単にできることから始めるだけでも、専門知識が無くても行える環境や業務の効率化を行う事が出来ます。

 

今回の記事で作成したファイルもダウンロードできるようにいたしましたので、活用してもらえればと思います。

The following two tabs change content below.
リアルマックス スタッフ
リアルマックス スタッフ
bottom-bnr
  • ブログランキング・にほんブログ村へ
  • FC2ブログランキングへ
  • 人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る