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

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

【東京西徳洲会病院 看護部サイト】
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

ランチ会はじめました

あけましておめでとうございます。本年もよろしくお願いいたします。
年明けは暖かい日が続きましたが、この数日寒さが厳しくなってきました。

さて、メディカルデザインでは、昨年末から「ランチ会」という食事会をはじめました。
目的は、社内コミュニケーションの活性化です。

 

lunch2

 

 

これまでは、ホームページの制作という仕事柄、スタッフは黙々と仕事に没頭することが多く、「そういえば、私今日一言もしゃべっていなかった・・・」と帰るころに気づくこともあるくらいでした。

 

そこで、仕事でも飲み会でもない雑談できる場をつくろう、という話があがり、ランチ会が企画されたのです。

 

隔週で一度、ランチ会の日は会社でお弁当を注文して、会議室でみんなで食べます(お弁当代は会社もち!なので、みなさん迷わず値段の高いものを選びます)。

 

今日は3回目のランチ会で、牛肉がメインのお弁当屋さんに注文しました。

 

lunch1

ちなみに私が選んだのは、黒毛和牛焼しゃぶわっぱ、というお弁当です。富士山のイラストの容器の中には温泉卵が入っていました。おいしかったです。

 

音楽好きが多い弊社では、椎名林檎と大森靖子はどっちの方が熱いのか、水曜日のカンパネラってどうなのよ、など、音楽が話題になることが多いです。音楽にそれほど詳しくないという人にも、よくよく話を聞くと、元たまの知久さんが好き(渋いです)とか、コアなクラブミュージックファンとして知られる先輩が「本当はLUNA SEAが好き」と言い出すなど、意外な一面を垣間見ることができて、とても気分転換になります。

 

lunch3

 

3回やってみて

3回やってみて、社内コミュニケーションは活発になったのか、というアンケートを皆さんにとってみたところ、
「普段は手短な要件しか話す機会のない方と休みの日の過ごし方や冗談を言い合えて、打ち解けられた。」
「(入社したばかりなので)まだ会話したことのなかった方と会話するきっかけになった。」
「単純にランチが美味しい」
「仕事中は他の方と喋ることがほとんどなく私語も全くないので、周りの方に声を掛けにくい雰囲気があったが、ランチ会で先輩方と気軽にお話しできるようになり、仕事で分からないことがあったり相談することがあったときにも声をかけやすくなった。」
などの応えがありました。

 

ランチ会で仕事と関係のない話をして打ち解けると、仕事の相談がしやすくなるようで、新人や若いスタッフには特に有意義なようです。

 

是非つづけたいです。

 

他社様のランチ会

株式会社ソニックガーデン様

http://www.sonicgarden.jp/182

こちらの会社様では、社長自らが作る「まかないランチ」が毎週金曜日に開催されているそうです。
すごい。これは盛り上がりそうです。
弊社の社長の男の手料理も食べてみたいような、食べたくないような気もします。

 

LINE株式会社様

http://line-hr.jp/archives/32702287.html

こちらの会社様は、おにぎりやパンやプリンなどを、朝食として無料で従業員に提供していたそうです。
働き人は朝時間がない、という人が多いでしょうから、これは喜ばれるでしょうね。うらやましいです。

 

株式会社アラナタ様

http://24h.aratana.jp/?p=17760

こちらの会社様は、福利厚生の一環として、「シャッフルランチ」を導入しているそうです。シャッフルランチとは、社内のメンバーを抽選で選んで、選ばれたメンバーでランチを食べにいく、というものだそうです。抽選で選ぶから、役職や部署をまたいでのチームになるようで、会社内に意外な人脈ができるそうです。

 

 

いろいろな会社が、コミュニケーションの活発化や福利厚生の充実を目的として、このような取り組みをしているようです。
弊社も日々精進です!

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

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/

Smartyを導入するメリット

システム部の松田です。

サイトのお問い合わせや応募の入力フォームの実装・テストを担当することが多いのですが、その際によく利用するPHPのテンプレートエンジン「Smarty」について、まだまだ断片的な知識の整理を兼ねて、今回紹介したいと思います。

投稿は、前後編と2度に分ける予定で、

  • 前篇:PHP実装の問題点、それを補うSmartyのメリットなど概要
  • 後編:Smartyの使い方、ハマりやすいポイントなどの具体的な内容

のような構成でお伝えしたいと思います。

Continue reading

【HTML】見る側のブラウザのキャッシュのCSSや画像を更新する方法

更新したはずなのに!

HTMLの更新完了! お客様、ご確認ください、というシーンで

お客様「変わってないようだけど?」

ブラウザに残ったキャッシュの可能性がありますのでキャッシュの削除を・・
削除方法は・・ブラウザは何をお使いでしょう?というようなやりとりがまれにあるかと思います

原因は?

見る側のパソコンのブラウザに残っていた古いデータ(キャッシュ)が
更新後の初回アクセス時に使われてしまい、
ページが予期せぬ表示になってしまうあの現象です。

どうしたらいいの?

つまり見る側のパソコンのブラウザに
「このCSS、今回は新しく読み込んでくださいね」と、どう教えるかですが、
てっとりばやく簡単な方法として

例えば、今までこう書いて読み込んでいたCSSだとしたら、

<link rel=”stylesheet” href=”/css/default.css” />

キャッシュ更新したい時はこう変えます

<link rel=”stylesheet” href=”/css/default.css?20150802″ />

その読み込むCSSのパスの最後に「?」をつけまして、
でたらめな文字をクエリとして渡すと、

ブラウザ「このCSSは、今までと違うこの値によって、違うデータに変化するかもしれない」

と認識して新しく読み込んでくれます。

上記の例の「default.css?20150802」は年月日ですが、
「?」の後は、URLとして意味を持たない文字列なら何でもいいです。

レイアウトを大きく変えるときなどちょっと加えておくと、
大きなタイムロスと信頼感へのダメージを未然に防げますので、
おまじないのように入れておくといいと思います!

LinuxサーバでwebサイトのキャプチャーをFlash込みで撮る方法

システム部の鈴木です

とある案件でたくさんのwebサイトのキャプチャー画像をFlashも含めて取得する必要が出ました
その際に取った方法をご紹介したいと思います

今回は以下の方法を採用しました

  • Linuxサーバ(CentOS 6.6)を使う
  • 仮想ディスプレイ(Xvfb)のX Window上でFlashプラグインをインストールしたFirefoxを起動
  • ImageMagic の import コマンドでキャプチャを保存

この方法、ググれば同じような方法を紹介しているページはたくさん見つかると思いますが
微妙に違ったり、その通りにやっても上手くいかない事もあると思います

そこで、今回実際にやってみて上手くいった方法を残しておきたいなと思います

Continue reading

【ネットワークはじめの一歩】インターネットのルール

ネットに繋げる、というと、光回線、ADSLといった単語が浮かびますが、インターネットに繋がるルールを一から勉強したいと思います。

インターネット・プロトコル・スイート = TCP/IP

TCP/IP・・・聞いたことはありますが、日常やら業務で絡むことはなく、何のことやらよくわかってませんでした。PC と PC が通信するとき、同じルールを使っていないと通信することはできません。

そのルール、約束事をプロトコルといい、それらをまとめたインターネット・プロトコル・スイートこそ、TCP/IPいいかえれば TCP/IP さえ理解できればネットワークの全てがわかる!ということで、まずはざっくりみてみたいと思います。

TCP/IP ではPCからルータの通信、ルータから別ルータへの通信、ルータからサーバへの通信、という流れを「レイヤー」で分けて考えます。

cap2

TCP/IP レイヤー 概要 含まれるプロトコル 扱うデータの名称 (PDU)
レイヤー4
アプリケーション層
受信したデータとアプリケーションソフトの処理 HTTP
FTP
DNS
TELNET
SMTP
POP
IMAP
SNMP
メッセージ
レイヤー3
トランスポート層
受信データのエラーチェック、アプリケーションに渡す処理 TCPUDP TCPなら、セグメント

UDPなら、データグラム

レイヤー2
ネットワーク層
ブロードキャストドメイン間での処理 IPICMPARP
OSPF
パケット、データグラム
レイヤー1
リンク層
ケーブル、電波、ルータ内(ブロードキャストドメイン内)の処理 MAC
DSL
Ethernet
無線LAN
PPP
フレーム、信号

TCP/IP の説明に OSI参照モデルの7つのレイヤーがよくでてきて、混乱しました。。

TCP/IP参照モデル OSI参照モデル
レイヤー4 アプリケーション層 レイヤー7 アプリケーション層
レイヤー6 プレゼンテーション層
レイヤー5 セッション層
レイヤー3 トランスポート層 レイヤー4 トランスポート層
レイヤー2 ネットワーク層 レイヤー3 ネットワーク層
レイヤー1 リンク層
アクセス層
ネットワークインターフェース層
レイヤー2 データリンク層
レイヤー1 物理層

特に業務で必須となるアプリケーション層を重点的に学びたいと思います。

【制作事例】タレントさんを起用した対談コンテンツ(平野レミさん)

今日はメディカルデザインが企画から参加させていただいている
対談コンテンツをご紹介したいと思います。

「yuichiroyazaki.jp 免疫力をあなどるな!」
http://yuichiroyazaki.jp

yuichiroyazaki

 

樹状細胞ワクチンというがんワクチン技術を開発しているテラ株式会社の社長であり、
もともとは医師でもある矢崎雄一郎さんのブランディングサイトです。

健康・免疫力・がん治療などのキーワードに関心のある方をターゲットに、
免疫力を切り口として幅広くヘルスケアの話題を発信することを目的としています。

 

矢崎社長は「免疫力をあなどるな!(リンク)」という本も書かれていて、
フレンドリーでお話もとってもわかりやすいのですが、
「医師」とか、「経営者」という肩書がついてしまうとどうしてもとっつきにくいイメージになってしまいます。

そこで、タレントさんや料理家の方などターゲット層に親しまれている方との
対談コンテンツにすることで、「やわらかく、わかりやすく」免疫力やがんについての
お話を発信できればというのがこの対談の目的です。

 

この対談コンテンツ、
メディカルデザインが対談相手の選定から対談テーマの企画、お相手へのアポイント、
当日のセッティングや撮影、
最終的にはテープ起こし・ライティング・ページ制作まで一貫して担当させていただいてます。

先日は、料理愛好家でシャンソン歌手の平野レミさんとの対談でした。

 

当日はカメラ映えを考えて、
テーブルの位置、イスの角度など細かいレイアウトまで撮影スタッフ本人がセッティングします。

対談内容に関しても、矢崎社長には事前に想定質問集などの資料をお渡しして、
イメージをふくらませていただきます。

 

img04-1
こちらの写真の、レミさんの後ろにぼんやり写っているモニターには、
実はレミさんのオフィシャルサイトが表示されています。

撮影をする際に、背景のないものばかりよりもちらっと背景が入るものが
あったほうがメリハリがつくということもありますが、
レミさんが入室されたときに「あら、私のサイトだわ」と思っていただけるかな?
という狙いもありました。

 

小さなことですが、お話していただく方にリラックスしてもらう工夫です。
この対談、レミさんの元気の秘密についてお聞きしよう!というテーマで
生活習慣や食生活についていろいろお聞きする予定だったのですが、
逆に矢崎社長がレミさんの質問攻めにあってしまいました(笑)

レミさんは細かいことは気にしない、自由でダイナミックな印象がありましたが、
ご家族の健康についてひとつひとつ真剣に質問するレミさんは、
良い意味で「普通の奥さんであり、お母さん」でした。

 

そういうわけで、少し予定とは違ってしまいましたが、
免疫力アップレシピは予定どおりたくさん教えていただいて、
かつレミさんのリアルな心配事を伺うことができまして、
なかなか味のある対談記事に仕上げることができました。

予定どおりにいかないところがこういう企画の面白いところですね。

 

この日は、ついうっかり口をすべらせてしまったレミさんが
「こんなの載せたら大変よね!ちょっとこれ内緒ね!」と
お茶目にフォローするハプニングもありました(笑)

(内緒なので、内容は書けません。ごめんなさい!)

対談では美味しい免疫力アップレシピもたくさん紹介していますので、ぜひご覧ください。

 

特別対談 料理愛好家・シャンソン歌手 平野レミさん
「パワーの秘密は夫にあり?”ゴックンして幸せ”で免疫力も美味しくアップ」

yuichiroyazaki_taidan
今まで平野レミさんを含め3名の方との対談に同席させていただきましたが、
みなさんひと目でわかるほどエネルギッシュなオーラがあります。

そして、そんなエネルギッシュな方々から口をそろえて
「お若い!」「ツヤツヤですね!」と褒められる矢崎社長もスゴイ……。

 

そんなエネルギーがぶつかりあう対談現場はポジティブな空気でいっぱいで、
このパワーを皆さんにお分けしたい!という気持ちで一同コンテンツを作っています。

対談が終わったあとは、なんだかスタッフもツヤツヤしています(笑)
これからももっともっと盛り上げていきたい企画ですね。

 

こちらの対談のような内容でしたら社内スタッフでテープ起こし・ライティングが可能ですし、
より専門的な内容の場合はその分野の専門ライターさんも手配しています。
タレントさんや各ジャンルの専門家の方へのアポイントも承っています。

「こんなこと、webの会社に頼んでもいいのかなぁ」ということでも
意外とさっくりお引き受けできることが多々ありますので、まずはご相談くださいね。