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

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

 

ホームページで実際に「お申し込み、お問い合わせ、注文」などのコンバージョンを得るためには、明確にサービスの料金を掲載した方が良いです。特にスクール系、学習塾系のホームページのように料金体系が複雑になる場合は、料金体系表などを作成し、訪問者さんが直感的に費用の概要が理解できるようにする必要があります。

 

例えば英会話のスクールや、学習塾のホームページで、授業料や入塾金、その他教材などの費用が明確に記載されていなければ、問い合わせや申し込みをするのに躊躇するはずです。士業系では行政書士や測量、登記屋さん、建築業（リフォーム、外壁塗装）など、料金を明確に提示できない場合でも、ある程度の概算でサービス料金を掲載する必要があります。

 

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

 

私の場合は、中小企業、個人店舗に対して数多くのサイト提供をしていますが、飲食店などでもメニュー表ではかなり細かく料金を設定するようアドバイスしています。これは理容、美容関係、整体院、整骨院等でも同じ事が言えます。

 

また、期間限定サービスや特売がある場合は「料金ページ」のページトップに掲載して、トップページのメインコンテンツから、直接リンクで飛ばすようにします。特に地域での競合サイトが多い場合はトップページで料金差別化を訴求しなす。

 

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

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

 

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

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

 

シリウス2の場合では画像を回り込ませたときに、レスポンシブウェブの携帯端末表示で左右の文章と画像が縦に配列されるため、小さい画面でも見やすくなるように設計されています。またシリウス2ではアイテム比較やタブコンテンツ、画像ギャラリーなどのパーツ機能を利用して様々な料金表示を作成する事ができます。

 

画像選択時の設定

• サイズ指定方法・・・・・・個別に指定（横）
• 画像サイズ横幅・・・・・・450PX
• 回り込み・・・・・・・・・右回り込み
• 画像ファイルへのリンク・・別ウインドウ
• 枠の設定・・・・・・・・・通常枠

 

 

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

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

 

 

このパーツを利用した場合は、パーツの枠がメインコンテンツの横幅いっぱいで表示されます。なので画像の大きさは、当初設定しているメインコンテンツの幅の30%〜40%を目安にするとテキストとのバランスが取りやすくなります。

 

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

 

 

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

表作成は必須の技術

テーブル枠は、料金表のほかに、学習塾などスクール系では時間割やスケジュールなどにも頻繁に利用され、飲食店ではドリンクメニューにも利用できます。テーブル枠のタグの意味をある程度理解し、使いこなせるようになると色々応用できますし、ホームページ作成が楽しくなりますのでぜひ基本は覚えてください。テーブル枠は「表」とも呼ばれます。

 

シリウス2ではテーブル生成機能により枠自体は自動で作成する事ができます。さらにテーブル生成機能を起動させた状態でデザインモードが利用できるので、直接テーブル枠にテキスト等を記事する事が可能です。シリウス2のテーブル生成機能を使う場合でも、後の更新をスムーズにするため、テーブル枠の基本原理は理解しておいた方が良いです。

 

 

テーブルタグの基本概念

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

 

 

テーブル作成

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

 

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

 

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

 

 

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

 

上記HTMLの例では border を 2px にして外枠を太くしています。

 

 

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

 

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

 

• 表のテキスト�@の横幅を指定すると、その下の行のテキスト�Bにも枠幅指定の定義が影響します。
• <td width="150">のwidth="150"は、数字でPX数を指定する事で、その列の横幅を任意で指定できます。
• 2行目以降からのセルは、1行目の<td width="150">に追従するため記述は不要です。
• 尚テキスト�Aの幅は、幅全体からテキスト�@で指定したPX数を引いた残りになります。

※ 横幅指定の割合は%でも反映します。

 

 

テーブルについては、作成ソフトを利用する場合では、上記の理論だけを理解できていれば十分対応できます。また、テーブルのHTMLタグの基本原理をマスターしておくと、どのような状況でも必要に応じて様々な枠を自由自在にカスタマイズする事ができます。なおネット上でも色々な無料テーブル作成ツールが数多く存在します。

 

シリウス2の場合ではテーブル枠を「列と行」を指定するだけで、デザインのカスタマイズを含めて全自動作成できますし、最短ホームページテンプレートでは「コピペ、貼り付け」の位置関係を理解する事で自由にテーブル枠が作成できます。

 

※ 7行6列の例

 

 

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

料金や価格を表示する際は、正確な情報を提供し、隠し料金や追加費用を避けることが重要です。透明性を維持し、ユーザーが料金について誤解しないように表示の方法を考慮してください。

 

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

 

各価格や料金に関連するパッケージやサービス内容を十分に説明し、どのプランがどんな利点を提供するのかを示すことが重要です。またその特長や利点を記述し、ユーザーのニーズに合った選択肢を提供しておいた方が良いです。

 

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

 

料金や価格が変更された場合、必要の応じて既存のユーザーに対して適切な通知を行い、変更の理由や期限を解りやすく表示しておく。

 

キャンペーンや割引をユーザーに提供する場合、明確に期間や適用条件を表示し、ユーザーがその情報を見逃さないようにホームページのデザインや配置を考慮しておく。

 

ユーザーが疑問を感じた場合に、簡単にお問い合わせできるように準備しておく。なのでカスタマーサポートへのリンクやフォームを解りやすいに表示する事をお勧めします。

 

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

 

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