Office vAin

Menu
メインメニュー

医療機関向けデザイン

医療機関向けにわかりやすいく見やすいだけではなく、医療機関に求められるガイドライン等を遵守し、適切で清潔感のあるサイトを構築します。

落ち着いたサイト構築

医療機関らしい清潔感のあるサイトを構築します。多くのお客様に読みやすい色合いでページを作成致します。

ユーザビリティの高いサイト構築

他のWebサイトと比較して、広い年齢層の方が病院のサイトには訪問します。そのためわかりやすく大きなメニューでページを構成します。 また、ページの遷移は複数の手段を用意することにより、迷わず目的のページに到達できるよう誘導します。

様々な環境への対応

利用者の年齢が広いため、アクセスする端末も千差万別です。パソコンだけではなく、スマートフォン、そして必要に応じて i-modeのようなフィーチャーフォンにも対応したサイトを構築し、多くの人に使いやすいサイトに致します。

厚生労働省のガイドライン等に準拠したサイト構築

医療機関のホームページの内容の適切なあり方に関する指針(医療機関ホームページガイドライン)(平成24年9月28日 厚生労働省医政局総務課)等、医療機関向けのサイト構築に関するガイドラインを遵守し、適切なサイトを構築します。

撮影や画像の修正処理

建物や機材、人物等の撮影をしWebサイトに合わせた画像レタッチを行います。
明るく清潔感のある見栄えの良い画像を作成します。

施設・設備・人物の撮影

建物の外観や施設案内、使用している医療機器の紹介をする際に、各機器の撮影を請け負います。
様々な機材を用いて、病院をより素晴らしく清潔に感じられるよう撮影いたします。

人物や建物画像などの修正

撮影された写真をより美しく見せるように人物、建物、機材それぞれに適切なレタッチを行います。
人物画像は肌の質感調整や染み、皺の軽減、顔の角度の調整等を行います。修正の方向性は打ち合わせを密に行い、満足していただける修正を行います。
建物の修正は立地条件の関係でどうしても適切な撮影ができない場合等でも修正で対応出来る場合もあります。

人物や建物画像などの修正サンプル

建物や人物の修正前と修正後の写真です。
画像はクリック(タップ)すると拡大します。画面横の矢印マークで次の画像に移動します。画像以外の場所をクリックすると、元のページに戻ります。

建物の外観の修正について

建物の外観を修正する場合は多くの作業を行い調整をします。ここでは、その工程の一部を抜粋して紹介しております。

修正前
修正後

まずは、修正前と修正後の写真をご確認下さい。
修正前と比較すると、明るく印象が変わって見えます。また撮影時に映り込んでしまった様々なものが消去されております。
左の写真が右のようになるまで以下のような作業が行われます。

修正作業工程
修正前

撮影された写真です。駅なので人などが映り込んでいます。また見上げたような写真となっています。

修正1(パースペクティブを補正)

見上げた写真になっているため、正面から見た状態の写真になるようパースペクティブを補正します。

修正2(明るさ等の調整)

全体の明るさやコントラストの調整します。その後、影になっている部分を個別に調整します。

修正3(不要物の消去)

不要物の消去を行います。今回は、手前の車止め、右の人、 左の木、中央下の人等を消します。

修正4(不要背景の処理)

3DCGによって作成された木を設置し、不要な背景である左側の建物をマスキングします。

修正5(全体の調整)

空の調整を行い、同時に全体の雰囲気を整えます。これで完成となります。

機材の修正サンプル
元画像

小型の機材のサンプルとして、血圧計の写真を撮影しました。実際に使用しているもののため、汚れなどが目立つ状態で、全体にくすみのある写真となっています。また室内で撮影したために背景なども残っています。

補正1(背景の削除)

機器の背景を削除します。撮影した場所は通常の室内でしたが、背景がなくなることでスタジオなど専用の場所で撮影したような画像になります。

補正2(画像方向の調整)

写真が曲がってるので正位置に修正します。

補正3(歪みを補正)

写真を正位置にしたところ元の写真が曲がっていたための歪みを補正します。

補正4(余白の削除)

余白を削除します。ここの写真は掲載のために大きさを整えているので拡大したように見えますが、作業は大きい画像で行っているため、補正3までの写真とこちらは縮小率が異なっております。

補正5(明るさなどの補正)

明るさなどを補正し画像の見た目をを整えます。全体的に暗い雰囲気があった画像が適切な明るさになりました。

汚れを除去し完成

明るさを変更した結果、機材の汚れが目立つことになりました。その汚れを除去し画像補正が完了しました。

室内の修正サンプル
修正前

待合室の写真です。掃除などは十分行われているのですが全体に暗く写真から得られる印象はあまり良くありません。写真は右側が下がっており歪んで見えます。

修正後

画像の水平を整え、明るさを修正しました。修正前と比較すると掃除の行き届いた清潔感のある空間になり、写真から得られる印象は圧倒的に良くなります。

人物の修正サンプル(男性)
修正前

こちらが修正前の写真になります。

修正A

基本的な修正(全体明るさ、コントラスト調整、部分明るさ、コントラスト調整)に加え、各パーツのサイズ等調整を行っております。

修正B

基本的な修正に加え、各パーツのサイズ等調整(Aとは別のアプローチ)、肌の質感調整、染み、皺の軽減、顔の角度の調整を行っております。

人物の修正サンプル(女性)
修正前

こちらが修正前の写真になります。

修正A

明るさ修正、各パーツ調整、輪郭など補正した、基本的な調整を行っております。

通常は、修正Aの状態で補正作業は終了となります。
ご希望があれば、補正Bや補正Cのように、さらに強い修正を行うことも可能です。

修正B

補正Aに加え、肌補正を行いました。

修正C

補正Bに加え、ライティングエミュレーション(向かって左上方からの照明効果)を行いました。

作成するサイトの特徴

作成するサイトの特徴はこちらとなります。
閲覧者からは見やすく内容がわかりやすいサイトを作成します。管理者からは、簡単な変更をWebブラウザーで行えるようにし、最新情報を手軽に閲覧者へ届けられる工夫がされています。

動きのあるメニュー(PCのみ対応)

img12

動きがあり、目を引くメニュー

利用者のわかりやすさのため、メニューに動きをつけることができます。動きは様々なバリエーションを用意しております。
パソコンではマウスがメニューの上に来たとき、スマートフォンではタップした時に動くようになっています。

左のメニューはマウスが重なると画像が暗くなり文字がでてくるものです。このようにメニューに動きをつけ注目させることができます。

動作サンプル

このページで紹介しきれない分を別のページにまとめてあります。他のボタンの動きなどをご確認下さい。

自由に書き換えができるカレンダー

利用者が自分で変更できるカレンダー

臨時の休診日があった場合に、利用者が自分で変更できるカレンダーを標準で用意しております。

きめ細かな設定

カレンダーは休診日、臨時休診日、午前休診日、午後休診日と色分けできるようにしてあります。管理画面から日付をクリックし保存するという簡単な操作で設定ができるため、どなたでも利用する事ができます。

動作サンプル

実際に操作しているサンプル下のボタンをクリックしてください。IDとパスワードはリンク先ページに記載してあります。

サンプルサイトはこちら(別ウインドウが開きます)

ニュースやインフォメーションもブラウザから更新可能

簡単に追記できるインフォメーション

簡単なニュースや、臨時休診日があった場合に、利用者がサイトの一部のみ更新できるよう仕組みを用意しております。

複数のインフォメーションにも対応

サンプルサイトでは、カレンダーに臨時休診等の情報を載せる為のインフォメーションと、サイト全体のインフォメーション用の二つを設定しています。診察科毎のインフォメーションが欲しい、先生毎のインフォメーションが欲しいという場合でも対応することは可能です。

動作サンプル

実際に操作しているサンプルをこちらに用意してあります。IDとパスワードはリンク先ページに記載しておりますのでご確認下さい。

サンプルサイトはこちら(別ウインドウが開きます)

サンプルサイト

入念な打ち合わせによりどのようなサイトにするかを決定し、デザインを行い制作を致します。
一例として、数種類のサンプルを以下に掲載します。

中規模な病院向けサンプル
レスポンシブデザイン

スマートフォンとパソコンで統一したデザインを行い、病院のイメージを印象付ける事が可能です。

メニュー項目

メニューの構成は階層化せず、わかりやすく構築しております。メニューの表示が横長の為、ある程度のコンテンツ数が無いと構成が整いません。そのため中規模以上のサイト向けデザインとなります。

左側のメニューは領域を広めに取っております。開院日の予定だけではなく、案内図の表示や広告的スペースに活用することが可能です。本サンプルでは、予防接種の案内と看護師さんの募集をしております。

CSSによるデザイン

デザインはCSSによって行われているため、色を変更したり画面幅を調整することも簡単に対応でき、作りたいイメージを忠実にページを再現します。また閲覧する画面の大きさによってメニューと本文の幅を変えることなども可能です。

サンプルサイトはこちら(別ウインドウが開きます)
小規模〜中規模な病院向けサンプル
レスポンシブデザイン

スマートフォンとパソコンで統一したデザインを行い、病院のイメージを印象付ける事が可能です。

メニュー項目

左側に並んでおり、項目を増やしても減らしても成立するデザインです。特に小規模のページを作る場合に効果的です。メニューは大きめで、メニュー以外にも病院の予定や地図などを組み込むデザインにすることも可能です。そのようなデザインにしても破綻しない構成となっております。

CSSによるデザイン

デザインはCSSによって行われているため、色を変更したり画面幅を調整することも簡単に対応でき、作りたいイメージに忠実にページを再現します。色味などに関しては簡単に変更できるため、病院のイメージカラーを全面に出したサイトを構築することが可能です。

サンプルサイトはこちら(別ウインドウが開きます)
小規模な病院向けサンプル
レスポンシブデザイン

スマートフォンとパソコンで統一したデザインを行い、病院のイメージを印象付ける事が可能です。

メニュー項目

メニューの表示を小さくしております。これによりコンテンツが少ないサイトでも破綻しないデザインとなっております。画像メニューはマウスカーソルが乗っかったとき動作し、メニューの少なさをカバーするデザインとなっています。

CSSによるデザイン

デザインはCSSによって行われているため、色を変更したり画面幅を調整することも簡単に対応出来ます。作りたいイメージに忠実にページを再現致します。

サンプルサイトはこちら(別ウインドウが開きます)
ページのトップへ戻る