構造とプロセスとクリエイティブについて
デザイン思考の盲点 利用者への理解を深めながら新しいプロダクトやサービスを作り出すときにデザイン思考が役立つと言われています。異領域の人たちによるコラボレーションや試行錯誤を繰り返しながら完成に近づけるプロセスは、イノベーションの原動力とも言われています。日本でもデザイン思考を取り入れて新しい価値を生み出している企業が増えてきました。 私もプロトタイプをキーワードとして、デザイン思考を取り入れている人間のひとりではあるものの、デザイン思考による盲点が気がかなりになることがあります。 デザイン思考はプロダクトやサービスを作るための考え方・メソドロジーであるが故に、短期的かつ狭い視野に留まりがちになります。人のもつ課題や不満を解決するのは、プロダクトやサービスである場合も多々あるわけですが、時には社会構造、エコシステム、文化といった部分に注目したほうが効果がある場合があります。 例えば朝の満員
デジタルデザインにおける「色あせない」とは
デジタルは色あせないのか 素晴らしいデザインは時代を超えて色あせないなものだと言われています。 建築、産業デザイン、グラフィックデザインなど、色あせないデザインは分野を問わず今でも「良い」と思えるものばかりです。デザインされた当時の社会背景や作り手の想いがタイムカプセルのように詰め込まれているわけですから、時代を感じずにはいられないはずです。しかし、それでも時を超越した魅力があるわけですから不思議なものです。ディーター・ラムスのようなモダンな製品は色あせないと言われますし、ルイ・カーンのような禁欲的でありながらも、テキスチャを大事にした建築も同様に色あせないデザインと言われることがあります。 デザイナーであれば、色あせないデザインをつくりたいと思うでしょうし、それをひとつの目標としている人もいると思います。 しかし、Web をはじめとしたデジタルデザインはどうでしょう。Apple のホーム
ネイティブ広告は新たな接点をつくれるのか
昨年頃から注目を浴びている広告形式で「ネイティブ広告（Naitive Ads）」というのがあります。詳しくは Techcrunch（米）のコラム Where You Can Go Right, And Wrong, With Native Ads を参照していただきたいですが、様々なメディア媒体の形式に合わせた広告を指します。例えば Tumblr の右側にある「Tumblr Radar」のように、見た目がサービスのデザインに馴染んでいて、あたかもコンテンツの一部のように見えるものが多いです。 私が最初にこのタイプの広告を見たのは、数年前の Digg でした。昨年に大幅リニューアルしてしまったので今はありませんが、スポンサーのニュースが他と同じデザインでリストに紛れ込んでいました（もちろん Sponsored という表記はありましたが）。最近だと Facebook が Social Grap
保存アイコンでみえてくるアイコンデザインの勘違い
先日 Goodpatch さんが 保存アイコン＝フロッピーディスクの時代は終わった…？ という興味深い記事が掲載されていました。フロッピーディスクを保存アイコンをとして採用するのは古いのではないか、という議論は国内外で何年かに一回はあります。私も 2009 年に変わりゆく「保存」の存在と題してフロッピーディスクアイコンのあり方も踏まえて、今後の保存の姿を模索していました。また、先月開催された Android Bazaar Conference 2013 Spring でも同じ話題に触れています。 アイコンと問題解決について 様々なデザイナーが新しい保存アイコンを提案しているものの、「うん、これは保存だ」と納得できたものはほとんどなかったと思います。ダウンロードにみえるものも少なくありませんし、中には抽象的すぎて何を意味しているのかさえ分からないのもあります。自分たちのクリエイティブアウトプ
2012年 デザインの4つの課題
ここ 1, 2 年でアプリが爆発的に増えただけでなく、スマートフォンの普及により Web がさらに身近になりました。便利な世の中になったかのように見えますが、今見るトレンドから新たな課題が浮き彫りになりました。今年末から来年にかけて、デザインの観点から解決していきたい課題が 4 つあります。こうした課題を Web やイベント、会合を通して議論できたらなと考えています。 一貫性のないジェスチャーインタラクション マルチタッチスクリーンは、インタラクションデザイナーに新たな可能性を提示たのと同時に、大きな課題を残しています。ジェスチャーUIの課題と対策でも指摘しましたが、現状ジェスチャーにはスタンダードと呼べる操作がなく、アプリごとに異なる解釈をしています。 iPhone のメールアプリで左から右へスワイプをすると「削除」のボタンが右側に表示されますが、同じジェスチャーを Twitter 公式
レスポンシブとか、そういうことの前に
レスポンシブWebデザインに関する話題を見渡すと、そこまで気にして実装を踏みとどまる必要ってあるのかな？と思うことがあります。 もちろん、レスポンシブWebデザインがパーフェクトなソリューションではありません。しかし、Webにおいてパーフェクトなソリューションが存在するのでしょうか。簡単に作れるツールがないから。古いブラウザへの対応が困難だから。レスポンシブに画像を対応するための最適な方法がないから。実装をしないための理由はいくらでも作ることができますが、実装しない理由は、スマートフォン専用サイトを作ることでも、CSSレイアウトにすることでも、たくさん並べることができます。 Webは完璧な世界ではありません。そして、完璧な世界が訪れることを期待してはいけない場でもあります。予測不可能な世界であり、すぐに新しいものスタンダードになる世界。不完全でありながらも、進化を繰り返すのが Web です
SwapSkillsでモバイルを意識したWebコミュニケーションの講演をしました : could
モバイル講演 SwapSkillsでモバイルを意識したWebコミュニケーションの講演をしました SwapSkills doubbble01 にて「Mobile First:モバイルファースト」が意味する今後のWebコミュニケーションデザイン という講演を行いました。モバイル先進国・日本でモバイルファーストの考え方はどのように適応させるのか、そもそもモバイルファーストにはどのような意味が隠されているのか話しました。 7月2日、野村カンファレンスプラザ日本橋にて SwapSkills doubbble01 というセミナーが開催されました。7 人のスピーカーから、概念的なところからコーディング、UI設計、パフォーマンスという様々な側面からモバイス向けの Web サイト制作の今を検証しました。私は 「Mobile First:モバイルファースト」が意味する今後のWebコミュニケーションデザイン と
OpenCUでオンラインゲームについて話しました : could
ゲーム講演 OpenCUでオンラインゲームについて話しました ゲームから学べるのはゲームの仕組みや UI だけではありません。今後、ソーシャルメディアがソーシャルシステムとして実世界にも欠かせない存在になるのであれば、オンラインゲームに存在する社会構造と人々のコミュニケーションの仕方は参考になるかと思います。 8月26日 OpenCU にて WEBの未来はオンラインゲームにあるというイベントを開催しました。昨年の WCAN でゲームをテーマにした講演を行いましたが、Web サイト制作と直接関係ないようにみえるところから、なかなか話す機会がありませんでした。最近は Gamification（ゲーミフィケーション）のような流行語が日本でも聞かれるようになったことから多少話しやすくなったものの、ゲーム的な仕掛け作りだけが学べるところではないと以前から考えていました。今回は仕掛けや UI といった
Kinectから始まる新しいインタラクション
既に 1000 万台が販売されていると言われている Microsoft Kinect。コントローラーを持たなくても身体を動かすだけで様々な操作を実現するこのデバイス。USB接続を使用していることもあり、発売開始直後から、PC や Mac に接続をしてハッキングをする方が続出。プログラミングのためのプラグイン・アドオン・ライブラリが続々と登場しました。久々にモノ作り魂に火が付いた方も少なくないと思います。 こうした開発者達の草の根活動を禁止することは出来たはずですが、あえてそれをしなかった Microsoft はさすが。先日、公式の SDKがリリースされたことにより、今後さらに Kinect を活用した試みが増えるでしょうし、実際に使えるサービスとしてビジネスを始める方も出るかもしれません。もう Kinect ハックではなく、正式な Kinect 開発になったわけです。 医療、教育、マーケテ
WD101: Webは見た目のコントロールがきかない
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
Bandcampが提案する今時の音楽販売
もう１年半くらい前からありますが、Bandcampは音楽系のサイトではトップレベルのサイトです。デジタルミュージックを販売するサイトはたくさんありますが、ここは幾つか工夫がなされています。 音楽配信に最適化されたカスタムページ 非圧縮ファイルをアップロードすれば、複数フォーマットに自動変換される ミュージシャンは無料から有料まで自由に設定できる 音楽に反応して動くビジュアライザ付き リスナーが値段を決める形式にも対応 低音質は無料で高音質は有料という分類が可能 豊富な共有オプション どの音楽を最後まで聴いて、どれをスキップしたのか分かるアクセス解析 自分の音楽が何処で話題になっているか分かるリファラ表 ソーシャルメディアを利用するユーザーを意識したデジタルミュージック販売のひとつの形を Bandcamp は提案しているわけですが、デジタルだけでなく CD/レコード販売でもおもしろい試みを始
UXの測定項目を考えてみた
日本でも UX デザイナーと名乗る方が増えてきましたが、去年あたりから Web では一種のバズワード的な存在になっている UX (User Experience)。『バズワード』と書きましたが、重要と感じている方が多くいるからこそ注目されているわけですし、流行から次のステージに進んでいるのも事実です。デザイナーと呼ばれている方はもちろん、Web サイトを構築する様々な職種の方が UX に反応しているのをみると、ひとつの共通言語 (認識) として重要なポジションになる可能性を秘めています。 ユーザーテスト、ペルソナ設定、アジャイル開発など、水準の高い UX を実現するための様々なアプローチが存在しますし、今でも模索が続けられています。作り出すほうだけでなく、作った後、つまりサイトの測定方法はどうでしょうか。UX を意識して作ったまでは良いですが、それをどう評価すれば良いのでしょうか。ページビ
機械的に評価をしない私たちだから
私たちは様々なことに対して「よかった」「イマイチだった」と評価することがあります。食べ物や音楽もそうですし、私たちが毎日のように利用する Web サイトもそうです。例えば食べ物を評価するとしましょう。その際、評価で最も重要となる要素は味です。食べ物であるわけですから、味が重要なのは当然ですが、果たして私たちは本当に味だけで食べ物を評価しているのかといえばそうではありません。場合によっては味が評価の際に最も重要な要素ではない場合もあります。 例えば、誰かのホームパーティに誘われたとしましょう。 そのときに出て来きたものは、腕のいいシェフが最高の食材を使って料理した食事にはほど遠いものです。コンビニで買った食べ物の味の方が良かったのかもしれません。しかし私たちはきっとそのホームパーティで食べた食事を「とても美味しかった」と記憶すると思います。 私たちは味だけでなく、どのような場所で誰と一緒に時
自由になったWebの情報と広告について : could
ビジネス講演 自由になったWebの情報と広告について 某紙媒体の企業が開催している勉強会に参加しました。紙の良さを受け継ぎつつ、いかに紙の概念から離れて Web に最適化させるかという課題があります。それは単に情報の配信方法だけでなく広告モデルも含まれています。 先日、某紙媒体の企業が定期的に開催している勉強会にゲストスピーカーとして参加させていただきました。紙媒体でのビジネスが中心ですが、豊富なコンテンツを揃えた Web サイトを長く運営しているこの企業。去年から社外の方を招いて今後の Web での展開を模索するために勉強会を開いているそうです。Webサイト制作だけでなくマーケティングに近い分野まで広げて講演をすることがあるので、こうした制作に特化しないところで話が出来て非常に有意義でしたが、同時に訪れた企業のビジネスモデルについて知識をもっているわけではないので、どこまで伝えることが出
OmniGraffleを便利に使うあれこれ
制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作りで便利な使い方を幾つか紹介しましたが、今回も最近（やっと）見つけたものも含めて6つ紹介します。 下準備を忘れずに Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は手前に表示したほうが作りやす
メタファーが作り出す期待値と使いやすさの関係
Webをはじめとしたテクノロジーを利用したものには、馴染みのない機能や象徴的で捉え難いアイデアがあります。それらをスクリーンショットで見せたり、分かりやすい解説があったとしても伝わらない場合が多いです。そこで、他にある似たようなものと関連付けさせて理解しやすくします。これを私たちは「メタファー」と呼びます。 メタファーはパソコンの中にたくさん見ることが出来ます。アイコンデザインがその代表格です。絵としてフォルダを表現することで、頭の中で「幾つかの書類をまとめることが出来る」という本物のフォルダと関連付けがしやすくなり、操作を促すことが出来ます。フロッピーディスクアイコン (保存)のようにメタファーからシンボルへと進化した例外もありますが、機能やインタラクションを説明せずに利用者に伝えることが出来るメタファーは、アプリケーションデザインやWebデザインでよく使われます。 メタファーが作り出す
ロイターが新聞向けに視覚化サービスを開始
部数が減って苦しい状況に置かれている新聞ですが、その新聞に向けて新しいサービスをロイターが提供を開始しました。Reuters Financial Infographics は、ファイナンスデータを視覚化したものを、新聞社のニーズに合わせて提供するというもの。すべて自動化されているこのサービスは、紙面の大きさに合わせて作成してくれるだけでなく、特定の企業や業種に絞るといったカスタムビューも作ってくれます。印刷にも耐えられる EPS か PDF で、決まった日時にデータが送られるそうです。 以前、執筆した「ウェブらしい新聞サイトのあり方とは」という記事で、新聞サイトはサービスプロバイダーになるべきだという話をしました。コンテンツを制作し、配信するだけでなく、サービスという価値を負荷することでマネタイズ出来る可能性はあるのではないかという提案をしましたが、ロイターの試みはまさにそれといえます。ロ
ブラウジング型インターフェイスの長所・短所
検索は Web が使われるようになってから続く永遠の課題。技術だけでなく検索結果の見せ方も年々進化してきています。近年、セマンティック Web への注目が一層高まっていることから、また検索がおもしろくなりそうな気配です。検索の精度、そして結果を利用者に示すためのインターフェイスへの探求はこれからも続きますし、デザイナーとして興味深い話題のひとつ。 検索（特に検索結果）と少し関係があるデザインパターンのひとつにブラウジング（Browsing）があります。多くの情報を次々を観覧するのに長けているわけですが、最近ブラウジングを採用したサービスや Web サイトをよく見かけるようになりました。 Google Fast Flip ニュースサイトをページをめくるような感覚で次々と見ることが出来ます。キーボード操作で次々とページを移動。ローディング時間も含めサクサク Cooliris YouTube や
404ページのデザイン提案【中編】
なぜ 404 ページが表示されたのか、そして利用者が出来る次のアクションが何かがみえてきました。これからいよいよ大まかなレイアウトのスケッチに入るわけですが、もうひとつ考えておきたいことがあります。ページに表示させたい項目だけでなく、必要でないと考えられる要素も洗い出しておくと、スケッチが最初の段階からある程度洗練されたものになります。 通常のページでは必須項目でも目的が絞られてるページだとそうではない場合があります。「あっても良い」「もしかすると誰か必要になるから」くらいの要素は目的が絞られているページでは省いてしまっても良いと思います。要素を最小限に絞り込むことで、ページで伝えたい目的がより明確になるでしょう。サイト内のリンクからで 404 が表示される割合より、サイト外からのアクセスで 404 が多く表示されています。そこで、サイト内でいろいろ読みたいけど行き詰まった人というよりかは
404ページのデザイン提案【後編】
スケッチをすることでページの大まかな形が見えてきたところで、早速コーディングに入りました。404という1ページの課題なので、そうしているというのもありますが、最近は Photoshop とかでビジュアルを固めないままマークアップを記述することがあります。結局ブラウザで表示される状態でないと分からないこともありますし、骨格の状態から徐々に色や雰囲気を加えて行く作業は結構楽しかったりもします。構造への意識もしやすいですし、この時点でまたレイアウトを吟味出来る機会があるという意味でもメリットがあると思います。こういう作り方をしているので、ブラウザのデバッグツールが充実しているのは非常にありがたいです。 すべての案件でそうしているわけではないですが、今後はそうしていきたいですし、素早く骨格（又はプロトタイプ）が作れるようにならないといけないなと思っています。CSS3がもっと使える状態になれば、さら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
