見出し画像

98.済生会熊本病院 #1日1サイトレビュー

【印象】
・爽やか、清潔感のある印象
【ファーストビュー】
・画面いっぱいに写真を配置し、ゆっくりと縮小するアニメーションをつけている。自動で写真が切り替わる。中央に白字でキャッチコピーを表示。視認性を上げるために文字の周りに薄くシャドウをつけていると思われる
・写真の前面に角丸の白背景レイヤーを置き、メニューを配置。ホバーで小項目のメニューが開く。追従は無し
・メニューリストとは別にお問い合わせボタン、検索ボタン、文字サイズの選択欄や英語への切り替えリンクを設けている。よくある質問や交通アクセスへのリンクも貼り、わかりやすさや使いやすさが考えられた設計になっている。
・メインビジュアル下部に一部が被る形で角丸の白背景レイヤーを配置。「初診の方」「再来の方」と目的に合ったページに飛べるようにリンクをまとめている
【コンテンツ】
・メインビジュアルのすぐ下に「ピックアップ」セクションを配置。カードを横一列に表示している。自動スクロールは無し
・メニューやセクションタイトルは全て日本語表記でわかりやすさ重視になっている
・コンテンツ量が多いのであしらいをシンプルにし、見やすくしている印象
・サイト全体に青を使用しており爽やかさや清潔感、信頼感のある印象を持った。強調部分には赤を使用している
・ユーザー層から特に重要な情報と思われる「外来受診のご案内」「診療科・部門を探す」セクションではカードを大きく表示したり、写真を大きく表示したりすることで目に入りやすくしている
・フッターにもメニューを配置。小項目はアコーディオンにして格納している
・下層ページが多いので目的のページが見つかりやすいように導線を複数箇所に設けている
・ボタンは角丸で横幅を大きくとっている。ホバーで背面にシャドウがかかる
【カラー】
・白、灰色、青、赤
・テキストカラーは黒#35383e、#333333、#111111など複数色使用
・一部のテキストに青#0077cbを使用
【フォント】
・Hiragino Kaku Gothic ProN
・F+UD-ニューロダン DB
【レスポンシブ】
・ヘッダーメニューはロゴ、検索アイコン、ハンバーガーメニュー(青背景、3本線、メニュー表記無し)に変更。ハンバーガーメニューのみ追従する
・メニュー画面は白背景で最上部にロゴを配置しその下に大きく電話番号を表示している
・「診療科・部門を探す」セクションはPC版では大きく余白をとっていたがSP版では縮小しコンパクトにおさめている
・「当院の特長」セクションはPC版で載せていた説明文を非表示に変更