DESIGN ARCHIVE

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

via @uxboy 先日Google+に招待をいただいて、ぼちぼちと使い始めて思ったこと。 リリース当初、Google+のインターフェイスのデザインがfacebookに驚くほど似ている（上記画像参照）という話題がありました。僕自身も、パッと見では同じ様な印象を受けるのですが、なんとな〜くGoogle+の方が見やすくて洗練されているように感じます。 そこで、「なんとなく良い」というなんとなくモヤッとした感覚を、インターフェイスを分解して比較してみることで、具体的に優れている理由をまとめてみました。 1.アイコンの簡潔さ 両者のインターフェイスにおけるアイコンの役割は「一目で何か分かる」ようにすることであり、それが小さくなればなるほど視認性に重点をおくべきだと思います。 その中で、facebookのアイコンは多色かつ線的な表現になっていることで、全体で見た時に少しごちゃごちゃした印象を受けます。 それに対し、Google+のアイコンは色数を抑え、フラットな表現になっていることで、小さなスペースでも視認性が高く、よりシンプルであることで全体のデザインに調和が図られています。 2.ユーザーの空間 facebookの創始者マーク・ザッカーバーグ氏は、自身の広告哲学についてこう言ったそうです。 「ぼくは広告が全部嫌いというわけじゃない。 くだらない広告が嫌いなんだ」 しかし、facebookの広告は文字量が多くてパッと見何を伝えたいのかがわかりづらいものが多く、それがユーザーの混乱を招く一因になっており、現在の広告にその哲学が生きているかは疑問に思えます。 それに対し、Google+はそもそも広告が無いので、ユーザーにとってクリーンな空間であると思います。ベータテスト中なので「今のところ」ですが。 3.文字の読みやすさ facebookはフォントサイズが11px、行間が1.28emとなっていて、文字が小さくて窮屈な印象を受けます。 それに対しGoogle+はフォントサイズが13px、行間が1.4emと、文字が大きく、より広い行間によって読みやすい文字設定になっています。 鈴木一誌氏の『ページネーションマニュアル』において、美しいとされている文字組の行間はフォントサイズの150%〜170％と言われて...

先日発売したタイポグラフィ学習アプリ「Typography Insight」をいろいろと試してみてみました。 書体のエレメントの名称や歴史など、タイポグラフィの基礎を実際に手を動かして学ぶ事が出来て、これまでにない体験は「学ぶ」というよりも実践して「楽しむ」という感覚で、とても面白く、新たな可能性を感じました。 そこで、その面白さをより多くの方に知ってもらいたいと思ったので、Typography Insightについて色々と面白い点を紹介してみたいと思います。 考え抜かれたコンセプト 通常は完成物としてのアプリしか公開されていませんが、Typography Insightはドキュメントとしてアプリが出来るまでのプロセスを詳細に残していて、着想から出来上がるまでの思考のプロセスがとても参考になります。 これまでの紙の本の問題点を解決するところからアプリの企画をスタートしていて、作者は以下の性質を問題点としてあげていました。 比較性 書体同士を比較するのが物理的に難しく、細部を比較する際はIllustratorなどのソフトウェアを立ち上げなければいけなかった。 検索性 書体やデザイナー名前などを調べたりする際の方法が、カテゴリやインデックスなどの大きな枠組みしかなく目的の書体を探し当てるのに手間がかかる。 詳報性 情報のスペースが限られているので見本の大きさが数種類しかなかったりと、書体を詳細に観察することが難しかった。 関係性 ページネーションに従って情報が構成されているのでそれぞれの書体のカテゴリやデザイナーと書体の関係性が分かりづらかった。 デザイナーならどれもウンウンとうなずける内容ですね。 上記にある様な紙の本の問題点を洗い出し、それらを解決した上でipadの様なマルチタッチUIを活かした「簡単かつ手軽に、楽しく学習できる」ということをコンセプトにして開発したそうです。 アプリだけでなく、その背景にある考えやストーリーを共有する事で、開発者とユーザーの両方の視点で考えることができて面白いです。 アナログの体験がそのままに 書体を並べたり、重ねたりと、Typography Insightで行うことはIllustratorなどのソフトウェアでも実現可能ですが、決定的に違うのは実際に文字に触れて操作するということ。そ...

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

タイポグラフィ好きが夜な夜な表参道に集う会、Typetalks第3回に行ってきました。 メンバーは前回と同じヤマダコウスケさん、高岡昌生さん、小林章さんがSkypeビデオでの参加で、今回もタイポグラフィについて内容てんこ盛りのトークが繰り広げられました。 大きな内容として、WEBフォントとはなんぞや？という話から、そのWEBフォントを使ってWEBデザインにおける欧文組版はどこまで可能かについての話でした。 これまでのWEBサイト上の文字は、デザインを優先するために画像化されていたりして、汎用性の面で問題があることが多かったのですが、「WEBフォント」がそれらの問題を解決し「汎用性」と「デザイン性」を両立できることから、これからもっと普及していくだろうという事でした。 では、「WEBフォント」はWEBタイポグラフィにおいて、どういった問題を解決し、何を変えていくのか、「これまで」と「これから」を今回のセミナーの内容を元にまとめてみたいと思います。 ※走り書きしたメモをもとにまとめたものなので、問題点などあれば遠慮無くコメントorツイートいただけると助かります! ■フォントファイルの場所 これまで表示されていたフォントはローカル上のデバイスフォントが表示されていましたが、これからはクラウド上（サーバー上）に置かれているフォントも表示させる事が出来るそうです。 ■フォントの選択 これまではフォントを表示できる数はOSにインストールされているものに制限されていましたが、WEBフォントとしてクラウド上からフォントを表示するようにすることで環境に左右されることなくフォントが無制限に選択出来るようになっていくようです。 ■和文フォントの表示 これまでOSにインストールされているもの以外の日本語フォントを表示するためには数MBもあるフォントデータをまるごとダウンロードさせて表示させなければならず、ダウンロードに時間がかかるためどうしても表示にタイムラグが発生してしまっていましたが、これからは「ダイナミックサブセッティング」というプログラムによってWEBページに表示されている文字のみをダウンロードして表示することで表示速度が改善され、より現実的なものになっていくようです。 ■導入コスト これまではフォントデータをサーバー上に置いて、ブラ...

「みんなで分け合えば、できること。」のポスターを作ってから、予想外の反響にてんやわんやで思考がオーバーヒート状態だったのですが、少し落ち着いてきたので、自分がなぜポスターを作ろうと思ったのか、その過程と広がりを時系列にしつつ、デザイン的な観点で整理して記しておきたいと思います。 1.デザインのきっかけ 地震発生後、テレビなどで被災地の惨状を見るたび、一人の人間として何も出来ないことに歯痒さを感じていました。そんな中、余震が続く東京などでは、少しでも安心したいという気持ちからか、食料品・日用品の買い占め現象が発生し、物資が少ない中で多くの人が必要以上に買いだめする事で、物流のバランスが崩れ「今、本当に必要としている人々」に届かなくなるという事態が起きました。 地震発生直後は落ち着いていたスーパーやコンビニなどが、翌日には買いだめする人たちで溢れ、食料品などほとんどの棚がガラ空き状態になっているのをみて「これは異常だ」と感じていました。 その中で、twitter上で節電を呼びかける「ヤシマ作戦」に続き、物資の譲り合いを呼びかける、どうぞどうぞ精神の「ウエシマ作戦」を広めようという動きがあり、コピーライターの方々が続々と買いだめ防止をよびかけるコピーをツイートしていました。私もその目的のわかりやすさに共感し、「デザイナーとして何ができるだろう」と考えた時に、「買い占めの皆様へ。」という「少しだけ我慢すればどれだけ多くの人を助ける事ができるか」ということが明確に数字にされたツイートを見て、このメッセージをさらに分かりやすく瞬時に伝え、「買いだめ現象の異常さに気付きをもってもらえる様にすること」がデザイナーとして出来る事なのではないかと考えました。 2.デザインの役割 デザインとは付加価値を生み出し、差別化していくための手段だと思われがちですが、原点に立ち返ってみるとデザインは目的を達成するために「情報をより分かりやすく整理する」ということにたどり着きます。 錯綜する情報、刻一刻と変わる状況で、世の中は「スピード」と「分かりやすさ」が求められていると感じ、その状況でデザインの力を活かす事が出来るのではないかと考え、その効果を最大限に生み出せる「インフォグラフィックス」という手法を使おうと考えました。 インフォグラフィックスとは、複雑な内容やイメー...

「みんなで分け合えば、できること。」のポスターを公開したことがきっかけで、ケータイ募金サイト「SAVE MIND, 100 CREATION」に作品を提供させていただきました。 「SAVE MIND, 100 CREATION」とは、復興に向けてクリエイター100人が100作品を提供し、1作品105円でダウンロードすることで、被災地の方々へ全額寄付をすることができるというものです。 「ケータイで募金」という、 手のひらの中の小さな行動でも、みんなを救う力になれる。 今は「自分にできること」を信じて 一つずつ大切に行動していきたいと思います。 こちらのQRコードからアクセスで募金をすることができます。 （ケータイからのみダウンロード可能です） 提供作品はこちらでも見ることが出来ます。 ソニー・デジタルエンタテインメント・サービス公式ブログ Tweet

MIT Media Lab Identity, 2011 from readyletsgo on Vimeo . MIT Media Labのロゴ。 このロゴは40,000通りのバリエーションに変化するそうで、これまでの「ロゴは固定化する」という概念を打ち砕くようなものですね。 バリエーションがある中でも一定の規則性を持たせ、イメージを一貫しながらも動的に変化していく。 視点を変えることで様々な見え方になるということが見事に表現されているようで面白いです。 紙媒体がデジタルメディアに置き換わっていくことで情報量が増えていく。 伝えるメッセージは「質より量」か「量より質」か、デザイナーはメディアの特性を熟知してコミュニケーションを設計していかなければならないですね。 Tweet

なぜ、そうなるのか。 なぜ、そうするのか。 思考をとことん掘り下げる。 アイデアは、その先に待っている。 Tweet

普段はあまり深く意識する事の無い「店頭デザイン」にスポットライトをあてた展覧会『店頭デザイン大解剖展』に行ってきました。 仕事で店頭デザインの制作をやることが多いので、そのネタ探しとして行ったのですが、思った以上の発見がありました。その中で興味深かった発見を3つほど。 ■店頭デザインの重要性 マスメディアの煽動による記号消費が失われつつあるなかで、店頭でダイレクトに消費者に語りかける事ができる様な、即効性の高いものへの重要性が高まってきているそうで、これからはより生活者視点でコミュニケーションを考えていかなければならないということを感じました。 ■多様な店頭デザイン 店頭行動を5つのキーワード「集合力」「サイズ」「目利き」「安心と信頼」「ストーリー」に分類して解説されていて、例えば「サイズ」エリアの商品が極端に大きくなっているPOPなどは「普段は小さいものをあえて大きく見せる事で驚きを演出している」といった様に、さまざまな店頭演出の手法が詳細に解説されていて、店頭デザインとひとくくりにするには余りあるほどバラエティに富んだデザインがいっぱいでした。 ■単に商品が並んでいるだけの買い物は面白くない 「店頭デザイン」は、消費者との空間を多彩に演出する事で、単なる「消費行動」を「お買い物」として多彩に演出することでエンターテインメントとしての役割をはたしてくれているのだと感じました。 入場無料なので、店頭のデザインに関わる人はタダで引き出しが増やせます! そうでない買い物好きな方も、展示に行ってみた後は「お買い物での発見」がより楽しいものになるかと思います! Tweet

「フォントについて参加者同士でオープンに意見を交換しよう!」という、楽しげなタイポグラフィセミナーのTypetalksに行ってきました。 講演された方は有名なフォントブログを運営されているヤマダコウスケさん、欧文組版についての詳細な本を書かれている高岡昌生さん、ドイツにおられる小林章さんがSkypeビデオでの参加でした。ドイツとの距離感を全く感じず便利でありがたい時代だなぁとしみじみ。 本題の講演内容についてでしたが、主にヤマダさんがWebデザインの観点からWebにおけるタイポグラフィについてテクニカルな部分を中心に語られていて、そこに高岡さんと小林さんが気になった事を掘り下げていく感じでした。 その中でも印象的だったのがヤマダさんがグラフィックデザイナーやクライアントとWebの仕事をする時に、文字の扱いに対して認識のズレが結構あるようで、その苦労話が印象的でした。 紙のデザインであたりまえにできることができなかったり、グラフィックデザイナーの作るWebサイトは総じてWebデザインのお作法をわきまえていないなどの話があったり、自分もWebデザインについて色々と勉強中で、違いの部分がイマイチ整理できていなかった部分があったので、それをまとめてみることにしました。 1.フォント グラフィックデザイナーが無数にあるフォントのなかから自由に選ぶのに対して、Webデザイナーは効率さを重視し、文字を画像化するのを好まないため、選びたくても選べない。欧文であればWin&Macに入っている共通のフォントをCSSで使用する事で質の高いフォントを使用する事が可能だが、数えるくらいしか無いのが現状。 2.字間 紙媒体のデザインはコンマ何ミリの世界でこだわりますが、Webの場合だとCSSで字間を設定しても、IllustratorやPhotoshopで文字詰めするように、緻密に設定できないのでこだわりようがない。スクリプトで使用可能ですが、技術的に少しハードルがあがってしまうのが難点。 3.行間 グラフィックデザイナーは行間について気を使うのは当然ですが、紙媒体の場合はスペースに限りがあるのでゆったり組めないことが多い。 反面、Webデザインでは現状の多くのWebサイトを見れば分かる様に、スペースがあるにもかかわらず配慮されていないことが多い。 行間につい...

本当の目的は何処にあるのか。 目の前のタスクにとらわれすぎて、 心が埋もれてしまってはいけない。

日本のデザイン界、アーティスト界の歴史に名を刻んできた「桑沢デザイン研究所」と「東京造形大学」の企画展。多くの優れた人材を輩出している教育機関。その秘密を少しでも探るべく行ってきました。 圧倒的な作品群 約100人の方々の多岐にわたる作品群は、とても密度が濃く、その量の多さから優れた教育機関であることの証明を目の当たりにすることができます。 ユニークな授業 「100円でどれだけ良いデザインをみつけることができるか」という様な課題があるそうで、デザインの視点を養えるようなやり方はとても勉強になりました。 桑沢イズム 教育思想の根幹にある「社会をよりよくするためのデザインを実現するために、デザインをする人間そのものが社会的、良識人でなければいけない」という考えは、現代社会におけるデザインのありかたの源流を成しているのだと思いました。 展覧会を通して感じた事は、徹底して「考える」ということ。 普段、小手先の技術に頼りすぎて本質的に考えることをおろそかにしがちなので、この展覧会を通じて「桑沢イズム」を感じ取る事で初心を思い出す良いきっかけとなりました。 テクノロジーの発達が加速度的に早まっていく中で、それを使って創造する人間の思考は追いついているか。 デザインを過去から未来へと見据えることが出来る良い展覧会です。

「デザインフェスタVol.32」に出展してきました。 出展したのは目盛りタイプのオリジナルふせん「POOK」です。 本に付せんを貼っているときに、貼る高さの位置で優先順位をつけて、それがイコライザーのように見えたら面白いのでは、という発想から始まり、この思いつきのアイデアをどのくらいの方々に受け入れられるのだろうか、という好奇心から出展しました。 始めは色のバリエーションのみで考えていたのですが、ビジネスライクすぎるということで遊び心のある絵柄も追加し、全10種類のふせんの制作と、ディスプレイ、POP、リーフレット、ホームページなど含めて、2人がかりでトータルにデザインしました。 初出展だったので「もしかしたら1個も売れないかも」という不安に包まれながらでしたが、予想以上に好評で非常に多くの得るものがありました。 出展してよかったこと ●お客さんの反応をダイレクトに感じられる たくさんの来場者の中で、興味をもっていただける方はどんな人なのか、商品の説明をしたときのリアクションなどを直に受け取る事で、求められているものはどのような商品なのか、ということを肌で感じ取る事が出来ました。 ●他の出展者の方と知り合える 来場者の方だけでなく、出展者の方も見に来てくだっさって、自分も他の出展を観に行く事で、自然と交流するようになるので様々なクリエイターの方と知り合える絶好の場所です。 ●売れると、とにかく嬉しい 自分が一から考えてデザインしたものが人に受け入れられて、しかも買っていただけたときの喜びは何物にも代え難いです。 本当に、心の底から「ありがとうございます」といったのは何年ぶりだろう、と思うぐらいに充実した気分になりました。 出展で大変だったこと ミニブースだったのでディスプレイなどの準備は少なくて済んだのですが、開催直前の2週間くらい前から他の用事が立て込んできて始めのスケジュール通りにいかず、出展できるかどうかの瀬戸際で、睡眠時間を削ることになった事が精神的にも体力的にも大変でした。 大変だけれども、それを補ってあまりあるぐらいたくさんの笑顔とエネルギーが会場に満ちあふれていて、とても刺激になりました。 この経験を糧に商品のバリエーションを増やしつつ次回出展に向けて、また頑張りたいと思いますので、みなさまぜひぜ...

このところデザインフェスタに出展する関係で更新が滞ってしまいました…。 ぎりぎりですが、近々出展する商品のHPを公開できる予定です。 先日、タイポグラフィ・エクササイズアプリ「EL」を購入しました。 文字好きはマストなのでご紹介。 ipadで直感的に「四角」と「数字の2」という限られた要素を使って画面の構成を学ぶアプリです。 目的としては、Illustratorなどでマウスを使ってオブジェクトをあーでもないこーでもないとやっているのと同じなのですが、実際にオブジェクトに手で触れて自由に動かしたり拡大縮小できるので、アナログともひと味違った感覚で面白いです。 機能としてシンプルな分、限られた制約の中で多様な構成を生み出すことの大切さを実感させてくれます。 このアプリを使ってみて、モリサワの「Fontpark」などがアプリ化されたりすると、またひと味違った操作感になるのでは、と思いました。 このアプリは基礎レベルのもので、レベルに合わせて順次発売されていくらしいので、次回リリースも楽しみです。

システム化されたレイアウトは 合理性を高めてくれる反面、 動的なイメージが低下する。 グリッドを意識するあまり、 思考まで囚われてはいけない。