Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。

デザイン

Webにもある色あせない考え方

その昔、私も書籍を出していたことがありました。 2005年の春、まだ日本では「Web 2.0」という言葉がほとんど耳にされなかった時期に「Web Designer 2.0 進歩し続けるWebデザイナーの考え方 [https://www.amazon.co.jp/dp/4883374327/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=4883374327&adid=1JAWTDWQDZ87WYPYW4N2&] 」という名の書籍を出しました。扱ったトピックが広くて浅く、中級者向けだったということもあり、それほど多く売れたわけではありませんが、今の私の考え方の基礎が執筆を通して形成された書籍です。 今はもう使えない技術話もチラホラありますし、振り返ると非常に恥ずかしい文章を書いていたので、

プレゼン

結ぶWebを作っていこう

7月9日と17日に楽天トラベルサマーフォラム 2012 [http://travel.rakuten.co.jp/forum/2012/] が開催されました。全国の宿泊施設に関わるおよそ 2,000名の方々が、東京と大阪に集結。楽天トラベルという名のひとつのコミュニティの「お祭り」と言えるイベントでした。こうした大きな舞台で話すということで当日の直前まで緊張していましたが、基調講演後にあった名刺交換の列は、フォーラム史上最長の大盛況でした。お客様の中で「今までで一番良かった」と言ってくださる方もいて、正直ホッとしました。 フォーラムでは、基調講演、分科会、ミニセッションと3つの講演を行いました。大きな世界観の話から、実践的なことまで様々な切り口で話しましたが、ひとつのテーマとして「結び」があったと思います。 世界中の人々とネットワークで繋がっていることから、 Web は情報拡散や自己アピールをする場に適しているように見えます。Webを大きなインタラクティブビルボードのように捉えた作り方をしているところは少なくありませんが、私は Web のポテンシャルを最大限に引き出すのはアピール以

デザイン

デザイナー育成のための3つのキーワード

Don NormanEngineering Design Education Engineers are trained in narrow specialties but do not get the broad systems thinking or the appreciation of human-centered design necessary for engineering design in the 21st century. 2008年なので、少し古い Don Norman 氏のインタビューですが、共感するところが多々あったので紹介。近年のエンジニアや徹底的に狭い分野で技術力を磨いていくものの、広い視野をもって思考できる者が少ないと指摘しています。彼の「エンジニア」という言葉は「デザイナー」と置き換えて考えることができます。複雑な課題に対して「何か」を作る際に、特殊化されたスキルは役に立ちますが、そもそもの課題の解決のプロセスには、

Webデザイン

レスポンシブとか、そういうことの前に

レスポンシブWebデザインに関する話題を見渡すと、そこまで気にして実装を踏みとどまる必要ってあるのかな?と思うことがあります。 もちろん、レスポンシブWebデザインがパーフェクトなソリューションではありません。しかし、Webにおいてパーフェクトなソリューションが存在するのでしょうか。簡単に作れるツールがないから。古いブラウザへの対応が困難だから。レスポンシブに画像を対応するための最適な方法がないから。実装をしないための理由はいくらでも作ることができますが、実装しない理由は、スマートフォン専用サイトを作ることでも、CSSレイアウトにすることでも、たくさん並べることができます。 Webは完璧な世界ではありません。そして、完璧な世界が訪れることを期待してはいけない場でもあります。予測不可能な世界 [http://www.yasuhisa.com/could/article/unknown-future/] であり、すぐに新しいものスタンダードになる世界。不完全でありながらも、進化を繰り返すのが Web です。Webが不完全であるのと同じように、ソリューションも不完全なものばかりです(普及

意見

私たちはすべての人と友達になれるのか

ソーシャル。ソーシャル。ソーシャル。 今、この言葉を聞かない日がないくらい耳にしています。そして、様々な言葉がソーシャルと組み合わせて使われることがあります。ソーシャルリーディング、ソーシャルラーニング、ソーシャルファンディング、ソーシャル医療・・・。おそらく私たちの行うすべての行動はソーシャル化され、ソーシャルという言葉を使う必要がなくなる日が来るのかもしれません。 ソーシャル化される・・・これは、私たちの情報が公の場にさらされ、すべての人が何かしらの形で繋がっているネットワーク化された状態です。人との繋がりや影響力がネットワーク化された社会では重要と考えられているからこそ、評価経済や評判経済という言葉が生まれてきたのでしょう。 人と人とが繋がり合い、新たな可能性を生み出すソーシャルな世界。常にネットワークにいるからこそ、心を支え合うこともできるかもしれない。Sean Parker 氏が、彼の新しいスタートアップ Airtime を語るときに使った言葉が「Eliminate Loneliness [http://thenextweb.com/apps/2012/06/05/se

コンテンツ

設計のヒントを生み出すコンテンツ要素の視覚化

今後のコンテンツ配信、これからの Web と人との関係を考えると、ページというメタファが足かせになることがあります。Webサイト設計者はページという概念を捨ててデザインをしなければならないと、CSS Nite in TAKAMATSU vol.6 [http://www.yasuhisa.com/could/article/cssnite-takamatsu/] をはじめ、幾つかの講演を通して話してきました。 とは言うものの、現状 Webページという情報を束ねる単位は必要とされていますし、何か枠組みがなければデザインすることもできません。もちろん、ページを作るなと言っているわけではなく、ページを作る前に、まずはページから離れてコンテンツの設計を始めたほうが良いという意味です。ページという四角形の枠組みの中に、コンテンツやナビゲーションといった要素をパズルのように置いていく作業に入る前に、コンテンツの全体像を掴む必要があります。 コンテンツを細分化し、関連づけさせることで、実際のページ設計に役立つだけでなく、運営やシステム構築にも重要な役割を果たします。 ここで言う細分化とは、プレ

UX

文化が作り出す利用者との関係

作り手の視点だと、どうしても製品・サービスそのものだけにフォーカスして善し悪しを判断することがあります。しかし、製品そのものは利用者体験において、ほんの一部でしかありません。製品と使う人との1対1の関係だけではなく、そもそも製品に触れようと思った『何か』があります。それは、内の感情に響くものであったり、製品・サービスと個人的な繋がりや、感情移入になることがあります。『何か』とは文化であり、文化が今、製品・サービスにおいて核となる存在になりつつあります。 例えば Pinterest [http://pinterest.com/yhassy/] を見てみましょう。 Pinterest は、2011年にブレイクしたイメージブックマークサービス。Bookmarklet を使って Web ページの画像をクリッピングするというコンセプトは、目新しいものではありません。Tumblr [http://tumblr.com] を真っ先に思いついた方もいるでしょうし、Wists [http://wists.com/]のような類似サービスは 2006年くらいからあります。技術やアイデアに革新的なものが何

デザイン

妥協の先にあるデザイン視点

本当に妥協のない体験なのか Microsoft が自社製のタブレット Surface [http://www.microsoft.com/surface/en/us/default.aspx] を発表しました。着脱可能な超薄型キーボードを搭載。タブレットとしても、ノートパソコンとしても使うことができるのが最大の特徴です。 2012年4月、東京都内で開催された開発者向け会議「BUILD」で、あらゆる機器で「妥協のない」体験 [http://pc.nikkeibp.co.jp/article/news/20120424/1047264/"]を Windows 8 は提供できると話していましたが、それを形にしたのが Surface だと思います。ひとつの OS でタブレットもノートも関係なく操作ができるという、Windows 8 の強みを活かしたプロダクトといえるでしょう。 両方ともで使えるということに「妥協をしていない」Windows

Webデザイン

Transformative Web Design という言葉に隠された意味

6月9日に開催されたSwap Skills doubbble05 [http://swapskills.info/doubbble/05.html] で、基調講演を行いました。昨年に引き続き二度目の基調講演。昨年は、迫り来るモバイル機器中心の世界に備えてコンテンツファースト [http://www.yasuhisa.com/could/diary/swapskills-doubbble01/] を実践しようというのがテーマでした。今年は「Transformative Web Design ~変化にしなやかに対応するデザイン力~」と題して、コンテンツを Webという特有の場でより活かし、デザインしていくのはどうしたら良いのかというテーマで話をしました。 既に日本のスマートフォンユーザーは 30%を超え、タブレットをはじめとしたパソコン以外で Webへ接続できるデバイスが増え続ける今日。「Webはもうパソコンだけのものではない。むしろ、マイノリティである」という考えも、昨年では予測でしかなかったかもしれませんが、既に現実になっています。デバイスという垣根を超えて、利用者が欲しいタイミング

デザイン

デザインの試行錯誤とラグをなくすプロセス

ワイヤーフレームやスケッチで、ある程度カタチになっているアイデアも、スクリーン上に実際に描いてみないと分からない場合があります。ラフでは良い感じに見えるものでも、いざ色を付けたりレイアウトを組み上げていくと「あれ?」と思うこともしばしば。ワイヤーフレームやスケッチとして出てきた設計図をそのまま型にすれば上手くいくというわけでもないのが、デザインの難しいところであると同時におもしろいところです。 Photoshop [https://www.amazon.co.jp/dp/B007STFL50/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B007STFL50&adid=1SDQQZA8J767WJSDH9D2&] や、Fireworks [https://www.amazon.co.jp/dp/B007STFV9G/ref=

デザイン

触れる・動くによって変わるデザインプロセス

5月26日、青森にて今後のWebサイト制作との向き合い方 [http://www.aoit.jp/20120526/]というイベントが開催されました。今回は これから求められるWebコミュニケーションスキルと題してプロトタイピングの基礎を解説しました。 CSS Nite in TAKAMATSU [http://www.yasuhisa.com/could/article/cssnite-takamatsu/] のとき「静的なカンプは過去の手法」と話しましたが、ではどうしたら良いのかを考えるキッカケとして本セミナーは参考になったかと思います。 「とりあえず見せて」の解釈について 人は誰しもアイデアをもっていると思います。 自分の頭の中ではハッキリしていたとしても、人に伝えることが出来なければアイデアは活かされることはありません。アイデアはどうすれば伝えることが出来るのでしょうか。 「話せば分かる」という言葉がありますが、そう簡単にはいかないのが現実。同業者で同じような知識を持っていたとしても、同じ言葉が違ったふうに解釈される場合があります。 Webサイトデザインのアイ

UI

UXとUIが混同されるワケ

最近 UX [http://www.yasuhisa.com/could/tag/ux/] と UI [http://www.yasuhisa.com/could/tag/ui/] を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させた [http://www.yasuhisa.com/could/article/ui-ux-2011-trends/]ことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例 [http://design.org/blog/

講演

楽天トラベルサマーフォーラムで基調講演をします

昨年の暮れから今年にかけて精力的に講演 [http://www.yasuhisa.com/could/tag/%E8%AC%9B%E6%BC%94/] を行っているわけですが、7月に私的なビッグイベントがあります。 7月9日と17日に開催される楽天トラベルサマーフォーラム 2012 [http://travel.rakuten.co.jp/forum/2012/] に登壇することになりました。東京、大阪で合計およそ2000名が参加されるこのイベント。毎年、楽天トラベルに登録されている宿泊施設の方々が参加されており、分科会、アワード、展示会がある盛りだくさんの内容。一般の方には知られていないイベントではありますが、その規模をみると、大きなイベントということが分かります。 過去を振り返ると錚々たるメンバーが基調講演を行っているわけですが(例えば昨年は安藤忠雄氏)、今年は私が基調講演という大役を受けさせていただくことになりました。昨年末の CSS Nite Shift5 [http://www.yasuhisa.com/could/article/shift5-the-end-of-w

コンテンツ

利用者の意図から探るサイトデザインの最適化

以前から文脈によってコンテンツ配信が活かされる [http://www.yasuhisa.com/could/article/context-content/] という話はしてきました。テクノロジーを活かすことで、適確な文脈を読み取ってコンテンツ配信が可能になるのではないかという提案をしてきたわけですが、デザインプロセスとしてコンテキストを考えることが重要になることもあります。今回は企業の製品ページに注目して、文脈とコンテンツ配信がどう結びついているのかを検証していきます。 [http://mb.softbank.jp/mb/smartphone/product/104sh/]機能や料金がすぐ分かる HTML ベースのページ。表示速度もはやく、ページ遷移も機敏。 [http://k-tai.sharp.co.jp/dash/s/104sh/special/ ] 雰囲気を重要視した Flash サイト。読ませるというより、眺めることを目的としている。このように製品ページに HTML版と Flash版と 2つ用意されていることがあります。 同じ AQUOS PHONE の紹介ページです

デザイン

Paul Randとデザインと私

ポール・ランド [http://ja.wikipedia.org/wiki/%E3%83%9D%E3%83%BC%E3%83%AB%E3%83%BB%E3%83%A9%E3%83%B3%E3%83%89] の名前を知らなくても、彼のデザインは私たちの身の回りにたくさんあります。IBM, Apple, ABC など数多くのコーポレートアイデンティティを手がけたデザイナーです。1996年に他界した彼ですが、YouTubeに晩年のインタビューが配信されています。30分と長いインタビューですが一見の価値あり。彼のキャリアを振り返りながら、彼が辿り着いたデザインの捉え方を知ることができます。 いきなり「グラフィックデザイナーはそれほど重要な存在ではない」という言葉からインタビューがスタート。しかし、それは見た目を良くするためだけのグラフィックデザインを指しており、デザインには存在意義があるとしています。例えば、ビジネスを理解している良いデザイナーであれば、見た目を良くするだけでなく、記憶に残りやすいデザインがつくれる。人々の生活を良くするためにデザイナーは存在していると語っています。

セミナー

プロトタイピングやコンテンツに関する講演を行います

今年は 1月から講演ラッシュで忙しくしていたのですが、4月は特に何もなくリラックスして過ごすことができました。5月から徐々に表舞台で話をすることになりそうです。 [http://www.aoit.jp/20120526/]2012年5月26日(土)あおもりIT活用サポートセンター [http://www.aoit.jp/20120526/]主催のセミナーで登壇します。青森では毎年講演をしており、昨年はコンテンツ戦略 [http://www.yasuhisa.com/could/diary/aomori2011-content-strategy/]について話しました。今年は「 これから求められるWebコミュニケーションスキル 〜 今日から始めるプロトタイプデザイン 」という題名で、プロトタイプの基礎について講演します。最近の講演は未来像を描く内容が多かったわけですが、青森の公演では久しぶりに実践寄りの話をしようと思っています。題名どおり今日から使える内容です。 2月に開催された CSS Nite in TAKAMATSU [http://www.yasuhisa.com/could

アイデア

答えを見つけるプロセスを楽しむエージェンシーモデルの提案

情報過多だから人に頼る 先日 New York Times で「Are Travel Agents Back? [http://travel.nytimes.com/2012/04/22/travel/are-travel-agents-back.html] 」という記事が公開されました。旅行業界のマーケティング会社 PhoCusWright [http://www.phocuswright.com/] によると、2010年、2011年と 2年連続で旅行代理店/代理人が成長したそうです。欧米では Expedia [http://www.expedia.com] や、Travelocity [http://www.travelocity.com/] のような総合旅行サイトが 2000年前後から利用者の指示を得ていて、旅行をするなら代理店ではなく、サイトを訪れるのが一般的でした。しかし、PhoCusWright

Cosmonaut

Cosmonaut

iPad [http://www.apple.com/jp/ipad/] は、手だけで操作をしたり絵を描けるのが魅力ですが、精密な作業には向いていません。手をつかったドローイングは滑りが良くないため、想い通りに絵が描けません。そこで、スタイラスがあると便利なのですが、たくさんの選択肢があって選ぶのが困難です。 少しでも早くアウトプットが出来るように iPad にプロトタイプやワイヤーフレムを描くためのアプリを幾つか入れているのですが、それらをより活かすためにスタイラスは欠かせません。そこで、今回紹介するのは、私が iPad でドローイングするときに使っている Cosmonaut [http://www.studioneat.com/products/cosmonaut] というスタイラスです。 ホワイトボードに書くときに使うマジックペンをイメージしたスタイラス。元々 Kickstarter [http://www.kickstarter.com/] がキッカケで、私も幾らか出資をしたプロジェクトのひとつです。最適な素材集めからスタートしたこともあり、プロジェクトが決行してから完

デザイン

スタートアップとデザインについて

Pinterest [http://pinterest.com/yhassy/], Path [https://path.com/], Instagram [http://instagr.am/] など、アプリのスタートアップでデザインが重要であると言われるようになってから久しいです。しかし、デザイナーという存在の理解はされているのかというと時々分からなくなります。 [http://startupsthisishowdesignworks.com/]考えるきっかけを与えてくれたのが、Wells Riley 氏が公開した「Startups, This is How Design Works [http://startupsthisishowdesignworks.com/] 」というページ。デザインの全体像が分かる素晴らしいまとめではありますが、デザイナーへの期待値を不意に高めている部分があります。 アプリデザインに絞って考えたとしても、そこで必要とされるデザインは、インタラクション、グラフィック、アーキテクチャ、タイポグラフィ、コーディング、ユーザースタディなど多岐にわたります。

モバイル

モバイルがライフスタイルになるための3つの視点

今月の始めに発表された、魔法の AR メガネ Project Glass [http://g.co/projectglass]。未来を感じさせてくれると同時に 広告だらけになるのでは? [http://www.youtube.com/watch?v=_mRF0rBXIeg] と考えている方もいると思います。我々ユーザーからのフィードバックを募集しているわけですから、今後どう成長して製品化されるのか楽しみです。 このプロジェクトに関わる Google X のエンジニアが残した以下のメッセージ [https://plus.google.com/111626127367496192147/posts/aKymsANgWBD]が少し気になりました。 > テクノロジーはもっと便利になるべきだと考えている。必要なときにはそこにあり、必要がなければ自ら姿を消す。そんなあり方が理想的だ。 素晴らしい視点ではありますが、今のようにメガネという形が必要でないときに見えない存在になり、人と人とのインタラクション(対話)を助長させるもなのか疑問です。 グラスを付けている人に会ったときに、あなたは

プロセス

「could」という言葉とデザインとの繋がりについて

1998年4月16日「could」という名前で Web サイトを始めました。 当時は大学生だったということもあり、日々の生活を綴る日記を書いていました。内向的な日記を書いていましたが、 2001年にはログ(リンクに一言添えたもの)を始め、2003年に自作 CMS をつくり、今は WordPress へ移行して Web と デザインに関わる記事を書いています。 時々「cloud (雲)」と間違われていることもありますが、なぜこんな奇妙な名前を使い続けているのか。書いている内容は変わり続けているのにも関わらず、この名前を使い続けているには理由があります。 「could」という言葉は can の過去形として扱う直接法だけではなく、「…できる(なら)」「…できるだろう 」といった仮説法も含まれていて、このサイトはそんな可能になるかもしれない未来への想いを題名に込めています。私たちは常に何か違った可能性を秘めながら生活や仕事をしています。無数の可能性や過去にしてきた決断について考えたい・・・それが私にとっての could だったりします。 なぜ今更自分のサイトの由来について書いているのかと

UI

ミニマリズムUIの課題と対策

実世界のオブジェクトのような質感を UI に加えることで、使いやすさを向上させるアプローチは 親しみやすさを生み出す [http://www.yasuhisa.com/could/article/habit-ui-ixd/] ことから、インターフェイスデザインによく採用されるようになりました。これとは別にアプリの UI デザインでよく見かけるのが、モダニズムを彷彿させたミニマムなデザイン。装飾を最小限に抑え、グリッドで整理された見せ方になります。 代表的なのが Flipboard [http://flipboard.com/] や Pulse [http://www.pulse.me/] のようなニュースリーダーアプリ。Textdeux [http://teuxdeux.com/iphone] や Sparrow [http://sparrowapp.com/] といった仕事に使えるアプリでもミニマムなアプローチをよく見かけます。Instapaper [http://www.instapaper.com/] や Read

デザイン

デザイン話にある三角構造

デザインの話で、ときどき噛み合ないことがあると思います。装飾について熱く語っている人もいれば、論理的にデザインの意図を解説する方もいます。どちらかが間違っているのではなく、デザインの前提が異なっていることから生まれるミスコミュニケーションです。デザイン話にも様々な目的と方法があることを教えてくれた論文があるので紹介します。 2010年に Daniel Fallman と Erik Stolterman が発表した「Establishing Criteria of Rigor and Relevance in Interaction Design Research [http://ewic.bcs.org/content/ConWebDoc/36491] (厳格で適切なインタラクションデザイン調査ための基準つくり)」という論文があります。サイトから論文の全文(PDF)を読むことができます。 この論文によると、デザイン調査は3つの異なる形式による三角構造になっているそうです。三角構造に含まれる 3つとは以下のとおり: Design Practice (実践としてのデザイン)実世界で何

UX

透明化するデバイス、流動化する情報

今必要とされているデザインは、特定のデバイスと、それを使う人を意識したモノ・コトはなく、人のライフスタイルに合わせて流動的に変化する世界観ではないでしょうか。 今のところ電子書籍で Amazon Kindle [https://www.amazon.com/dp/B0051QVF7A/ref=as_li_ss_til?tag=wwwyasuhisacom&camp=0&creative=0&linkCode=as4&creativeASIN=B0051QVF7A&adid=1NGXDJRDJT2N2EZFF86K&] がリードしていると感じる要因は、細かいことを考えなくて良い流動性にあると考えられます。独自形式ですし、DRM だってもちろんあります。しかし、Kindle (ハードウェア) 以外でも読むことが出来ますし、スマホで読んだ続きを、すぐにタブレットで読むことも出来ます。ページ数を覚えたり栞をする必要もありません。細かい設定は不要ですし、

UI

習慣になるまでの UI と操作の変化

タッチしてもらうための第一歩 タッチデバイスへの違和感や不安をもっている方はまだ少なくないと思います。 毎日の生活に登場するタッチデバイスの代表といえば、ATMや電車の切符販売機がありますが、処理速度が遅くスクリーンのオブジェクトを触れている感覚はあまりありません。そのせいか、スクリーンを強く押している方をたまに見かけます。また、タッチインターフェイスだけでなく、触れて押すことができる物理的なボタンが用意されている場合もあります。タッチへの不安を解消するための配慮なのかもしれません。 毎日の生活から比較すると、タッチデバイスでスイスイいろいろな操作が出来るというのは、未知の世界に見えてもおかしくありません。操作の仕方が分かる iPad や Galaxy の CM が TV で流れているとはいえ、「本当にタッチでこんなに動くのか」という不安をもっている方もいるはずです。 UI デザインのひとつのアプローチとして、親しみやすさをつくる という方法があります。特に新しいアイデアや価値を提供しなければならないときに有効で、広く知られているもの、ターゲットにしている人にとって既に知っているこ