gaspanik weblog » mobile

それって作り手の問題じゃないの？

[cipher] — Wed, 03 Aug 2011 03:24:40 +0000

Twitterを眺めていたらこちらの「続) ガラケーからスマホの怒濤の流れで割を食い始めたサービス」という記事が流れてきたのでちょっと読んでみました。要約すると「色が違うというクレームが増えていて、原因を探ってみるとスマートフォンユーザーではないか。スマートフォンの色再現性に問題があるのでは？」みたいな話。

えっと、結論から書くと、それたぶん作り手側の問題が大きいかも。

＃こういうの書くとディスってるとか言われちゃうんですけど、そうではなくて問題の所在の切り分けをしやすくするためにできることを書いてるだけですので誤解なきよう。

とりあえず、自分の環境を見直しましょう

最初にお断りしておきますが、手元にすべてのスマートフォンやタブレットがあるわけではないので、いちいち検証したわけではありません。が、まぁこれまでいろいろやってきた経験から問題は作り手側にもあるだろうね、と思うのです。

デジタルで写真を扱う時に忘れてはいけないのは、制作環境・閲覧環境それぞれの機器・デバイスの色空間というものがあるということ。すべての機器が同じ色空間で同じ発色性能などを持っていれば、こういうことを気にする必要はない。でも、残念ながら全部が同じであるなんてことはありえない。

もう少しわかりやすく説明すると、「パソコンで開いた写真をそのままプリンタで印刷してみたら色が違う」って経験があるひとも多いんじゃないかと。なぜそういうことが起きるかっていうと、パソコンで表示している色の範囲とプリンタが扱える色の範囲が違うから。同じ色がそのまま出せれば問題は起こらないんだけど、残念ながらプリンタはインクや紙の関係もあって色の再現性は異なる。

パソコンとプリンタそれぞれでの色の扱う範囲（色の取り扱い方っていった方が適当かな）が異なれば、それをどうにかして同じになるように変換してあげないといけない。そこで登場するのが「CMS（Color Management System）」になる。間にたって、パソコンでの色表示をプリンタでも同じようになるよう変換するって考えればいいかな。ま、そういう作業をしてあげないといつまでたっても色は合わないわけですよ。

OS Xであればシステムレベルのカラーマネジメントが古くから動いていてあんまりその辺は気にしなくてもいいんだけど、残念なことにWindowsではVistaの頃からボチボチとその仕組みが導入され始めた次第。基本的にWindowsというのは「sRGB」という色空間をベースにしていて、何でもsRGBに置き換えちゃうみたいなスタンス。俺にみんな合わせてよ的な、ね（謎）。幸いインターネットの標準的な色空間も「sRGB」ってことになってるのがまだ救い。

それより問題なのは、作り手側が自分のモニタに表示されている色が正しいと思いこんでること。モニタってのは定期的に調整をしてあげないと色を正しく表示することができない。たとえば、黒に近い95%ぐらいのグレーとか白に近い5%のグレーとか微妙な階調が再現できなかったりする。モニタに映し出されてる絵ってのは、RGBそれぞれのグレーの階調が重なってるわけで、それがバラバラだったら最終的にモニタに出てる色が正しいなんて保証はどこにもない（そういう意味ではスマートフォンも怪しいといえば怪しいんだけど笑）。

色が合ってるか合ってないかもわからないモニタにくわえて、色空間（カラープロファイル）が存在しているってことも知ってか知らずか無視したりする。最悪なのは正しく色表示ができてないモニタで「こんな感じかな？」みたいな修正をして保存する。幸い、最近のPhotoshopは初期設定の作業色空間がsRGBに設定されていたりするからまだ救いなのだけど（※これは環境による）。

こういったモニタのキャリブレーションとかの話は何度も何度も出してますが、miyahan.comさんのこちらの記事「液晶ディスプレイとカラーマネージメント」が大変参考になるでしょう。

とりあえずsRGBでも埋め込んでおきましょう

で、話を本題に戻すと、スマートフォンとかタブレットは個々の端末は、もちろんデバイス固有の再現性の差があるでしょう。ただ、インターネットの基準色空間はsRGBであって、多くの端末はそれに準じた色空間か変換テーブルを持ってるはず。内蔵のカメラで撮った写真には、大概sRGBのプロファイルとか付いてるだろうし。でなきゃ、いわゆるガラケー時代から問題が起こっててもおかしくない（壁紙の色がおかしいとか、友達からもらった写真の顔が青白いとかさｗ）。

そういうわけで、発色性能とか再現性は個体ごとに微妙な違いがあるだろうけど、ありえないほど大きく色が変わってしまうってのは、「作り手側のモニタの色があってないとか、色空間の存在を無視してたりするからじゃないかな？」と思うわけです。どの端末で見ても完璧に同じ色にってことは不可能に近いけど、ある程度同じようにすることはできるわけで。それでもズレてるならそれは端末側の問題じゃないか、みたいな切り分けはできる。

こういった色のトラブルを極力避けるには、モニタのキャリブレーションをちゃんとやって環境と作業工程をきちんと見直す。ファイルを保存する時は、念には念を入れて「sRGB」のプロファイルを埋め込んでおく。そういったことを徹底しておけば、おおかた大丈夫だと思うんですけどねぇ…（もちろんいくつかのデバイスでちゃんと確認した方がいいですよ）。

ネタは去年だがここのブログを見ると、相当に異なっているのがわかる。想像でしかないが、CPUの性能がPCに比べてずっと低いスマホでは、擬似的に綺麗に見せてるというのも説得力がある。しかしちょこっとみたら、iida INFOBARは26万色、BlackBerryBold 9780やHTC EVOなんて65000色・・・。パソコンは普通数百万色以上に対応しているからそもそものモニタの精度が比較にならないのである。

HTC Evoが65,000色だからとか書いてあるので試してみましたよ、手元にあるから（笑）。この引用部分で参考リンク的に貼ってあるページのグラデーションをちょっと拝借して、こちらで一旦ちょいちょいっと保存しなおしてから、iPhoneのSafariとAndroidのHTC Evoで表示したものがこれ。

なんか違いますかね？ホントは並べて写真でも撮った方がいいんでしょうけど変わらないすよ、実際の見た目も。

256色とフルカラーの比較ならともかく、もう65,000色ぐらいまでいったら普通の人の目じゃあんまりわかんないんじゃないすかね。もちろん擬似的に出してる色が多少あるかもしれないけど、ちゃんとやっとけば大きく色が変わるなんて事はないんじゃないかな。

そもそも元記事のグラデーションのファイルにはプロファイルないんですよね…。それがないうえで各端末での表示結果が載せられてるので、ひょっとしたら端末ごとの色空間とか変換テーブルに左右されて表示された結果じゃないか、と思ったり思わなかったり。もちろん個体差はあるとしても。

まぁ、そんなわけでちょっと流れてきて目に止まった記事を読んでる方も多そうなので、スマートフォンそのものの問題なのか、制作環境とか作り方が問題なのか、ちゃんと皆さんで判断していただきたくこの記事を書いた次第です。

モバイルWeb制作のためのリソース（不完全版）

[cipher] — Sat, 18 Jun 2011 00:11:01 +0000

スマートフォンなどのモバイル向けのWebサイトを作るときに考えておきたいこと、制作に役立つツールなど、その辺りの情報が記載されたWebサイトを仕事でちょっとまとめることがあったので公開します。要は俺ブックマークまとめです。

常日頃溜め込んだものを身近な人たちだけに教えるのはもったいないと思いましてね。さすがに何年も前のは入れてませんし、各種公式資料みたいなものも入れていませんが、昨日今日出た新しい情報までを順不同で入れています。興味のある方はリンク先でお勉強してください（全部英語ですけどね笑）。

※「Responsive Web Design」とか「Adaptive Web Design」とかの情報はほとんど入れていません（抜いてますｗ）。ほぼほぼスマートフォン向けのWeb制作に特化したリンク集です。

Mobile Web Resources, Browsers

Trend, Gallery, Inspiration, Patterns

Design, UI, UX, Usability, Accessibility

Wireframe, Prototype, Stencils

Checker, Tester

JavaScript, jQuery

Frameworks, Libraries

Server, Optimization

Books

誰か訳してくれるまで待ちますか？たぶん、誰も訳しませんよ（笑）。

＃このようなWeb業界の流れや最新情報が必要な方は、ボクのTwitterの別アカウントでもフォローしてください。

TNS Digirtal Lifeがすごいんじゃないの？

[cipher] — Wed, 13 Oct 2010 08:29:37 +0000

「TNS Digital Life」ってサイトがあってですね、これが何だかすごいんです。正式名称は「TNS Digital Life | Internet Statistics & Social Media Usage | Online Behavior & Trends」っていうように、なにやら日本を含む世界46カ国、50,000人を対象にリサーチした「オンラインで何やってんのさ」的なインターネットの利用動向の統計データが公開されています。

概要みたいなPDFもいくつか公開されているんですが、サイトトップにあるFlashを見ましょう。トップにいくつか並んだナビゲーションをクリックすると、メニューに応じて国別にさまざまなデータを閲覧できます。

例えば、「何をやってるか」とか「何に重きをおいてるか」、「どんぐらい時間を割いてるか」などいろいろあって、さらにサブメニューからより詳細なデータを見ていくと。世界地図の見たい国のうえにカーソルを重ねれば、国毎のその項目データが閲覧できるって仕組みです。

国のブロックをクリックするとその国の概要データが表示されて、利用者の属性だったり興味の対象、PCとモバイルの比率といったデータが確認できます。

世界をターゲットに一攫千金を狙ってるそこのあなた、どうっすか？、これ。

GoogleのMobile.appにPushがやってきた

[cipher] — Tue, 24 Aug 2010 02:05:41 +0000

とまぁ、お題のとおりなのですが、iPhoneやiPadで使えるGoogleのMobile.appがアップデートされまして、メールとカレンダーのプッシュ通知とマルチアカウントへの対応がされたようです。

iPhoneもiPadも複数のアカウントを登録して、個別にプッシュ通知の有無を設定できるようになっております。あと、音でのお知らせを控える時間設定とかもあります。

以上です（笑）。

Photoshop.com Mobileが日本でも

[cipher] — Mon, 30 Nov 2009 21:38:05 +0000

AdobeさんのiPhoneアプリ「Photoshop.com Mobile」がいよいよ日本でもダウンロードできるようになりました。ということで超速？レビューっぽいことでもしようかと思います。

何はともあれダウンロードしてインストール。そしてPhotoshop.comのアカウントがなければサインアップして取得します（Adobe ID持ってればそれでもいけますが、確認作業をパソコンからしなければなりません）。

3Gでも動作は軽快

アカウントが取得できたらログインしましょう。
このアプリでできることとは、手元のiPhoneのPhotoライブラリの中から写真を選択しての補正とPhotoshop.comへのアップロード。一応オンラインのストレージにある写真の閲覧ができます。

ボクのiPhoneは3Gですが動作は軽快です。アプリから写真を撮影、もしくはライブラリから読み込むと編集画面に切り替わります。上に表示されたメニューから適用したい補正を選択します。メニューは、左から「トリミング系」「色調補正系」「特殊加工系」「エフェクト系」といったグループ分けです。

適用したい補正を選択したら、画面内を指でスライドして適用量を決めていくスタイルのようです。上下左右に指を動かせばオッケイ。補正を適用するには画面右下の緑のチェックをタップします。保存は、その後右下に出てくるハードディスクっぽいボタンをクリックします。ここで「Save and Upload」を選べば、Photoshop.comにアップされるって感じですね。

必要にして十分。Adobeさんやるねえ

iPhoneで撮影した写真をちょっと明るくしたいとか彩度をあげたいとかっていう必要最低限の機能はちゃんと用意されています。他のアプリと比べると物足りないって思う方もいらっしゃるかと思いますが、これぐらいあれば十分かな、とボクは思います。正直、写真の補正で使うのはそれ＋トリミングぐらいですからね…。

というわけで、元画像（左）と露出補正にソフトフォーカスまで適用した写真（右）を並べてこのエントリーを終わりにしたいと思います。これでまた常駐ソフトが増えてしまいました（でも、他のを消します笑）。

iPhoneとiPod touch用の壁紙10月版

[cipher] — Sun, 12 Oct 2008 10:04:36 +0000

iPhoneとiPod touch用の壁紙の10月版です。
9月頃からの三十路の日常から壁紙に向いてそうな10枚をピックアップしました。で、今回はさらに謎の「京都スペシャル」と題して10枚別セットを用意しています。
「なぜ京都？」という話は、後日あらためて。

今回も例によってAdobe RGBなiPhone用以外にsRGBの携帯用もアップしてありますので、そのまま使うも良し、加工するのも良しでご自由にお使い下さいませ。
「ks」って付いてるのが、京都スペシャルです。

→wp081001 for iPhone and iPod touch
→ktai081001 for mobile
→wp08ks for iPhone and iPod touch
→ktai08ks for mobile

個別にダウンロードしたい方は、Flickrのwallpaperセットからどうぞ。

iPhoneとiPod touch用の壁紙 2008夏その2

[cipher] — Sun, 17 Aug 2008 04:44:21 +0000

ちょっと前にiPhoneとiPod touch用の壁紙を気分次第で作ったわけですが、またちょっと気が向いたので今夏第2弾を作ってみました。
今回は、少し夏らしいものを入れた感じです。

またこれでFlickrのアクセス数が日に1,500とかに跳ね上がるわけですね（笑）。

Flickrのwallpaperセットにこれ以外も置いてありますので、個別のダウンロードはそこからお願いします。10枚1セットのzipパックは下記になります。携帯用も置いてますのでどうぞ。

→wp08summer 02 for iPhone and iPod touch
→ktai08summer 02 for mobile