はてなブックマーク

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」をリリースしました。そのデザインがアメリ

モバイルアプリのUIデザインで難しいのはターゲットとなるデバイスの画面サイズに様々なサイズのものがあるということです。画面の大きさにはいろいろあっても人間の手や指のサイズはほぼ誰でも同じですから、どんな画面サイズであっても確実に押せるようなUIのサイズというのを把握してデザインしないと大変使いにくいものになってしまいます。 例えばiOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44ｘ44ポイントにしなさい」とし、サンプルとして電卓アプリの画面が紹介されています。 “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では２つの日本語フォントが追加されています。モトヤ Lシーダ3等幅とモトヤ Lマルベリ3等幅です。このうち、モトヤ Lマルベリ3等幅の方がデフォルトの設定になっています。シーダは角ゴシック系の文字で、マルベリが丸ゴシックです。どちらも液晶画面での視認性を考慮して調整された画面用のフォントのようです。欧文の方はRobotoというフォントが追加されました。RobotoはファミリーになっていてThinからBoldまで揃っていますが、日本メーカー製の端末ではすべてのファミリーが格納されているわけではないようです。 Androidの画面デザインをする場合に注意しなければいけないのがサイズの指定です。Androidではサイズの指定にピクセル（px）ではなくdpという単位を使います。Android端末はいろいろな

MOBILE APP / WEB-SITE UIデザイン 日常生活のほとんどをモバイルアプリやサイトで済ますことができる時代です。UIデザインの優劣が御社のビジネスを左右すると言って過言ではありません。建物を建てる時は建築デザイナーに依頼するように、UIデザインも専門知識を有するUIデザイナーに依頼してはどうでしょうか。 詳しくはこちら USER EXPERIENCE DESIGN UXデザイン オンラインでの顧客との接点がますます重要になっています。アプリやサイトでの体験が、会社そのものの評判を左右することもあります。UXデザインを正しく設計することが、顧客とのより良い関係を築く近道です。 詳しくはこちら BRANDING / PROMOTION デジタルデザイン SNSでのグラフィック素材、ビデオ、WEBサイトでのアイコン、グラフィックなど各種デジタルデザインメディアを御社のブランドイ