ホーム
ごあいさつ・選ばれる理由・無料相談・業務内容・数字・事務所のこと・顧問先の声・お問い合わせの案内・お知らせ。
<< デモ一覧に戻る
社会保険労務士事務所のデモ
- このページでは、Frames CMS の製品版で実際に作った社会保険労務士事務所のサイトをご紹介します。労務相談・社会保険の手続き・給与計算・就業規則を扱う、社労士事務所を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、パン屋のデモと同じフレームを、紺の落ち着いた配色に変え、メイン画像を静止画1枚に、右下で回る円形の文字を非表示にしています。
まずは全体像から
このデモの構成
5つのページで構成しています。トップで事務所の考え方・業務・数字・顧問先の声まで伝え、「何をしてくれるか」と「いくらかかるか」のページで相談につなげます。
01
02
業務内容
4つの業務の詳しい説明と、ご契約までの流れ。
03
料金
従業員数で分けた顧問料と、よくあるご質問。
04
お知らせ
さんぷる社労士事務所からのお知らせ一覧です。
05
お問い合わせ
メニューでは「無料相談」の名前で出しています。入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「notch1（ロゴの欠けがあるメイン画像・回る文字）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像は角丸で、左上がロゴの大きさに合わせて欠けるフレームです。右下で円形の文字がゆっくり回り（このデモでは非表示）、右端に縦書きのボタンが出ます。
紺の配色に、静止画1枚、回る文字は「使わない」
「デザイン → テーマカラー」で、メインカラーを紺（標準は落ち着いたグレー）、アクセントカラーを金茶（標準はオレンジ）、薄い色（差し色）をごく淡い青みのグレーに変えています。右端の縦書きの「無料相談」ボタンは、アクセントカラーで出ます。
メイン画像は、「メイン画像のタイプ」で静止画にして1枚だけに。右下で回る文字は、「デザイン → このフレーム専用の素材」で「この素材を使わない」にしました。動きを減らすと、かたい業種にも合う落ち着いた印象になります。
「選ばれる理由」と「数字」で、信頼してもらう
選ばれる理由は、左に見出し、右にアイコン付きのカードを並べるパーツです。アイコンの色は、メインカラーとアクセントカラーを交互にしました。業務内容は写真とアイコンのカードを4列で、顧問先の数や開業年数は、数字が数え上がるカウンターで見せています。
無料相談は横幅いっぱいの写真と文章、事務所のことは写真2枚を重ねたコラージュです。写真の大きいところをはさむと、文字の多いページでも読み疲れません。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーは白いので色つきのロゴ、フッターは紺なので、「フッター用ロゴ（任意）」に白いロゴを入れています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「notch1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
パン屋
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 「これ、どうしたらいい？」に、その日のうちに。 | 基本セット（見出し＋本文＋画像） | |
| 画像（1枚） | 画像（1枚） | |
| 選ばれる理由 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| スタジオのこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 業務内容 | 写真＋アイコンのカード | |
| 数字で見る事務所 | 実績カウンター（数字） | |
| お店のこと | コラージュ（写真2枚＋テキスト） | |
| 顧問先の声 | お客様の声（星評価） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お問い合わせへの誘導 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| お知らせ | お知らせ一覧（自動） |
業務内容
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 業務内容 | 横並び（写真＋文章） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| ご契約までの流れ | ステップ案内（横4列・アイコン） |
料金
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 顧問料 | 料金表（プラン比較） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） |
全16種類のパーツのうち、14種類は製品版でのみ使えるものです。選ばれる理由（アイコンのカード）や実績カウンター、料金表（プラン比較）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
士業の事務所のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 顧問料は載せたほうがいいですか
- 載せたほうが、相談のハードルが下がります。このデモでは、従業員数で分けた3つのプランを料金表で並べました。「給与計算は別」のように、含まれないものも書いておくと安心です。
- 実績の数字は、何を出せばいいですか
- 顧問先の数・開業からの年数・資格者の人数など、事実として言えるものを選びます。このデモでは「ご相談へのお返事は24時間以内」のように、お客さまにとってうれしい数字も1つ入れました。
- 法改正の情報は、どこに載せればいいですか
- お知らせで出すのがおすすめです。このデモでも「最低賃金の改定について」をお知らせにしています。トップに最新の3件が出るので、サイトが動いていることも伝わります。
この構成で作れるサイト
社労士事務所以外にも
このデモは社会保険労務士事務所を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
税理士事務所／行政書士事務所／司法書士事務所／法律事務所／経営コンサルタント／保険代理店 など、「業務の内容と顧問料を、きちんと見せたい」事務所であれば、そのまま当てはまります。
回る円形の文字は、「この素材を使わない」のチェックを外せば元に戻ります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る