← 制作実績の一覧へ

WORK / 07 コンペ提案 · 設計・デザイン提案

井野病院

来院前の「どうすればいい?」に、入口から答える。

担当・制作範囲
要件整理・情報設計・UI設計・ワイヤー・PC/SPデザイン。実装・公開・利用者検証は紹介範囲に含みません。
使用ツール
Figma
制作区分
コンペ提案
海と空を使ったTOPの入口
海と空を使ったTOPの入口拡大して見る ↗

01 / OVERVIEW

背景と、制作の考え方。

受診・担当医表・入院や面会など、来院前に確認したい情報へ進めるTOPページを提案しました。病院の紹介と利用者の行動を整理し、地域に開かれた印象を写真や青の表現へつなげています。

02 / DESIGN NOTES

急いで探す情報と、病院を知る情報を分ける。

受診方法や担当医表を探す人、入院患者の家族、健診を検討する人などを想定し、目的ごとの入口を整理しました。利用者像は設計仮説として置き、必要な情報へ直接進める構成を考えています。

想定ユーザーと情報の優先順位
想定ユーザーと情報の優先順位拡大して見る ↗

03 / DESIGN NOTES

支給内容を、そのまま確定情報にしない。

提供ワイヤーと設計資料を照らし合わせ、残す内容、順序を見直す内容、確認が必要な表記を整理しました。診療時間や連絡先の役割など、利用に関わる情報は見た目の制作とあわせて確認する方針です。

支給内容を残す・変える・確認する整理
支給内容を残す・変える・確認する整理拡大して見る ↗

04 / DESIGN NOTES

海と空の印象を、病院の入口に。

建物と空の写真、青の色面、波の形を組み合わせ、地域とのつながりを表現しました。FVには受診・担当医表・入院や面会の入口を置き、印象づくりと情報へのアクセスを同じ画面で扱っています。

来院目的ごとの入口
来院目的ごとの入口拡大して見る ↗

05 / DESIGN NOTES

スマートフォンでは、入口とメニューを分けて示す。

PCの大きな写真表現を受け継ぎながら、SPでは目的別の入口を縦に整理。メニューを開いた状態も用意し、狭い画面での情報のまとまりを確認できるデザインにしました。

海と空の表現をSPへ展開
海と空の表現をSPへ展開拡大して見る ↗
縦に整理した目的別リンク
縦に整理した目的別リンク拡大して見る ↗
展開時のナビゲーション
展開時のナビゲーション拡大して見る ↗