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

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

「筑波学園病院 看護部」
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があると便利?

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラ紹介② Nikon D800~

こんにちは、デザイナのTです。

前回のNikon D750紹介に引き続き、今回はNikon D800についてご紹介したいと思います。

Nikon D800の特徴

img_00

D800は、3台の中で最も高い画素数を誇ります。その数なんと3630万画素

WEB用だけで使うにはもったいないくらいの細やかさです。

パンフレットやポスターにも使える写真を撮りたい!という時に非常に重宝しそうですね。

Nikon D800で撮ってみる

img_01

弊社のオフィス、朝の風景です。

晴れた日にはおおきな窓のカーテンから陽が差し込み、なかなか心地が良いです。

さて、奥に観葉植物が見えますが、お気づきでしょうか。

この観葉植物の上部の二股部分にあるモノが潜んでいるのです。

D750で撮った写真を拡大して見てみましょう。

img_02

…んん?

茶色いなにかであることは判別できそうですが、

なんだかボンヤリしてよく分かりませんね。

ではお次にD800で撮った写真。

img_03

ステゴサウルスちゃん(?)でした!はっきりしていて分かりやすい!

そう、D800の画素数があればここまで拡大してもはっきりしているのです。

WEB素材としても、撮影した写真の一部をトリミングして使用するといったことができそうです。

Nikon D800 まとめ

弊社では近頃はWEBだけでなく、病院用の告知ポスターやチラシなどの制作にも取り組んでいます。

印刷用の写真撮影に十分な画素数をもつNikon D800。

きめ細やかな写真を撮りたい時に重宝しそうですね。

次回は、Nikon D4sについてご紹介したいと思います。

【制作事例】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での制作となるとちょっと手間がかかります。
最近は逆に、ホームページ内でこういったコンテンツを見かける機会が減ったかもしれないですね。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~カメラ紹介① Nikon D750~

こんにちは、デザイナのTです。

年が明けて早くも1ヶ月が経ってしまいました。

遅ればせながら、今年もよろしくお願いいたします。

さて、弊社には現在3台のカメラがあります。

複数名で撮影行くことがあったり、同じ日に別の撮影がカブっていたりするので

様々な条件によって使い分けているようです。

そこで、複数回にわたり、これらのカメラを簡単にご紹介していきたいと思います。

ちなみにご紹介するカメラのラインナップはこちら。

  • Nikon D750
  • Nikon D800
  • Nikon D4s

今回は、Nikon D750についてのご紹介をします。

Nikon D750の特徴

img_00

こちらのD750は3台の中でも比較的扱いやすい万能なカメラで、

私のような初心者でも、「シャッター切っときゃなんとかなる(by 社長)」写真を撮ることができます。

D750はアタマの回転が良いので、オート設定でも周囲の状況をサッと認知して

うま~い具合に光量やバランスを調整してくれるんですね。なので初心者にも優しいのです。

img_01

そして注目すべきはこの可動式液晶モニター。

モニターを動かすことができるので、ファインダーを覗かなくとも俯瞰やあおりの写真を自由に撮ることができます。

img_02

こんなかんじで撮っています。

Nikon D750で撮ってみる

せっかくなので、この可動式液晶モニターを活かして俯瞰やあおりの写真を撮ってみたいと思います。

まずは俯瞰の写真から。

img_03

弊社オフィスの様子です。

ふみ台不要でこの目線!広角レンズとの相性もバツグンです。

そしてお次はあおりの写真。

img_04

題して「ルンバの目線」です。

そびえたつ空気清浄機が帰路を邪魔しているのでしょうか。

お陰でここ最近、ルンバが帰還前に力尽きている光景をよく目にします。

img_05

あともうすこし・・・

Nikon D750 まとめ

可動式液晶モニターによって、目線を変えた写真を簡単に撮ることができるNikon D750。

迫力のある写真を撮りたい時に重宝しそうですね。

次回は、Nikon D800についてご紹介したいと思います。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~実際に撮影に行ってみました~

 

こんにちは。
本日まで空白ではなく濃密な2ヶ月を過ごしておりました、デザイナのTです。
 

さてそんな濃密な2ヶ月の間、なんと実際に撮影をさせていただく機会がありました。
 

デザインにも携わっている身なので、
頭にはぼんやりと「こんな構図の画がほしいなぁ」とか
「あんな自然感のある画入れたいなぁ」というものがあり、
その素材を自分で撮りに行く、というわけです。
 

「なんとなく欲しい画は把握してるし、なんとかなるでしょう」
なんて甘い考えが吹き飛ぶほどに始終軽いパニック状態だった人生初の撮影。
撮影したデータを見て、「アレ?こんな仕上がり…?」といった具合になってしまいました。
当初頭に思い描いていた「こんな構図」や「あんな自然感」はドコへ…
 

ですがかなり多くの教訓を得ることができ、非常にためにる経験となりました。
そこで今回は、撮影を通して初心者なりに気づいた点をまとめてみました。
 

1. 迷ってる暇はない!慣れないうちはある程度構図を決めて行く

 
img_00
 

基本、スタッフの方々のお忙しい時間を割いて撮影させていただくわけなので、
手際よくパッパと進めないとなりません。
また作業中の様子を撮る時にはベストなタイミングを狙いつつ、
邪魔にならないよう、かつ映してはいけないものはハブきつつ…
といった具合で短時間の中で瞬間的にシャッターを切ることが求められるようでした。
迷ってたらここでのカットがなくなってしまった…なんてことのないように、
ある程度基本の構図は決めておいた方がやりやすいのかなと思いました。
 

2. 意識的に足を動かす!色んな角度からの写真を撮っておく

 
img_01
 

撮影したデータを見返すと同じ構図の写真ばかりになってしまっており、
デザイン時に「これの逆向き欲しかったのに…!」という状況に何度も直面しました。
一度シャッターを切り始めるとずっとその場で固定してしまい、
なかなか足が動かないのです。
とにかく意識して、複数の角度からの写真を用意した方が、
後々デザイン作業の際に重宝するなと感じました。
 

3. 何気ない風景も写真に収めておく

 
img_02
 

いざデザイン作業にとりかかると、挿絵として画像を使用することが多々あります。
そんな時のために、必要な写真以外にもパシャリとしておくと
要所要所で使うことができるので便利だなぁと思いました。
特にイイカンジの物撮り写真は絵になるので、なかなか重宝するのではないでしょうか。
ここのエリアの撮影は終わったからいいかな、なんて気を抜かしていると
思わぬシャッターチャンスを逃してしまうかもしれません…
 

撮影中は取り合えずシャッターを切ることであっぷあっぷだった私は、
「設定わたわたいじってたら何も撮れずに終わる…!」な状態でした。
その点は頭のよいカメラさんがきちんとカバーをしてくれていましたが、
自分でももっとスキルを磨かないといけませんね。
次回はもっと余裕をもって取り組みたいものです。
(ちなみに同行された別の方のお写真は使いやすいものが多数でした。流石です・・)

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~F値いじってみました~

 

こんにちは。

1か月が過ぎ、ようやく仕事にも慣れ始めたあたりのデザイナTです。

 

 

今回は「F値」をいじって撮影してみました。

F値とはまわりの光を取り込む穴の大きさを数値化したもので、「絞り値」とも言われるものです。

 

F値は数値が大きいほど穴が小さくなり、光を取り込む量が少なくなります。

逆に数値が小さいほど光を取り込む量が多くなる、ということですね。

 

ちなみに先ほどの写真はF値4.0で撮影しています。

 

 

対してこちらはF値7.1。

これだけの差でこんなにも明るさが変わるとは!

 

今回は室内、更に白熱灯のもとだったので比較的暗めだったのかもしれません。

肉眼で見た状態よりもやや暗い印象になりますね。

これをより目で見たままの明るさに合わせるにはまだまだ調整が必要ですね・・・

これからどんどん腕を磨いていきたいと思います。

【目指せ脱・カメラ初心者】一眼練習、始めました。 ~ごあいさつ~

 

初めましてこんにちは。

メディカルデザイン入社ほやほやの新人デザイナTです。

 

突然ですが、「クオリティの高いWEBサイト」に欠かせないものって何でしょう?

レイアウト、色使い、タイポグラフィなど、様々な要素があると思います。

写真ひとつとっても、良いものであるか微妙であるかによってサイトのクオリティの高い低いを左右すると言っても過言ではありません。

 

弊社ではデザイン制作の際、病院の外観や機器、スタッフさんなどの写真を撮影して使用しています。

私自身、一眼を全く触ったことがないわけではありません。が、

明るくしたいだけなのに設定が見つからない…

そもそもこの数値何…?

とりあえずPhotoshopでどうにかしよう…

といった具合でカメラと意思疎通が図れず、理解度0のまま使用していました。・・

 

「こんな勿体ない使い方じゃステキな写真の一枚も撮れないじゃないの!」

という訳で本日より、一眼レフの使い方を学びつつ様々なノウハウをカメラ初心者の私が綴らせて頂きます。

 

 

本日は試し撮りということで、お隣の席のOさん(とても仕事がお早い)を被写体にさせていただきました。

これからよりアジのある写真を撮れるよう学んで参りますので、以後どうぞよろしくお願いいたします。

 

シネマグラフ・簡単・作り方・Photoshop

平井です。今日はシネマグラフの話。


シネマグラフについては
https://www.tumblr.com/search/%23cinemagraph
http://www.pinterest.com/search/pins/?q=cinemagraph
などを参照のこと。
一部分だけが動く写真、と思っておけばいいです。


近年のGIFアニメ再評価に乗じて、ほそぼそと流行しています。


まぁなんとなく作り方は想像つくんですが
どのくらいの手間でできるのか、
自分でやってみることにします。


まずは、素材を用意します。
とりあえずベランダに出て、外の景色をiPhoneでビデオ撮影すること10秒。

スクリーンショット 2014-07-04 23.50.36

PCで開いてみます。
手ブレがひどい。


動画の手ブレを補正するには…
調べるとAdobe Premiere CCでできるらしい。
さっそくダウンロードします。
これだけのために…と思わなくもないですがAdobe CC(月額5,000円)の恩恵ということで。

effect

「ワープスタビライザー」というビデオエフェクトで簡単にできましたが
撮るときに三脚使うなど、カメラを固定したほうがいいですね。

 


Photoshopで動画を開きます。
開けるの?と思うかもしれないけど普通に開けます。


「タイムライン」というパネルに読み込まれます。(「レイヤー1」)
使いたい範囲を「ワークエリア開始・終了」スライダーを動かして選択します。
最初と最後がループで繋がるようにします。


「時間インジケーター」をぐりぐりと動かしてみて、
基本になるフレームを選びます。
「結合部分をコピー」とかで新規レイヤー(「レイヤー2」)にペースト。
いったん非表示にしておきましょう。


もうひとつ新しいレイヤー(「レイヤー3」)を作って、
レイヤー1を見ながら、動かしたい要素が動くエリアだけをブラシツールとかで塗り塗り。
スクリーンショット 2014-07-04 23.44.11
なるべく狭いほうがかっこいいけど、あんまり気にせず適当に。


できたら、レイヤー3を選択範囲にして、レイヤー2をマスク。
選んだ範囲だけ、下にあるビデオレイヤー(「レイヤー1」)が見えるようにします。


おわり。
「WEB用に保存」で、GIF形式を選んで、ループオプションを「無限」にして保存。
ブラウザで確認しましょう。


ファイルサイズは軽いほうが観てもらいやすいので、

書き出しサイズは小さめにして、フレームレートも15fpsで充分かな。

チープなほうが味のある映像になるよ。とかなんとか。

シネマグラフ作例

確かにできたんですけど、どうもいまひとつ面白くないですね。
なぜでしょう。次回はその理由を書きます。たぶん。

毎月一冊無料のフォトブック作成アプリ

今年新卒入社しましたディレクション担当佐藤です。やっと仕事にも慣れてきました。
今回初めてこのブログを更新します。


昨年従兄弟夫婦の間に赤ちゃんが誕生しました!たまに会っていますが可愛くて仕方ないです。しかも成長も早いので会うたびに成長してて驚きが隠せません。
そんな従兄弟夫婦から毎月、成長経過を記したフォトブックが送られてくるようになりました。
このフォトブック、クオリティも高くどうやら個人で作っているわけではなさそう。


というわけで、気になって調べてみました。

「nohana」
http://nohana.jp/

なるほど、フォトブック作成サービスは数あれど
「nohana」では毎月1冊目が無料(+送料)で作成できるんですね!
1冊無料という運営会社さんはなかなかないので
まずは手軽に気軽に作ってみよう!という方にはもってこいではないでしょうか。

何故こんなに破格の運営をしているのかというと
フォトブック事業に参入しようとしているわけではなく、別の切り口で利益を出そうとしているからだそうですよ。

フォトブックの作り方はとても簡単。
アプリのダウンロード後、会員登録をして写真をアップロードするだけ。

(編集画面は以下参照。白い部分に写真が入ります。出来上がりイメージがわかりやすいです)
image

 

これなら三日坊主でも作れちゃいますね!

皆さんはスマホなどで撮った写真はどうされていますか?
私は待ち受け画面にするくらいで、データの山と化しています。

写真は整理して一冊にまとめた方が、見返す時もわかりやすいですよね。
昔は現像した写真を一枚一枚重たいアルバムに貼っていくという面倒な作業でしたが
今では写真をアップロードするだけという簡単作業になったと思うと、何だか感慨深いです(遠い目)


私も近いうちに利用してみようと思います。
皆さんも梅雨で外出も億劫なこの時期に、写真の整理をしてみるのは如何でしょうか?