業種別ホームページ作成講座（全6回）
第5回：介護施設編
執筆：志鎌 真奈美（Shikama.net） ひとくちに「ホームページを作る」と言っても、提供しているサービスや想定している読者層によって、設計の仕方や作成 方法が異なってきます。ここでは、「目次の作り方」「業種に合ったレイアウトの選び方」「背景色やナビゲーションのカス タマイズ」を軸とした「伝わりやすいホームページ作成のコツ」を業種別に解説します。 第5回目は、介護施設のホームページの作成です。安心感のあるページを作ってみましょう。介護施設のホームページに求められる情報
たとえば、デイサービスを利用したいと思っている人が、ネットで検索して介護施設のホームページに辿り着いたとしま す。そのときに、どんな情報を必要とするでしょうか？ デイサービスはおこなっているか？ ● 設備や施設の雰囲気 ● デイサービス以外のサービスは？ ● 連絡先、予約方法 ● 利用料金・食事の内容 ● 営業時間、曜日・場所、地図 ● 送迎の有無 ● などが予想されます。これらの項目から、まずはホームページの目次を組み立てていきましょう。ホームページの目次を作ろう
(1) ホームページの目次を作ろう
ホームページの目次（「サイトマップ」とも言います）を作ってみましょう。まずは、思いつく順に書き出してみます。付箋な どを使うとよいでしょう。(2) 必要最低限の情報をピックアップし、目次（サイトマップ）を作ってみましょう
最初は、必要最低限のページで目次（サイトマップ）を組み立てます。運営していく中で必要なページを足していきましょう。スタート時点で必要のないものは削ります。 ホームページを作っていくうちに、ゴチャゴチャしてわかりにくくなることがありますが、原因として「目次」が整理されて いないというケースが多く見られます。特に「第1階層」は、7つ以内にまとめると、スッキリと見やすくなります。
(3)「ナビゲーション機能」を使って、(2)で作成した目次を設定していきます
1. ログイン後、「ナビゲーションの編集」をクリックします。 2. 文字の入れ替えなどを行います。ナビゲーションの文字を入れ替えます。 順序を入れ替えることができます。 階層を変更することができます。(第1階層から第3階層まで設定可能) 新規のページを追加します。 不要なページを削除します。 ページを非表示にすることができます。 3. ナビゲーションの編集が終わったら「保存」ボタンをクリックします。 ナビゲーションの設定が完了しました。
業種に合ったレイアウトの選択とカスタマイズ
次に、業種に合ったレイアウトを選び、全体のカラーを変えてみましょう。
2014年8月13日以降、新しいレイアウトが使えるようになりました。「レイアウト」のボタンをクリックすると、下記のような 画面が表示されます。
表示されない場合は、新機能へ切り替わっていない可能性があります。右側に表示されるツールバーの「設定」をクリッ クし、「The New Jimdo」を選択してください。
それでは、新しいレイアウトを使って次のステップへ進めましょう。
(1) 業種に合ったレイアウトへ変更しましょう
1. 「レイアウト」画面から「Dubai」が表示されるまで横にスクロールします。
3. 左から2つ目のレイアウトをクリックします。レイアウトプレビューが表示されたら「保存」ボタンをクリックしましょう。
(2) ナビゲーションの背景色やボタンのカラーを変更してみましょう
次に、ナビゲーションやボタンの色などを変更し、介護施設のイメージにあったカラーにしましょう。以下の配色イメージ のように茶色、ベージュをベースのカラーに使用します。 1. 右側のツールバーから「スタイル」をクリックします。 2. そのままナビゲーションバーの近くへカーソルを動かすと、カーソルの形がペンキマークになります。「ホーム」の上でクリッ クしてみましょう。3. 以下のツールが画面の上部に表示されます。カーソルが乗ったときと乗っていないとき（通常時）の文字色や背景色を、 分けて設定することができます。 フォントの種類 フォントサイズ 太字、斜体 通常時のボタンの文字色 カーソルが上に乗った時のボタンの文字色 通常時のボタンの背景色 カーソルが乗った時のボタンの背景色 4. 「背景色」をクリックするとボタンの色を変更するためのパレットが表示されます。選び終わったら「選択」をクリックします。 同じ要領で背景色（Active）、ナビゲーション全体の背景も設定しましょう。 【ナビゲーションの設定情報】 ナビゲーション全体の背景色：rgb(255, 255, 255)
ボタンの背景カラー：rgb(182, 95, 0) ボタンの背景カラー（Active 時）：rgb(103, 0, 0) ボタンのフォントカラー：rgb(255, 255, 255) ボタンのフォントカラー（Active)：rgb(255, 255, 255) フォントの種類とサイズ：Open Sans / 16px
(3) 見出しの色や文字の大きさ、コンテンツ部分の背景を変更しましょう
見出しの色や文字の大きさも「スタイル」を使って、同様に変更することができます。右側のツールバーから「スタイル」を クリックし、カーソルがペンキの形になるところが変更可能な箇所です。 見出し・文章・リンクなどの設定を変更するツール フォントの種類 フォントサイズ 太字、斜体 文字の色 行間 左寄せ、中央寄せ、右寄せ 大文字、小文字の組み合わせ方法（英文表記のときに有効） 水平線の設定を変更するツール 背景色の変更 水平線の太さ 水平線の色 実線、点線などを選択 コンテンツ部分の背景色を変更するツール 背景色の変更【見出し大・中・小の設定情報】 見出し大：フォントサイズ 48px / フォントの種類 Lato / フォントカラー rgb(50, 27, 2) 見出し中：フォントサイズ 32px / フォントの種類 Lato / フォントカラー rgb(71, 41, 8) 見出し小：フォントサイズ 24px / フォントの種類 Lato / フォントカラー rgb(103, 0, 0) 【水平線・コンテンツ部分の設定情報】 コンテンツ部分の背景色：rgb(244, 241, 217) 水平線：太さ1 / 線の色：rgb(40, 22, 4) / スタイル 罫線
(4) フッターの背景色や文字の色を変更しましょう
フッター部分の背景色や文字の設定も同様に変更できます。 フッターの文字設定と背景色を変更するツール フッター内のフォントの種類 フォントサイズ 文字の色 フッターの背景色 【フッターの設定情報】 背景カラー：rgb(255, 255, 255) フォントの種類とサイズ：Open Sans / 16px フォントのカラー：rgb(44, 62, 80) 介護施設の雰囲気が伝わるようなカラーに変更しました。ヘッダーにロゴ画像を設置する
レイアウトや色の変更などが完了したら、ヘッダーにロゴ画像を設定します。使用している「Dubai」というレイアウトのヘッ ダー部分には、「ロゴエリア」が用意されています。あらかじめ作っておいたロゴ画像をアップロードしましょう。
2. アップロードできるボタンが表示されますので「画像をアップロード」をクリックし、設定したい画像を指定します。アップロー ドできる画像データの種類は、「jpeg」「png」「gif」「bmp」です。 3. ロゴ画像が設定されました。 今回使用している「Dubai」というレイアウトのロゴサイズは「348px×78px」 になっています。あらかじめ、近いサイズに合わせて作っておくと、設置したときにきれいに表示されます。
トップページに必要情報を入れる
ヘッダー部分の設定が完了したら、トップページに情報を入れていきます。最低限入れておきたいコンテンツや項目は、 下記の通りです。 介護施設「神道ケア」：http://kaigo-shisetsu.jimdo.com/【コンテンツエリア】 一目で何の業種かわかるような要素を配置します。 介護の様子がわかる写真を1枚、大きく配置しました。実際に施設で働いている職員の写真を使うと、より効果的です。 「3つの安心」と題して、施設の特徴や強みを掲載しています。短い時間でわかりやすく伝えるために、あえて特徴を「3つ」 に絞りました。カラム機能を使ってエリアを3分割し、写真と説明文を配置しています。 【サイドバー】 今回のレイアウトは、サイドバーが自由に編集できるスペースになっています。ここは全頁に同じ情報が表示されますの で、有効に活用しましょう。 施設のキャッチフレーズを、サイドバーに配置しました。
住所や電話番号、地図を表示し、どのページからでもお問い合わせがしやすくなる構成にしています。
コンテンツページを作るコツ
トップページに情報を入れ終わったら、コンテンツページ（トップページ以外のページ）を作成しましょう。各内容ごとに作 り方のコツがありますので解説していきます。 【サービス・施設案内】 http://hajimete-juku.jimdo.com/サービス-施設案内/施設のコンセプトやサービス内容を伝えるページです。要介護保険の区分ごとに異なっているサービスの利用料金表 は、ホームページ上で作ると少し難しい場合もあるかもしれません。そのような場合は、「ファイルアップロード」の機能を 使って、ホームページ上に置いておくこともできます。 「見出し(大)」「文章」「水平線」を使っています。 「写真付き文章」機能で3つの主軸サービスの説明を掲載しています。 「水平線」と「見出し(中）」を使っています。 「カラム機能」を使って、2つのエリアに分割しています。 カラムの右側では「ファイルダウンロード」の機能を使用しています。WordやExcelなどで作ったファイルをPDFに変換し アップロードしました。 「水平線」と「見出し(中）」を使っています。 カラム機能を使って4つのエリアに分け、施設の詳細を伝える項目を設定しました。各カラムの中では、「写真」と「文章」 機能を使って配置しています。 「ファイルダウンロード」機能で扱えるデータ形式はたくさんあります。Word やExcelで作成したファイルもそのままアップロードすることができますが、閲覧する側が同じソフトウェアを持ってい ないと見ることができません。また、バージョンによって開けないというトラブルが発生することもありますので、PDF 形式に変換して掲載することをおすすめします。 アップロードできるファイル形式： http://jp-help.jimdo.com/基本情報/コンテンツ/ファイルダウンロード/ 【求人情報】 http://kaigo-shisetsu.jimdo.com/求人/
求人情報を掲載しているページです。他のページに移動せずに応募できるよう、このページの下方に応募フォームも設 置しました。お問い合わせ用のフォームは、どこのページでも設定が可能です。サイドバーやフッター部分にも設置ができ ますので、覚えておくとよいでしょう。 「見出し(大)」「文章」「水平線」を使っています。 「写真付き文章」機能を使って、募集要項を記載しています。文字だけではなく、働いているイメージがわく写真を一枚入 れると、雰囲気が伝わりやすくなります。 「見出し（中）」と水平線を使っています。 「フォーム」機能を使って求人専用の応募フォームを設置しました。入力項目を増やしています。 【会社概要】 http://kaigo-shisetsu.jimdo.com/会社概要/ 施設を運営している会社の概要です。
「見出し(大)」「文章」「水平線」を使っています。 「写真付文章」の機能を使って、代表挨拶を掲載しています。顔写真を載せることで、閲覧者に安心感を持ってもらうの が狙いです。 「表」の機能を使って概要を表記しています。 【お問い合わせ】 http://kaigo-shisetsu.jimdo.com/お問い合わせ/ お問い合わせのページです。電話番号などをわかりやすく明記しましょう。 「見出し(大)」「水平線」を使っています。
「文章」機能を使って、お問い合わせする際の重要な情報を掲載しています。受付時間なども記載することで、より閲覧 者に対して親切な情報提供ができます。電話番号、FAX 番号は文字を大きくし、わかりやすくしました。（フォントの大きさ：32px) フォーム機能を使っています。「電話番号」を入力する項目を追加しました。
まとめ：介護施設のホームページを作るときの3つのコツ
(1) カラー設計は大事！
介護施設という業種柄、茶色、ベージュなどの優しい色を選んでいます。コンテンツ部分で使用しているベージュのカラー は、施設の壁に近い色を選んでいます。(2) サイドバーのスペースを有効活用しよう
今回使用したレイアウト「Dubai」は、サイドバーを自由に使えるタイプになっています。お問い合わせ先や地図などは全 頁から閲覧できると非常に便利ですので、有効活用しましょう。(3) 安心感を高めるための情報を掲載しよう
施設の様子わかる写真の掲載、あるいは運営している会社の概要や社長のあいさつなどを掲載することで、より閲覧者 に安心してもらう効果を狙っています。介護施設のホームページ作成、いかがでしたか？ツボを抑えて信頼感の高まるページを作ってみてくださいね。次回は 「会計事務所」のホームページ作成のコツをお届けいたします。 志鎌 真奈美（しかま・まなみ） 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アナリティクス 今日からはじめるアクセス解析超入門』（技術評論社）。
Copyright 2019 はじめてＷＥＢ All Rights Reserved. https://hajimeteweb.jp/
