SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

MarkeZine Day(マーケジンデイ)は、マーケティング専門メディア「MarkeZine」が主催するイベントです。 「マーケティングの今を網羅する」をコンセプトに、拡張・複雑化している広告・マーケティング領域の最新情報を効率的にキャッチできる場所として企画・運営しています。

直近開催のイベントはこちら!

MarkeZine Day 2025 Retail

FEATURE

fladdictさんが考える「手触りのあるアプリ」(後編)
ビジネスと手触り、デザイナーがコーディングを学ぶための方法


手触りはどうやって勉強すればいいのか

 続いて、「手触りはどうやって勉強すればいいのか。感性をどう磨いていけばいいのか」についての説明に入った。「観察と模倣しかない」と氏は言う。ほかのアプリがどういうふうにやっているのか観察し、まねてみる。検証コードや模倣コードを書いてみる。英語を話すのと同じで、書いて、試して、使ってみる。

風景をミニチュアっぽく撮影できるアプリ「TiltShift Generator」
風景をミニチュアっぽく撮影できるアプリ「TiltShift Generator」

 氏がミニチュア写真っぽい写真が撮れるアプリ「TiltShift Generator」をつくったとき、ミニチュアっぽい写真を撮るためのレンズがあるということを調べてて、一眼レフのカメラを買って、そのレンズを使って高いところに上って、実際に写真を撮ってみた。自分で触って納得できるまで写真を撮り、こういうカメラでこういうふうに撮影すると、こういう写真が撮れるんだということを理解したうえで、コーディングする。ミニチュア風に見えるようにするには、画面の一部をぼかしたり、こういう構図のときにミニチュア風に見えるというノウハウをためていくことで、ようやく手触りの部分にたどりつくことができたという。

 そのほかにも観察するものはたくさんある。重力、慣性の法則、摩擦や空気抵抗でものがどう止まるのか、どうバウンドするか。梱包材のぷちぷちをつぶしてみたり、新雪の中に足を踏み入れてみたり、いったいなにが気持ちいいのかを自分の体を使って体験していく。そうすることで、手触りのボキャブラリーを増やしていく。子どものように、ものや自然に向き合ってみることも時には必要な作業なのだ。

デザイナーがコーディングの勉強をするためのツールたち

 現実の世界で動きを観察すると同時に、深津氏はコーディングしながらさまざまな表現を試している。たとえば、回転の表現、ものが吸い込まれるように消えていく表現などだ。さらに、小さな生き物のように異なる動きをするものをいくつもつくって、わやわやとそれらが動く様子も見せてくれた。

 プログラマーじゃない自分には、こんなことはできないと思う人もいるかもしれない。「コーディングができない人は、実物を使って表現してもいい」と深津氏は補足する。そして自分が実際にどういうツールを使って実験的なプログラムを書いたり、どんなものを使ってプレゼンをしているのかを紹介してくれた。

実物

 スーパーボールやバネを持ってきて目の前で見せてあげる。会議室に、ヨーヨーやロボットのおもちゃなどを持ち込んで、「ロボットの、この関節の気持ちのよい動きを、オブジェクトが回転するときに与えたい」というふうに伝える。変な顔をされても気にしない。

Processing

 デザイナーである程度JavaScriptが書ける人、多少コーディングできる人がとっかかりとして使うなら、Processingというアプリケーションがある。これはMITでつくられた、アーティストやデザイナーが、動きやプログラミングを学習するための開発環境。日本語の解説書もある。

Flash

 最近は下火になってきたが、Flashはアニメーションや手触りを勉強するのにとてもよいツール。Flashを使ってできたファイルをストックして手触りファイルをつくってプレゼンに使ってもいい。最近はJavaScriptのライブラリで「CreateJS」というのがある。これはFlashの設計思想をJavaScriptに持ってきてアニメーションで動かそうというもの。OOP寄りのJavaScriptが書ける人におすすめ。

CSS3

 「プログラミングは無理」という人の場合は、Flash以外に、CSS3のアニメーションをベースに、HTMLの画面に点滅するボタン、大きくなるボタン、動くボタンをたくさんつくって動きの目録をつくって感覚を磨いてみる。

openFrameworks、Cinder、Objective-C

 逆にもっとプログラミングできる人向けには、「openFrameworks」という、アニメーションに特化したC++言語のライブラリがある。同様に、C++ライブラリ「Cinder」は今年のカンヌ広告祭のイノベーション部門でグランプリを受賞した。とっつきやすいのはopenFrameworksだが、Cinderと組み合わせて使うと高速のC++の環境でつくれるし、Objective-Cでつくった手触りも移植しやすい。

 iPhoneで開発をしている人なら、最初からObjective-CでつくってXcodeをさわって、Core Animationやcocos2dみたいなライブラリを使っていく。あとは、実際につくってみるだけ。自分が使いやすい開発環境を決めたら、スーパーボールやバネなどを手元で動かしてみながら、高校の物理の参考書やアニメーションの本を見て勉強する。

これからアプリをつくる人たちへ

 最後に深津氏は、現在のアプリの技術の継承について言及しながら、次のように語った。

「iPhoneがFlashを積まないことになって、広告業界のスペシャルサイトやコンテンツなどで培われたFlashの技術が継承されずに来てしまった。逆にいまはそういうところができる人がiPhone業界にほとんど流れてきていないので、勉強しておくと強みになるかなと思う。これからは、みんな手触りのあるアプリを試しでもいいのでつくってみてください。」

 よいアプリをつくるためには、常に学び、感覚を磨き、「ビジネスは興味ない」などとそっぽを向かずに、説得するための方法を考える。しなやかで強いfladdictさんの言葉が、会場に集まった人たちに大きな感銘を与えた講演だった。

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
関連リンク
FEATURE連載記事一覧

もっと読む

この記事の著者

MarkeZine編集部(マーケジンヘンシュウブ)

デジタルを中心とした広告/マーケティングの最新動向を発信する専門メディアの編集部です。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2014/11/14 11:39 https://markezine.jp/article/detail/18233

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング