サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.dotproof.jp
新しいiPhoneの6と6 Plusが発表になりました。従来モデルよりそれぞれ少しづつ大きくなっていますが、日本ではまた人気が出るのでしょうね。特にiPhone 6 Plusの方は5.5インチと発表されていますので、前のモデルよりかなり画面が大きくなっています。 iPhoneもiPhone 3から4になった時に画面の解像度が2倍になってretinaディスプレイと呼ばれました。解像度が2倍になったので従来のグラフィック(ビットマップ)は2倍の大きさのものを用意する必要になり、@2xグラフィックと呼ばれるようになりました。今度のiPhone 6でも画面の解像度(ppi)は同じなのでやはり@2xのグラフィックで対応します。 なんで画面のサイズは4インチから4.7インチに拡大されたのに、UIグラフィックのサイズは同じでいいのかとお思いの方に向けて、改めて画面解像度とピクセルグラフィックの関係を説明
Androidの9パッチグラフィックのように、iOSでもコンテンツに応じて拡縮するグラフィックを作成、使用することができます。iOSではAndroidのような特殊なPNGファイルを用意しなくても、通常のPNGファイルを使って拡縮する範囲をコードで指定するだけで拡縮可能なグラフィックとして扱うことができます。先日、そのようなグラフィックを作成して、拡大縮小すべき位置を座標指定して開発会社に渡したのですが「コードはなるべく減らしたいので拡大縮小するグラフィックはだめ」と言われてしまいました。そんなこと言っても、そうしたら画面縦横や、iPhoneとiPadでそれぞれ別のグラフィックを用意しなければならず、そっちの方が面倒だと説得したのですが…。 実はコードを書かなくても、Xcode 5のAsset Catalogでこうした拡縮可能なスライスを作成できるのです。あまりデザイナーの人が直接Xcode
先日のGoogle I/O 2014で新しいデザイン言語「Material」が発表されました。発表された時は「紙のメタファー」のデザイン言語程度にしか思っていなかったのですが、よく調べて見ると過去最大級のデザインの変更となっているので単にバージョン4.4から4.5に変わったというようなものではないようです。下に主な特徴をまとめてみます。 1. MaterialはMobileだけでなくWEBまで含んだ統一テーマ まず「Material」はAndroid OSを使った携帯端末、タブレットだけではなく、WEBアプリまでを含んだ統一デザイン言語だということです。将来はウェアラブル端末、カーエレクトロニクス、TVまでを含んだ大きなテーマになっています。ただ、WEBに関して言えばモバイルアプリ以上にサイトのオリジナリティが重要視されるので、Googleが推進するからといってこれを採用するサイトが増える
今年のGoogle IOで次バージョンのAndroid OS「Android L」が発表されました。同時に、新しいデザイン言語「Google Material」も発表されました。デザイン関係者にとってはこちらの方が大きなトピックですね。iOSやAndroidなどのプラットフォーム上で動くアプリのUIデザインを考える上では、OSの持つデザイン言語とアプリの独自性をどうバランスするかが大きな課題だと思います。一口に「UIデザイン」と言っても、機能と操作性の部分、ブランディングなど見た目のビジュアルの部分、などいくつかの要素が複雑に関連して成り立っていますから、単に機能だけを考えても成り立たないですし、ビジュアルだけデザインしてもアプリとして成立しない、ということもあります。 さて最近日本の大手モバイルゲームメーカーG社がホテル予約アプリ「Tonight」をリリースしました。そのデザインがアメリ
今年の後半から、5インチでピクセル数が1,440 x 2,560というAndorid端末が市場に出てきます。そうなるとmdpiの4倍の画面密度になるので、xxxhdpiというdensityサイズになります。もはやPCのモニターと同じかそれ以上のピクセル数を持つスクリーンが手のひらサイズになるわけです。mdpiではアプリアイコンのサイズが48ピクセル四方なので、xxxhdpiでは192ピクセル四方になります。 これだけ画面のピクセル数が大きくなると、UIとして使われる画像もそれだけ大きなサイズになります。なにしろ27インチiMacと同じ画面ピクセル数ですからね。 ただの写真であればJEPGで圧縮すればそれなりのサイズになりますが、UIとして使うリソースでは透明部分が必要になるため、Androidでは通常、透明度つきの24bitPNGファイルを使用します。ただ、それだとサイズが非常に大きくなっ
モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44x44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “Give tappable elements in your app a target area of about 44 x 44 points. The iPhone Calculator app is a good example of fingertip-size control
Androidでは内容に応じて拡大縮小可能なグラフィックとして、「9 Patch」という特殊なグラフィックを扱うことができます。特殊な、と言ってもある一定の規則の元で作成されたPNGファイルですが、この9パッチグラフィックを理解していないとAndroidのUIデザインは難しいと思います。かなり普及していると思うので今さらですが基本と応用をまとめてみます。 例えば下の図のようなA、B、Cというボタンがあるとします。ボタンのデザイン自体は同じです。角のRも同じ、色も同じです。ただコードで表示されるテキストの部分が違うとします。ABCを別々のグラフィックとして用意してもいいですが、解像度がたくさんあるAndroidの場合、ボタンのグラフィックの数が膨大になってしまいます。そんな時に使うのが「9パッチ」です。名前の由来はもちろん右のように、拡大縮小してもいい部分と、そのまま維持したい角の部分などを
ようやくAndroid OSの主流も4.0以降になってきたようですね。Android 4.0では2つの日本語フォントが追加されています。モトヤ Lシーダ3等幅とモトヤ Lマルベリ3等幅です。このうち、モトヤ Lマルベリ3等幅の方がデフォルトの設定になっています。シーダは角ゴシック系の文字で、マルベリが丸ゴシックです。どちらも液晶画面での視認性を考慮して調整された画面用のフォントのようです。欧文の方はRobotoというフォントが追加されました。RobotoはファミリーになっていてThinからBoldまで揃っていますが、日本メーカー製の端末ではすべてのファミリーが格納されているわけではないようです。 Androidの画面デザインをする場合に注意しなければいけないのがサイズの指定です。Androidではサイズの指定にピクセル(px)ではなくdpという単位を使います。Android端末はいろいろな
iPhone 4も発売され、国内だけでもiPhoneの累計販売台数が300万台を超えるところまで来ました。もちろん普通の携帯の台数からすればまだ5%に満たないわけですが、着実にiPhoneやAndroidのようなスマートフォンの普及に弾みがついてきました。 iPhoneは確かによく出来たプラットフォームですが、供給がApple一社だけというのはいささか危うさもあるのではないかと思います。iPhone向けにアプリを開発しても、審査で落ちてしまうかもしれませんし、いったん発売できてもある日突然発売を中止されてしまうことがあるかも知れません。またユーザーにとっても選択肢がひとつというのはちょっと寂しいのではないでしょうか。 そういう意味でぜひAndroid携帯にもがんばって欲しいと思います。特にSony EricssonのXperiaシリーズはキャリアがドコモということもありますし、ユーザーの期
発売時には大変な騒ぎとなったiPhone 4ですが、アンテナの不具合(?)があっても今一番注目の携帯端末だと思います。3G、3GSからの一番の違いは何と言っても640×960ピクセルという高解像度のディスプレイです。何しろ面積比4倍ですからね。従来のアプリケーションのほとんどはそのままiPhone 4でも動作すると思いますが、やはり前の解像度に合わせて描かれたグラフィックをiPhone 4で見るとちょっとハッキリしない印象を受けますね。 そこで従来のアプリケーションもiPhone 4に対応すべく、アップグレードをしようとする方も多いと思います。グラフィック的には単純に倍にすればいいのですが、実際の作業は結構大変です。倍にすれば描き込める箇所も多いですし、アラも倍に拡大されます。こういう時は元データをベクターデータで描いておいて良かったと思います。ビットマップだけで描いていたら、たぶんほとん
WEBデザインでも角にRのついたグラフィックを作成し、内容の量に応じてボックスを拡大縮小可能できるように配置する場合があると思います。AndroidのGUIではそのような機能が、Ninepatchという名前で実装されています。またそのための特殊なPNGファイルを作成するツールがSDKに同梱されています。 Ninepatchイメージは、拡張子が.9.pngの特殊なPNGファイルですが、中身は通常のPNGファイルのようです。まず、拡大縮小可能なように中心部がタイリングできるようなグラフィックを描きます。 図では紫の部分がタイリング可能なようにベタ塗りとして、上から下へのグラデーションをつなぎ目のないように描いています。このファイルを通常のPNGファイルで書き出します。 次にAndroid SDKのツールディレクトリにあるdraw9patch.batを開きます。特に開発環境をインストールしていな
Googleで配布されている Android Icon Templates Pack, v2.0 にはPhotoShopのファイルが入っていますが、自分はアイコンをIllustratorで描きます。アイコンを描くのにビットマップがいいのか、ベクターがいいのかというのはひとつの課題ですが、ベクターは元のデータさえあればいろいろな大きさのアイコンを生成できますし、ビットマップはピクセル単位のより正確なデザインができますから、どちらも長所短所があると思います。テンプレートでも、PhotoShopのファイルですが、ほとんどの絵はシェイプで描かれていますから、拡大縮小で困るわけではありません。ただ、どうせシェイブで描くなら最初からIllustratorで描いてもいいような気がしますし、PhotoShopのシェイプ編集機能はもちろんIllustratorに遠く及びません。自分も前はビットマップで描いて
先日発売されたXperiaに続いて、4月末には最新のAndroid OS2.1を採用したHTCのDesireも発売開始され、いよいよ日本でもAndroidを採用した端末が普及する予感がします。Android OS 2.0以上では様々な新機能がサポートされているのですが、デザイナーの立場からいうとランチャーのアイコンが大きく変わっています。詳しい内容はAndroidデベロッパーサイトの「Icon Design Guidelines, Android 2.0」を見ていただくとして、旧ガイドラインではアイコンは斜めから見た立体表現だったものが、2.0からは(iPhoneのような)正面から見た半立体風の表現に改められています。もちろんこの変更は描きやすさを考慮したものだと思います。旧ガイドラインのような3D風のアイコンは描きにくいですからね。 ただiPhoneの場合はただの四角いグラフィックを用意
弊社初のiPhone用アプリケーション「6秒計」がiTunes Storeより全世界向けに発売されました。日本での名称は「6秒計」、その他の国では「Film Counter」になります。 「6秒計」はアニメーション製作現場で使われているシートが6秒単位になっていることから、6秒で針が一周するストップウォッチです。秒24コマのフレーム数もカウントします。特殊な用途のアプリケーションですので、みなさんに使っていただけるようなものではありませんが、日本から世界に発信しているアニメーション製作現場の方に使っていただければと思います。 弊社ではこれからもニッチであっても、何か物作りを助けるようなユーティリティや、アプリケーションを様々なプラットフォームに向けて出していきたいと思っております。よろしくお願いいたします。
MOBILE APP / WEB-SITE UIデザイン 日常生活のほとんどをモバイルアプリやサイトで済ますことができる時代です。UIデザインの優劣が御社のビジネスを左右すると言って過言ではありません。建物を建てる時は建築デザイナーに依頼するように、UIデザインも専門知識を有するUIデザイナーに依頼してはどうでしょうか。 詳しくはこちら USER EXPERIENCE DESIGN UXデザイン オンラインでの顧客との接点がますます重要になっています。アプリやサイトでの体験が、会社そのものの評判を左右することもあります。UXデザインを正しく設計することが、顧客とのより良い関係を築く近道です。 詳しくはこちら BRANDING / PROMOTION デジタルデザイン SNSでのグラフィック素材、ビデオ、WEBサイトでのアイコン、グラフィックなど各種デジタルデザインメディアを御社のブランドイ
このページを最初にブックマークしてみませんか?
『ドットプルーフ株式会社 | ユーザーインターフェースデザイン』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く