タイポグラフィを「学ぶ」から「楽しむ」体験へと変える。Typography Insight。

先日発売したタイポグラフィ学習アプリ「Typography Insight」をいろいろと試してみてみました。
書体のエレメントの名称や歴史など、タイポグラフィの基礎を実際に手を動かして学ぶ事が出来て、これまでにない体験は「学ぶ」というよりも実践して「楽しむ」という感覚で、とても面白く、新たな可能性を感じました。
そこで、その面白さをより多くの方に知ってもらいたいと思ったので、Typography Insightについて色々と面白い点を紹介してみたいと思います。

考え抜かれたコンセプト通常は完成物としてのアプリしか公開されていませんが、Typography Insightはドキュメントとしてアプリが出来るまでのプロセスを詳細に残していて、着想から出来上がるまでの思考のプロセスがとても参考になります。
これまでの紙の本の問題点を解決するところからアプリの企画をスタートしていて、作者は以下の性質を問題点としてあげていました。

比較性
書体同士を比較するのが物理的に難しく、細部を比較する際はIllustratorなどのソフトウェアを立ち上げなければいけなかった。

検索性
書体やデザイナー名前などを調べたりする際の方法が、カテゴリやインデックスなどの大きな枠組みしかなく目的の書体を探し当てるのに手間がかかる。

詳報性
情報のスペースが限られているので見本の大きさが数種類しかなかったりと、書体を詳細に観察することが難しかった。

関係性
ページネーションに従って情報が構成されているのでそれぞれの書体のカテゴリやデザイナーと書体の関係性が分かりづらかった。

デザイナーならどれもウンウンとうなずける内容ですね。
上記にある様な紙の本の問題点を洗い出し、それらを解決した上でipadの様なマルチタッチUIを活かした「簡単かつ手軽に、楽しく学習できる」ということをコンセプトにして開発したそうです。

アプリだけでなく、その背景にある考えやストーリーを共有する事で、開発者とユーザーの両方の視点で考えることができて面白いです。

アナログの体験がそのままに

書体を並べたり、重ねたりと、Typography Insightで行うことはIllustratorなどのソフトウェアでも実現可能ですが、決定的に違うのは実際に文字に触れて操作するということ。それによって、マウスやキーボードを介する事無く、書体をプリントアウトして切り貼りするように、従来の方法論で書体に触れることで、書体に対するバランスの繊細な感覚を身につけることができます。

進化する教科書

現在のインターネットでは完成されたプロダクトを世の中に出すよりも、不完全な物をユーザーの声を聞きながら協同で作り上げていった方がうまく行くといわれています。
Typography Insightも現在は基礎的なものだけで、搭載フォントや書体関連検索の機能、日本語や中国語など他言語対応していくとのことで、これからの進化が楽しみです。

テクノロジーの進化が、学びの体験を変えていくということを体感できる。
タイポグラフィに関わるすべての人へ、必携のアプリです。

関連リンク
Typography Insightホームページ
Thesis Paper（制作プロセスの資料PDF）

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

icloudのアイコンに隠れた美しさの法則。

Thank you for coming to my blog! this article English version is here. 先日のWWDCで発表されたicloud。アップルのクラウド本格参入ということで色々とサービスが話題になっていますが、相変わらずアイコンのデザインも綺麗に仕上がっていますね。では、なぜ美しく見えるのか、少し視点を変えてアイコンのデザインそのものに注目して、その美しさの理由に迫ってみたいと思います。まずは、なんとなく眺めてみましょう。雲の輪郭が不規則な曲線を描きつつも、とてもバランスのとれた形になっていますね。ワラのなかから一本の針を見つけるぐらい、とまではいかないと思いますが、シンプルでバランスのとれた形にしながらも雲に見えるような形に定着させるのは、簡単そうに見えて意外と難しく、磨き抜かれたデザインだということが分かりますね。なんとなく眺めているだけでは美しさの理由に迫れないので、もう少し目を凝らして見てみましょう。勘の良い方は既にお気づきだったかと思いますが、形の中に4つの円が隠れていることに気がつきます。一見、何となく描いたように見えるカーブでも正円で構成することでバランスのとれた形になっていることが分かります。つまり、「アイコンの美しさは幾何学で構成することにあり」ということが分かるわけですが、単純にランダムな円を配置していくだけでバランスのとれたデザインに仕上げることができるか、と考えるとあらゆる可能性が頭をもたげ、少し疑問に思えてきてしまいます。そこで、さらなる理由を追い求めて、今度は円の直径を測ってみました。すると… なんとまあ、それぞれ左右の円の比率が1：1.6と、見事に黄金比に近い比率になっているではありませんか。さらにさらに、雲の形の比率も調べてみると…。まさに、「One more thing」。幾何学だけでなく、黄金比のような原理的な法則を駆使しながら、美しさを無意識に訴えかけるスキのないデザインに仕上がっていますね。まとめてみると… ・曲線を幾何学で構成（補正）することでバランスのとれた形になる・細部のランダムな大きさの中にも一定の法則を適用することで、全体的にバランスのとれたデザインになるシンプルなのに奥深い。

細かすぎて伝わりづらい! 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に変わった際に追加

DESIGN ARCHIVE

Search This Blog