10月 27

届いたKindleは意外に梱包がシンプルでした。特に変哲もない段ボールでエコと言えばエコ、iPhoneなどに比べると素っ気ない程です。ただ開封する部分に「Open」ではなく「Once upon a time…」(和訳:昔々あるところに…)と印刷されているのが粋です。

kindle-unbox-01

箱を開けるとすぐにKindleのスクリーンが目に入るようになっていて、最初にすることが画面に表示されています。この辺はEインクならでは演出です。最初にすることと言っても付属のACケーブルをつないで、電源を入れるだけです。それでそのまま直ぐに使えます。電源を入れると最初に表示されるのはAmazon社長の挨拶文で、その後に取扱説明書が表示されます。

kindle-unbox-02

付属のACアダプターはiPhoneのようなUSBの先にACジャックが刺さっているもので、そのままACアウトレットにさせますし、PCから充電することもできます。持ち運びは考えられていないようですが、アンテナをOFFすれば平気で1週間くらいは持つので外出時に持って出る必要はないでしょう。

kindle-unbox-03

画面の左右に「NEXT PAGE」ボタンがあり、「PREV PAGE」は左だけにあります。

kindle-unbox-05

右には「HOME」ボタンがあります。

kindle-unbox-06

その下には十字キー+決定ボタンと「MENU」ボタン、「BACK」ボタンです。ユーザーインターフェースで迷うとしたら、唯一、「HOME」と「MENU」の違いがわからないということだと思います。「MENU」はその本に対する操作項目が表示され、「HOME」はストアへの移動や、システム設定などの項目があります。それ以外で操作に迷いそうな部分はありません。

kindle-unbox-04

強いて言えば、キーが小さく、やや押した感触があいまいな気がしました。また@マークのようなシンボルはソフトキーを呼び出して入力するのでややわかりにくいかも知れません。(写真:SYMと書かれたキーが記号の文字パレットを呼び出すキーです。) キーは読んでいるときにいつでも入力でき、その場合は検索になります。

kindle-unbox-08

ハードウェアのデザインは最初のバージョンに比べると、はるかに良くなりました。まあちょっとデザイン優先で操作性が犠牲なところもあるかも知れませんが、サービスとの一体感は細かなインターフェースデザインの不具合を補ってあまりあるものです。逆にインターフェースだけ良くても、サービスがだめなら完全にだめですから。これからはハード、ソフトのインターフェースデザインだけでなく、サービス、そしてそれを支えるシステムまで含めて総合的に優れた機器でしか市場に残れなくなるでしょう。

6月 05

実際にテンプレートをベースにIllustratorを使ってアプリケーションのアイコンを描いてみます。アプリケーションのアイコンデザインは、Market Placeでの売れ行きを左右しますからとても大事だと思います。例としてメモ帳のようなアプリを想定しています。まずはテンプレートのパース図に沿ってベースとなる形状を描きます。
how_to_01
まずはメモ帳本体の底面となる四角形を描いて、「効果」>「スタイライズ」>「角を丸くする」、半径16ピクセルで角を丸くします。それを天面にコピーして稜線でつなぎ、全体の形を作ります。位置はテンプレートに合わせて微調整します。
how_to_02
次に塗りを適用できるように、側面と天面に分割して線を接続し直します。
how_to_03
このようにして基本となる形状を作ったら、細かな形状を追加していきます。ガイドラインには細かな角度が書いてありますが、それはあくまでベースとなるパースペクティブの話なので、見た目でおかしくないように、また実際は48×48ピクセルに縮小するので細かくなりすぎないように細部を書き込みます。例ではリング部はちょっと細かすぎたかもしれません。
how_to_04
形が決まったらテンプレートのスウォッチから塗りを選択して角度や濃度を調整します。またシャドー部を追加します。オリジナルアプリアイコンの色から抽出したスウォッチを使っているので、何となく感じが似てきます。コツは外形線を引かないことと、明るめの配色を心がけることです。外形線がないので背景が暗めになってしまうとアイコンの絵自体が見えづらくなってしまうので明るめにします。もちろんGoogleっぽくしたくない場合は、まったくオリジナルのカラースキームを使った方がいいでしょう。
how_to_05
最後にもう一度250×250ピクセルの枠内に配置して全体の大きさを微調整します。これをPhotoShopに書き出して48×48ピクセルのサイズに縮小し、透明背景付きのPNGファイルに書き出して完成です。

こうして描いてみると、適当な絵を1枚用意すればいいiPhoneと違って結構大変ですね。

5月 12

Illustrator CS4が発売されてから、ほとんどのグラフィックをAIで描くようになりました。今まではPhotoShopで描くことが多かったのですが、アートボードを複数持てるようになったので簡単な資料などもひとつのファイルで書けるようになったことや、Flashとの連携などで便利だからです。部品としては最終的にPhotoShopで加工しますが、資料からデザインまで一貫して作業できるので助かります。

最近描いたボタンをCS4のファイルでアップロードしましたので、使いたい方は下の「Download」ボタンからどうぞ。そのまま再配布する以外は改変自由、商用利用OKです。テキストはラスタライズしていないので、打ち替えて使ってください。

buttons1