(2) 必要最低限の情報をピックアップし目次サイトマップを作ってみましょう最初は必要最低限のページで目次サイトマップを組み立てます運営していく中で必要なページを足していきましょうスタート時点で必要のないものは削ります会計事務所に限らず士業の業務範囲は広く目次の項目数が多くな

(1)

業種別ホームページ作成講座（全6回）

第6回：会計事務所編

執筆：志鎌真奈美（Shikama.net）ひとくちに「ホームページを作る」と言っても、提供しているサービスや想定している読者層によって、設計の仕方や作成方法が異なってきます。このシリーズでは「目次の作り方」「業種に合ったレイアウトの選び方」「背景色やナビゲーションのカスタマイズ」を軸とした「伝わりやすいホームページ作成のコツ」を業種別に解説してきましたが、いよいよ最後となりました。最終回の第6回目は、会計事務所のホームページの作成です。信頼性が高まるページを作ってみましょう。今回取り上げる業種は、士業全般にも応用できますので、他業種の方もぜひ参考にしてみてください。

会計事務所のホームページに求められる情報

たとえば、月ごとの経理業務の依頼先をネットで検索して、会計事務所のホームページに辿り着いたとします。そのときに、閲覧者はどんな情報を必要とするでしょうか？どんな対応を依頼できるか？ ● 他にどんなサービスがあるか ● 料金は？ ● 連絡先、お問い合わせ方法 ● 担当者はどんな人か？ ● 実績があるかどうか ● 営業時間、曜日・場所、地図 ● などが予想されます。これらの項目から、まずはホームページの目次を組み立てていきましょう。

ホームページの目次を作ろう

(1) ホームページの目次を作ろう

ホームページの目次（「サイトマップ」とも言います）を作ってみましょう。まずは、思いつく順に書き出してみます。付箋などを使うとよいでしょう。

(2)

(2) 必要最低限の情報をピックアップし、目次（サイトマップ）を作ってみましょう

最初は、必要最低限のページで目次（サイトマップ）を組み立てます。運営していく中で必要なページを足していきましょう。スタート時点で必要のないものは削ります。会計事務所に限らず、士業の業務範囲は広く、目次の項目数が多くなりがちですが、まずは第1階層に「サービス案内」とまとめておき、第2階層に詳しい業務内容を設定する方がスッキリとまとまってわかりやすくなります。第1階層は7つ以内にまとめるのがコツです。

(3)「ナビゲーション機能」を使って、(2)で作成した目次を設定していきます

1. ログイン後、「ナビゲーションの編集」をクリックします。 2. 文字の入れ替えなどを行います。

(3)

ナビゲーションの文字を入れ替えます。順序を入れ替えることができます。階層を変更することができます。(第1階層から第3階層まで設定可能) 新規のページを追加します。不要なページを削除します。ページを非表示にすることができます。 3. ナビゲーションの編集が終わったら「保存」ボタンをクリックします。

(4)

ナビゲーションの設定が完了しました。

業種に合ったレイアウトの選択とカスタマイズ

次に、業種に合ったレイアウトを選び、全体のカラーを変えてみましょう。

2014年8月13日以降、新しいレイアウトが使えるようになりました。「レイアウト」のボタンをクリックすると、下記のような画面が表示されます。

(5)

表示されない場合は、新機能へ切り替わっていない可能性があります。右側に表示されるツールバーの「設定」をクリックし、「The New Jimdo」を選択してください。

(6)

(1) 業種に合ったレイアウトへ変更しましょう

1. 「レイアウト」画面から「Helsinki」が表示されるまで横にスクロールします。

2. 「Helsinki」が表示されたら、クリックして選択します。

(7)

(2) ナビゲーションの背景色やボタンのカラーを変更してみましょう

次に、ナビゲーションやボタンの色などを変更し、会計事務所のイメージにあったカラーにしましょう。以下の配色イメージのように茶色、ベージュをベースのカラーに使用します。

配色のイメージ

(8)

2. そのままナビゲーションバーの近くへカーソルを動かすと、カーソルの形がペンキマークになります。「ホーム」の上でクリックしてみましょう。 3. 以下のツールが画面の上部に表示されます。カーソルが乗ったときと乗っていないとき（通常時）の文字色や背景色を、分けて設定することができます。フォントの種類フォントサイズ太字、斜体通常時のボタンの文字色カーソルが上に乗った時のボタンの文字色通常時のボタンの背景色カーソルが乗った時のボタンの背景色 4. 「背景色」をクリックするとボタンの色を変更するためのパレットが表示されます。選び終わったら「選択」をクリックします。同じ要領で背景色（Active）、ナビゲーション全体の背景も設定しましょう。

(9)

【ナビゲーションの設定情報】ナビゲーション全体の背景色：rgba(0, 0, 0, 0) ボタンの背景カラー：rgb(238, 238, 238) ボタンの背景カラー（Active 時）：rgb(2, 82, 150) ボタンのフォントカラー：rgb(68, 68, 68) ボタンのフォントカラー（Active)：rgb(255, 255, 255) フォントの種類とサイズ：Open Sans / 16px

(3) 見出しの色や文字の大きさ、コンテンツ部分の背景を変更しましょう

見出しの色や文字の大きさも「スタイル」を使って、同様に変更することができます。右側のツールバーから「スタイル」をクリックし、カーソルがペンキの形になるところが変更可能な箇所です。見出し・文章・リンクなどの設定を変更するツールフォントの種類フォントサイズ太字、斜体文字の色行間左寄せ、中央寄せ、右寄せ大文字、小文字の組み合わせ方法（英文表記のときに有効）

(10)

水平線の設定を変更するツール背景色の変更水平線の太さ水平線の色実線、点線などを選択コンテンツ部分の背景色を変更するツール背景色の変更【見出し大・中・小の設定情報】見出し大：フォントサイズ 44px / フォントの種類ゴシック / フォントカラー rgb(2, 82, 150) 見出し中：フォントサイズ 32px / フォントの種類ゴシック / フォントカラー rgb(2, 82, 150) 見出し小：フォントサイズ 24px / フォントの種類ゴシック / フォントカラー rgb(0, 0, 0) 「フォントの種類」に、「ゴシック」と「明朝」が新しく追加されています。【水平線・コンテンツ部分の設定情報】コンテンツ部分の背景色：rgb(255, 255, 255) 水平線：太さ1 / 線の色：rgb(237, 237, 237) / スタイル罫線

(4) 全体の背景色を変更してみましょう

全体の背景色を変更してみましょう。背景に画像が設定されている場合は、一度削除してから設定をおこないます。 1. 右側のツールバーから「スタイル」をクリックすると、画面の上部に「レイアウト」「スタイル」「背景」「独自レイアウト」と表示されますので、「背景」をクリックします。

(11)

2.

「オリジナル背景画像」の画面が表示されますので、背景に画像が設定されている場合は、削除します。「現在の画像」と青枠で囲まれたエリアの右下に、「ゴミ箱」アイコンが表示されますので、クリックしましょう。

「この画像を削除しますか？」と表示されますので「はい」をクリックしてください。

(12)

背景色を変更する画面が表示されます。ここでは、2種類の変更方法があります。色番号を入力する ● カラーパレットのバーをスライドすることで色を変える ● ここでは、色番号を入力して変更してみましょう。「EDF3FA」と入力してください。「選択：この色を背景色に使う」のエリアをクリックします。

(13)

背景色が変更されました。

(14)

ヘッダーにタイトル用の文字を配置する

レイアウトや色の変更などが完了したら、ヘッダーにタイトル文字を設定します。使用している「Helsinki」というレイアウトのヘッダー部分には、「ロゴエリア」と呼ばれる画像を画像を設置できるエリアと、「ページタイトル」と呼ばれるタイトル用の文字を設定できるエリアが用意されています。今回は、「ロゴエリア」を使わず、「ページタイトル」のみを使用します。 1. ロゴ画像が設定されている箇所をクリックします。

(15)

2. 左側にゴミ箱アイコンが表示されますので、クリックしましょう。

3. ロゴデータが削除されました。

4. 次に、「ホームページタイトル」と書かれた「ページタイトル」をクリックしましょう。

(16)

6. 再度、スタイルを使ってタイトル文字の大きさやフォントを指定します。右側に表示されるツールボタンの「スタイル」をクリックします。 7. ペンキ型のカーソルを、「ページタイトル」に合わせ、クリックします。 8. 文字の大きさや色、フォントなどを設定しましょう。 9. 「ページタイトル」のスタイルが変更されました。

(17)

【ページタイトルの設定情報】フォントの種類：ゴシック / フォントのサイズ：36px 装飾：太字 / フォントカラー：rgb(68, 68, 68)

トップページに必要情報を入れる

ヘッダー部分の設定が完了したら、トップページに情報を入れていきます。最低限入れておきたいコンテンツや項目は、下記の通りです。神道会計事務所：http://kaikei-jimusyo.jimdo.com/ 【コンテンツエリア】事務所の雰囲気が伝わる写真を配置しました。サンプルのページでは、事務所をイメージした写真素材を使用していますが、所長やスタッフが写っている写真を配置しても良いでしょう。

(18)

「人の顔が見える」ことを意識して作ると、信頼感が高くなります。カラム機能を使って、おもな3つのコンテンツ「サービス内容」「事務所案内」「無料相談」への導線を設定しています。今回は、写真ではなくアイコン素材を使用しました。このような素材は、Fotoliaなどの素材販売サイトで低価格で購入することができます。少ない予算で、ホームページの印象がグッとよくなりますので、おすすめです。 Fotolia：http://jp.fotolia.com/ 【サイドバー】今回選んだレイアウトは、サイドバーが自由に編集できるスペースになっています。ここは全頁に同じ情報が表示されますので、有効に活用しましょう。会社名、住所、連絡先、地図を配置しました。特に電話番号は、文字を大きくし、目立つように配置しています。

コンテンツページを作るコツ

トップページに情報を入れ終わったら、コンテンツページ（トップページ以外のページ）を作成しましょう。各内容ごとに作り方のコツがありますので解説していきます。【サービス内容・トップ】 http://kaikei-jimusyo.jimdo.com/サービス内容/

(19)

会計事務所のサービス内容を伝えるページです。業務内容が多岐にわたるため、代表的な6つをピックアップし、サービス内容のトップページに写真付きで設置しています。こうすることで、より下層のページへ訪問者が辿り着きやすくなる効果があります。「見出し(大)」「水平線」「文章」機能を使っています。「カラム機能」を使って、2つのエリアに分割しています。カラム機能の内側では、「写真付き文章」を使って配置しています。写真にもリンクを貼っておくようにしましょう。【経理業務】 http://kaikei-jimusyo.jimdo.com/サービス内容/経理業務代行/

(20)

サービス内容の第2階層となる業務内容の詳細ページの作り方ですが、ここでは「経理業務」を例に説明します。「見出し(大)」「水平線」を使っています。「写真付き文章」を使っています。「見出し（中）」を使っています。「表」の機能を使って料金表を表示しています。料金はできるだけ明示しておきましょう。閲覧者の不安が軽減され、お問い合わせがしやすくなります。他の業務内容も同様に作ってみましょう。

(21)

【事務所案内】 http://kaikei-jimusyo.jimdo.com/事務所案内/ 会計事務所の概要を案内するページです。「見出し(大)」「水平線」を使っています。「写真付文章」の機能を使って、所長のメッセージを掲載しています。顔写真を載せることで、閲覧者に安心感を持ってもらうのが狙いです。「表」の機能を使って概要を表記しています。【お客様の声】 http://kaikei-jimusyo.jimdo.com/お客様の声/

(22)

お客様の声を掲載しているページです。特に成果が形として見えにくい業種の場合、お客様の声を掲載することで、閲覧者の信頼を獲得する効果があります。ただし、掲載する際には、かならずお客様の許可を取るようにしましょう。「見出し(大)」「水平線」を使っています。「写真付文章」機能を使って、お客様の声を掲載しています。【お問い合わせ】 http://kaikei-jimusyo.jimdo.com/お問い合わせ/

(23)

お問い合わせのページです。電話番号などをわかりやすく明記しましょう。「見出し(大)」「水平線」を使っています。「文章」機能を使って、お問い合わせする際の重要な情報を掲載しています。電話番号は文字を大きくし、わかりやすくしました。（フォントのサイズ：32px・カラー：rgb(153, 0, 0)) フォーム機能を使っています。「会社名」を入力する項目を追加し、「メッセージ」という項目を「お問い合わせ内容」へ変更しました。

まとめ：会計事務所のホームページを作るときの3つのコツ

(1) カラー設計は大事！

業種や事業の雰囲気に合ったカラー設計はとても大切です。今回は、青、水色、白を使い、さわやかで清潔感のあるイメージにまとめました。

(2) 多岐にわたる業務は「サービス内容」にまとめよう

会計事務所を含め、士業はサービス内容が多岐にわたるため、どうしてもページが多くなってしまいます。すべて第1階

(24)

層に設定してしまうと、ナビゲーションがゴチャゴチャして見にくくなり、せっかくアクセスがあっても、中まで読んでもらえないというケースがあります。思い切って「サービス内容」や「業務案内」とひとくくりにし、詳しい説明は第2階層へ設定するようにすると、読んでもらいやすいページになります。

(3) 信頼感を高めるための情報を掲載しよう

所長のプロフィール、写真、そしてお客様の声、料金表などの情報は、閲覧者の不安を軽減させ、お問い合わせにつながりやすくするための重要な手がかりとなります。ぜひ掲載しておきましょう。

(25)

以上で会計事務所編の解説は完了です。これまで6回にわたり連載してきた「業種別ホームページ作成講座」はいかがでしたか？第1回歯科医院編 ● 第2回イタリアンレストラン編 ●

(26)

第3回美容室（サロン）編 ● 第4回学習塾編 ● 第5回介護施設編 ● 第6回会計事務所（この記事です） ● と取り上げてきましたが、ご自身の業種がなくても近い業種、あるいは他業種にも活用できる内容になっています。これからホームページを作る方、あるいは開設したばかりで、どこから手をつけてよいかわからない方は、ぜひ参考にして作成してみてくださいね。志鎌真奈美（しかま・まなみ） Shikama.net 代表／JimdoExpert http://www.shikama.net/ http://www.web-supporter.jp/ 北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。 1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。We b制作・企画・制作、システム構築などに従事。講師として、Webマーケティングやデザインのセミナー活動も行っている。著書に『WebデザイナーのためのJimdoスタイルブック』（共著、マイナビ）、『Web文章の「書き方」入門教室～ 5つのステップで「読まれる→伝わる」文章が書ける！』（技術評論社）、『これならわかる! Googleアナリティクス今日からはじめるアクセス解析超入門』（技術評論社）。