成熟期に入ったUIデザインとデザインシステム
先進的から最適化へ 3年前、Facebook が今までのニュースフィードを完全に変えた「Paper」というアプリをリリースしました。ネイティブコンポーネントが使われていないオリジナルの UI とインタラクション。今までありそうでなかった新しい操作方法を提案していました。Paper をはじめ、様々な実験的なアプリを Creative Labs としてリリースを続けていましたが、2015 年にラボは閉鎖され、その半年後には Paper も配信停止されました。 今でも Things 3 for iOS のように新鮮な UI とインタラクションが生まれる場があるものの、あまり見かけなくなりました。今のアプリ UI デザインは、目新しいものを作るより、今まで培われたノウハウを基に使いやすさ、見やすさを磨き上げるフェイズに来ています。斬新なアニメーションと目新しい形状のメニューを作るより、ガイドライン
世界最初のWebサイトが教えてくれるデザインの原則
4月30日は World Wide Web にとって重要な日。先日 CERN が、W3 の関連技術をパブリックドメインにしてから、20 年を迎えました。CERN 公式サイト では W3 の歴史を振り返ると共に、1993 年に公開された 最初の Web サイト もオリジナルの URL に再公開されました。 世界最初の Web サイト（上図）は、コンテンツとデザインに関する講演をする際に何度か取り上げています。例えば、2011年ロフトワークが主催した いまさら聞けない！？ 企業のスマートフォン対応 で、20年前に作られたサイトにも関わらずスマートフォン対応されていると紹介しました。 シンプルなマークアップですし、装飾も一切ないので表示されて当然かもしれません。しかし、今まで私たちが作ったサイトの中で、作った当時には予測もしなかったデバイスでも情報をきちんと伝えることができるのがどれだけあるでし
UIだけでもデザインできる理由
UI（ユーザーインターフェイス）は、いつの頃からか魅力的な視覚要素が含まれた GUI として語られるほうが多くなりました。これはある種、デザインを装飾としてのみ捕われてしまう状況と似ているところがあります。 では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。 昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。 人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Huma
デジタルデザインにおける「色あせない」とは
デジタルは色あせないのか 素晴らしいデザインは時代を超えて色あせないなものだと言われています。 建築、産業デザイン、グラフィックデザインなど、色あせないデザインは分野を問わず今でも「良い」と思えるものばかりです。デザインされた当時の社会背景や作り手の想いがタイムカプセルのように詰め込まれているわけですから、時代を感じずにはいられないはずです。しかし、それでも時を超越した魅力があるわけですから不思議なものです。ディーター・ラムスのようなモダンな製品は色あせないと言われますし、ルイ・カーンのような禁欲的でありながらも、テキスチャを大事にした建築も同様に色あせないデザインと言われることがあります。 デザイナーであれば、色あせないデザインをつくりたいと思うでしょうし、それをひとつの目標としている人もいると思います。 しかし、Web をはじめとしたデジタルデザインはどうでしょう。Apple のホーム
情報だけでは価値がない時代の学びの姿
「時代の流れが速すぎて学ぶのが辛い」 「いろいろありすぎて覚えるのが大変」 このような言葉を聞いたことがあります。確かに学ぶことが多いですが、知識との向き合い方で学習の仕方が大きく変わります。学習への向き合い方の変化が、気持ちを和らげてくれることもあります。 昔は情報をもっていることが知識であり、情報を得る方法が学習と捉えられていた時期もありました。故にセミナーに参加したり、書籍を買っても自分が知らない情報があるかどうか、たくさんの情報が書かれているかどうかが評価の基準になり、情報を得たから「学べた」という満足に繋がったのかもしれません。昔の学校の授業は情報が中心なっていたのも、何か関係しているかもしれません。 終着点があった従来の学習 知識を得る方法が書籍、新聞などといった媒体の場合、そこに書かれている情報が知識であり、学びの『終着点』でした。 その理由は媒体の制約が関係しています。 新
機械化によってはじまる未来のデザインプロセス
毎年恒例の年末イベントは、東京は CSS Nite Shift ですが、名古屋の WCAN も毎冬講演しています。今年は「モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン」と題して今後の Web デザインワークフローのヒント紹介しました。チャーリー・チャップリンの名作「モダン・タイムス」をモチーフに講演のシナリオを構築。効率化・機械化が進む、今の Web デザインの世界で、いかにデザインの仕事をしていくのかを 4 つのキーワードに合わせて話をしました。 Content（コンテンツ） Code（コード） Communication（コミュニケーション） Creative（クリエイティブ） 機械 vs. 人間の先にあるもの 上記のデザインを見てください。実はこれ、すべて WordPress のテンプレートです。見たことがないオリジナルのデザインと感じた方もいると思います。
未来をプロトタイプしよう : could
12月15日に年末恒例のイベント CSS Nite Shift が開催されました。今年はカバーする分野もグッと広がり、合計 9 セッションという大イベントになりました。また、参加者のおよそ半数が都外からの方で、 Web サイト制作に関わる専門家たちが全国から集まった日になりました。 今年の基調講演は 未来をプロトタイプしよう というタイトルで話をしました。今年は何度か プロトタイプをテーマにした話 をさせてもらいましたが、昨年から感じていた課題へのひとつの回答だと思っています。 繋げるためのプロトタイプ 昨年の CSS Nite Shift で、従来の Web サイト制作のあり方は終わり始めているという話をしました。当時は、Web サイトを制作することだけを考えるのではなく、利用者が必要としているコンテンツをどのように開発・配信するのかを考えるべきだということを訴えかけました。コンテンツに
模索が加速するユーザーテストのコツと今後の可能性
テストするとは模索すること ユーザーテストをすることのメリットは、Web やアプリの開発に携わる方であれば周知のことだと思います。例えば、スポーツ系 SNS Sidelines は、6 つの異なる A/B テストを実施したことで、コンバージョンを 5% から 55% まで上げることに成功しました。 最近見つけたユーザーテストの面白い例といえば、先月の大統領選挙でのオバマ大統領のメール戦略。キャンペーンEメールの件名を「有権者の皆様にお会いしたいです」のようなよくある件名から、「支出が多過ぎるかも」みたいなちょっと変わったものまで様々なパターンを検証。毎回 10 数パターンをつくった上でベストと考えられる件名をつかって配信されたそうです。いろいろ試した結果、最も寄付金が多かったときのメールの件名が「Hey （やぁ）」。カジュアルな口調を件名にもっていったほうが良い効果を得ることができたそうで
ツールなんてどれでも良いですよ
以前から ピクセルパーフェクトなカンプを作ることに意味はないと話してきました。Photoshop や Fireworks のような絵描きツールは、様々は誤解を引き起しますし、ピクセルパーフェクトな世界を作り上げることは、可変で自由自在に変化する Web の世界では不可能に近いです。開発の初期段階でカンプと呼ばれる架空の完成図を作り込むことのリスクは実は大きかったりします。 しかし、それが「Photoshop / Fireworksを使うな」という意味ではありません。 絵描きツールは、ビジュアル面での試行錯誤するときに大変効果的です。指を動かしただけで、すぐに結果が出てくるというプロセスは、コーディングをしてから見るというプロセスに比べると、直感やクリエイティブを刺激し、模索するという気持ちを促進させます。 たったひとつの最強ツールはない ツールの話で不毛だと感じるのが、「俺のツールは凄くて
メタデザイナーを育成するデザイン教育
今月末から デジタルハリウッド大学院 でプロトタイピングをテーマにしたコースを受け持つことになりました。１時間くらいの短い講義で話をしたり、ワークショップの経験はありますが、数週間にわたって生徒と交流しながら進めていく授業をするのは始めてになります。少々不安ではありますが、今までの経験を活かして教育の分野に貢献できればと思います。 今、デザインの教育に関わることは非常に意味のあることだと考えています。 先月開催された UX Kanazawa で、成安造形大学でデザインを教えていらっしゃる大草真弓さんが参加されていました。大草さんとの懇親会での会話やメール交換は、私の中で大変刺激になりました。デザインといっても製造・制作の要素が強かった従来の捉え方から、全体を見渡した上での設計という考え方にシフトしはじめており、多くの大学や専門学校で変化が見られ始めています。Web デザインは『製造・制作』
体験のレイヤーをつくるWebデザイン
2012年10日6日は、神戸ITフェスティバルの講演に続いて CSS Nite in KOBE でも登壇しました。神戸での記念すべき第一回目ということで、技術話がほとんどない働き方をテーマにした話題が中心でした。私のセッションは、終わりなき Web の旅と題して、予測不能でトレンドも目まぐるしく変わる Web の世界で変わらないもの、目標にできるものを紹介しました。 再考 Progressive Enhancement 今頃「Progressive Enhancement」なんて言葉を使うなんて古いと考える方もいるかもしれません。不幸にも日本語で最適な表現がなく、カタカナ表記でプログレッシブ エンハンスメントとしてもピンと来ないのが、言葉のもつ意味が浸透しないひとつの要因ではないかと考えています。例えば、昨年からよく耳にするようになったレスポンシブ Web デザインにしても、Progres
紙プロトタイピングから始まる問題解決への議論
先週オープンしたばかりの名古屋のコワーキングスペース basecamp NAGOYA で、「プロトタイピングからはじめよう」という題名でセミナー＋ミニワークショップを行いました。今年の春に開催した青森のセミナー以来、2度目のプロトタイピングセミナーになります。前回は、セミナーだけだったのに対し、今回は短めのワークショップ付き。また、プロトタイピング全般の話ではなく、ペーパープロトタイピングにフォーカスした内容にしました。 ペーパーが最強ではない プロトタイピングだけではありませんが、何かを作る話題になると、どうしても「どのツールがベスト？」みたいな話になりがちです。すぐに作れるだけでなく、手を動かすというアナログな感覚が心地良いことから、ペーパープロトタイピングは人気の手法です。しかし、他の手法と同様、弱点がありますし、万能の手法ではありません。 ツールは自分の好みで一途に使うのではなく、
変化する媒体、進化するクリエイティブ
クリエイティブは、媒体の特性と配信方法に影響されることがあります。 音楽の世界を見てみましょう。 アルバムの起源ともいえるレコード（LP）が生まれたのは 1948 年（音楽を録音・再生できるレコード自体は 19世紀からあります）。LPは、両面におよそ 20 数分の音楽を保管することができました。ミュージシャンは 20 x 2 分の範囲に入るように音楽を構成しました。ラベルのデザインも LP ならではのものが生まれましたし、ジャケットにしても同様のことがいえます。 その後、さらに小さく、さらに多くの曲を保管できる CD が普及しはじめます。曲の長さも大幅に増え、トラック数も自在に増やせることから、その特徴を活かした曲が作られるようになりました。裏返して再生する必要がなくなった CD のラベルは、LP に比べて大胆になり、ジャケットも印刷技術の発展の恩恵を受け、デザインも多彩になりました。 ボ
インタラクションと形状の間にあるデザインの行方
7月26日に開催された PARC forum で、ドン・ノーマンと前田ジョンの対談がありました。そのときの模様が公開されていたので、早速見てみました。「デザインは複雑」と言うノーマン氏と、「シンブルを生み出そう」と考える前田氏。デザインの教育からイノベーションまで「デザインとは？」という深い議題についてディスカッションされました。 今回の対談で気になったのが、両者が考えるデザインの視点が異なることから、会話が噛み合ないときがあるという点でした。前田氏は「フォーム（形状）としてのデザイン」の重要性を説いており、フォームが製品と人を繋ぎ合わせる重要な要素であるとしていました。タイポグラフィ、包丁、椅子など、様々な例を通して、フォームが人々に感情を与えたり、機能的なニーズに応えていると話していました。 一方、ノーマン氏は「インタラクションとしてのデザイン」について話していました。人がどのように製
スタートアップとデザインについて
Pinterest, Path, Instagram など、アプリのスタートアップでデザインが重要であると言われるようになってから久しいです。しかし、デザイナーという存在の理解はされているのかというと時々分からなくなります。 考えるきっかけを与えてくれたのが、Wells Riley 氏が公開した「Startups, This is How Design Works」というページ。デザインの全体像が分かる素晴らしいまとめではありますが、デザイナーへの期待値を不意に高めている部分があります。 アプリデザインに絞って考えたとしても、そこで必要とされるデザインは、インタラクション、グラフィック、アーキテクチャ、タイポグラフィ、コーディング、ユーザースタディなど多岐にわたります。これらを総括して「デザイン」と呼ぶわけですが、デザイナーも総括した存在ではありません。インタラクションデザイナーはグラフィ
デザイン話にある三角構造 : could
デザインの話で、ときどき噛み合ないことがあると思います。装飾について熱く語っている人もいれば、論理的にデザインの意図を解説する方もいます。どちらかが間違っているのではなく、デザインの前提が異なっていることから生まれるミスコミュニケーションです。デザイン話にも様々な目的と方法があることを教えてくれた論文があるので紹介します。 2010年に Daniel Fallman と Erik Stolterman が発表した「Establishing Criteria of Rigor and Relevance in Interaction Design Research（厳格で適切なインタラクションデザイン調査ための基準つくり）」という論文があります。サイトから論文の全文（PDF）を読むことができます。 この論文によると、デザイン調査は3つの異なる形式による三角構造になっているそうです。三角構造に
透明化するデバイス、流動化する情報
今必要とされているデザインは、特定のデバイスと、それを使う人を意識したモノ・コトはなく、人のライフスタイルに合わせて流動的に変化する世界観ではないでしょうか。 今のところ電子書籍で Amazon Kindle がリードしていると感じる要因は、細かいことを考えなくて良い流動性にあると考えられます。独自形式ですし、DRM だってもちろんあります。しかし、Kindle (ハードウェア) 以外でも読むことが出来ますし、スマホで読んだ続きを、すぐにタブレットで読むことも出来ます。ページ数を覚えたり栞をする必要もありません。細かい設定は不要ですし、「このデバイスでは読めないかも」と心配することもありません。 昨年から日本でもサービスがスタートした Hulu にも同様のことがいえます。数多くのデバイスをサポートしているだけでなく、自分の視聴履歴が使っているデバイスすべてに同期されます。タブレットで途中ま
Curator's Code からみるWeb共有のもつ課題
尊重のためのシステム Tumblr や Twitter のように、気軽にリブログやポストがしやすいプラットフォームになると、参照元が分からないポストをよく見かけます。お気に入りの画像を Tumblr で見つけても、参照元・作った人が分からないのでクリッピングしないこともあります（又は自分で検索して探すこともあります）。誰でも簡単に情報を共有できるのが Web の魅力ではありますが、参照元が失われることでコミュニケーションの奥行きが失われることがあります。 昨年の震災で明るみになったところがありますが、多くの人は参照元を調べませんし、自分のタイムラインに現れた情報をそのまま受け入れて、再度拡散することがあります。表層的な情報だけが広まるだけで、突っ込んだ情報や議論が見え難くなる場合もあります。何を参照したのか、何を基に情報発信しているのかが分かるだけでも、情報の接し方が変わるのではないでしょ
あなたが定義するWebの仕事を見つけるために
1月13日イマジカデジタルスケープ主催イベントOPEN-iセミナーが開催されました。様々な情報やトレンドが目まぐるしいスピードで流れては消えていくので見定めれない。今までのような作り方では続けられないかも・・・となんとなく思いながらも変えることが出来ない方はいると思います。先月の CSS Nite Shift 5 では、従来の Web サイト制作は終焉を迎えると話しましたが、そこでは「ではどうする？」といった部分は深く掘り下げませんでした。今回は「テクノロジー×クリエイティブ視点でみる、Webの仕事の行方」と題して、今後の Web プロフェッショナルの姿をテクノロジー視点、クリエイティブ視点から紹介しました。 あなたが職種を定義している 「Webデザイナーってなに？」「Webディレクターって何をしてるの？」「これから Web デベロッパーってどうなるの？」みたいな話を時々見かけることがあり
伝わるアニメーションのための第一歩
2011年 UI/UX トレンドで、アニメーションが実装される機会が増えるだろうと予測しました。今はアプリだけなく、Webサイトでもよく見かけるようになりました。実装が簡単に行えることから、何気なく使われていることが多くなったわけですが、正しく実装するのが意外と難しかったりします。 アニメーション効果はコミュニケーションを円滑にするために使われるべきです。アニメーションが発生した瞬間に何かしらのコミュニケーションがインターフェイスと利用者の間に生まれます。つまりアニメーション効果を実装するということは、コミュニケーションの目的を明確にすることから始まります。コミュニケーションを確立しているかどうかで、アニメーション効果がギミックになるのか、意味のあるものになるのか決まります。 アニメーションと一言でいっても様々な形があります。例えば jQuery には以下のようなアニメーションが実装可能で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
