価格表示の透明性と誠実性
価格表示は顧客の信頼を築くために非常に重要で、ユーザーフィードバックを受け入れ、料金ページを改善するプロセスを持つことも大切です。また価格ページではその表示が解りやすいデザインを第一にします。
ホームページで実際にお申し込みや問い合わせ、注文などのコンバージョンを得るためには、明確にサービスの料金を掲載した方が良いです。特にスクール系のホームページは料金体系表などを作成し、訪問者さんが一目で金額について理解できるようにする必要があります。
例えば英会話のスクールや、学習塾のホームページで、授業料や入塾金などが明確に記載されていなければ、問い合わせや申し込みをするのに躊躇するはずです。
士業系では行政書士や測量、登記屋さん、建築業(リフォーム、外壁塗装)など、料金を明確に提示できない場合でも、ある程度の概算でサービス料金を掲載する必要があります。
概算になる場合は単価を明記すると共に、過去の「見積もり例」などを羅列します。
私の場合は、中小企業に対してのホームページ作成提供で、たくさんのサイトを提供していますが、飲食店などでもメニューとして、かなり細かく料金を設定するようアドバイスしています。
これは理容、美容関係、整体院、整骨院等でも同じ事が言えます。
また、期間限定のサービスや特売品などがある場合は、料金ページのトップに掲載して、トップページのコンテンツから、直接リンクで飛ばすようにします。
商品と価格を見せる一般的な配置の例としては、枠の中に画像を右寄せにして、その左横にサービスと価格を表示させます。あなたのビジネスにあわせて色々工夫してみて下さい。
シリウス2のメインコンテンツの横幅は自由に設定できますが、900PX程度が標準です。画像と文章をバランスよく掲載するために、まず画像の横幅はメインコンテンツの横幅の40%程度で設定し、プレビューで確認しながら調節します。
シリウス2の場合では携帯端末表示で画像を回り込ませたときに、左右の文章と画像が縦に配列されるため、小さい画面でも見やすくなるように設計されています。
■画像を450PXで、「回り込み指定」した例
画像選択時の設定
例1-電化製品
例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>の数で決めるだけです。
テキスト@ |
テキスト@が1列、1行の中に表示されます。テーブル枠の最も基本的な形で、ココから行と列を増やしていく事で、多彩な表が作成できます。
<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
</tr>
</table>
width="100%"・・メインのテーブルの大きさを指定します。
border:1px・・・・枠線の太さを指定します。数字が大きいほど太くなります。
solid #000000・・枠の色を指定する#から下の6桁で色がきまります。
テキスト@ | テキストA |
1行(<tr>が1セット)の中に<td>を2セットにする事で2列になりました。後は<td>を増やしていく事で、基本的に何列でも作成可能です。
<table width="100%" style="border:2px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>
</tr>
</table>
上記例では border を 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>をコピペ貼り付けするとすると簡単に追加できます。
テキスト@ | テキスト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>なども同じルールですが、タグの基本原理なので、覚えておいて下さい。
料金や価格を表示する際に、正確な情報を提供し、隠し料金や追加費用を避けることが重要です。透明性を維持し、顧客が料金について誤解しないように注意。
料金や価格を表示するページはシンプルで分かりやすいデザインにすることが大切です。料金表は視覚的に整理され、容易に比較できるようにデザインを工夫して配置する。
各価格や料金に関連するパッケージやサービス内容を十分に説明し、どのプランがどんな利点を提供するのかを示すことが重要です。特長や利点を強調し、顧客のニーズに合った選択肢を提供する。
カスタマイズ可能なオプションやアップグレードについて明示的に説明し、ユーザーが必要な場合に選択できるようにする。この際、まぎらわしい表示にならないようシンプルにまとめる事。
料金や価格が変更された場合、既存の顧客に対して適切な通知を行い、変更の理由や期限を説明する。
キャンペーンや割引を提供する場合、明確に期間や適用条件を表示し、顧客がその情報を見逃さないようにする。
顧客が疑問や質問を持った場合、簡単にお問い合わせできる方法を提供する。カスタマーサポートへのリンクやフォームを明示的に表示することが役立ちます。
特に料金ページは、閲覧しやすいようにデスクトップからモバイルデバイスまで、異なる画面サイズに最適化させるレスポンシブデザインにすることが重要です。
地域ごとに異なる法的要件に従って価格表示を行い、消費者保護法や規制に準拠する。