ブックマーク / blog.takamasa-matsumoto.com (10)

  • iOS7が示すUIデザインのこれから

    iOS7を早速インストールしてみてみましたが、正直な感想として「アイブさん、時代が追いついておりません!」という印象です。 リマインダーだけテクスチャが残っていたり、ホーム画面は既存アプリのアイコンとビビッドなiOS7のアイコンが並んだりと、デザインのトーンが混在していてなんともいえない感じになっています。 ただ、実際に使ってみると、これまでのiOSと比較して、触れたときの感覚がスケートリンクの上をスイスイ滑っているかの様に、より心地よいものになっています。 常にUIデザインの世界をリードしてきたiOSが大きく変化したことで、UIデザインに求められる考え方や、プロセス、スキルはどのように変わっていくのか、iOS7のデザインから考えてみたいと思います。 必要なときに必要なものだけ iOS7ではSafariでスクロールに応じてUIが見え隠れするようになっており、ユーザーの操作やコンテンツに合わ

    iOS7が示すUIデザインのこれから
    tmatsuu
    tmatsuu 2013/09/19
    DESIGN ARCHIVEさん更新キター!必要なときに必要なものだけ、はストレス溜まるんちゃうかと思うけども。 / “DESIGN ARCHIVE - BLOG: iOS7が示すUIデザインのこれから”
  • 細かすぎて伝わりづらい! iOS 7のデザイン変更点まとめ。

    iOS7はフラットなデザインに大きく変更されてついにこのシリーズも存続の危機か! と、思いましたがさすがのAppleさん、一見変わってない様に見える部分でも徹底して細かな変更がされていました。 正式リリースは今年の秋ですが、ひとあし先にiOS 7の紹介ページにある画像から分かるAppleの匠たちの手の込んだ仕事をどうぞ! ■Wi-Fiアイコン iOS 7ではステータスバーのアイコンが全体的に小さくなっています。Wi-Fiアイコンはただ縮小するのではなく、それぞれの境界を3pxに維持したままで、アイコンが小さくてもはっきりと見える様に視覚調整がされています。 ■回転ロックアイコン 矢印のサークル線が2pxから1pxになって、よりシャープな印象になっています。他のアイコンデザインが全体的に細い線で構成されていることから、iOS 7のフォントHelvetica neueのシャープなイメージ合うよ

    細かすぎて伝わりづらい! iOS 7のデザイン変更点まとめ。
    tmatsuu
    tmatsuu 2013/06/15
    相変わらずすげーおもしろい。好きです!/// / “DESIGN ARCHIVE - BLOG: 細かすぎて伝わりづらい! iOS 7のデザイン変更点まとめ。”
  • 細かすぎて伝わりづらい! iOS 6のデザイン変更点まとめ。

    iPhone5やiOS 6のリリースなど、アップルユーザーにとって目が離せない日が続いていますね。 iOS 6に関しては地図アプリが散々なもので正直ガッカリですが、UIは全体的に使いやすくなって、じっくり観察してみると細かすぎる変更点も健在でした。 大きな変更点に隠れた細かすぎる変更点たち、その涙ぐましささえ感じる進化をどうぞ! ■設定アイコン iOS 5では歯車の形が尖っていましたが、iOS 6では角が丸くなってソフトなイメージになっています。 OSXの設定アイコンと同じになったのでBack to the macの方針がアイコンでも徹底されているようですね。 ■時計アイコン 設定アイコンと同じ様に、iOS 5では時計針のシャープな印象でしたが、6では太さが一定になり、角張った印象になっています。 Apple製品がブラウン製品とよく似ているという事から考えると、ブラウン社のアラームクロック

    細かすぎて伝わりづらい! iOS 6のデザイン変更点まとめ。
    tmatsuu
    tmatsuu 2012/09/22
    相変わらず細けぇ! / “DESIGN ARCHIVE - BLOG: 細かすぎて伝わりづらい! iOS 6のデザイン変更点まとめ。”
  • 細かすぎて伝わりづらい!Mountain LionのUI変更点まとめ。

    Mountain Lionが発売されて約1週間。iCloudとの統合も強化されてさらに使いやすくなった感じですね。個人的にはリマインダーが追加されたおかげでTodo管理が一元化できそうなところが嬉しいです。 さて、UIの大きな変更点としては、通知センターが追加されて、Lion発表時にあったiOSの機能をMacに還元する「Back to the Mac」のコンセプトが着実に進んでいる印象ですね。今回もよくよく目を凝らしてみると細かい部分でも変更点がありました。 華々しい新機能に隠れた細かな変更点たちをどうぞご覧あれ。 ■FinderのフッターLionの時点でFinderのツールバー部分にノイズのテクスチャが追加されていましたが、フッターの部分には追加されておらず、今回の変更でFinderのフレーム全体にノイズのテクスチャが追加されています。この変更でFinderのデザインにより統一感が出た感

    細かすぎて伝わりづらい!Mountain LionのUI変更点まとめ。
    tmatsuu
    tmatsuu 2012/07/30
    すげー!今回もすげー!どうやって見つけてはるんですか / “DESIGN ARCHIVE - BLOG: 細かすぎて伝わりづらい!Mountain LionのUI変更点まとめ。”
  • 作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。

    ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄

    作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
    tmatsuu
    tmatsuu 2012/06/16
    ほっほー。ヨサゲ。デザイナー、コーダーの皆様 / “DESIGN ARCHIVE - BLOG: 作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。”
  • 楽天Edyのロゴデザインについて考えよう。

    twitterを見ていたら、トレンドになるぐらい楽天Edyのロゴがダサいと話題になっていて、関連ツイートを眺めているとネガティブな意見がほとんどで、ポジティブな意見は皆無に等しい状態で少し驚きました。 通常のプロセスであれば、多くの案と人の判断を経て絞り抜かれているはずのロゴが、なぜこれほどまでに評判がよくないでしょうか。 単純に否定的な言葉だけで片付けてしまうのではなく、デザイナーとしてその理由を考えてみたいと思います。 ■定着している楽天への否定的イメージ 時はさかのぼること2009年の8月。楽天グループにイーバンク銀行が入った際に、手数料など多くの改変が行われ、それが既存ユーザーにとってはデメリットになるものばかりで「改悪」というイメージが定着してしまいました。 今回のEdyも2009年に連結子会社化したビットワレットを楽天が完全に取り込んでいくような形で、既存ユーザーがイーバンク時

    楽天Edyのロゴデザインについて考えよう。
    tmatsuu
    tmatsuu 2012/02/02
    デザイナー視点で新ロゴをチェック。いやーやはりこのブログは面白いね。
  • Android 4.0 Ice Cream Sandwichのフォントは、なんだか変な味がする。

    Google / Samsung introduce Android 4.0 Ice Cream Sandwich 先日発表されたAndoroid 4.0 Ice Cream Sandwithの新しいフォント「Roboto」について。 今回のバージョンアップではフォントに力を入れて来ているそうで、発表時にも大きく扱われていました。 GoogleAndroidのデザインを担当するMatias Duarte氏によると、新しいフォントRobotoは「わかりやすくて親しみやすく、Androidを魅力的にし、もう少し人間らしくするものでなければならなかった」ということを出発点に作られたそうです。 インターフェイスの根幹を成すフォントに、これまでにない力の入れようを感じるわけですが、よくよく見てみると、ところどころ違和感をデザインになっていて、それが独特の変な味を醸し出している印象を受けました。 そ

    Android 4.0 Ice Cream Sandwichのフォントは、なんだか変な味がする。
    tmatsuu
    tmatsuu 2011/11/15
    ROBOTOの美しくない部分をわかりやすく解説。なるほど。これをふまえた上で自分の目で今度確認してみる。
  • 細かすぎて伝わりづらい! <br />iOS 5のデザイン変更点まとめ。

    iOS 5のリリースやiCloudの開始、iPhone 4Sの発売と、ここ最近のAppleのプロダクトが一通り出そろった感じですね。 3GSを使っていて常々もっさりしていたので、早速iPhone 4Sに乗り換えたところ、画面の中をスケートをしているかのようにスイスイ動いてくれてとても快適です。 2年前に3GSを使っていたときは、なんて速いんだろうと思っていたわけですが…慣れとは恐ろしいものです。 さて題ですが、ここ数日使っていた中で気付いた、細かすぎるデザイン変更点があったので前回のLionと同じようにまとめてみました。 細かすぎるデザイン変更点第2弾、今回も目を凝らしてどうぞ。 1.アイコンバッジ iOS 4のアイコンバッジのシャドウは濃いめのブラックで強めのシャドウになっていましたが、iOS 5ではグレーっぽく明るくなっています。 全体的に比較してみると、iOS 4のシャドウは浮いて

    細かすぎて伝わりづらい! <br />iOS 5のデザイン変更点まとめ。
    tmatsuu
    tmatsuu 2011/11/02
    すごい細かい
  • 似ているようで違う。<br>Google+にあって、facebookにないもの。

    via @uxboy 先日Google+に招待をいただいて、ぼちぼちと使い始めて思ったこと。 リリース当初、Google+のインターフェイスのデザインがfacebookに驚くほど似ている(上記画像参照)という話題がありました。僕自身も、パッと見では同じ様な印象を受けるのですが、なんとな〜くGoogle+の方が見やすくて洗練されているように感じます。 そこで、「なんとなく良い」というなんとなくモヤッとした感覚を、インターフェイスを分解して比較してみることで、具体的に優れている理由をまとめてみました。 1.アイコンの簡潔さ 両者のインターフェイスにおけるアイコンの役割は「一目で何か分かる」ようにすることであり、それが小さくなればなるほど視認性に重点をおくべきだと思います。 その中で、facebookのアイコンは多色かつ線的な表現になっていることで、全体で見た時に少しごちゃごちゃした印象を受けま

    似ているようで違う。<br>Google+にあって、facebookにないもの。
    tmatsuu
    tmatsuu 2011/08/29
    デザインの違いについて。素晴らしい観点で参考になる。
  • 細かすぎて伝わりづらい、Mac OSX Lionのデザイン変更点まとめ。

    先日発売されたMac OSX Lionを何の迷いもなくダウンロードして、日々Apple信者になりつつあるのを実感しております。 さて、実際に数日間使ってみた感想としては、追加機能や操作の変更がてんこ盛りで慣れるのに時間がかかりそうな感じですが、特に気になったのはUIのグラフィックも細かな変更がされているということ。 そこで、新しい機能や大きな変更が話題になっている中で、細かい部分にスポットライトを当てて、その「細かすぎる変更点」をまとめてみました。 違いが分かりやすくなるようにそれぞれ拡大してあります。 目を凝らしてどうぞ。 1.クローズ・ミニサイズ・ズームボタン Snow Leopadでは各ボタンの大きさが14pxだったのに対してLionでは少し小さくなって12pxになっています。さらに、ロールオーバーしたときの記号のデザインも少し立体的なグラフィックになっています。 通常ではボタンは大

    細かすぎて伝わりづらい、Mac OSX Lionのデザイン変更点まとめ。
    tmatsuu
    tmatsuu 2011/07/26
    すげぇ。どうやってこんな違いを見つけるの
  • 1