Skip to main content

Posts

音楽をつなぐこと、デザインをつなぐこと。

「エディトリアルデザインとDJミックスは似ている」 デザインをしながらミックスCDを聞いていて、ふと思いついたので思考整理のメモをしながら、そのイメージをビジュアル化。 1.BPMとグリッド DJミックスでBPMの異なる曲を調整して全体のリズムをつないでいくように、エディトリアルデザインでは様々な文字や画像をグリッドにピッタリと合わせて全体のリズムをつないでいく。 異なる要素が一定のリズムにピッタリと整列した瞬間、どちらも心地よい感覚が生まれていく。 2.曲順とページネーション DJミックスでは、落ち着いた曲から一気に盛り上がる曲に変えたりして、聞き手を飽きさせないように流れをつくっていくことが大切。 エディトリアルデザインも、始めにを大きな演出をしてその後じっくりと読ませる流れを設計したりすることで、ページをめくること自体の体験をデザインする。 緩急をつけてつなぎ合わせていくことで、全体を通して新たな1つのストーリーが生まれてくる。 3.選曲と素材 DJミックスでは、どんなに退屈だと思っていた曲でも前後の曲の関係性で引き立て役になったり、時には主役になったりする。 エディトリアルデザインも、不要に思える素材でも、他の素材と対比させてバランスをとったりすることで、魅せるべき素材の意味が引き立ってくる。 どちらにおいても無用に思えるものが、実は引き立たせるための有用な価値をもっているということ。 4.エフェクトと装飾 DJミックスでは、単に曲をつないでゆくだけだと退屈なものになるときがある。そこで、スクラッチやエフェクトをかぶせることでそこにしかない臨場感が生まれてくる。 エディトリアルデザインも、単に文字と画像を綺麗に並べただけでは面白みが無いときがある。あえて極端な形にしたり装飾を加えることで、そのページにしかない空間を生み出していく。 どちらもやり過ぎると複雑ものになっていくため、絶妙なバランスが重要だということ。 5.表紙とジャケット 最後に大事なこと。いくら中身が良くとも、外見が魅力的でないと気づいてもらえないかもしれない。気づいてもらえないということは存在しないということ。 どちらも内容や雰囲気のエッセンスを一つの限られた空間に凝縮して、見る人を引き寄せて心の隙間に入り込んでいく...

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...

「もしもJobsとAdobeがtwitterをしていたら。」
3年半以上にも及んだ、FlashをめぐるJobsとAdobeの論争まとめ。

とうとうAdobeがモバイル向けのFlash開発中止を発表しました。 プラットフォームとして大成功を収めてきた1つの技術がいかにして衰退していくのか。 その流れを分かりやすく振り返るために、JobsとAdobeによるFlash論争の歴史を、twitterのタイムライン風にまとめてみました。 タイムライン風なので下の方からどうぞ。 こうしてみるとAdobeが「We Love Apple」というツンデレキャンペーンをしかけてきたあたりから勝敗は決まっていた感じがしますね。 PCはFlash、モバイルはHTML5というかたちで注力していくそうで、これからどうなっていくのか…。まだまだ混乱は続きそうです。 Tweet

シンプルさと一貫性。

Google+にはじまり、じわじわとサービスのデザインを向上させているGoogle。 先日Gmailやリーダーもデザイン変更になり、シンプルでとても使いやすくなった感じがします。 Googleの公式ブログによると、今回のデザインは「Google のサービスをよりシンプルで一貫性のあるものに変更しています。」とアナウンスしており、言葉通りにシンプルさによって見やすくて使いやすいデザインが実現されていると感じます。 では、具体的にどういったところが「シンプルで一貫性のあるもの」なのか、デザインが変更された主要なAppsである、Gmail、カレンダー、ドキュメント、リーダーのデザインを分解し、それらをまとめてみることでシンプルで使いやすいインターフェイスの理由に迫ってみたいと思います。 1.構造の一貫性 アプリケーションの構造が、メニューバーは上部、情報のカテゴリはサイドバーに、メインの情報は右中心にかならず構成されていて、全体を通して同じ構造になっています。 これによって、アプリケーション間の切り替えに戸惑うことなく、スムーズに操作が行えるようなデザインになっています。 2.配色の一貫性 モノトーンをベースとした配色に、操作している時に一番重要とされる要素が、配色の中で一番目立つ色であるオレンジ色になっています。 他にも検索ボタンの部分は青色で統一されていたりと、全体の中で色の意味が統一されています。 配色における選択と集中が効果的になされていて、重要とされる要素が一瞬で認知できるようなデザインになっています。 3.アイコンの一貫性 フラットで色数が抑えられていることによって、小さなスペースでも高い視認性を持ち、アイコンがたくさん表示された場合でも互いの要素を干渉せず、全体での調和がとれるようなデザインになっています。 正直、アイコン単体では何を表しているのか分からない位シンプルすぎるかと思いますが、コンテクストに沿った形で配置された時に、最小の表現で最大の効果をもたらしてくれています。 4.状態表示の一貫性 ステータスが変更されたときに、必ず上部に同じ様なデザインで表示されるようになっています。一貫した表示方法によって、変化が起きた事を確実...

細かすぎて伝わりづらい!
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の違いをデザインすることで、回転ロックという 機能アイコン と、ミュージックを起動...

午前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分なの...

Constraints lead to the design.

制約は、 デザインを妨げる物であり、 デザインを導いてくれるものである。 その意味するものを理解していないと 間違った方向に進んでしまう。 Tweet