SPBrowser（SonyTablet Pシリーズ専用2画面ブラウザ）デザイン

UTAN1985

2012年3月 8日 23:48

TAG

Android P Pシリーズ SONY Sony Tablet アイコンデザインアンドロイドソニーソニータブレットタブレットバナーデザインメニューデザインモバイルロゴマークデザイン

SonyTablet Pシリーズ専用の2画面ブラウザ「SPBrowser」のロゴやアイコン、メニューなどのデザインをお手伝いしました。

「SPBrowser」は僕と同じモノフェローズのtaiseikoさんが開発した、SonyTablet Pの特徴である2画面表示を生かしたWebブラウザーです。今回は某氏によりtaiseikoさんの元へアイコン職人として召還され、お手伝いすることに（笑

まずは、「SPBrowser」をご紹介。

SPBrowser

写真クリックで拡大

Sony Tablet P 専用の二画面で利用できるブラウザです。
SonyのAPIを利用していますので、画面が崩れたりしません。
※以下の機能があります。
ブックマーク機能
（標準ブラウザからインポートできます。）
リンク長押しで別画面で開けます。
ホームページを設定できます。
Flash、javascriptを実行できます。
UserAgentを変更できます。
片方だけの画面を全画面に出来ます。
ハードウェアアクセラレーションの切り替えが出来ます。

で、今回僕が担当したのはアイコンとアプリ内のメニュー。
そしてAndroidマーケット…もといGoogle playに掲載されるバナー画像です。

アイコン

SPBrowserは「Sony Tablet Pシリーズ専用の2画面ブラウザ」ですので

Sony Tablet P 用であること
ブラウザであること
二画面を別々に利用可能であること

が、わかるようにデザインしました。

また、taiseikoさんのご要望でSony Tabletに入っているソニー純正アプリに近いイメージがよいとの事でいくつか案を作成。

写真クリックで拡大

右端のアイコンに関してはSony Tablet Pのイメージが全くありませんが、このアイコンを見る機会が最もあるのはインストールした後のSony Tablet Pの画面内だと思います。そこで、ある意味Sony Tablet Pのイメージは無くてもよいのかもしれないと考え思い切ってなくしてみました。で、インターネットをイメージさせる地球を2つ重ねることで二画面を別々にブラウズできることをイメージさせています。また、アプリ名を配置してロゴマーク的に仕上げました。
最終的には、この地球アイコンを気に入っていただけて、この案に決まりました。

アプリ内メニューアイコン

アプリ内で使われるメニューのアイコンです。
左から「戻る　進む　ホーム　再読み込み　2画面表示　ブックマーク追加　ブックマーク表示」
あたりまえのことですが、気を付けたのはクリックしたら何が出来るのかが分かる事です。
あとは主役では無いので出来るだけシンプルなデザインとしました。

Google playで表示されるバナー

写真クリックで拡大

このバナーはGoogle play上でのアプリ詳細画面などに表示されます。これを見る方は、ほぼこのアプリを初見ですのでSony Tablet P用と言うことがハッキリ分かった方が良いと考えました。ですのでタブPをそのまま配置。これはソニーの商品サイトを参考にして描いたイラストです。だ、誰ですかトレースとか言ってるのは！（笑
表示している画面に関してはtaiseikoさんに「SPBrowser」で実際にサイトを表示したスクリーンショットをいただきハメコミ合成。
その隣にアイコンをロゴマーク扱いで配置。背景に関してはアイコンのイメージを踏襲しています。

やっぱり、アプリのアイコンをデザインするのって楽しいですね。
限られたスペースの中で、何ができるアプリかを伝えるのは難しくもあり、楽しくもあります。

Sony Tablet Pユーザーの方は是非「SPBrowser」を使ってみてくださいね！
→「SPBrowser」Google play

って、僕が持ってるのSony Tablet Sなんで使えないんですよね（汗
またそれかよ！って話ですね（笑

Comments(0) ┃ TrackBack(0)

「DESIGN [デザイン]：DesignWorks［作品集］」での記事一覧