Safari for iOS 6で写真撮影が可能に、将来の「スマホ対応デザイン」について思う

2012-09-23 23.57.29.jpg

iOS6がリリースとなり、Safariも内部的に色々なAPIを実装しました。

私は2012年5月のCSS Nite in OSAKA, Vol.30をはじめ、色々なセミナーにてブラウザから直接写真を撮影できて、そのままサーバに送信するデモを行ってきて、サービスに貢献できそうなアイデアなどもお話する機会をいただきました。
当時はAndroid 3から4のみが標準ブラウザがサポートしていました。(Android 2.xはFirefoxがサポート)
この仕様はHTMLのinput要素でカメラにアクセスすることが可能なわけですが、意外と早くiOSの標準ブラウザ、Safariにもサポートされたのは正直ちょっと驚いています。
またひとつWebアプリがネイティブアプリに近づく可能性を感じます。
シンタックスは非常にシンプルで、
<input type=file accept=”image/*”>
のように書きます。
実際のHTMLは以下の通りに書いてテストしてみました。
JavaScriptなどは一切使っていません。
<body>
<form action=”post.php” enctype=”multipart/form-data” method=”post”>
<input type=”file” name=”photo” accept=”image/*; capture=camera”><br>
<input type=”submit” value=”送信確認”>
</form>
</body>
これでpost.phpに写真が送られるので、簡単なPHPを書いてみます。
<?php
$data = $_FILES[“photo”];
move_uploaded_file( $data[“tmp_name”], “img/”.date(U).$data[“name”] );
echo(“<img src='”.”img/”.date(U).$data[“name”].”‘ alt=”>”);
?>
これだけで、写真投稿サイトが完成です。(というのは言い過ぎです、エラーやセキュリティチェックなどをしましょう)
しかも対応ブラウザがiOS6とAndroid3〜とだんだん増えてきています。
これだけのコードでiPhone4Sで行ったデモを動画にしました。

iOS6 Safari MediaCaputure API from Hideki Akiba on Vimeo.

サービスへの可能性とWeb企画制作の将来

いままでこういったスマートフォンで写真を撮影するという手段はネイティブアプリに委ねられていました。
しかし意外と早くiOS6が対応することで、案件ベースでもWebアプリへの実用化が早まりそうです。
例えば、もしも期間限定のWebによる写真投稿型キャンペーンイベントがあるとしたら、非常にタイムリーな開発期間を求められることが想定されるとしましょう。
そのためにわざわざリジェクト覚悟でネイティブアプリを開発することが現実的でしょうか?
むしろ納期の事情、プロモーション期間の都合などでスピード開発が求められる所で言えばWebアプリのほうがこのようなケースは理にかなっています。
大げさと考える人がいるかもしれませんが、私達のような経験のあるユーザではなく、コンシュマーユーザの立場を考えるとわかります。
操作を極力シンプルにし目的の行動に導線を引くには、ホーム画面に戻らせてカメラアプリを起動させて撮影させ、アルバムから写真を選ばせ、送信ボタンを押させるより、場合によってはWebサイトに撮影ボタンが付いていたほうが操作に慣れていないユーザは助かるわけです。
こうなると、デバイスの特性を活かすという意味では、将来の「スマホ対応サイト」の考え方は現在の幅広い一般の考え方と多少変わってくると私は考えています。
今までのシステム開発、ソフトウェア開発と比べると、Webアプリの本当の利点のひとつとして「小機能アプリ」を開発しやすくなる期待が持てます。
多くのWebデザイナーを含め活動のフィールドが広がるはずなんです。
これを成功させるには技術(エンジニアやデザイナー)とサービス、マーケティングの専門家が同じテーブルでアイデアを出し合うことが数年先のWeb制作のトレンドになることは間違いないでしょう。というよりむしろ今からそれを模索する必要があると考えています。
このあたりのWeb制作に関わる担当者レベルでのコミュニケーションについて色々問題が多いと感じている部分についてはまた別の記事として書いていきたいと思います。
少なくとも、コンテンツに重きを置いた上でのWebのサービスとテクノロジーとの関わり合いを、私達デザイナーとしても避けて通れなくなる時代は、ますます近づいてきたのではないかと感じてきます。
facebookscreenshot.png
FacebookのiOSアプリとSafariの画面、現在Safariの方では写真投稿が不可能だが将来のスマートフォン対応サイトではこの問題も解決されるだろう

質感を意識したiconデザインにチャレンジ

ちょっと前に「リアル感を追求した、クリエイティブな素敵iOSデザインアイコン46個まとめ」がいいねって言ってる友達がいて、私もこういったお仕事をさせてもらったことがあるので、やってみたい方へ。

今回つくるのはこれです。
book_image.jpg
写真ではなく、すべて一からつくったものです。
写真にするとどうしてもリアルになりすぎてアイコンっぽく見えなくなりがち。
なので写真から起こす場合でも、あくまで下絵にして書き直すくらいの気持ちがいいと思います。

革の質感を出すには

今回は主にPhotoshopを使いましたが、どうしてもそれだけでは革の質感をたっぷり出すことができなかったので、CGソフトでマッピングしました。
まず原型をモデリングして、素材の革の写真などJPEG画像など貼付けて「それっぽく」してみます。
貼付けただけを見てみましょう。

img01.jpg
img02.jpg

左が簡単にモデリングしたもの、右がマッピングだけしたもの。
これだけだと質感があまり感じられません、なぜかというと、光と影の凹凸感がないからです。
こういった場合、ソフトのほうで「凹凸用のマッピング」の機能を使います。

b_tex_bump.jpg
img03.jpg

左がバンプマップと呼ばれる画像で、Photoshopで白黒にして加工します。
右を見れば分かりますが、マップで黒ければ黒いほど沈んだ感じに見せられ、立体感がでます。
しかし、これでもちょっと物足りないので今回は光沢を付けてみましょう。
質感を決めるマッピングは他にもあって、次は、「光沢マッピング(ソフトによって言い方がちがうけど意味は一緒)」これもマッピングを使ってみましょう。

b_tex_speculer.jpg
img04.jpg

左が光沢マップ、白い部分が反射しやすいようになる、と憶えておきましょう。
ちょっとだけ光沢がつきました、あとはPhotoshopで加工しましょう。

手帳の中身の紙を表現する

キレイに整っている手帳より、「バサバサ」と整っていない感じを出してみたいと思います。
これを適当に手書きするとなんだか不自然になりがちなので、「モデル」となるものが欲しいところ。
ここで、バサバサした書類の写真を大体似たアングルで撮ります。
それを先ほどつくった手帳にPhotoshopで合成してみましょう。
これを元に次は手で描いていきます。

photo.jpg
add_photo.jpg

Photoshop上で撮影した画像を自由変形させて手帳の形と合わせ、トレースして紙を描く

Photoshopのペンツールで紙を一枚一枚トレースするような感じで描いていきましょう。
あまり細かい所を気にしないで一気に描きあげるのがポイントです。
ちょっとはみ出した緑色の付箋を演出してみました、これはちょっとグラデーションがかかってますね。
これも単純にレイヤー効果のグラデーションオーバーレイを使っているだけです。
封筒の質感もあまりリアルにしないほうがいいでしょう。
写真のものをコントラストをあげて使おうと思ったんですが、全体がアイコン風なのでテイスト的に違和感があります、よって封筒も手で(ペンツールで)描き起こしましょう。
fuutou01.jpg
fuutou02.jpg
写真の封筒を使うより、右の手書きのほうが自然ですよね。
表示カバーを見ると、まっすぐ平面な感じですが、ちょっと膨らんでいる感じを出しましょう。
ブラシツールで黒をフチに塗って適当にぼかします。
同じく白のブラシも別のレイヤーに塗って光沢と陰影を出すとこんな感じになります。
rittai01.jpg
rittai02.jpg
右が白と黒のブラシを表示のフチにつけたものです。
ちょっと膨らんだ感じになりましたね。
ただし、フチが革のままってのもちょっと変なので、ベージュ色のフチを入れてあげましょう。
選択範囲をフチの部分だけとって、ベージュ色でベタぬりしたあとに、以下のようなレイヤー効果をかけました。
fuchi.jpg

まとめ

complete.jpg
アイコンなので、もうちょっと色が映えた方がいい場合もあるので、この場合カバー部分にレベル補正をして明るくしました。
さて、本来のアイコンはもうちょっと小さいですね、なので、小さくしてもその形がわかるようにしておきましょう。
あと、今回は手帳をモチーフとしたアイコンなのでこの手順ですが、臨機応変に制作方法はたくさんあるということを憶えておきましょう。
ツールに惑わされないようにしましょう、私達の仕事はクリエイティブなことなので、ツールありきで考えるとつまらないものしかできないことがあります。
私達のつくりたいものを先にツールがある、というイメージで楽しいデザインをこころがけましょう。

iPhone実機にアプリインストール失敗のときに

adhock.jpg

ipaファイルをiTunesからiPhone実機に転送するときに、実機でアラートが出て「○○のインストールに失敗しました」と言われて何度も試してだめ。
アドホックする場合のプロビジョニングプロファイルは、Provisioning > Distributionで登録してダウンロードすること。
たったこんだけのことでも初心者は大変なんです。
自分メモです。