トンマナ
- フォント：Zen Maru Gothic
- テーマカラー：ロゴにも使用されている濃いめのピンク（#dd6b74）
- 全体的に丸みを持たせ、柔らかで優しい印象を持たせている
メインビジュアル
ユーザがすぐ知りたい情報への導線がメインビジュアルに集約されていてみやすい。
写真の配置が特徴的。余白を余すことなく団体のイメージを伝えられている。
右下の4種のイラスト付きのメニューは、全部異なる色だがトーンが揃えられているので馴染みがいい。
文字の入れ方はメインビジュアルにそのまま入れている。画像が切り替わらないため、背景やフォントカラーを気にしないでいい。
ナビゲーションは、主要メニューだけでなく小さな文字でサブメニューも設置。
なるべくユーザーがストレスなく知りたい情報へ辿り着ける導線配置が意識されている
見出し
こういった福祉や病院系は基本見出しは読みやすく日本語に。
日本語するとついついシンプルになるので、英字を小さく配置し、欧文テキストを入れるとアクセントになる。
見出しは地味にいつも迷走する箇所なので、細かに記録しておく。
下層h2
よく見るアクセントカラーonボーダー（なんやそのネーミング）
アクセントカラーをさりげなく出すことでメリハリがつく
下層h4
これもよく見る左縦ボーダー。派手すぎず、でも見出しということが一目でわかるデザイン
ABOUTセクション
4枚の写真をグリッドレイアウトで配置。動きがなくてもこのように4種綺麗に並ぶとすぐに一目でイメージを掴むことができる。
ABOUT箇所はいつも写真の配置に悩みがちなので、グリッドレイアウトで綺麗に収まる手法は参考にしたい！
事業所一覧
特に参考にしたい！と思ったこのセクション。
ついついここにサービス内容を羅列しがちだけど、このようにアイコンで分類することでスッキリ・かつ、すぐに各施設のサービスを知ることができる。
ちなみのこのアイコンの内容・色は、FVの右下のアイコンメニューと一致している。
お知らせ
ここまで背景がずっと同じなのと、お知らせはセンタリングで左右に余白ができてしまうためここで左に背景装飾(?)として暗めの四角が敷かれている。
背景の脱単一化もよく悩むとこだが、このくらいの装飾でもメリハリがつく。
トピックス
トピックスは9件も表示！主要記事3件は固定で大きく表示。最新6件は小さめに。
このようにFVにたくさん表示させるためには頻繁な更新が必要だが、うまく運営されている。
（サムネイルが縦長になってしまったのは想定外だとは思うけど…）
ここに各施設のカテゴリーを表示するのもいい。
お問い合わせ
お問い合わせは情報量的に左右に余白があきがちなセクションだが、右に採用情報の画像を配置することでその問題を解決している。
見出しが縦書きなのも、左右の余白対策にいい◎
採用情報バナー時は写真を散りばめつつ、それに付随するイラストが賑やかさ・明るさを演出している。参考にしたい表現方法
下層ページで参考にしたい箇所
各事業所ページ
住所などの基本情報は罫線を用いたテーブルにしがちなとこだが、このように見出しに背景を敷くだけでスッキリと見やすくなるので、ぜひ参考にしたい！
施設後のサービス紹介では、内容・定員・そして空き状況が一目でわかる、とても工夫されたUI。（感動！！！）
私だったらここに空き状況入れると情報方になると躊躇してしまいそうだけど、見やすくシンプルに作られている。
利用条件は色がついているのは特に重要な項目だからだろうか？すぐ目についてよき◎
さらにそのサービスの紹介ページ。
左にページ内メニューが配置されているので、すぐに知りたい情報へ辿り着けるのでわかりやすい。
コースごとの費用なんかもわかりやすく情報が整理されている。
まとめ
全体的に、ユーザーがページ遷移せずに知りたい情報へ辿り着ける工夫がたくさん見られるサイト。
特に施設紹介では、膨大な情報が丁寧に整理、デザインされていて参考になる箇所ばかり。
しっかりとクライアントに事業内容をヒアリングしたり綿密な打ち合わせが行われて実現できてるんだなと感じました。
つぶやき（いらんか）
情報が綺麗に整理されたこのサイトを見て、最近の自分の担当案件の工程で反省点を振り返ってみた。
基本リモートの私（結婚後、都内から遠方に住むことになったため）。最近はお客さんとオンラインで打ち合わせしてても、リモートの限界を感じつつある。ちゃんと対面して話を聞いて、綿密に話を聞いてその場で情報整理・確認しないと後から変更がどんどん来たり、事業内容を紹介するにも中途半端な表現になってしまったりとモヤモヤすることが増えてきた。
環境を変えなきゃなーと思いつつ、家が遠すぎ＆子の送り迎えもある中で難しさを感じる日々なのでした。
