Skip to main content

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

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


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

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

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

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

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

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

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


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


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

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


関連リンク
Typography Insightホームページ
Thesis Paper(制作プロセスの資料PDF)
Typography Insight - cre8ive.kr


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を使うべき大きな理由ではないでしょうか。
ちょっとそこのあなた!

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