ビジネスサイトで料金ページをテーブルタグで作成する方法

ビジネスサイトで料金ページをテーブルタグで作成する方法

4-料金についてのページを作成する|テーブルタグの基本

ホームページで必須の料金ページ

価格表示の透明性と誠実性

 

価格表示は顧客の信頼を築くために非常に重要で、ユーザーフィードバックを受け入れ、料金ページを改善するプロセスを持つことも大切です。また価格ページではその表示が解りやすいデザインを第一にします。

 

ホームページで実際にお申し込みや問い合わせ、注文などのコンバージョンを得るためには、明確にサービスの料金を掲載した方が良いです。特にスクール系のホームページは料金体系表などを作成し、訪問者さんが一目で金額について理解できるようにする必要があります。

 

例えば英会話のスクールや、学習塾のホームページで、授業料や入塾金などが明確に記載されていなければ、問い合わせや申し込みをするのに躊躇するはずです。

 

士業系では行政書士や測量、登記屋さん、建築業(リフォーム、外壁塗装)など、料金を明確に提示できない場合でも、ある程度の概算でサービス料金を掲載する必要があります。

 

概算になる場合は単価を明記すると共に、過去の「見積もり例」などを羅列します。

 

私の場合は、中小企業に対してのホームページ作成提供で、たくさんのサイトを提供していますが、飲食店などでもメニューとして、かなり細かく料金を設定するようアドバイスしています。

 

これは理容、美容関係、整体院、整骨院等でも同じ事が言えます。

 

また、期間限定のサービス特売品などがある場合は、料金ページのトップに掲載して、トップページのコンテンツから、直接リンクで飛ばすようにします。

 

商品画像と価格を見せるためのHTML

商品と価格を見せる一般的な配置の例としては、枠の中に画像を右寄せにして、その左横にサービスと価格を表示させます。あなたのビジネスにあわせて色々工夫してみて下さい。

 

サイト作成ソフトシリウス2の場合

シリウス2のメインコンテンツの横幅は自由に設定できますが、900PX程度が標準です。画像と文章をバランスよく掲載するために、まず画像の横幅はメインコンテンツの横幅の40%程度で設定し、プレビューで確認しながら調節します。

 

シリウス2の場合では携帯端末表示で画像を回り込ませたときに、左右の文章と画像が縦に配列されるため、小さい画面でも見やすくなるように設計されています。

 

画像を450PXで、「回り込み指定」した例
画像選択時の設定

 
  • サイズ指定方法・・・・・・比率固定(横)
  • 画像サイズ横幅・・・・・・450PX
  • 回り込み・・・・・・・・・右回り込み
  • 画像ファイルへのリンク・・別ウインドウ
  • 枠の設定・・・・・・・・・通常枠

 

例1-電化製品

料金表

TV用液晶モニター
 

液晶ディスプレイ自体でブルーライトを
低減させるブルーライト低減機能搭載

 

・23.6型ワイド 液晶ディスプレイ
・LCD-AK242EH

 

特別価格・・・24,500円(税込み)

例2-健康食品

料金表

ナチュラルベジフルスムージー
 

酵素カプセルタイプ

 

生酵素大地の力カプセルは、220種類以上の原材料を使用し、豊富な乳酸菌、発酵成分、ビタミン、ミネラルなどを 1粒のカプセルに凝縮 !!

 

不足しがちな栄養素を、生で摂取するのと同等の栄養価で補えます。

 

1袋価格・・・2,100円(税込み) ・60粒(1粒重量410mg)・1粒内容量250mg

 

最短ホームページテンプレートの場合

最短ホームページテンプレートでは、付属の「ホームページが作れるようになるサイト」のパーツテンプレートから、画像と文字を横に並べるパーツを選択して貼り付けます。

 

最短ホームページテンプレート

 

このパーツを利用した場合は、枠がメインコンテンツの横幅いっぱいで表示されるため、画像の大きさは200PX〜250PXに設定するとテキストとのバランスが良くなります。

 

枠線色背景色も簡単に変更できますので、コンテンツにあった色調に調節して下さい。パーツテンプレートでは画像が左になっていますが、画像を右に配置するHTMLを貼っておきますので、コピーしてご利用下さい。

 

画像を右に配置

 

<table width="98%" style="border:1px solid blue;" 
cellspacing="0" align="center">
  <tr>
    <td align="left" valign="top" width="350" style="padding:15px;">
      文章
    </td>
    <td align="center" valign="middle" style="padding:8px;">
      <img src="画像ファイル名" width="150" border="0" alt="">
    </td>
  </tr>
</table>

 

価格表をテーブル枠で作る

表作成は必須の技術

テーブル枠は、料金表のほかに、学習塾や英会話スクールでは時間割スケジュールなどにも頻繁に利用されます。飲食店ではドリンクメニューにも利用できます。

 

テーブル枠のタグの意味をある程度理解し、使いこなせるようになると色々応用できますし、ホームページ作成が楽しくなりますのでぜひ基本は覚えてください。

 

テーブル枠は「表」とも呼ばれます。シリウス2ではテーブル生成機能により自動で作成する事ができますが、その原理の基本は理解しておく必要があります。

 

テーブルタグの基本概念

まずザッと下記画像でテーブルタグの概念図を理解し、そのパターンをイメージ出来るようにします。テーブルは表なので、何列、何行にするかを、<tr><td>の数で決めるだけです。

 

テーブルの基本

  • <table>・・全体枠の始まりを指示するタグ
  • </table>・・全体枠の終わりを指示するタグ
  • <tr>・・・・行の始まりを指示するタグ
  • </tr>・・・・行の終わりを指示するタグ
  • <td>・・・・列の始まりを指示するタグ
  • </td>・・・・列の終わりを指示するタグ

 

テーブル作成

ステップ1・・・テーブル枠の基本(1行、1列)
テキスト@
 

テーブル枠作成
テキスト@1列、1行の中に表示されます。テーブル枠の最も基本的な形で、ココから行と列を増やしていく事で、多彩な表が作成できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
</tr>
</table>

 

width="100%"・・メインのテーブルの大きさを指定します。
border:1px・・・・枠線の太さを指定します。数字が大きいほど太くなります。
solid #000000・・枠の色を指定する#から下の6桁で色がきまります。

 

カラーコード表
関連ページ

 

ステップ2・・・1行の中に2列を作る
テキスト@ テキストA
 

テーブル枠作成
1行(<tr>が1セット)の中に<td>を2セットにする事で2列になりました。後は<td>を増やしていく事で、基本的に何列でも作成可能です。

 

<table width="100%" style="border:2px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>

</tr>
</table>

上記例では border2 にして外枠を太くしています。

 

ステップ3・・・2行目を作る
テキスト@ テキストA
テキストB テキストC
 

テーブル枠作成
ステップ2で2列にしたテーブルを、2行にしてみます。</tr>で、いったん1行目を閉じて、2列目を開始するために<tr>新しい行を開始させます。この作業の繰り返しで、行と列は必要なだけ追加する事ができます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>
</tr>
<tr>
<td>テキストB</td>
<td>テキストC</td>
</tr>
</table>

一回目の<tr>から</tr>をコピペ貼り付けするとすると簡単に追加できます。

 

ステップ4・・・列の幅の割合を変更する
テキスト@ テキストA
テキストB テキストC
 

※ 上記は枠の表示が解りやすいようにシリウス2で作成しています。

 

テーブル枠作成
<td width="150">width="150"は、数字でPX数を指定する事で、その列の横幅を固定できます。2行目からのセルはこの1行目の<td width="150">に追従するため記述は不要です。尚この割合は%でも反映します。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td width="150">テキスト@</td>
<td>テキストA</td>
</tr>
<tr>
<td>テキストB</td>
<td>テキストC</td>
</tr>
</table>

 

表の左上であるテキスト@の横幅を指定すると、その下の行のテキストBにも枠幅指定の定義が影響します。なので、各列の一番上のみに枠幅の指定をするだけで良いと言う事です。

 

テーブルについては、作成ソフトを利用する場合に、以上の理論だけを理解できていれば十分対応できます。シリウス2の場合ではテーブル枠をデザインのカスタマイズを含めて自動作成できますし、最短ホームページテンプレートの場合は「コピペ、貼り付け」だけでテーブルが作成できます。

 

ただ、上記のように、テーブルHTMLタグの基本原理をマスターしておくと、どのような状況でも必要に応じていろいろな枠を自由自在にカスタマイズする事ができます。またネット上でも色々な無料テーブル作成ツールが存在します。

 

テーブル枠で時間割を表示させた例

※ 7行6列の例

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

小学生英会話

10:00-10:45

 

フリートーク

15:00-15:45

 

幼稚園英会話

15:20-16:20

 

フリートーク

15:00-15:45

 

幼稚園英会話

15:20-16:20

 

フリートーク

15:00-15:45

 

小学生英会話

11:00-11:45

 

小学生英会話

16:30-17:15

 

幼稚園英会話

16:20-17:20

 

小学生英会話

16:30-17:15

 

幼稚園英会話

16:20-17:20

 

小学生英会話

16:30-17:15

 

英検対策5級

13:00-14:00

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

英検対策4級

14:15-15:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

タグの基本ルール

 

テーブルタグは<table></table><tr>と</tr><td>と</td>のように、ルールとして必ず開始タグ終了タグで1セットになっている必要があります。この関係が成り立っていないと、ホームページのブラウザの表示が崩れてしまいます。

 

他のタグの例では、<p>段落</p><div>領域</div><a href=リンクURL">リンク</a>なども同じルールですが、タグの基本原理なので、覚えておいて下さい。

ホームページ上で料金や価格を表示する場合の注意点とコツ

透明性と正確性

料金や価格を表示する際に、正確な情報を提供し、隠し料金や追加費用を避けることが重要です。透明性を維持し、顧客が料金について誤解しないように注意。

 

シンプルなデザイン

料金や価格を表示するページはシンプルで分かりやすいデザインにすることが大切です。料金表は視覚的に整理され、容易に比較できるようにデザインを工夫して配置する。

 

パッケージの説明

各価格や料金に関連するパッケージやサービス内容を十分に説明し、どのプランがどんな利点を提供するのかを示すことが重要です。特長や利点を強調し、顧客のニーズに合った選択肢を提供する。

 

オプションの明示

カスタマイズ可能なオプションやアップグレードについて明示的に説明し、ユーザーが必要な場合に選択できるようにする。この際、まぎらわしい表示にならないようシンプルにまとめる事。

 

価格の変更通知

料金や価格が変更された場合、既存の顧客に対して適切な通知を行い、変更の理由や期限を説明する。

 

キャンペーンや割引情報

キャンペーンや割引を提供する場合、明確に期間や適用条件を表示し、顧客がその情報を見逃さないようにする。

 

お問い合わせオプション

顧客が疑問や質問を持った場合、簡単にお問い合わせできる方法を提供する。カスタマーサポートへのリンクやフォームを明示的に表示することが役立ちます。

 

レスポンシブデザイン

特に料金ページは、閲覧しやすいようにデスクトップからモバイルデバイスまで、異なる画面サイズに最適化させるレスポンシブデザインにすることが重要です。

 

法的要件の遵守

地域ごとに異なる法的要件に従って価格表示を行い、消費者保護法や規制に準拠する。