Skip to main content

Android 4.0 Ice Cream Sandwichのフォントは、なんだか変な味がする。

 Google / Samsung introduce Android 4.0 Ice Cream Sandwich
先日発表されたAndoroid 4.0 Ice Cream Sandwithの新しいフォント「Roboto」について。
今回のバージョンアップではフォントに力を入れて来ているそうで、発表時にも大きく扱われていました。
GoogleでAndroidのデザインを担当するMatias Duarte氏によると、新しいフォントRobotoは「わかりやすくて親しみやすく、Androidを魅力的にし、もう少し人間らしくするものでなければならなかった」ということを出発点に作られたそうです。

インターフェイスの根幹を成すフォントに、これまでにない力の入れようを感じるわけですが、よくよく見てみると、ところどころ違和感をデザインになっていて、それが独特の変な味を醸し出している印象を受けました。

その違和感とは何か、他の様々なフォントと比較して、その「変な味」の理由を考えてみることで、モヤモヤした感覚をスッキリさせてみたいと思います。


変な味その1:雰囲気
Robotoは「人間らしさを追求したフォント」だそうですが、筆記体の風合いを持つヒューマニストスタイルと、Helveticaのようなネオグロテスクスタイルが混在していて、なんともバラバラなテイストになっています。
読みやすさを重視するために色々なフォントの良い所を取り入れていったそうですが、美味しい物だけを集めて並べてもそれぞれが主張してしまってなんだか分からない料理になるよりは、フルコース料理のように全体で見たときにバランスのとれている方が読んでいて心地よいのではないでしょうか。


変な味その2:エレメント
Droid Sansではすべてのエレメントが統一されていましたが、Robotoではそれぞれ違うデザインが施されています。
この理由について、RobotoのフォントデザイナーChristian Robertsonによると、Helveticaのように閉じた「a」や「s」などが、文章として並んだときにリズムを生み出し、美しく読みやすいデザインになることから、それらをアレンジしたデザインにしたそうです。
これは賛否両論ありそうですが、考え方の指標として、GeorgiaやVerdanaの作者で有名なMatthew Carter氏の「読者の書体認知について」の言葉が参考になります。
私の存在を知られたくない、新聞や雑誌の読者が書体を意識したとしたら、それは問題があるということだ。読者のそんな反応はごめんだよ。
『ヘルベチカ -世界を魅了する書体-』 
つまり、フォントは情報を伝えるための器であり、器と食材がバランスを取り合ってこそ料理が美しく見えるように、文字それぞれが主張してしまっていると、本来の目的である情報を読み取る行為への妨げになるのではないでしょうか。


変な味その3:幾何学 
Robotoのコンセプトは、側面がまっすぐな大文字や、陸上競技トラックのような独特の丸みを帯びたイメージで、機械的な骨格を持ちながらも、幾何学的な曲線をうまく組み合わせることで明るい雰囲気をもったデザインを目指しているそうです。
しかし、代表的なフォントであるFutura、DINなどと比較をしてみると、円の幅や中心点がバラバラでやや複雑な構造になっています。
見た目のアンバランスさを食感で例えると、Frutura、DINがサクッとかみ切れそうなのに対して、Robotoはグニャッとしていて、うまくかみ切れない様な感じがします。
幾何学をベースにつくられたフォントはその背景にある構造がシンプルで合理的だからこそ美しく見えるのであって、それらがうまく構成されていないとコンセプトの良さが活きないのでは無いかと思います。 


さて、一人のデザイナーとして、感じたことをまとめてみましたが、 食べ物にも慣れがあるように、フォントも実際に使っていけば自然と愛着が出てきて良く見えてくるのかもしれません。

Ice Cream Sandwichはオイシイのかマズいのか…。
さてさて、みなさんはどう感じましたでしょうか??

異論・反論など、twitterやコメント欄でどんどんご意見いただけると嬉しいです!

このエントリに関連するオススメの書籍


Popular posts from this blog

午前9時41分、Appleが止めた時間の謎。

ついにiPhone 4Sが発表されました。
日本からは2キャリアから出ることになり、乗り換えるのか、そのままなのか、これまで電波の弱さに悩まされてきたユーザーにとっては悩みどころですね。 

さて、あまり変わり映えのしないiPhone 4Sですが、よくよく見てみると、ひとつ気になることが…。
スクリーンショットの時間が、なんとも中途半端な9時41分になっています。

キリの良い9:40でもなく、イベントの開始時間である10:00でもなく、なぜこんな中途半端な時間なのでしょうか。

気になったので過去の製品画像をみてみると…。 なんと全てが「9:41 AM」で統一されています。
ここまで中途半端な時間で一貫しているということは何か意味があるのかもしれないですね。 ジョブズもしくはMac誕生の時間なのか、Appleにとって何かしらのメモリアルな時間なのでしょうか?
気になって海外のApple系ブログを色々と探索していたら、TUAWの記事に、Secret Labsの開発者ジョン マニングが、アップルストアにいたスコット・フォーストール(Apple上級副社長)に時間の意味を質問したという内容の記事がありました。

それによると、プレゼンテーションでプロダクトを大きくお披露目する時間を、約40分で発生するようにkeynoteをデザインし、スクリーンに映し出されたときに観客の時計とズレがないようにしていたらしいのですが、ピッタリ予定通りに行かない事を見越して数分追加した時間なのだそうです。
この40分に対し、スコットは「secret magic time」と名付けていたそうです。
実際にiPhoneが初めて発表された2007年のMacWorldをみてみたところ、プレゼンが開始されてちょうど40分頃にiPhoneのスクリーンが初めて公開されています。
つまり、時間が統一されている理由は、iPhoneのスクリーンが世界に向けて初めて公開されると予測した時間で、合理的な理由がありつつも、Appleにとって記念すべき時間でもあるからということですね。

さて、無事解決したかと思われますが、ここで新たな疑問がでてきます。
その「secret magic time」はなぜ40分なのかということ。
分刻みのプレゼンテーションを組み立てるぐらいですから、そのタイミングにも意味があると思います。 それ…

細かすぎて伝わりづらい!
iOS 5のデザイン変更点まとめ。

iOS 5のリリースやiCloudの開始、iPhone 4Sの発売と、ここ最近のAppleのプロダクトが一通り出そろった感じですね。
3GSを使っていて常々もっさりしていたので、早速iPhone 4Sに乗り換えたところ、画面の中をスケートをしているかのようにスイスイ動いてくれてとても快適です。
2年前に3GSを使っていたときは、なんて速いんだろうと思っていたわけですが…慣れとは恐ろしいものです。

さて本題ですが、ここ数日使っていた中で気付いた、細かすぎるデザイン変更点があったので前回のLionと同じようにまとめてみました。

 細かすぎるデザイン変更点第2弾、今回も目を凝らしてどうぞ。


 1.アイコンバッジ

 iOS 4のアイコンバッジのシャドウは濃いめのブラックで強めのシャドウになっていましたが、iOS 5ではグレーっぽく明るくなっています。
全体的に比較してみると、iOS 4のシャドウは浮いている感じがするので、明るくなったことで画面全体のトーンにまとまりが出たように感じます。


2.ボックスデザイン

設定画面などのボックスデザインが、iOS 4ではフラットなラインに対して、iOS 5ではシャドウとハイライトが追加されて立体的なデザインになっています。
 iOS全体で同様の立体的なデザインが適用されているので、デザインの一貫性がより高まった感じがしますね。


 3.メッセージのハイライト

これは賛否両論ありそうですが、iOS 4ではメッセージの文字がプレーンなテキストだったのに対して、iOS 5ではハイライトが追加されてこれまた立体的なデザインになっています。
他にも吹き出しの背景色やシャドウが明るくなったことで、背景と文字のコントラストが高くなり、個人的には文字の可読性が高まって良くなったと思います。


 5.回転ロックボタンの厚み

iOS 4では回転ロックボタンのシャドウ距離が3pxだったのに対して、iOS 5ではシャドウ距離が4pxとなって、より立体的に見えるようになっています。
反対にミュージックアイコンのシャドウ距離は3pxで変わらずのままですので、1pxの違いをデザインすることで、回転ロックという機能アイコンと、ミュージックを起動するという起動アイコンの違いを表しているのではないかと思います。


5.ホームアイコンの間隔

 iOS 4ではアイコンの間隔が38pxの等間…

作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。

ややうさんくさい感じのするタイトルですが、ホントの話なんです。

海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。

SPECCTRについてごく簡単に説明すると…

フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる

というものです。

これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。
また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄なやりとりが発生してしまっていたことも少なくないと思います。

しかし!

このFireworksプラグイン「SPECCTR」さえあれば、そんな面倒臭さや心配ごとのすべてから解放されます。

前置きはこのぐらいにして、実際の使い方をみながらその便利さをご紹介したいと思います。

1.はじめの準備
インストールはかんたん。SPECCTRのサイトからプラグインをダウンロードしてダブルクリックすると、Adobe Extention Managerが立ち上がって自動的にインストールされます。


2.いざ実践! オブジェクトのプロパティを書き出す


プロパティを調べたいオブジェクトを選択してボタンをクリックすると…


あら不思議! 自動的にプロパティを調べて自動シェイプとして書き出してくれているではありませんか!


3.サイズを書き出す
これもかんたん。調べたいオブジェクトを選択してボタンを押すだけ。


4.スペースの書き出し
これまたかんたん。表示したいオブジェクト2つを同時選択してボタンを押すだけ。 正直なところ、これまで紹介した機能はSPECCTRが無くても大きな差は出ないかもしれませんが、ボタンをポチッと押すだけでレイアウトの間隔を一覧にできようになる、これこそがSPECCTRを使うべき大きな理由ではないでしょうか。
ちょっとそこのあなた!

「たくさん仕様を書き出せても、それでご赤字だらけの原稿みたいに意味…