shokolog.com

Service Design: Hospital

昨年末、腫瘍が発覚し、手術・入院しました。

腫瘍は体外へ出されたので大丈夫です。

せっかくの経験なので、個人的に入院中感じた

「病院のサービスデザイン」について綴っておこうと思います。

今回入院したのは、人生で2度目です。

病院も入院した科も違いますが、

明らかに前回と比べるとよいサービスが多く、

病院特有のデザイン配慮も色々と気づかされました。

physical evidence / environments / human interactions の3つの角度から、

よいサービスだなと感じたポイントをまとめました。

—

1. physical evidence

- 自動で角度調節できるベット

自分の力で体が動かせない身でも、ボタンを押すことで寝起きできる

- 入院生活予定表

入院〜退院までの毎日の生活の予定表が配られることで、

今日どんな検査があり、何をしなければよいのか患者も把握することができる

毎日目標を持って、入院生活ができる

- レンタルパジャマ

前回はパジャマがレンタルできなかったために、

毎回ランドリーで洗濯するのが面倒だった

今回は借りられたので楽だった

2. environments

- 病院中どこにでもある手すり

たとえヨタヨタ歩きでも、どこにでも体を支えられる安心感がある

- 手術室にかけられる好きな音楽

手術室に入室する際に、好きな音楽を持っていき、かけることができる

手術前の緊張を和らげる

- 曲が流れるナースコール

押すとブザー音ではなく、優しい曲が流れる

何度鳴っても不快や不安感を持たせない配慮がなされている

 3. human interactions

- 生年月日、名前の口頭確認

検査や投薬前、患者は毎回生年月日と名前を口頭で言う必要がある

面倒ではあるが、医療ミス防止の安心感が生まれる

前の病院はそういうのがなかったので、常に不安だったことを思い出した

- 予想される痛みや症状の説明

検査や投薬前「チクッとしますよ」「気持ち悪い感じしますよ」という

たった一言の声かけが、患者の不安要素を軽減させる

言ってくれるのとくれないのは、だいぶ違う

- 医者、看護師の励まし

「一緒にがんばりましょう」「すぐよくなりますよ」などといった励ましが、

患者のヤル気を起こさせたり、不安要素を取り除く

—

性格や病気の重さによって違うとは思いますが、

患者は日常を離れ、

常に不安や緊張と隣り合わせで入院生活しています。

その不安と緊張を少しでも軽減させるのが、

ほんの一言や少しのデザイン配慮だったりします。

私も入院中、

不安と緊張で爆発しそうな時もありましたが、

たくさんの言葉やデザイン配慮に支えられ生活していました。

病院は、生と死を扱う空間で、

デザインする側としてはヘビーで頭を抱える場所です。

しかし、人が心身共に弱り果てて行き着く所なので、

そういう場所にこそ、たくさんのデザインが必要で、

弱った人を支える必要があります。

今回の経験で感じたことを、

ゆくゆく何かしら自分のデザインに生かしていきたい次第です。

New Year 2013

あけましておめでとう、2013！！

人類滅亡とか言われてたけど、無事新年を迎えられてよかったです。

色々と脳内整理したいことが山積みで年の瀬にまとめようと思っていたけれど

新年の方が先にやってきてしまいました。

今年の目標は、

「たくさん移動する & 何か1つ成し遂げる」

です。

自分は「移動欲」が強い人間なんだと、昨年気づきました。

世界は広いのに一カ所に留まっとるのは、

なんかもったいない気がして嫌なんです。

人生いつ何が起こるか分かんないし、

いつ死ぬか分からないことも重々感じたので、

動ける時にはいっぱい動いて、

いろんな人に会い、いいもの見て、感じて、生きていきたいです。

だから、どこにいても働けるように、

ノマドワーキングももっと極めたいです。

プラス、死ぬ間際に後悔しないよう

何かひとつ「成し遂げたサムシング」をつくりたいです。

みなさんの2013年も、

健康で、たくさん動いて、充実した1年になりますように。

September 17 to 22 in Siem Reap

9/17 – 22、4泊6日でカンボジアのシェムリアップに行ってきました。

世界遺産、アンコールワットを見に。

9月は雨期真っただ中で、

行く前は雨の量と暑さにかなりビビっていたのですが、

雨が降ることで、思ったより暑くなかったし、

雨もドシャ降りに遭わなかったので平気でした。

おそらく、東京の8月の方がよっぽど暑いです。

カンボジアは、予想以上によい国でした！

アンコールワット&トムは世界遺産感満載だし、

クメール料理は安くておいしいし（3~5ドルくらい、しかも米つき）、

緑がたくさんあるし、

人はみんな親切で丁寧だし、

英語もたまに日本語も通じるし、

歩き疲れたらマッサージしてもらえるし（3ドル/30分くらいから）。

また何年後かに、今度は乾期の時に行きたいです。

アジア旅行に迷っている人&まだ行ったことない人がいれば、

カンボジア、ゴリ押しします。

日本からの直行便はないので、経由して7時間ほどです、近い。

Study HTML5 & JavaScript (3) – Canvas

HTML5の新しい機能、canvas!

canvasタグ内で、いろいろ描画できるというやつです。

processingを思い出します。

canvasではないけれど、

そういえば、昨年教えてもらったJavaScriptのみで描かれたサイト。

http://www.cake23.de/traveling-wavefronts-lit-up.html

(Google Chromeでしか見れません)

綺麗すぎて悶絶するけど、ソースを見ると鬼！！！

コードだけでこんなにも有機的な表現ができるなんて、感動です。

以下、学習内容です。

—

・キャンバスの制作

<canvas id=”ID” width=”幅” height=”高さ”></canvas>

グラフィックスを描画する領域

指定したサイズ(幅×高さ)の透明なキャンバスがページ内に作成される

var canvas(変数) = document.getElementById(“main(ID)”);

var context(変数) = canvas.getContext(“2d”);

キャンバスの取得、コンテクストの取得

キャンバスを使用する際に必ず記述するコード（決まり文句として覚える）

・四角形の描画

コンテキスト.strokeStyle

線の色の設定

コンテキスト.strokeRect(x,y,w,h)

四角形(輪郭のみ)の描画

x： 四角形の左上の頂点のx座標

y：四角形の左上の頂点のy座標

w：四角形の幅

h： 四角形の高さ

コンテキスト.fillStyle

塗りつぶし色の設定

コンテキスト.fillRect(x,y,w,h)

四角形(塗りつぶし)の描画

・線の描画

コンテキスト.beginPath()

パスの開始

コンテキスト.moveTo(x,y)

始点の移動

コンテキスト.lineTo(x,y)

線の作成（指定の座標まで線を引く）

コンテキスト.closePath()

パスを閉じる

コンテキスト.stroke()

パスの描画

・円、弧の描画

コンテキスト.arc(x,y,radius,startAngle, endAngle, anticlockwise)

円・弧の作成

x：円の中心のx座標

y：円の中心のy座標

radius：円の半径

startAngle：開始角度（ラジアンで指定）

endAngle：終了角度（ラジアンで指定）

anticlockwise：描画方向（反時計回りはtrue、時計回りはfalseを指定）

JavaScriptでは　π (ラジアン) = Math.Pl　と記述

ex.) 360°=2π = 2*Math.Pl　/　 45° = 2*Math.Pl*(45/360)

コンテキスト.fill()

パスで囲まれた領域を塗りつぶす

塗りつぶしの色は、fillStyleで指定した色になる

・曲線の描画

quadraticCurveTo(cp1x, cp1y,x,y)

2次ベジェ曲線を描画

bezierCurveTo(cp1x, cp1y,cp2x,cp2y, x,y)

3次ベジェ曲線を描画

arcTo(x1,y1,x2,y2,radius)

直線に接する弧を描画

Study HTML5 & JavaScript (2) – Slide Show App

本日もJavaScriptとHTML5のお勉強です。

今日は、「スライドショー」Appをコンプリートしました。

再生ボタンを押すと、

壮大なクラシック音楽が流れながら画像が見れる、

と結構シュールなサンプルでした。

サンプルそのままの素材とGUIなので、オシャな感じではないですが、

まず先にコードを書いて覚える、ということを重きに学習しました。

昨日からやたらと書いていて

document.getElementById(“IDの名前〇〇”); //指定IDの取得

が出てくるので要注意です。

JavaScriptからHTML5のIDを読み取る、

という両コードの橋渡し的な役割なのでよく出てくるようです。

以下、学習内容とメモです。

—

・サムネイル画像をクリックすると画像が表示されるビューアーの作成

function 関数名 (imageNo){
}

引数imageNoに、表示したい画像番号を渡す

document.getElementById(“ID名〇〇”).src = 配列名〇〇[imageNo];

メイン画像の切替

（指定IDのsrcにアクセスし、配列に入れておいた画像を呼び出して表示）

配列 = document.getElementByClassName(“クラス名〇〇”)

クラス名〇〇を元にエレメントを取得（全てのサムネール画像要素の取得）

DOM要素.classList.remove(“取り除くクラス名〇〇”)

slectクラスを削除する

DOM要素.classList.add(“追加するクラス名〇〇”)

slectクラスを追加する（選択されたサムネール画像にslectクラスを追加）

onClick = “・・・”

マウスが押されたら関数〇〇を実行する

・スライドショー（タイマーを使って画像を順に切替）

<button type=”button”>

　ボタンに表示するラベル

</button>

ボタンの作成（<imput>タグでもボタンはつくれるが、<button>方が

ボタンのテキストを複雑に変更できたり画像を貼り付けたりできる）

clearInterval(タイマー変数名)

インターバルタイマーをクリアする（setInterval関数で開始したタイマーは、

生成されたタイマー変数をclearInterval関数に渡して止めることが出来る）

・音楽データの再生・一時停止・停止

<audio src=”音楽データファイル” controls autoplay loop></audio>

src : 再生する音楽データファイルを指定

controls : 再生/一時停止、ボリュームなどを操作するコントロールバーが表示

autoplay : ページを開いたときに自動的に再生を開始

loop : 繰り返し再生

<audio controls autoplay loop>

<source src=”音楽データファイル1″></source>

<source src=”音楽データファイル2″></source>

<source src=”音楽データファイルn”></source>

</audio>

*再生できるファイル形式がwebブラウザーによって異なるので、

AUDIOタグだけでは全ての環境に対応することが出来ない

よって、複数のファイル形式を記述できるSOURCEタグも一緒に書く

要素.play()

音楽・動画データの再生

要素.pause()

音楽・動画データの一時停止

要素.load()

音楽・動画データの再読み込み / 音楽・動画データの停止

・スライダーバーによる音楽ボリュームの変更

<input type=”range” id=”ID” value=”初期値” min=”最小値” max=”最大値” step=”間隔”> 

レンジ入力欄（スライダーバー）の作成

id : 要素を特定するためのIDを指定

value : 初期値の指定

min : 最小値の指定（省略時は0）

max : 最大値の指定（省略時は100）

step : 数値の間隔を指定(省略時は1)

*現在、Chrome、Safari、Operaブラウザーに対応

要素.volume

ボリュームの変更

onChange = “・・・”

スライダーが変化したときに発生するイベント

disabledプロパティ

一度だけしか押せないボタン作成時に使用

ex.) document.getElementById(“buttonStart”).disabled = false;

（ボタンの有効化 false）

無効にしたボタンを再度クリック可能にする

—

1回勉強したら 絶対に忘れない脳みそがほしいです。

Study HTML5 & JavaScript (1) – World Clock App

もっと武器を持つために、HTML5とJavaScriptの勉強をしています。

Web のコードがだいたい書けるようになったので、

今度はWeb Appが作れるようになるよう訓練です。

『つくって覚えるJavaScript+HTML5入門』 

出版社 : アスキー・メディアワークス

オフィス加減 (著)

Web Appに特化した本 & とにかく書いて書いてつくっていく、

という内容だったので、この本にしました。

今日は「世界時計」Appをコンプリートしました。

学習した内容を忘れないように、以下メモです。

—

・現在の時刻（時間、分、秒）の取得

new Date()

現在の日時を取り出すメソッド

getHours()

時間を取り出すメソッド 0~23の値を返す

getMinites()

分を取り出すメソッド　0~59の値を返す

getSeconds()

秒を取り出すメソッド 0~59の値を返す

DOM要素 ＝ document.getElementById(“〇〇”); 

HTML ID「〇〇」のDIVタグを取り出すメソッド

DOM要素.innerHTML = 書き換えたい文字列;

HTML ID「〇〇」のDIVタグの中に書き込むメソッド

onLoad = “関数〇〇”

ページ読み込み時に関数〇〇を実行するメソッド

・現在の日付（年、月、日、曜日）の取得

getFullYear()

年を取り出すメソッド　4桁の年を返す

getMonth() 

月を取り出すメソッド　0~11の値を返す

（12月にするためには+1を忘れずに）

getDate()

日を取り出すメソッド　 1~31の値を返す

getDate()

曜日を取り出すメソッド　0~6の値を返す

（0は日曜日、6は土曜日に相当）

var 配列名 = [要素1, 要素2,・・・, 要素n];

配列に要素を格納するメソッド

配列名[インデックス]

配列に〇〇メソッドを渡すメソッド

・時間の経過によって時刻が変化（タイマーの使用）

setTimeout (関数, 待機時間) / setInterval(関数, 繰り返し時間)

関数を待機時間ごとに繰り返すメソッド

・プルダウンリストの作成

<select id = “ID”>

<option value = “値1″> ラベル1

<option value = “値2″ selected> ラベル2

<option value = “値n” > ラベルn

</select>

slected は初期値

・世界各国の都市の日時を取得

getTime()

1970年1月1日午前0時から、現在までの経過ミリ秒を参照するメソッド

selectedIndex 

フォームの選択メニューで選択されている項目の参照番号を返すメソッド

select要素.options[選択されたインデックス].value

optionタグのvalue属性の値を取り出すメソッド

—

淡々とこなしていこうと思います。

* folding cosmos BATH

↓Download PDF (* folding cosmos BATH)

知人が、* folding cosmos　という展示会をしていて、

世界を回っております。

（何気にサイトデザイン、古堅先生w）

事後報告になってしまいましたが、、、昨日までイギリスで展示会でした。

私は行けませんでしたが、そのためのe-flyerをデザインさせてもらいました。

NY~イギリス~と次はどこで開催でしょうか？

Photoshop Training – Twitter app Interface

今後の仕事のため&Photoshopのスキルアップのために、

GUIを模写しました。

ここのチュートリアルを見ながら。

Create a Clean Twitter App Interface in Photoshop | Psdtut+

模写は、予備校のとき以来な気がします。

ムサビの平面構成対策のために、

紅白歌合戦見ながら電球の絵を描いたのを覚えています。

今まで紙の仕事が多かったので、

Photoshop=写真のレタッチくらいしか作業していなかったのですが、

今回描画としていろいろ使ってみて、

Photoshopが全然分かっていなかったことが判明、

自分でもドン引きしました。

結局Photoshopに振り回されまくって、

トータル15時間半ほどかかってしまいました。。

手が速く動くよう、慣れなきゃです。

せっかくなので、今回模写して気づいたことをメモっておきます。

—

[Photoshop基本事項]

- ベクターのものをビットマップにすること＝ラスタライズ

- スマートオブジェクトは、拡大縮小しても画像が荒れない

レイヤー>ラスタライズ をかけると、

スマートオブジェクトがラスタライズされる

- 拡大 shift / 縮小 option

-  チャンネルレイヤーRGBがはいってることを確認する

- レイヤーマスクの追加>レイヤーマスクチャンネルON

>マスクしたい部分を描画

(描画色がblackになっていることをちゃんと確認する)

- シェイプは先にボタン(合体、交差など)を押してから、描画する

[PhotoshopでGUIをデザインするときの注意点]

- レイヤーの数がハンパなくなるので、

描画したらすぐレイヤーに適切な名前を付けて管理する

-  ノーマル時、マウスオーバー時のパーツは

Button> Normal, Hover 2フォルダに分けて入れておく

- 細かいパス描画があるときは、

Illustratorで描いてからコピペでPhotoshopに持っていくほうが早い

- 作業パスも名前を付けて管理、保存

- たまにエッジがきれいに選択されないときがあるので

「パス→選択範囲を作成→塗る」 より「パスの塗りつぶし」で

塗った方がエッジがきれいかも

- 何度も使うスタイルは登録しておく

[Twitter app Interfaceデザインのひみつ]

- ここぞとばかり、レイヤー効果を使う

ドロップシャドウ、シャドウ(内側)、光彩(外側)、光彩(内側)、

グラデージョンオーバーレイ、境界線　使用

- 1px単位の細かさ

- 細かいトーンのグレー色数が多い

- GUIのアウトラインは、ドロップシャドウと1pxの細い境界線でシメる

(3pxとか太いとヤボったい)

- 角丸の長方形は、2,3,5pxを使いこなしている（全て同じRな訳ではない）

- ツヤっとした表現は、大抵 「光彩(内側)、グラデージョンオーバーレイ」

- レタープレスエフェクトの多用

(文字がボコっと押された表現、ドロップシャドウを用いる)

- マウスオーバーのボタンは、普通のボタンより

グラデーションオーバーレイの透明度をあげて変化を付ける

- 使用fontの大きさ、11~18pt

—

2色平面のアイコンしか作ったことがなかったので、

今回ツヤっとGUIを模写してみてかなり勉強になりました。

Dragon year 2012

もう4月も始まろうとしてるのに、今更すぎでなんですが、

ブログで全く挨拶していなかったので挨拶させてください。

というか、せっかく描いていたゆるぃ龍の絵が登場できずじまいだったので、

お披露目です。

だいぶだいぶ明けましたね、おめでとうございます！！！　

2012年、ドラゴン YEAR ！！！

先日来日したブータン国王曰く、人それぞれの心には龍がいるそうです。

(ブータン国王の龍のくだりは　こちら)

その龍は、さまざまな経験を食べて大きくなっていくそうです。

なので、みなさんもこの1年たくさん経験を食べて、己の龍を育んでください！

お祈りしています。

私の今年の目標は、

「たくさんの経験を食べて、己の龍を育てて、昨年より人生をenjoyする。」

です。

今年はいろいろ節目な年になりそうなので、

今までセーブしてきたことを解放して、

たくさんたくさん新しいことを経験していきたいです。

Microsoft: Productivity Future Vision (2011)

ちょっと前にCIIDの子達がこぞってFacebookでシェアしてたものを、

ここでもシェアです。

みなさんは、この映像を見てどう思われますか？

未来系動画を見ると、映像のカッコよさにただただ圧倒されて

こうなったらいいな！！！、とソッコー思いがちなのですが、

少し批判的な視点で見ると、どうでしょう。

個人的に私は、こんなにも全部が電子化されると

モニターばっかり見るようだし物質感がなさ過ぎてちょっとイヤかも、

と思いました。

このサイトの記事もおもしろいです。

http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/

未来のインタラクションは、

いろんなモノを感じたり操る「手」がカギなんじゃん！、

って書いてあります。

記事の中のこの言葉がとても印象に残っています、素敵です。

“Visions give people a direction and inspire people to act,

and a group of inspired people is the most powerful force in the world.”