contents_003
テンプレート
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
参考
テンプレート
88,000円
※価格は税別です
BiNDism template利用 ヒアリングシート サイト作成(10ページまで)
デザイン修正はできません フォーム(Smooth Contact) BiND Press(templateによる)
GoogleAnalytics設定 更新サポート(1ヶ月) 有効期限:3ヶ月 ※6
スタンダード
168,000円
※価格は税別です
訪問打ち合わせ ※1 構成・プランニング サイト作成(10ページまで)
デザイン修正 2回まで ※2 フォーム(Smooth Contact) BiND Press
サーバー引っ越しサポート ※4 WordPressサポート ※5 SNSサポート(Facebook.Twitter)
GoogleAnalytics設定 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
プラン別の料金などで比較しやすい横並びのレイアウト
提供しているサービスに幾つかのプラン(バリエーション)があるような時に、上から順に仕様を並べるよりも横に並べたほうが比較がしやすくわかりやすくなります。
極力項目は横に揃うほうが比較がしやすいため、改行がされない文字数で作成できることが見やすく作るコツです。プランに含まない項目も記載しないのではなく薄いグレーなどに設定して含まれないことを表現することで横に同じ項目が並ぶようにしています。
カラムの幅はCSSで指定していないので、横に並ぶ数を2や4、5に変更することも可能です。ただ、各項目の表記が改行されると比較がわかりにくくなるので注意が必要です。
このBlockDesignのCSSは、カラム(column)に対して枠線を指定しているのでカラムの増減に対応しています。
料金のフォントは太字のゴシック系で料金などに向いていると感じる"Oswald"に指定しています。GoogleFontでOswaldを指定していますが、このブロックのCSSデータ(contents_003.css)に@import形式で記述してもBiNDが自動的に消去してしまうようで認識させることができませんでした(2018.09.13 現在)そのため、ページ設定にある「スクリプトと詳細設定」に
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
の書式で記述しています。contents_003をこのままのフォントで利用するには上記のlinkの1行を利用したいページのスクリプトと詳細設定に貼り付ける必要があります。
フォントを変更したいときには、このlinkの記述を変更したうえで、contents_003のブロックで大見出しで指定しているfont-familyを変更することで対応可能です。
参考
横に並べないで上から順にプランを記述して区切り線を入れたパターン。
このように項目をスペースを入れながら並べても一見良さそうにも見えますが、このレイアウトはスマホでは非常にみにくくなります。(ウィンドウ幅を狭くして確認してみてください。)
このように横に並べるレイアウトはプラン比較などで下記のように使われています。
https://ja.wix.com/upgrade/website
https://jp.jimdo.com/pricing/