Skip to main content

Posts

iPhone SEのかたちが示すデザインの役割。

先日のApple Keynote 「Let’s us loop you in」では、あまり大きな変化が無く少し拍子抜けした感じであった。特にiPhone SEの形状は代わり映えすることがなく、iPhone 5sを使っているユーザーにとっては新鮮味に欠ける感じだ。
しかし、iPhone SEをこれまでのアップルがプロダクトを世の中に送り出してきた歴史の中で捉えてみると、変わらないということそのものが価値であるということが見えてくる。
新しいデザインを生みだすことで評価されてきたAppleが、あえてデザインを変えないということを選択しているのは何故だろうか。
一貫したデザイン言語をつくる。 Appleのデザインは一度決められたコンセプトから大きく変えることはしない。素材であればSnow whiteAnodized aluminum、GUIであればAquaBrushed-metalなど、一貫したデザイン言語のなかで洗練を繰り返している。少しづつ変わりながらも、一貫性を保つことで人々の記憶に残りやすく、親しみの感じられるデザインとなっている。



反面、他社製品の多くはデザインのライフサイクルが短く、中身や機能に差がなくても外観だけをすげ替えることで需要につなげようとしているものばかりである。
デザインの役割は単に外観を美しく整えるだけではなく、一貫したデザイン言語のもとに体験を洗練させていくことの方が需要であることを示している。



より社会性を意識したデザインへ。 iPhoneのデザインはもはや製品そのものにとどまらず、サードパーティを含めた経済システム、ひいては地球環境にまで関わっている。
CNBCによると、今やケースなどを含めたスマートフォンのアクセサリ市場は2兆円以上もの規模に達しているという。
仮にiPhoneの形状が頻繁に変わってしまえば、その度に資源が無駄になり環境への負荷も大きい。アクセサリメーカーにとってもリスクとなればそもそもiPhoneのエコシステムが成り立たなくなってしまうだろう。
こういった要素を考慮した上で、あえて変えないという選択は、デザインがより社会性を持たなければならないということを示している。
デザインは単に外観を美しくするだけでなく、環境などの社会に与える影響を考慮し、製品が生み出されてから使われなくなるまで、システムをトータルにデザイ…
Recent posts

作法はデザインに従う

形態は機能に従う。という言葉がある。
建築自体の美しさは、機能的な側面が満足いくものになっていれば、あとから自然とついていくるという事を端的に表した言葉である。
同じように、人の作法の美しさはデザインによって決められていると感じる場面に出くわした。

出社前の朝、カフェで落ち着いてアイデアを考えていたらノートで作業をする人に囲まれた。一方はPC(国産らしきWindows)、もう一方はMacBookを使っている。どちらもこれから仕事に向けて準備しているのか、画面とにらめっこしながらキーボードを一心不乱に叩いている。

ただ、PCの方は店内のBGMを乱すかのようにガチャガチャ、タターンッ! とミサワばりに音を響きわたわらせはじめた。朝の落ち着いた静かなカフェが一瞬にして慌ただしいオフィスに変わったかのようだ。

PCの方が音が大きく、作法が雑なのはなぜか。単にキーを打つ時にでる音の違いだが、ここに本質的なデザインの違いがあるのではないだろうか。 モノそのものだけでなく、それが使われる周囲の環境まで考えた時に、PCはどう使われるかまでデザインされていないのだろう。
使う人にとってキーボードからカチャカチャと出る音は中毒性があって心地良いかもしれないが、周囲にとってはノイズとなり、使う人の作法もデザインされたものに従ってしまうのである。

一方、MacBookのキーボード音は比較的静かになるようにデザインされている。このため作法は自然と静かにキーボードを打つように規定される。使う人の性格による部分もあるだろうが、それでも比較して静かに見えるようになるだろう。
この違いが、心地よさが重視されるカフェなどの公共空間において、周囲からみた時の印象の違いを生み出しているのではないだろうか。

同様の視点で考えた時に、Mediumも他のブログサービスと比較してみた時にデザインが作法をうまく規定している好例だ。
フォントや行間は選べないし、画像や動画を貼り付けるフォーマットは数種類のみ。できないことだらけである。しかし、その制約があることで、余計なことを考えずに書くことに集中することができる。

このブログを書き始めた時も、カジュアルに話しかけるようなトーンで書いていたが、フォントが明朝で設定されていることで、もう少し日記的な使い方の方がしっくりくると感じ、文体も自然と落ち着いたものになった…

それでも私がSketchを使い続ける理由。

ついにUIデザインツールの大本命とされていたAdobeのProject CometがAdobe Xdとしてリリースされた。
学生時代から10年近くAdobe製品を使い続けていたが、UIデザインでの使い勝手の悪さにウンザリし、ようやく重い腰をあげてSketchに移行したところだった。
そんな中、Adobe Xdは「またAdobeに戻ってもいいかも」と思えるぐらい、Sketchのシンプルさとプロトタイピングツールのエッセンスがうまく統合されていて心が揺れ動くプロダクトだ。
まだプレビュー版で機能などは限定的なので、正確に評価することは難しいが、Adobeが持つ他ツールとの親和性やマーケティング力を考えると、Sketchや既存サービスにとって大きな脅威となるのではないだろうか。
Adobeが強力なツールを出してきた中で、それでもSketchを使い続ける理由はあるのか。

UIデザインに携わる人にとって悩ましいところだが、Sketchの未来はまだまだ明るい。
単純に機能を比較するだけでは測れないような価値がSketchにはあるからだ。

UIだけでなく、プロセスをデザインできる。 プロトタイピングはProttやFlinto、プロジェクト管理まで含めるならInvision、エンジニアとの連携ならZeplinなど、Sketchと親和性の高いサービスが続々と登場している。
Sketchなら、これらをうまく組み合わせることでプロトタイピングやコミュニケーション、開発に至るまでのあらゆるプロセスを効率よく進めることができるようになっている。
質の高い無料のUIテンプレートや素材が無数に存在する中で、表層のグラフィックが作れるだけでは半人前。 UIデザインは意図したデザインが機能するように、ビジネスとエンジニアリングの間を行き来しながらコミュニケーションをうまく行っていくことの方が重要だ。
現状、Adobe製品だけではプロセスに関わるツールを完全にカバーすることは難しい。ここに今後もSketchを使い続けるメリットが充分にある。

ユーザーがプロダクトづくりに参加できる。 正直、Sketchは大嫌いだった。心地良くない文字詰め、謎に空きすぎる行間、独特の描画方法のペンツール…。
Adobe製品と比較して出来ないことだらけで、使い始めた頃は不便も多く「全く使えない」と…

「おいしさの期限がせまっています」

無印良品で買い物をしていたときにふとみかけたこのコピー。

 仮にこの言葉が、「処分品」だったら処分されるモノの気持ちになって考えてみると悲しい感じがするし、「お買い得品」だとしても買うときにモノの良さではなく安さに気持ちがいってしまうので、とてもバランスのとれた言葉だなと思います。
もう少し思いを巡らせてみると、世の中にかたちとなってある商品は、誰かの企画からはじまり、商品開発やデザイナーなどがそれをかたちにしたり、生産者や工場の人達がつくり、長い道のりを経て店頭で目の前にあるわけで、たくさんの人達の想いが込められています。 そこに、このキャッチコピーはそのモノや想いに対する気配りが感じられてとても素敵だなぁと感じました。 

無印良品では、ほかにも「わけあって、安い」というコピーもありました。これは、素材や生産行程の手間を省き、包装をシンプルにしたりして、 暮らしのなかで本当に必要なものを、本当に必要な形で届けるというもの。見栄えはよくないけど食べたり、使ってしまえばみんな同じ。消費のためにモノが飾り立てられているような世の中で、その関わり方がどうあるべきかを教えてくれます。

「しぜんとこうなりました」など、無印良品の広告キャンペーンのキャッチコピーは、短い言葉の中にいつも深い意味が込められていて、その哲学に毎回心を動かされますが、こういった現場での小さなコミュニケーションでも徹底した「ていねいさ」を貫くということ。
この積み重ねが芯のあるブランドを形作るのだということに気づかせてくれます。


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

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


必要なときに必要なものだけiOS7ではSafariでスクロールに応じてUIが見え隠れするようになっており、ユーザーの操作やコンテンツに合わせてUIが柔軟に変化するようになっています。
コンテンツを主役にするために、UIはあくまで控えめに。ユーザーが必要とする時に必要なものだけへと柔軟に変化させて、人の動きに寄り添う様なデザインを実現していくことが重要であることを示しています。

変化のデザインApple Introducing iOS 7 - Official VideoUIが要求に合わせて大きく変化するようになり、シンプルになった反面、状態変化を音やアニメーションなどでいかに分かりやすく伝えることが必要になっています。
静的なモックを美しく仕上げること以上に、プロトタイピングツールやアニメーションソフトなどで実際に動かしたり触れて判断し、心地よい変化をつくっていくということを強く意識していかなければなりません。

UIの根幹となるタイポグラフィ iOS7では文字のスペーシングやウエイトを動的に変化させるためのDynamicTypeが新しく搭載され、ロッククスクリーンから、時計アプリにいたるまで、あらゆる部分でタイポグラフィが重要な存在となっています。
シンプルなデザインになった反面、装飾によるごまかしはきかず、文字や罫線などの最低限の要素だけで美しく構成しながらも、UIとして機能させるか。そのためのタイポグラフィスキルがより重要になってきています。

iOS7は通過点あまりに大きな変化のために色々と議論になっていますが、これは…

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

iOS7はフラットなデザインに大きく変更されてついにこのシリーズも存続の危機か!
と、思いましたがさすがのAppleさん、一見変わってない様に見える部分でも徹底して細かな変更がされていました。
正式リリースは今年の秋ですが、ひとあし先にiOS 7の紹介ページにある画像から分かるAppleの匠たちの手の込んだ仕事をどうぞ!


■Wi-Fiアイコン
iOS 7ではステータスバーのアイコンが全体的に小さくなっています。Wi-Fiアイコンはただ縮小するのではなく、それぞれの境界を3pxに維持したままで、アイコンが小さくてもはっきりと見える様に視覚調整がされています。


■回転ロックアイコン
矢印のサークル線が2pxから1pxになって、よりシャープな印象になっています。他のアイコンデザインが全体的に細い線で構成されていることから、iOS 7のフォントHelvetica neueのシャープなイメージ合うようにすべて作り直されたのではないでしょうか。


■時計のアイコン
iOS 7のデザインはジョナサンアイブ氏が主導したということから、よりシンプルなデザインになって、ディーターラムス氏のデザインにより近くなった気がします。 よくよく見るとフォントもOS全体で使われているHelvetica neueにきちんと変更されて統一感が出る様に徹底されています。


■メッセージアプリアイコン
一見単にフラットになっただけで、同じ形に見えますが、補助線をひいてみると吹き出しがより丸みを帯びて大きくなっていることが分かります。 iOS 7のアイコンは右図のようなグリッドシステムを用いているそうで、吹き出しの形もその中にある円で形が構成されており、造形よりも深い設計の部分から統一感が出る様に図っていることが分かります。


■電池アイコンの幅
電池のアイコンの枠がシャープな線になり、少し横長のデザインになっています。 ユーザーがよく見る部分を大きくして電池残量を分かりやすくしたのか、はたまた次期iPhoneのバッテリーが長持ちになる?ということでしょうか。


■アイコンの角丸
iOS 7はアイコンの形状がより丸みを帯びたデザインになって、ホーム全体画面が柔らかい感じのするデザインになっています。 また、9to5Macによるとアイコンの角丸は形状を徐々に変化する「徐変」処理が施されており、インダストリアルデザイ…

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

iPhone5やiOS 6のリリースなど、アップルユーザーにとって目が離せない日が続いていますね。
iOS 6に関しては地図アプリが散々なもので正直ガッカリですが、UIは全体的に使いやすくなって、じっくり観察してみると細かすぎる変更点も健在でした。
大きな変更点に隠れた細かすぎる変更点たち、その涙ぐましささえ感じる進化をどうぞ!

■設定アイコン
iOS 5では歯車の形が尖っていましたが、iOS 6では角が丸くなってソフトなイメージになっています。
OSXの設定アイコンと同じになったのでBack to the macの方針がアイコンでも徹底されているようですね。

■時計アイコン
設定アイコンと同じ様に、iOS 5では時計針のシャープな印象でしたが、6では太さが一定になり、角張った印象になっています。
Apple製品がブラウン製品とよく似ているという事から考えると、ブラウン社のアラームクロックに、よりデザインが似てきていますね。

■ヘッダー
iOS 5では光沢感のある質感になっていましたが、iOS 6ではそれがなくなってマットな質感になり、さらにシャドウが追加されています。
iPhone 5の背面もマット加工がされていることから、ハードとソフト両方の質感を統一してきているということが分かります。

■アクションシートのボタン
ヘッダーと同じ様に、光沢のあったものが、iOS6では光沢感がなくなりマットな質感になっています。
個人的には光沢のある感じも好きでしたが、新しいボタンもグラデーションの感じが綺麗で良い感じですね。

■カメラアイコン
やや角張った印象のアイコンでしたが、iOS 6 ではより丸っこくなってかわいらしい感じのアイコンになっいます。より親しみやすさを重視して来ているということでしょうか。

■キーボードの角
iOS 5ではキーボード下部に角丸の処理が加えられていましたが、iOS6ではそれが無くなって直角になっています。
ジョブズ氏の伝記で、アップル製品で角丸が多いのはジョブズ氏が角丸にこだわっていたから、というエピソードがありましたが、もうその必要性が無くなった、ということでしょうか。

■メッセージアプリ
iOS 4からiOS 5に変わった際に追加されたハイライトの幅が2pxだったのに対し、iOS 6ではそれが1pxになって立体感が弱められています。
吹き出しの質感…