Blog スタッフブログ

2023.04.12

WEB制作デザイン

【WEBデザイン】業界別!介護系サイトのフォントサイズと業務内容ページの見せ方まとめ

WORKS

こんにちは、Webデザイナーのそいです。

今回は、以前紹介した記事からより掘り下げて、業界別でサイトのフォントサイズ・主要ページとなる事業内容のコンテンツ構成について紹介していきたいと思います。

以前紹介した記事：WEBサイトにおけるベストなフォントサイズ

フォントのジャンプ率や基準となるフォントサイズの決め方・推奨サイズなど基本的な情報はこの記事からご覧いただけます！

早速ですが、第1回目は【介護・福祉系】業界に焦点を充てて調査してみました。介護・福祉系サイトのデザイン制作において、どういう構成にしたら良いか、どういう文字サイズでレイアウトデザインをすれば良いか、事例を数点挙げて調査しましたので、ぜひこの記事を活用いただければと思います！

参考になるサイト、まとめてみました。

介護老人保健施設　箕面グリーンビィラ

https://minoh-greenvilla.jp/

フォントサイズ

ページタイトル：和文 56px　・　英文（装飾扱い） 33px
サブキャッチ：事業内容（入所）18px　・　テキストキャッチ39px
リードテキスト：17px
注釈文：15px
ボタン：20px

リードテキストを見る限り、文字は全体的に大きめで指定されています。

行間をはじめ、文字の要素もそれぞれ広めに取られておりスクロールが長くなるものの読みやすい配置になっているのが特徴です。

業務内容の構成

構成：1ページ内に全サービスを掲載するレイアウト。

　　　1サービスが端的にわかりやすくまとめられています。

実際にページで確認するとわかりやすいですが、常設のサイドナビには今見ているサービスが何なのかが示されていたり、各サービスの区切りにメインコンテンツにナビゲーションが設置されており誰でも迷わずサービスが確認できる親切な設計になっていることが特徴です。

株式会社N・フィールド

https://www.nfield.co.jp/

フォントサイズ

ページタイトル：サービス名 33px　・　事業所名10px
キャッチ：28px
4カラムコンテンツキャッチ：16px
リードテキスト：14px
サブキャッチ：26px

全体的に文字は小さめではあるものの、キャッチとリードテキストのサイズにメリハリがあるため読みにくい印象は受けません。ミドル以上の年齢層のユーザーが閲覧することを考慮するならリードテキストをもう1pt上げても良いかと思いました。

業務内容の構成

構成：1ページ内にサービスの概要を掲載する構成。

サービス提供内容を紹介するだけでなく、特徴・対象者・職種それぞれの（看護師・作業療法士など）サポート内容が掲載されていたり利用の流れがまとめられており、利用時のイメージが湧きやすく訴求力もありながら、親切な構成となっています。利用者の疑問や不安をサイトで解消させる工夫を感じられる構成で、とっても参考になりますね！

社会福祉法人慈楽福祉会

https://jiraku.or.jp/

フォントサイズ

ページタイトル：サービス名 17px　・　キャッチ32px
事業所名（大見出し）：22px
リードテキスト：16px
事業所ブロック：事業所名（メイン）16px　・事業所名（サブ）14px

ベーシックなフォントサイズとジャンプ率で設定されています。フォントの指定に迷ったら、このサイトを参考にすると間違い無いと思います！

業務内容の構成

構成：1ページ内に全サービスと該当する事業所を掲載するレイアウト。

このページでは、サービス名をサブタイトルとして扱い「～したい」といったサイト閲覧者（利用者）の目的をメインタイトルとして扱うなどぱっと見でサービス提供内容がわかる工夫がなされています。また事業所を多く運営されている法人でもあるため、入り口ともなる「事業内容」では端的にまとめられ、詳細は「事業所」ページで確認いただける導線になっています。

実際のサイトを確認いただきたいのですが、事業所ページでは事業所概要や1日の流れ、費用や空き状況・アクセスやよくある質問など知りたい情報がまとめられており、このサイトもユーザーを惑わせない設計としてとても便利で使い勝手の良いサイトになっていると思いました。

会福祉法人あいのわ福祉会

http://www.ainowa.or.jp/

フォントサイズ

ページタイトル：画像のため分からず…
事業名：30px
キャッチコピー：24px
リードテキスト：18px
サブキャッチ：23px
ナビゲーション：18px

フォント指定は大きめであるものの、特殊な丸ゴシックを使われていることもありそんなに大きい印象は受けません。游ゴシック・Notoフォントといった一般的なフォント以外のWEBフォントを使ってサイトを制作する時は、基準となるフォントサイズより小さかったり大きかったり、見た目が変わりますので考慮した上でフォントサイズを決めると良いでしょう。