ホーム
ごあいさつ、取扱業務3つへの入口、よくいただくご相談、当事務所の3つの約束、無料相談の案内、事務所について、お知らせ。
<< デモ一覧に戻る
士業事務所のデモ
- このページでは、Frames CMS の製品版で実際に作った司法書士事務所のサイトをご紹介します。相続登記・不動産登記・会社登記を扱う事務所を想定した、8ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ19種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、ページ数が多いサイトの型です。他のデモが「1カラム」なのに対し、これだけ左の列にロゴとメニューを固定した2カラム。メニューの下には、全ページ共通の「サイドバー」（相談予約の案内とお問い合わせボタン）も置いています。ページが増えても迷子にならない作りです。
まずは全体像から
このデモの構成
8つのページで構成しています。取扱業務ごとにページを分けるのが、士業サイトの基本の型です。
01
02
相続・遺言
法改正の注意ボックス、お引き受けできることの表、手続きの流れ（タイムライン）、よくあるご質問。
03
不動産登記
売買・贈与・住所変更の3つを、写真つきの横並びで紹介。必要書類の表とご質問。
04
会社・法人登記
設立・役員変更・本店移転をアイコン3列で。設立費用の内訳の表とご質問。
05
費用の目安
3列の表で、業務・報酬・実費を並べたページ。士業サイトで一番よく見られるページです。
06
事務所案内
写真1枚、事務所概要の表、電車・バス・お車・車いすの方への行き方の案内、地図。
07
お知らせ
相談会の日程や法改正の案内など。記事を追加すると一覧と詳細が自動で作られます。
08
お問い合わせ
入力項目を自由に作れるフォーム。相談内容の種類を選ばせる項目を足すと、返信が楽になります。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「biz66-side（左に固定メニューの2カラム）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ロゴとメニューを画面の左の列に固定したフレームです。下へスクロールしても、メニューはいつも左に見えたまま。どのページからでも、ほかのページへすぐ移れます。スマホでは、メニューは開閉式になります。
メニューの下に置ける「サイドバー」
メニューの下には、全ページ共通で出る「サイドバー」を置いています。このデモでは「ご相談予約（初回無料・電話番号・受付時間）」の案内と、お問い合わせフォームへのボタンの2つ。どのページを見ている人にも、相談の入口が必ず目に入るようにしました。
中身は、管理画面の「サイドバー」で、ふだんのページと同じようにパーツを並べるだけです。置けるのは、基本セット・ボタン・画像・CTA（誘導ボックス）・お知らせ一覧・地図などの埋め込み・LINEのボタンなど、細い列でも崩れないパーツです。
サイドバーの位置は、管理画面の「デザイン」で左・右を切り替えられます。このフレームでは、右にするとロゴとメニューの列ごと右に移ります。スマホでは、サイドバーは開閉メニューの中に入ります。
サイドバーは、2カラムのフレーム（biz66-side・mix5-c2 など）で使えます。1カラムのフレームに切り替えると、サイドバーは表示されなくなりますが、中身は消えません。2カラムに戻せば、また表示されます。
メニューの「見出し」でグループ分け
このデモのメニューは、「取扱業務」「ご依頼について」「事務所」の3つにグループ分けされています。この見出しは、管理画面のメニュー編集でリンクの種類を「見出し（リンクなし）」にすると作れます。見出しの下に入れたいページは、そのページの「親メニュー」で見出しを選びます。
2カラムのフレームでは、この見出しがメニューの区切りとして並びます。1カラムのフレームに切り替えると、見出しはプルダウンメニューの親になり、下のページはプルダウンの中に入ります。どちらのフレームでも、メニューの中身はそのまま使えます。
ページが8つ以上あるサイトでは、この見出しがあるだけで、かなり探しやすくなります。士業・工務店・学習塾・病院など、ページ数が増えやすい業種向けのフレームです。
このデモでは、色を2つ変えています
biz66-side の標準の配色は紺と青ですが、事務所の落ち着いた印象に合わせて緑系に変更しました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を2つ選んだだけです。
アクセントカラーを深緑にしたので、左の列（ロゴ・メニュー・サイドバー）と、費用の目安ページの表の見出しが深緑に。メインカラーを少し明るい緑にしたので、ボタンやフッターが緑になっています。同じ系統の濃い色と明るい色の組み合わせは、まとまりが出やすく、士業のサイトで扱いやすい配色です。
変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。フレームを選んだあとで、事務所の雰囲気に寄せることができます。
なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。
変えた色だけが保存される仕組みになっています。あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「biz66-side」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
建設会社
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 取扱業務3つへの入口 | オーバーレイ（画像リンク・横並び） | |
| よくいただくご相談 | 箇条書き（中黒・番号） | |
| 当事務所の3つの約束 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 無料相談のご案内 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| 事務所について | 横長レイアウト（テキスト＋写真） | |
| お知らせ | お知らせ一覧（自動） |
相続・遺言／不動産登記／会社・法人登記
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 法改正の注意ボックス | アラート（お知らせボックス） | |
| お引き受けできること／必要書類 | 表（項目と内容） | |
| 相続登記の流れ | 沿革・年表（タイムライン） | |
| 売買・贈与・住所変更 | 横並び（写真＋文章） | |
| 会社登記の3種 | 特徴・サービス（アイコン3列） | |
| よくあるご質問（相続・遺言） | FAQ（クリックで開閉） | |
| よくあるご質問（不動産登記） | FAQ（クリックで開閉）（デザイン：線で区切る・右に＋） | |
| よくあるご質問（会社・法人登記） | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
費用の目安／事務所案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 報酬の目安（3列の表） | 多列テーブル（自由な列数） | |
| よくあるご質問（費用の目安） | FAQ（Q&Aマーク付き・カード型） | |
| 事務所の写真 | 画像（1枚） | |
| 事務所概要 | 表（項目と内容） | |
| アクセス | 行き方の案内（アイコン付きの枠） | |
| 地図 | 埋め込み（YouTube・地図・iframe）（デザイン：地図モノクロ） |
サイドバー（全ページ共通）
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ご相談予約の案内 | 基本セット（見出し＋本文＋画像） | |
| お問い合わせへのボタン | ボタン（単体） |
全19種類のパーツのうち、13種類は製品版でのみ使えるものです。とくに多列テーブル（自由な列数）は、報酬表のように「業務・報酬・実費」と3列以上並べたいときに欠かせません。製品版では70種類以上のパーツが使えます。
パーツの小ワザ
ホームで使っている「オーバーレイ（画像リンク・横並び）」は、2つ並べるのがおすすめのレイアウトです。このデモではあえて3つ並べていますが、1マスが狭くなるぶん、見出しは短くする必要があります。
目安は、1カラムのフレームなら5〜6文字、2カラムなら4文字まで。このデモでは「相続」「不動産」「会社」と短くして、正式な名前は下の説明文に逃がしました。「相続・遺言」のように長い見出しを入れると、途中で折り返して読みづらくなります。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
士業サイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 報酬をサイトに載せるべきでしょうか
- 載せた方が問い合わせは増えます。士業に相談する方が一番不安なのは「いくらかかるか分からない」ことだからです。
このデモでは「66,000円〜」のように下限だけを出し、別途かかる実費を同じ表に並べました。登録免許税などの実費は事務所の取り分ではないので、分けて書いておくと誤解が起きません。
金額の下に「これは目安で、前提が変われば事前に見積り直す」と一言添えておくのが、あとで揉めないコツです。 - ページはどう分ければいいですか
- 取扱業務ごとに1ページが基本です。検索してくる方は「相続登記 〇〇市」のように業務名で探すので、業務ごとにページがある方が届きます。
このデモでは、相続・不動産・会社の3ページに分け、そこに「費用の目安」と「事務所案内」を足しました。ページが増えたら、サイドメニューの見出しでグループ分けしてください。 - 解決事例や実績は載せていいですか
- 守秘義務があります。依頼者が特定できる情報（地名・時期・金額・家族構成の組み合わせ）は、匿名にしていても特定されることがあります。
このデモでは解決事例のページを作っていません。代わりに「よくいただくご相談」として、誰のことでもない一般的な相談例を箇条書きで並べました。同じ役割を、リスクなしで果たせます。 - できない業務についてはどう書きますか
- 書いておいた方が親切ですし、事務所も守れます。このデモでは、よくあるご質問の中で「遺産分割の話し合いの代理は弁護士の業務」「相続税の申告は税理士の業務」とはっきり書き、提携先を紹介する旨を添えました。
問い合わせの段階で線が引けていると、お互いに無駄な時間が減ります。 - 法改正の案内はどこに置けばいいですか
- このデモでは、相続・遺言のページの上部にアラート（黄色い帯）で「相続登記の義務化」を置きました。そのページを見に来た人に、必ず目に入る位置です。
お知らせにも1本書いておくと、記事として検索にも拾われます。両方に置くのがおすすめです。 - ブログは必要ですか
- 更新が止まったブログは、かえって印象が悪くなります。無理に始める必要はありません。
このデモは「お知らせ」だけで、記事は7本。相談会の日程、法改正、報酬表の更新など、実務のついでに書けるものに絞っています。月に1本でも十分です。
この構成で作れるサイト
司法書士以外にも
このデモは司法書士事務所を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
行政書士／税理士／社会保険労務士／弁護士／土地家屋調査士／中小企業診断士／設計事務所／不動産管理会社／各種コンサルティング など、「取扱業務」と「費用」と「誰がやるか」を伝えたいところであれば、そのまま当てはまります。
2カラムのフレームは、工務店・学習塾・介護施設・自治体まわりの団体など、ページ数が多くなりがちなサイトにも向いています。1カラムのフレームに切り替えることも、あとからいつでもできます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
Free版にも、2カラムのフレームと「サイドバー」を試せる「司法書士事務所」があります。メニューの見出しとサイドバーが最初から入っているので、使い勝手を確かめるのにおすすめです。
<< デモ一覧に戻る