2013年6月29日，WebSig会議 vol.33が開催されました。その模様をお届けします。

「かっこいいものを作りたい」と思ったとき，あなたはどうやって“かっこいい”を作りますか？

世の中にあるスマホアプリの中から，ビジュアル的な良さが取り上げられて注目されることも多くなってきましたが，実際問題として人の注目を集められ使い続けたくなってしまうほどの“⁠かっこいい⁠”アプリはどのようにして作られていくのか，という興味が今回のイベントのきっかけでもありました。

「良いスマホアプリを作るのは，良いWebを作るよりもはるかに難しい」と，イベントのオープニングセッションでWebSigモデレーターえふしんこと藤川真一からイベントの動機から開催に至までの説明があり，その中でこれまでWeb制作をしてきた私たちがどのように思考のと作業の転換をしていくと，ユーザにマッチしたうえでビジュアル的にも満足できるアプリを作ることができるのかといった問題提起がなされました。

ファーストセッション「スマホアプリの"手触り"や"美的センス"について」

最初のセッションでは，アプリで簡単にジオラマのような写真が撮れてしまう「TiltShift Generator」の開発者としても有名な深津貴之氏（@fladdict）に，WWDCで聞いたiOS7のUI考察や，スマホアプリを作る上で意識すべきポイントについてお話いただきました。

WWDCでのiOS7におけるフラットデザイン

まず2013年6月10日より行われたWWDCで話題になった，iOS7のUI・フラットデザインについてのお話がありました。

iOS7と通常のフラットデザインでは表面上は同じようなフラットデザインに見えて，大きく違う部分があるそうです。それはiOS7はレイヤ構造になっているということ。平面的なデザインをいくつも上に重ねることで画面上での奥行き感を出し，ジャイロセンサによるパララックス技術を用いてフラットでありながらも動きのある画面操作が行えることがiOS7のUIの特徴だということでした。

またレイヤー構造になったことで画面遷移もこれまでと大きく変わり，遷移するときに今まで自分がいた場所，そして今どこに自分がいるのかを感覚的につかめるようなUI（画面の上に曇りガラスのようなメニューが出たり，俯瞰した図から拡大した図への流れるような動きなど）になったということです。

スマホアプリUIでの手触りの意味

なぜUI上でアニメーションや効果音をつけるといったエフェクトが必要なのか，という問いに対し，“⁠かっこいいから⁠”だけで付けるのではなく，ユーザに意図した行動や，意識を引きつけるためのインターフェースとしてのエフェクトであり，だからこそ“⁠なんとなく⁠”付け加えるのではなく，“⁠目的とする意図を入れたいから，それに適したエフェクトを入れる⁠”のであるのだそうです。

またエフェクトを取り入れることで効果的なのは，ユーザの満足感に大きな違いが出るとのことでした。ユーザや投資家は制作における技術に対してではなく，技術をどう製品に落とし込んだかに対価を支払いたいと思うのだということです。

深津氏から手触りにこだわったアプリとして「Flipboard」や「Clear」など，いくつかの事例紹介があったものをご紹介します。

• いろぴこ
• Flipboard
• Clear
• DayOne
• Path
• ClacBot
• LLUMINO

手触りの良いアプリ開発のハードル

紹介された事例アプリのような手触りの良いアプリばかりではない，というのを普段から私たちも感じ取っていると思いますが，その問題点となる部分が大きく3つあるそうです。

まず1つ目は人材の問題。アプリ制作は見た目と中身の関わりが大きく「デザイン思考のできるプログラマ」もしくは「プログラム思考のできるデザイナー」がプロジェクト内にいないと難しく，またもしそういった人物がいたとしても，「⁠指標の外側を見られる意思決定者」言い換えると，プロジェクトのリーダーが目標とする以外の余白に対して気をつけることができるような人物でないと，そういった「手触り」の部分にこだわって制作していくことはできないということです。

そして2つ目に予算・工数の問題。プロジェクトのメンバーが，たとえばどれだけスマホUIの手触りの部分にこだわりたいと思っていても，クライアントワークの場合において多いのが手触り＜機能追加となってしまい，なかなかそちらに時間をさけない，さくのが難しいといったことも多いようです。

最後3つ目は開発スタイルの問題。仕様書にいくら手触り的な要素を盛り込んで説明したとしても，それが紙ベースの場合，何も実態をもって伝えられないため削られてしまうこともあるのだとか。

そしてこれらの問題を解決するのが，「⁠恥ずかしさの共有」と「初期段階で手触りを見せる」こと。手触りや美しさの追求は“⁠いいものを作りたい⁠”というマインドだけでは難しく，それをより具体的なものにしていくには，細かな1pxのずれやガタ付き等を「こんなの恥ずかしく公開できない！」と思うような気持ちを常に持つようにする方が，良いものに近づきやすいとのことでした。

また，そういった手触りの良いものはどうしても仕様書などには落とし込めないため，初期段階でどういった動きをするのかイメージできるサンプルを持っていって，“⁠こんな風に動きのいいものを目指しましょう⁠”といった意識の統一ができれば，そちらの方向にシフトして行きやすくなるそうです。

手触りの良いUIはどうやって生み出すか

手触りの良いUIは「観察と模倣」によって生み出すことが可能だということでした。

たとえば重力によってものが落ちていくところ，慣性によって動き続けるモノ，バネがびょんとはずむ感じ，摩擦でモノがこすれる様子，新雪を踏みしめたときの足の感覚など，身の回りにある「気持ち良いと思えるもの」を観察し，その動きを模倣して作ってみることで，手触りの良いUIを作り出すことができるそうです。

深津氏がこれまで10年間作りためてきたUIサンプルの一部も，講演中に見せていただくことができました。

UIサンプルを作るのにオススメなのは「Processing」や「creative.js」を始めとしたプログラミングツールや，また「Flash」や「CSS3」など，これまでに使い慣れてきたツールでもなんでもよく，とにかく観察して動きのサンプルを作ってみることが大事で，それが今は使えなくても次の何かに生きてくるとお話いただきました。