Latest Entries

My First Design Work

SheepSlippers

ここ何年か目の前のことで精一杯で、

自分のことやってきたこととか考えていることを

きちんと振り返る機会がなかったので、

今までのことをちらちら振り返って整理しようと思います。

 

私がおそらく「デザイナー」としてデビューしたのは、20年前の8歳です。

小学2年生のとき図工の時間で、

「自由にスリッパを作りなさい」という課題がありました。

これはうちの市の全小学2年生の課題で、優秀作品には市の美術館で飾られる、

というものでした。

いわば、小学生のコンペみたいなものです。

 

私がその時、

「人はスリッパに対して何を求めているんだろう、

どんなスリッパだったら人は喜ぶだろう」と真剣に考え、

「履いててあったかくてやわらかいのがいいな」という答えを

導きだしたのをはっきりと覚えています。

 

そして、そのコンセプトに基づいて

「ひつじのふわふわスリッパ」というのを作りました。

段ボールを切ってスリッパのカタチを作って、

毛糸をたくさん敷き詰めて、

履いててあったかくてやわらかいスリッパを目指しました。

また、段ボールで作ったっていうのがあまり目立たないように、

段ボールの断面にも毛糸を貼って隠したり、

ディテールにもすごく気を配ったのを覚えています。

 

担任の先生の言うことを全然聞かず、好き勝手作ったんですが、

結果、優秀作品に選ばれ、市の美術館に飾られました。

自分の作ったもの、考えたものが評価され、

大勢の人に見てもらったのがこれが初めてのことでした。

家族で美術館へ行って、自分の作ったものが飾られたことに

すごく感動したのを覚えています。

 
今思うと8歳ながら、自然とコンセプトワークをしていたし、

ユーザーのことを思ってモノを作っていました。

ディティールに神が宿る、っていうことも、

なんとなくその時気づいていたんでしょう。

自分を表現したい、という気持ちは全然なくて、

履く人の気持ちを考えていました。

今風で言うなら「履くとあたたかくなる」ていう

User Experienceを提供したかったのでしょうか。

 

 

これが、私のデザイナーとしての初めてのWORKで、おそらく原点です。

「自分の作ったもの・考えたもので、

人を驚かせたい、喜ばせたい、感動させたい。」

ただそれがやりたくて、いまこうしてクリエイティブの仕事をしています。

 

そのためには

・全力で使う人・見る人の気持ちを考えること

・伝えたいメッセージをしっかり持つこと

・細部も気を遣い真剣にモノをつくること

・何度も納得いくまで試行錯誤すること

・自分が作った後のインパクトをしっかり考え思い描くこと

かな。

原点を忘れずに。

To San Francisco

toSF

 

今から、社員旅行でサンフランシスコに行ってきます。

感謝。もう少しで、飛びます。

初めての年越し海外。

というか、東京で年を越したこともないのに。

 

サンフランシスコは5年前から行きたかった街です。

ヒッピーの聖地だし。

というのも、

卒業してすぐどうしようもなく出国したかった私は、

サンフランシスコのインターンを受けました。

自分の中では、

受かってさっさとサンフランシスコに行く意気込みでいました。

今思うと、レジュメもめちゃめちゃだし、英語も全然ままならなかったのに、

よくそんな状況で受けたな、って感じですが。

30分の英語電話面接がありましたが、

ジェスチャーも全然できないし、

電話の音声は音質が悪くて聞き取れないし、

しゃべれなくて沈黙が続くという

全然だめだめな面接で、

結果「あなたはここにきても英語のレベルが達してないから、

苦しいだけだと思うわ。」

と言われて落ちました。

 

当時は本当に悔しくて悔しくて、泣きました。

語学が壁で、自分のやりたいことやインプット、

人生の可能性が狭まることが耐えられませんでした。

翌週早々英語の塾を探して、きちんと英語を身につけようと

その1年は英語をガリ勉しました。

 

この5年間で、

IELTSのスコアをとって、

デンマークに短期行って、

仕事はじめて、

前より少し大人になった自分が、

行きたかった街にようやく行く、というのが

なんだか感慨深い気持ちでいっぱいです。

 

今回の旅で、たくさん吸収して、いろんなことを感じて、

自分のいい転機になったらいいと思います。

Study HTML5 & JavaScript (4) – Draw App (1)

JavaScript+HTML5 Study Book

DrawApp_01

久々に本からJavaScriptとHTML5のお勉強です。

マウスで線を描く、らくがきアプリの制作を学習しました。

 

↓できたもの。

http://shokolog.com/study/draw

(とりあえずマウスイベントしか拾っていないので、タッチイベントは不可)

 

マウスお絵描きのコード自体はそんなに難しくないので、

マウスの動きにあわせて線が引ける仕組みだけ分かればいい感じです。

DrawApp_02

学習した内容は以下。

・マウスで線を描く

onMouseDown = “関数名(event)”

onMouseDownイベント(マウスボタンが押されたら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseDown=”startDraw(event)”></canvas>

onMouseMove = “関数名(event)”

onMouseMoveイベント(マウスボタンが移動したら関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″  onMouseMove=”draw(event)”></canvas>

onMouseUp = “関数名(event)”

onMouseUpイベント(マウスボタンが離されたとき関数〇〇を実行する)

ex.) <canvas id=”main” width=”640″ height=”480″ onMouseUp=”endDraw(event)”></canvas>

※eventオブジェクトは、 イベントが発生したときのマウスカーソルの位置やイベントの種類などが格納されている

 rgba(赤成分、緑成分、青成分、透明度)

色・透明度の指定

赤成分、緑成分、青成分は、0~255の値をとる

透明度は、0~1の値をとる(0:透明、1:不透明)

event.clientX

ウィンドウ(ブラウザー)上のX座標

event.clientY

ウィンドウ(ブラウザー)上のY座標

※マウス座標の取得はブラウザごとに異なっているので注意

※firefox以外のブラウザーでは、

event.offsetX, event.offsetY(イベントが発生した要素上のX,Y座標)で

キャンパス上の正確な座標を取得できる

コンテキスト.lineWidth

線の太さの指定

コンテキスト.lineCap

線の両端の形の指定

round:円

butt:ぶつ切り

square:四角形

 

らくがきアプリのコードはこれだけです。

そのままコピペすれば、使えます。


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="Shift_JIS">
 <title>らくがき帳</title>

<script>

//マウスが押されているかどうか調べる変数を宣言
 var mouseDown = false;

//ペンの設定
 var penX = 0;
 var penY = 0;
 var penColor = "rgba(0,0,0,1)";
 var penWidth = 10;

//描画の開始
 function startDraw(event){

//マウスボタンが押された
 mouseDown = true;

//ペンの座標をセット
 penX = event.clientX;
 penY = event.clientY;

}
 //描画
 function draw(event){

//マウスボタンが押されていれば描画
 if (mouseDown){

//キャンバスの取得
 var canvas = document.getElementById("main");

//コンテキストの取得
 var context = canvas.getContext("2d");

//ペンのセット
 context.strokeStyle = penColor;
 context.lineWidth = penWidth;
 context.lineCap = "round";

//マウスカーソルの座標を取得
 var x = event.clientX;
 var y = event.clientY;

//パスの開始
 context.beginPath();

//座標の移動
 context.moveTo(penX,penY);

//線の描画
 context.lineTo(x,y);

//パスの描画
 context.stroke();

//ペン座標の切替
 penX = x;
 penY = y;

}

}

//描画の終了
 function endDraw(event){

//マウスボタンが離された
 mouseDown = false;

}

</script>
 <style>
 canvas{
 border:solid #999999 1px;
 }
 </style>

</head>

<body>
 <canvas id="main" width="640" height="480"
 onMouseDown="startDraw(event)"
 onMouseMove="draw(event)"
 onMouseUp="endDraw(event)"></canvas>

</body>
</html>

ChatPerf × Hackathon

ChatperfHackathon_01

2月23日-24日、初めてハッカソンに参加してきました。

開発者、デザイナー、プランナー三位一体で

ChatPerfという、スマホで香りが送れるディバイスを用いて

バカアプリを作ろうという内容です。

香りの種類は自分たちで決めることができました。

 

真面目な提案は禁止ということで

どうしようもなく不毛なアプリを提案した所、

思いがけずうちのチーム優勝しました。

かなりの棚からぼたもちっぷり!!

賞金も頂きました、ありがとうございます。

 

提案した不毛なアプリが、こちら。

DanmitsuGokko_01

『壇蜜ごっこ』!!!

 

このアプリは、

壇蜜さんをSEXYに育成してしていくことにより、

壇蜜さんがフェロモン(香り)を噴霧

そのフェロモンを浴びることにより

自身のエロティシズムや女子力を開花させていく、という内容です。

 

簡単に言えば、育成ゲームとアロマテラピーが融合されたアプリです。

 (*当アプリは壇蜜さん個人と一切関係がなく、壇蜜さんリスペクトのもと勝手に作ったものです)
 
 

DanmitsuGokko_03

育成方法はいたってシンプル、胸をひたすら擦るのみ!

壇蜜さんの胸元を擦り続けると、

女子力がアップするいい匂いフェロモンを噴射します。

 

フェロモンを実際に浴びることで、

自身の美容や心身の健康を増進させることができるというわけです。

 

DanmitsuGokko_02

「女子力」は、5つ(妖艶力 / 嫁力 / 清楚力 / 潤い力 / 知性力)から

選択することができます。

例えば、嫁力=柔軟剤の香り、潤い力=ジャスミンの香り

など効能によって、それぞれ違う香りフェロモンが出てきます。

 

DanmitsuGokko_04

一定のスコアを越えると、

壇蜜さんは言葉を覚えたり、表情や仕草が変わったりと、

バージョンがアップしていきます。

また、一定時間放置すると各スコアは低下して行き、

壇蜜さんはすねたり、言葉を忘れたりしていきます。

 

制作したプロトタイプ動画。

当日は、妖艶な香りを入れプレゼンしました。

 

なんて親父の発想、と思われるかもしれませんが、

オール女子チームでの提案でした。

 

内容はエロティックですが、あくまで「女性向け」にしたかったので

下品にならないよう女子っぽいUIを目指しました。

しかし、女子っぽいUIなんて普段ほとんどやらないので、

何度やっても「AVパッケージ」のような雰囲気にしかならず、

デザイン担当の私は、1日目の夜だいぶ焦りました。

 

「女子っぽいデザインが全然できない…」

 

夜な夜な夜な自己嫌悪に襲われつつ、

壇蜜さんがしゃべりそうな言葉を真剣に妄想したり、

今までダウンロードしなかったキラキラやらハートの素材を落としたりして、

過ごしました。

壇蜜さんを真剣に思い続けた2日間だったと思います。

 

デザイナーになって初めて頂いたawardが

「着パフハッカソン・バカアプリ制作優勝」

だなんて心中若干複雑ですが、みんなの心に刺さったようでよかったです。

これも、チーム編成がよかったからだと思います。

 

不毛なアイディアを理論的に形作ってくださった まなさん、

香りの種類や効能の知識を存分に発揮してくださった しまさん、

また、サポートで開発実装してくださった山谷さんありがとうございます。

 

そして、壇蜜さん勝手にすみません、リスペクトの上で考えました。

ありがとうございます。

 

そしてそして、全ての発想の原点は

吉本のシルクねぇさんの「胸を擦るとグレープフルーツの匂いがする」という

衝撃的な発言からなので、

シルクねぇさんにも感謝の意を表したいと思います。

 

ChatperfHackathon_02

 チームメンバー、着パフ社長坪内さん、審査委員カヤック柳澤さん
 
 

Arduino Note (3) – Software Serial

ArduinoNote_09

Arduinoのシリアル通信の方法は、2種類

- 0,1ピン(受信、送信)を使う [元から備わっているやつ]

または

- ソフトウエアシリアル [プログラムで作り出すやつ]

ソフトウエアシリアルは、

シリアルモニターでモニタリングできないので要注意!

 

 

Electronics Note (1)

ElectronicsNote_01

LED抵抗値計算

http://diy.tommy-bright.com

どの抵抗をかませたらいいか、計算して出す

 

ElectronicsNote_02

周波数、並みの種類、逆位相、イヤフォンジャックの仕様 について

イヤフォンジャックは、3極と4極に種類ある!

端末によって、対応するジャックが違うので要注意

 

ElectronicsNote_03

アノード、カソード、GND、bit、byte、電圧計、電流計、昇圧回路 について

長年意味不明だったGNDの概念がなんとなく分かった気がする

 

ElectronicsNote_04

Arduino Pro Mini、ディスクリート基盤、MFi について

 

電子工学基本的事項です。

仕事中の会話がほぼ意味不明なので、

素人の私はひとつずつ聞いて、地味に覚えていってます。

 

openFrameworks Note (1)

oFNote_01

oFNote_02

openFrameworksの基本的事項。

ファイル構成ちゃんとしておかないと、動かなくなるので要注意。

openFrameworksはあんまり触っていないので、全然仲良しではないです。

どのファイルを触ったらいいか、すぐ分からなくなります。

 

 

Arduino Note (2) – Arduino × Processing, oF

ArduinoNote_04

キーボードで”S”押されると、サーボモーターが動き出す

Processing(入力)→ Arduino(出力)制御

 

ArduinoNote_05

押されたキーによって、サーボモーターの角度が変化

Processing(入力)→ Arduino(出力)制御

 

ArduinoNote_06

analogWriteとdigitalWriteについて

 

ArduinoNote_07

焦電型赤外線センサーをalanogReadで読む

電流、電圧、抵抗について

 

ArduinoNote_08

Arduinoの値で、openFrameworksの画像を変化させる

Arduino(入力)→ openFrameworks(出力)制御

 

tsugインターン時代のメモです。

主に、ArduinoとProcessing、openFrameworksの連携などなど。

Arduino Note (1) – Basic

ArduinoNote_01

ArduinoNote_02

ArduinoNote_03

ここまでは、CIIDのWeek3、Massimoさんの授業メモ。

ちょくちょく電子工作系の単語が分からず

ヒー!!と思いながら書いていたヤツ。

Arduinoの基本事項です。

 

Processing Note (1)

ProcessingNote_01

ProcessingNote_02

 

色んなプログラムやらプロトタイピングの方法を

たくさん覚えなきゃいけないので、

自分の整理のために、今まで書き溜めたノートを大公開です。

これは、CIIDのWeek2の時に書いたProcessingのノートです。

めっちゃ、基本的なことしか書いていませんが。

 

 

 

 



Copyright © 2011 Shoko Tanaka. All rights reserved.

RSS Feed.