【制作事例】サイトのスマホ対応

東京西徳洲会病院様の看護部サイトがスマホ対応になりました!

【東京西徳洲会病院 看護部サイト】
http://www.tokyonishi-nurse.jp/

スクリーンショット 2016-01-21 14.37.13

ウェブフォントを使用して各デバイスから見やすいデザインに

元々は画像になっていた見出し部分をウェブフォントに置き換えることにより、
スマホからでも見やすいレイアウトになりました。
▼「最新鋭の医療機器を導入し〜」の部分がウェブフォント。
サイトの雰囲気に合うように、丸みのあるフォントを使用しています。

スクリーンショット 2016-01-21 14.37.28

ウェブフォントとは

通常ならCSSでフォント名を指定しますが、閲覧者の環境にそのフォントがインストールされていなければデフォルトフォントで表示されてしまいます。
そこで便利なのが、CSS3から使用できるようになったウェブフォントです。ウェブフォントは、ブラウザがフォントファイルをダウンロードして表示してくれるので、閲覧者の環境を問わずに好きなフォントを使用することができます。

今まで、フォントのデザインを気にして画像にしていた見出しやボタンも、デザイン性を保ったままhtmlにテキストとして記述できるため、何度も画像を作り直す必要がなくなり、制作工程を大幅に短縮することができます。

弊社ではFONTPLUS(フォントプラス)というサービスを利用して、日本語ウェブフォントを使用しています。

→FONTPLUS http://webfont.fontplus.jp

ウェブフォントを使用したサイト例

→茅ヶ崎徳洲会病院様 http://www.chigasakitokushukai.jp/

スクリーンショット 2016-01-21 15.10.27

→太田記念病院様 http://www.ota-hosp.or.jp/

スクリーンショット 2016-01-21 15.10.44

→寒川病院様 http://www.samukawabyouin.com/

スクリーンショット 2016-01-21 15.10.12

【制作事例】紀尾井町内科様 グラフィックデザイン

12月1日に、紀尾井町内科様の開院にあわせてホームページが公開されました。

今回は、弊社で制作させていただいた印刷物をご紹介いたします。

【紀尾井町内科様】

http://kioichonaika.jp/

web_img_kioicho

制作させていただいたものは、

・封筒2種

・折り込みチラシ

・3つ折りリーフレット

・名刺

・診察券

・病院カード

・名札

です!

gra_img_kioicho

和を基調とした美しい院内の雰囲気に合うように、紙質やフォントにもこだわりました。

3つ折りリーフレットには、生成りで温かみのある和紙のような紙を使用しています。

印刷物に使われている写真も、すべて弊社で撮影いたしました。

DSC_2782




左から、名刺、病院カード、診察券。

診察券はプラスチックカードになっています。

DSC_2719

このように、WEBサイトの制作と並行してグラフィックデザインもお引き受けできます。

また、チラシの折り込みやポスティングに関してのご相談も承っております。

ポスターやお薬袋やカルテなどのデザインも可能です!


グラフィックデザインでお悩みでしたら、是非一度お気軽にご相談くださいませ。

市村先生よりコメントをいただきました

すべて安心してお任せすることができました。デザインに関して信頼していたのでノーストレスでした。
ありがとうございます。

制作実績

→グラフィックデザイン

→ロゴデザイン

よりよい介護ケア・サービスのためのお手伝い – ゆめが丘様 空床情報

弊社でリニューアルを手がけた、介護老人保健施設ゆめが丘様のサイトにて、
施設の空床情報を更新できるシステムをご用意させていただきましたので、
今回その経緯をご紹介したいと思います。

介護老人保健施設 ゆめが丘
http://www.rou-yumegaoka.jp/
cap1

介護老人保健施設ゆめが丘様について

横浜市泉区に開設して16年目を迎える介護老人保健施設ゆめが丘様は、

施設入所定員100名/通所リハビリ定員40名、3階建ての施設になります。

入所施設は2階が「一般棟」と3階が「認知症専門棟」に分かれており、

「長期入所」「短期入所」「リハビリテーション」「デイケア」などのサービスを提供しております。

施設が効率よく機能するために

「長期入所」「短期入所」の空き状況はリニューアル前も公開していらっしゃいました。

メディカルソーシャルワーカーの方々へ最新の空床情報をお知らせし施設が効率よく機能する事は、
より多くの方々に介護ケア・サービスをお届けすることに繋がります。

最新情報を発信する難しさ

収容キャパなどの施設固有情報の更新は低いでしょうが、
特に「短期入所」の場合は、1日ごとに空床状況が存在し、更新頻度は自然と高くなります。

その他のページと同じ更新方法では滞ってしまう可能性があり、
特定日を予約希望の方の受付対応がスムーズにできなくなってしまう心配もあります。

リニューアル前は、管理画面による更新システムを導入しておらず、手作業による更新を行っていたようですが、更新が滞り、古い情報が掲載されていました。

自分の手ですぐ更新できるシステムの導入

更新頻度の高い短期入所の空き情報を含む「空床情報ページ」の全ての項目へ
専用の更新システムをご用意いたしました。

空床状況 | 介護老人保健施設 ゆめが丘

公開しているページに合わせた専用の入力画面表示は、入力ミスの軽減や、日々の更新を億劫に感じないためにも重要な点です。
特別な専門知識がなくても簡単に更新できるよう、わかりやすい入力画面を目指しました。

クリックすると「○」と「×」が変わる入力画面

最新情報をタイムリーに公開することで、今までよりも無駄なくケアサービスをお届けすることができますし、
事前に希望者が空き情報を把握できることは、受付時の時間削減効果に繋がります。

「このサイトの空き情報はいつでも最新」という信頼感から、
入所サービスの利用方法に新しい幅が広がることを期待しております。

【制作事例】看護部サイト

茨城県にある筑波学園病院様の看護部サイトをリニューアル制作させていただきました。

「筑波学園病院 看護部」
http://nurse.gakuen-hospital.com/

tsukubakangobu01

 

こちらの病院では従業員満足度が非常に高く、
一度は出産のために退職されたナースさんが子育てを終えてまた戻ってこられることもあるのだとか。
子育て支援や教育システムなどハード面の充実ももちろんですが、
スタッフ同士で支えあいながら働けるという人間関係の良さがスタッフの満足度につながっているようです。

そんな働きやすさをもっと効果的にアピールしよう!ということで
各所に工夫を凝らしました。

 

まず注目していただきたいのが、トップページで素敵な笑顔を見せてくれているナースさんの写真。
こちらは実際に筑波学園病院様で働いているナースさんたちを撮影させていただきました。

リロードするたびに違うナースさんが出てきます。
その数は全部でなんと12種類!
下の写真はその中の一部です。(あとはぜひサイトで確認してみてください・笑)

tsukubakangobu02

トップページを表示するたびに色々な笑顔のナースさんが出てくるので、
それだけでグッと生き生きとした印象になりますよね。
実は、これだけの枚数が出てくるのにはもう一つ理由があります。

 

ナースさんに限った話ではないのですが、
サイトにスタッフさんの写真を使いたいと思っても、
スタッフさんからOKがいただけずにモデルさんや素材集を使用するということはけっこうあるんです。

今回は特にトップページという目立つ場所ですので、
やはりそういう場所に写真が載ってしまうのはちょっと……という声もあり、
最初はモデルさんを使って撮影するという案も出ていました。

モデルさんでも、工夫すれば自然な写真を撮ることは可能です。
ただ今回はアピールポイントに「人間関係の良さ」があるということもあり、
ナースさんが支えあって働いている雰囲気をダイレクトに伝えるには、
やはり実際のナースさんを撮影させていただきたかったんです。

 

なのでここはちょっと工夫しまして、
「写真は部署ごとに2名または3名ずつ、
ブラウザを更新するたび画像が変わるので自分だけがずっとトップページに表示されることはありません」
ということで、なんとかOKをいただきました。

素材集やモデルさんでは出せない、
あたたかみと表情のあるトップページになっていると思います。

 

ナースさんたちには看護部紹介動画にもご出演いただいています。

ナレーションもナースさんたちが実際に喋ってくれています。

2分弱という短い動画ですが、
ナースさんたちがイキイキと楽しく働いている雰囲気が伝わってきますね!

実際のスタッフさんを起用した撮影は、
全員の日程を合わせるのが大変だったり、
思うような表情がなかなか撮れなかったりと難しい面もあります。

ですが、病院の「表情」がダイレクトに伝わるという点で、
特にリクルートを目的とする場合には効果が高いと思います。

 

コンテンツにもたくさんナースさんの笑顔写真を使わせていただきました。
スマートフォンでの閲覧にも対応しています。

看護部の魅力が存分に伝わるサイトになっていると思いますので、
ぜひご覧になってくださいね。

 

「筑波学園病院 看護部」
http://nurse.gakuen-hospital.com/

【制作事例】動物病院サイト・外来担当表CMS

千葉県内に3つの動物病院を展開する、
スマイルどうぶつ病院さんのWebサイトをリニューアル制作させていただきました。

スマイルどうぶつ病院
http://smile-vet.jp
web_img_smile-vet

3院で異なる病院情報をわかりやすくまとめられるようにと考えてフッターをデザインしました。
Webサイトのカラーに合わせてGoogle Mapのカスタマイズも行っています。
web_img_smile-vet2

制作後は、メディカルデザインで更新のサポートをさせていただくことはもちろん、
ブログや外来担当表など、院内から簡単に更新可能なCMSの導入も行っています。

スマイルどうぶつ病院さんのサイトでは、ブログはWordpressを導入し
外来担当表はご要望に合わせてオリジナルのものを作成いたしました。
web_img_smile-vet3

オリジナルのCMSについては、外来担当表のほか、休診情報ページや医療講演ページなど、
ご希望に合わせて作成可能です。過去のブログでもご紹介しています!
>>>どんなCMSがあると便利?

【制作事例】ペッサリー情報サイト

 
ふだん病院や、クリニックなどのホームページを作らせてもらうことが多い弊社ですが、
今回は少し珍しい事例で、医療器具(ペッサリー)の情報サイトを制作しました。

「知ろう!ペッサリーのこと」
http://pessary-info.jp
img_pessary

PC/スマートフォンに対応しています
 

ペッサリーと言うと一般的には避妊具のイメージがあるかもしれませんが、
現在の主な使われ方は、子宮脱などの骨盤臓器脱の治療です。

患者さまはもちろん、医療関係者にも
ペッサリー(およびリングペッサリー)について正しい知識と理解をもってもらえるよう
情報発信をしていきたい、という目的で
企画の初期段階からお話をいただき、
弊社で、わかりやすいサイトタイトルやドメイン名も提案させていただきました。
 

掲載されている情報はまだ多いとはいえませんが、
サイト公開後も、少しずつ追加更新しています。
スマートフォン版では
Sidr.jsというプラグインを利用して、
横からスライドしてくるメニューを作成しました。

img_sidr

Sidr.js は特に難しい設定もないので、
CSSをちょこっと上書きした程度で、基本的にはそのままで使用できました。

最新版(v1.2.1)は、Androidで「子要素の最初のリンクURLに勝手に遷移してしまう」
というバグがあるようで、
少し古いバージョン(v1.1.1)を使っています。
 

【制作事例】HTML5によるアニメーションとゲーム

昨年11月にJAセレサ川崎様のHPリニューアルの制作をさせていただきました。
PC/スマートフォンに対応しています。

セレサアニメ

http://www.jaceresa.or.jp/
PC版のトップページのメインビジュアルは
川崎の臨海部〜都市〜里山を気球でめぐる楽しいアニメーションになっています。
ポイントは多重スクロールによる奥行き感と、それがきちんとループでつながっている点です。
気球も動かせます!

 

また、せっかくリニューアルするなら、利用者が楽しめるようなコンテンツを作りたい、というご要望があったので
同じイラストを利用して、オリジナルゲームの制作をご提案しました。

game02_ol
「旬の野菜をキャッチ!GO!GO!CERESA!」
http://www.jaceresa.or.jp/game/

飛んでくる野菜を時間内にできるだけ多くキャッチする!という単純なゲームですが、
季節によって高得点のアイテムが変わったり、ハイスコアランキングがあったりします。
スマホ版もあるので遊んでみてください。

 

何年か前だと、Flashで制作するところですが、
HTML/CANVAS/Javascriptでの制作となるとちょっと手間がかかります。
最近は逆に、ホームページ内でこういったコンテンツを見かける機会が減ったかもしれないですね。

【制作事例】研修医募集メッセージ動画

 

筑波学園病院 研修医募集サイト

recruit_gakuen
http://recruit.gakuen-hospital.com

弊社で制作させていただきました。PC/スマートフォンに対応しています。

研修医の募集に特化した独立サイトを作りたい、というご要望で
インタビューと動画を中心としたサイトをご提案させていただきました。

 

メッセージ動画は、最後まで見てもらえるように2分以内に収めていますが、
撮影はロケハンも含めて3回(延べ3日間)、病院にお伺いしました。

医師の先生方は、お忙しい中、こちらの注文にも快く応えて下さり、
気持ちの伝わる、熱いメッセージをいただくことができました。

DSC_9836

 

内容はある程度事前に決めていただいていましたが、
原稿どおりではなく、みなさん自分の言葉でその都度話してくださいましたので、
現場で内容や言い回しをディレクションしつつ、
今のテイクがOKかどうかについても素早い判断が必要になります。
かなり集中力が必要でした…。

DSC_9903

 

インタビューページのテキストについては、
アンケート形式の原稿を元に再構成して作成しました。
写真撮影も、デザイン案をiPadで確認していただきながら
こちらのイメージを伝えるなどして、ご協力いただきました。

 

スタッフの皆さんが本当に明るくて協力的だったので
撮影はとても楽しかったです。

筑波学園病院様は、今後も弊社制作のサイトの公開が控えていますのでご期待ください。