Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
コンテンツ

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

以前から文脈によってコンテンツ配信が活かされる [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日（土）あおもりＩＴ活用サポートセンター [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/] 」というページ。デザインの全体像が分かる素晴らしいまとめではありますが、デザイナーへの期待値を不意に高めている部分があります。 アプリデザインに絞って考えたとしても、そこで必要とされるデザインは、インタラクション、グラフィック、アーキテクチャ、タイポグラフィ、コーディング、ユーザースタディなど多岐にわたります。
モバイル

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

今月の始めに発表された、魔法の 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 デザインのひとつのアプローチとして、親しみやすさをつくる という方法があります。特に新しいアイデアや価値を提供しなければならないときに有効で、広く知られているもの、ターゲットにしている人にとって既に知っているこ
ブラウザ

Beyond IE Six というページをつくりました

[http://beyondiesix.jp/] 先週いよいよ Internet Explorer (IE) の自動アップグレードが開始 [http://blogs.msdn.com/b/ie_jp/archive/2012/03/26/10287454.aspx]されました。これにより、多くの Web 開発者の頭を悩ましていたバージョン 6 (IE6) がなくなるのではないかと期待している方もいると思います。制作者の都合だけでなくても、より早く安全な Web 体験が出来ることを考えると、利用者にもメリットはいくつかあります。 自動アップグレードによって、IE6のシェアは今後さらに下がることでしょう。しかし、真の課題は IE6 がなくなっても残り続けると思います。見た目を同じにする [http://www.yasuhisa.com/could/article/progressive-enhancement-result/] という古い考え方を持ち続けている間は、IE6
ゲーム

ゲームから立ち返る利用者のためのデザイン

ゲーム要素がゲーミフィケーションではない 2012年3月24日に Android Bazaar Conference 2012 Spring [http://www.android-group.jp/conference/abc2012s/] が開催されました。今まで Android コミュニティとの接点がもてなかったので、今回のようなビックイベントで講演できるのは、またとないチャンスだと思いました。 今回は「人間中心遊戯設計」と題して人に注目したゲームデザインの取り入れ方について話をしました。ゲーム、特にオンラインゲームは私の得意分野。オンラインゲーム [http://www.yasuhisa.com/could/tag/%E3%82%B2%E3%83%BC%E3%83%A0/]とデザインに関する話題は 2006 年から取り上げていますし、講演でも [http://www.yasuhisa.com/could/diary/
テクノロジー

激変するテクノロジーとの正しい付き合い方

過渡期はない 「過渡期」という言葉は、今の世界には合わないのではないかと思います。 新しいテクノロジーが出る度に、人は「今は過渡期だから大変」「過渡期だから様子見」と口にします。Webの世界は毎年目まぐるしいスピードで新しいテクノロジーやトレンドが登場することから、毎年こうした言葉を耳にします。私が「過渡期」という言葉が好きになれないのは、私たちは常に変化の中にいるという事実を見ていない、消極的な表現に聞こえてしまうからです。 CSS Nite in FUKUI で、予測不可能な世界でデザインをする [http://www.yasuhisa.com/could/article/unknown-future/] ことの意味を話しました。上の図は、そのときに紹介した技術開発の進展と製品性能の成長を表した「Sカーブ」です。ひと昔は、Sカーブはゆるやかで、サイクルも10年〜20年くらいの長いものでした。しかし、今は複数のSカーブが重なり合っているだけでなく、サイクルも1年と短い場合もあります。 常に過渡期と感じてしまうのは、S字カーブの後期にあるはずだった安定期がなくなり、常に新しい
インターネット

Curator's Code からみるWeb共有のもつ課題

尊重のためのシステム Tumblr や Twitter のように、気軽にリブログやポストがしやすいプラットフォームになると、参照元が分からないポストをよく見かけます。お気に入りの画像を Tumblr で見つけても、参照元・作った人が分からないのでクリッピングしないこともあります（又は自分で検索して探すこともあります）。誰でも簡単に情報を共有できるのが Web の魅力ではありますが、参照元が失われることでコミュニケーションの奥行きが失われることがあります。 昨年の震災 [http://www.yasuhisa.com/could/diary/light-and-darkness/] で明るみになったところがありますが、多くの人は参照元を調べませんし、自分のタイムラインに現れた情報をそのまま受け入れて、再度拡散することがあります。表層的な情報だけが広まるだけで、突っ込んだ情報や議論が見え難くなる場合もあります。何を参照したのか、何を基に情報発信しているのかが分かるだけでも、情報の接し方が変わるのではないでしょうか。 こうした考えを基にして生まれたのが Curator’s Code
Webデザイン

コンテンツ視点で考えるレスポンシブ戦略

SEOならレスポンシブに PC版の Facebook でオススメのリンクをみたら、モバイル版だった。 スマホで Twitter を見ていたら、PC版のサイトに誘導されて操作が面倒だった。 モバイルサイトのアドレスに注目すると、「m」「mobile」「i 」など、のサブドメインが最初に付いている場合があります。これは、PC版の『本家』Webサイトとは別のバージョンを表示していることを意味しています。スマホやタブレットなど、デバイスに応じて最適化されたサイトを表示しています。 利用者のために最適な環境を提供するという意味では、専用サイトは適した対策です。しかし、SEOの視点で見ると専用サイトを作って、URLを細分化してしまうのは良くない傾向です。モバイルユーザーであれば、モバイルで見たサイトをそのまま共有するでしょうし、デスクトップユーザーにしても同様です。10のリンクが付いたかのように見えても URL を見ると 2 つ 3 つに分散しています。 URL をひとつにして、サーバー側で変換するという方法もありますが、サイト全体にかかる負荷を無視するいことは出来ません。デザインの決断を
Webデザイン

今後のWebデザインとの向き合い方

2012年2月25日 CSS Nite in TAKAMATSU vol.6 [http://cssnite.webridge-kagawa.com/vol6/] が開催されました。CSS Nite は、ツールの使い方や制作のノウハウなど、テクニックを扱うことが多いイベントですが、今回は全編を通してコードが出ないという珍しい構成でした。いつもとは少し違う雰囲気ではありましたが、他の CSS Nite にはない満足感を得た方も多かったのではないかという印象を受けました。イベントの様子はTogetterでまとまっている [http://togetter.com/li/263998]ので参照してください。 私のセッションは、Webデザインのウソ・ホント ～ Web らしくデザインするためのヒントと題して、未来を見据えた Web のデザインを行う上で必要な考え方や取り組み方法を紹介しました。 今月はセミナーで登壇する機会が3回もあり、過密なスケジュールでした。準備は大変でしたが、3回を通して一貫としたテーマがあったかと思います。なんとなく「未来のWebデザイン三部作」と呼べる内容だった
Webデザイン

レスポンシブWebデザインから始まる適応への道

2月22日 Web担当者Forum 主催のイベント 企業サイトのスマホ“対応”とその一歩先の”最適化”とは？ [https://web-tan.forum.impressrd.jp/q/201201/12016] に登壇させていただきました。今回はレスポンシブ Web デザインの話題を中心に、Web への窓口がますます増える今後にどう対応していけば良いのかを、技術・デザイン・企画・そして具体的なソリューションなど様々な視点で講演されました。 今回は、先月執筆したレスポンシブにデザインするために克服すること [http://www.yasuhisa.com/could/article/responsive-design/]をキッカケで話すことになりました。「 未来へレスポンシブに対応するための設計と戦略」と題して、スマートフォンやタブレットだけでなく、もう少し視野を広げてレスポンシブの実現について話をしました。 クロスオーバーする時期が来た 制作者向けのセミナーであれば、レスポンシブ Web デザインを語るのにふさわしい人は他にいると思うのですが、今回は Web担当者Forum とい
インターネット

流動し続ける時代におけるWebとの付き合い方

2012年2月18日、CSS Nite in FUKUI [http://cssnite.fisc.jp/]が開催されました。今回は「 予測不可能な世界でWebデザインをしよう 」と題して、今後のWebに必要とされる価値と制作のためのアプローチについて話をしました。2年前は聞いたことなかったようなサービスやデバイスが、あっという間に大企業に成長したり、広く普及する時代。先がどうなるか分からない中、私たちは今何ができるのでしょうか。 テクノロジーで変化する人の価値観 価値観は、どのようなテクノロジーと共に暮らしているかで決まる部分があります。「本を読む」にしても、紙媒体の書籍だけ想像する人もいれば、ケータイや電子書籍を想像する人もいます。「TVを見る」にしても、HDDレコーダーをつかって観覧している人と Apple TV を使っている人では番組を見る行為が異なります。 紙の雑誌は、動かないiPad・・・それを当たり前と感じる世代が2年前に突然現れたわけです。 テクノロジーが物事の捉え方に大きな影響を与えているわけですが、近年テクノロジーの進化のスピードが急激に高まったことで、たっ
WD101

WD101: Webは寛容性をデザインする場である

このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 * Webは見た目のコントロールがきかない [http://www.yasuhisa.com/could/article/wd101-nocontrol-in/] * モニターの外をデザインするのが大半である [http://www.yasuhisa.com/could/article/wd101-outside-monitor/] コンテンツと、取り囲む要素のバランス Webは、コンテンツを配信・消費するために最適化された媒体（又はシステム）です。テキスト、画像、ビデオなど様々な種類のコンテンツが存在しますが、それらコンテンツを通して人と人、コンテンツとコンテンツ、人とコンテンツが繋がる場が Web です。デザイナーであろうと開発者であろうと、この前提を抜きにして Web デザインを語ることはできません。 コンテンツは純粋な形であればあるほど、より多くの人に届けることが出来ます。装飾された
ゲーム

イノベーションが続くF2Pゲームの現在と未来

ここ 1,2 年で頭角を現しているソーシャルゲームですが、MMOG (多人数オンラインゲーム) のジャンルから見ると、今の流行の前兆をいくつか見つけることができます。 10歳前後をターゲットにしている Club Penguin。親が安心できるような機能やサービスを充実させ、サービススタート当時から高い評価を得ています。 2005年から運営している Club Penguin [http://www.clubpenguin.com/] (2007年にディズニーが買収) は、ブラウザベースの子供向け MMORPG で、無料で遊べるものの有料会員制も導入しています。ソニーが 2009年か運営している Free Realms [http://www.freerealms.com/] は、子供をメインターゲットにしているオンラインゲーム。PlayStation 3, Windows, Mac で遊べる MMORPG で無料から遊べることが出来ます。いずれもノンゲーマーと呼ばれてる人たちからも指示を得ているカジュアルオンラインゲームです。 ソーシャルゲームの定義には様々な解釈がありますが、共にマ
UI

ニュースの理解が深まるタイムツリーコンセプト

リアルタイム時代に必要なニュースUI 新聞サイト・ニュースサイトは、基本的に「記事」という情報の単位をもつことを前提にしています。そして、記事という単位を時系列やテーマ（カテゴリ）別で表示できるように CMS でコントールしています。こうした見せ方は情報サイト全般で扱われていますが、今のニュースのスピードや Web 利用の変化と照らし合わせると、記事という情報単位があまりにも大きく柔軟性が乏しく感じることがあります。現在のニュースサイトのコンテンツに起こっている現象が幾つかあります。 * 速報ですら記事にしないといけないので、200文字程度のページが存在する * 記事というタイトルとテキストを必要とする『入れ物』があるため、テキストだけ、ビデオだけ、写真だけといったコンテンツタイプの格納がしにくい * ソーシャルメディアでブレイクしたニュースに追いつけない * ニュースサイトのリアルタイムと、人が体感するリアルタイムは異なる。ニュースサイトが提示する「最新情報」が人が感じる最新とは限らない * ひとつの出来事が地続きで繋がっているものの、利用者はトピック／タグで絞り込んで検
コンテンツ

Webのコンテンツ配信はマークアップから

異なるマークアップの意味 コンテンツを校正・編集・デザインするという意味合いが Web になると少し異なるのですが、この感覚が多くの方と共有されないまま 2012 年を迎えています。 従来の、つまり紙における校正・デザインは一種の独裁支配といえます。 紙によるコンテンツ配信は、発信する側が最適と考える見た目を、完全な形で読者に届けます。読者が扱い難いと思おうが関係ありません。紙におけるコンテンツ配信の質は、校正・編集そしてデザインにおいて作られた厳密な世界を届けれるかどうかにかかっています。 しかし Web は、配信者側による独裁支配ではありません。骨組みは設計されているものの、あとは読者が自由にコントロールできます。文字サイズが小さいと思えば、自由に大きさを調整できます。白色背景が目にキツいと思えば、色を反転させることもできます。とにかくじっくり読みたいと思えば、 Instapaper [http://www.instapaper.com/] のようなツールを使ってデザイン要素をすべて省いてコンテンツを消費することも出来ます。 従来の「支配する」校正・デザインの感覚をその