モバイルファーストサイト100選 その26 福岡市中央区 産科・婦人科 東野産婦人科
![東野産婦人科](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/1ddf918d-60d7-45c9-bf51-bee78b8b3e0b-1024x497.png)
福岡市中央区にある東野産婦人科では、妊娠・出産・育児にとどまらない、女性の生涯にわたる 「トータルケア」を目指しています。すべては女性の安心と、女性から生まれてくる未来のために。
福岡市にある産婦人科のホームページです。
https://www.toono.or.jp/obstetrics/hospitalization/
病院のホームページなので、
かなり情報量が多いですね。
モバイルファーストではなく、通常のサイトでも
かなりのボリュームになるのではないかと思います。
構成
PC時はメインは右側。背景にはナビゲーションの他に、
左隅にハンバーガーが設置されています。
情報量がかなり多いからでしょうか
pc時のハンバーガーは画面いっぱいに開きます。
ここから各項目のトップページに飛ぶイメージですかね。
この中にモバイルサイトが4つ集まっていると思えばよさそうです。
で、各々にトップページがあり、pc時にはそれぞれ別のナビが表示される、と。
![ハンバーガー](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/883c9baa-1ef6-4df4-ba9a-e9c5e6b71554-1024x678.png)
![spナビ](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/5a01abbb-8f30-4e67-aec8-5b710c2ba89f-204x1024.png)
トップページはもはや巨大なナビゲーションのようですね。
![sp1](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp6-140x1024.png)
![sp2](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp7-140x1024.png)
![sp3](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp8-140x1024.png)
![sp4](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp5-211x1024.png)
さらにそこから下層があり、その中にもページ内リンクがあります。
これは一回見ただけじゃわかりませんね。
難しいです。
![下層ページ1](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp1-6-212x1024.png)
![下層ページ2](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp2-6-209x1024.png)
![下層ページ3](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp3-7-215x1024.png)
![下層ページ4](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/sp4-2-212x1024.png)
配色
このサイトの配色はこちら
![配色](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/スクリーンショット-2024-01-23-153114.png)
メインは藍色と灰色の2色で、他はカテゴリー分けや
アクセントで小さく使われています。
しかし、ちょっと色数が多めな気がします。
カテゴリーや情報量が多いので、色数も増えた感じでしょうかね。
フォント
見出しと本文には 游明朝
ナビの項目には 筑紫ゴシックが使われています。
フォントには「大きな文字はゴシック体、小さな文字は明朝体」
というきまりもあるようですが、
また、
明朝体は可読性が高い
ゴシック体は視認性が高い
という特徴もあるようです。
このサイトの場合、情報量が多いですから、
読みやすい明朝体を使っているんでしょうね。
一つ勉強になりました。
まとめ
非常に規模の大きいサイトでした。
これをモバイルファーストに落とし込むのは
大変ですね。
しかしちょっと考えれば、
病院の患者は確実に個人ですから、
病院系のサイトのモバイルファーストへの対応は
必須事項なのかもしれません。
規模の大きいサイトを見るいい勉強になりました。
![病院](https://fifties-blog.genzaburow.com/wp-content/uploads/2024/01/andy-vult-zwZpdhoTbU0-unsplash-1024x683.jpg)