プラン別の料金などで比較しやすい横並びのレイアウト

 
提供しているサービスに幾つかのプラン(バリエーション)があるような時に、上から順に仕様を並べるよりも横に並べたほうが比較がしやすくわかりやすくなります。
極力項目は横に揃うほうが比較がしやすいため、改行がされない文字数で作成できることが見やすく作るコツです。プランに含まない項目も記載しないのではなく薄いグレーなどに設定して含まれないことを表現することで横に同じ項目が並ぶようにしています。

テンプレート

88,000

※価格は税別です
  • BiNDism template利用
  • ヒアリングシート
  • サイト作成(10ページまで)
  • デザイン修正はできません
  • フォーム(Smooth Contact)
  • BiND Press(templateによる)
  • サーバー引っ越しサポート
  • WordPressサポート
  • SNSサポート(Facebook.Twitter)
  • GoogleAnalytics設定
  • GoogleSearchConsole登録
  • 301リダイレクト設定
  • 納品時講習
  • 更新サポート(1ヶ月)
  • 訪問サポート
  • 有効期限:3ヶ月 ※6

スタンダード

168,000

※価格は税別です
  • 訪問打ち合わせ ※1
  • 構成・プランニング
  • サイト作成(10ページまで)
  • デザイン修正 2回まで ※2
  • フォーム(Smooth Contact)
  • BiND Press
  • サーバー引っ越しサポート ※4
  • WordPressサポート ※5
  • SNSサポート(Facebook.Twitter)
  • GoogleAnalytics設定
  • GoogleSearchConsole登録
  • 301リダイレクト設定
  • 納品時講習(2.5時間)
  • 更新サポート(3ヶ月)
  • 訪問サポート
  • 有効期限:12ヶ月 ※6

プレミアム

198,000

※価格は税別です
  • 訪問打ち合わせ ※1
  • 構成・プランニング
  • サイト作成(12ページまで)
  • デザイン修正 2回まで ※2
  • フォーム(CGI) ※3
  • BiND Press
  • サーバー引っ越しサポート ※4
  • WordPressサポート ※5
  • SNSサポート(Facebook.Twitter)
  • GoogleAnalytics設定
  • GoogleSearchConsole登録
  • 301リダイレクト設定
  • 納品時講習(最大6時間)
  • 更新サポート(6ヶ月)
  • 訪問サポート(1回) ※1
  • 有効期限:18ヶ月 ※6

  • チェックマーク・と四角(チェックなし)はBiNDのアイコンフォントを利用しています。
  • 該当しない項目(チェックなし)の色は、選択して文字色で指定しています。
  • 同項目が横に並ぶことで比較しやすくしているため、各項目で改行の有無などでずれることがないようにすることが必要です。
  • 各カラムの枠線は、CSSタブで「.column」に対して設定しているので、カラムの増減にはそのままで対応します。

Tablet View

SP View