Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

ペルソナ

スマートフォン利用にある異なる6つの価値感

スマートフォンがアーリーアダプターのものではなくなった今日。 「スマートフォンユーザー」と一言でいっても、好みや重要にしているものは人それぞれです。利用者のアプリの使い方、アプリの並べ方、デバイスの持ち方、そして行動にまで影響します。同じように見えるスマートフォンも、人の性格が出ていることがありますし、気付きを与えてくれることがあります。 最近、人のを見て「なるほど」と思ったアプリの配置。よく使うアプリは Dock や上部に置かず、右手の親指で届きやすい左下に集中させている人が何人かいました。 デザインを皆で考えるときに難しいのが、何がフォーカスするべき重要なことなのかを共有するとき。スマートフォンへの価値観が異なることから、話がすれ違ったり、プライオリティをうまく決めることができないことがあります。そこで、プロトタイプを作る前にシナリオやペルソナをつくって「こういう価値感をもっている人を想定している」という部分を共有することがあります。 先日 Ericsson が発表したレポート「Unlocking Consumer Value [http://www.ericsson.com/

デザイン

多種多様なWebアクセスにおけるパソコン向けデザインの弱点

通信機器の普及率を2010年と2012年度で比較(総務省 2013年)。 日本も既にポストPC時代 先週、総務省が平成二十四年度の通信利用動向調査 [http://www.soumu.go.jp/johotsusintokei/statistics/statistics05a.html] を発表しました。詳しくは公開されている PDF (又は生データで公開されている Excel/CSV) を参照してほしいですが、特筆すべき点は以下の 6 つです。 * パソコン(デスクトップやノート)からの Web アクセスは 2009 年をピークに毎年下降している * 家庭内、外関係なくパソコンからの Web 利用は低下している * 同時に低下しているのは従来の携帯電話。保持率は依然高いが Web アクセスは減ってきている * 従来のアクセス端末の利用は低下しているが、今まで以上に Web アクセスする人は増えている * 10代から40代の Web 利用率は頭打ちをしているが、増えてきているのが 65 歳以上の高齢者

UI

人との関わりから考えるタッチUIのあり方

タッチ UI のデザインで難しいのは、表層的な部分だけを設計すれば良いものになるわけではないという点です。技術もきちんと理解することで、Web なら Web らしい、アプリならアプリらしいデザインになります。表層的な部分から入ると、見た目は良いけど使い難くなったり、「なんとなく違う」という声に繋がることもあります。 だからといって、絵を描きながら UI を模索することを否定しているわけではありません。しかしながら絵を描く過程があったとしても、人がデバイスとどのように関わるのかを理解していることが前提になります。人はどのように UI に触れて、どのようなフィードバック(アウトプット)を期待しているのでしょうか。 タッチデバイスにある新しい挑戦 多くの方がタッチデバイスを扱うようになって数年経ちますが、今はもう画面に触れるだけが唯一の方法ではありません。人とデバイスの関係はより親密になったと同時に、関わり方は多様で複雑になりました。 おさらいという意味も含めて、最近のデバイスと人との関わり(インプット & アウトプット)をまとめてみました。 多種多様なインプットとアウトプットが

コンテンツ

コンテンツの視覚化から始まるマルチデバイス設計プロセス

先月、岡山で開催された amplifizr, Vol. 6 [http://amplifizr.jp/seminar-event/vol6-content-strategy-for-multi-device-environment.html] を皮切りにマルチデバイス化のためのコンテンツ戦略がスタートしました。全国、合計5ヶ所で開催されたマルチデバイス化を見据えたコンテンツ設計 基礎講座 [http://www.yasuhisa.com/could/article/content-for-multidevices/]の続編になります。 スマートフォンサイトを制作するためのノウハウは国内外でたくさん見つかりますし、素晴らしい見た目のサイトも増えてきました。しかし、コンテンツがパソコン中心に作られていることから、スマートフォン向けにうまくコンテンツが移行できなかったり、過剰な省略がされていることがあります。サイトの見た目のマルチデバイス化は進んでいますが、コンテンツのマルチデバイス化はまるで進んでいないというのが現状です。 ここ 2, 3 年 アダプティブデザイン [http:/

サービス

マルチデバイス体験のためのデザインの課題

ここ 1, 2 年のアプリ購入の条件はマルチデバイスでシームレスな操作ができることができることが前提になっており、その傾向はますます強くなっています。私が愛用している Byword [http://www.yasuhisa.com/could/review/byword/] も保存という操作をすることなく、マルチデバイスですぐにデータにアクセスできることが購入のキッカケになっています。 [https://itunes.apple.com/app/id532016360] 明るさ調整や、スピードダイヤルといった機能もあり。連携できるアプリも順次増えています。 マルチデバイスと同様、重要になってくるのがアプリ間のデータのやりとりや操作が可能なこと。Web サービスを基にして作られたアプリであれば大丈夫ですが、孤立した状態で存在で存在するアプリも少なくありません。Android だともう少しスマートな解決策がありそうですが、iPhone の場合だと Launch Center [http://appcubby.com/launch-center/] は便利です。TextExpander

Webデザイン

コンテンツからはじまる新しいWebワークフロー

4月27日にCSS Nite in AOMORI Vol.7 [http://cssnite.studiomd.jp/vol07/] が開催されました。毎年、 来青させていただいています [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/] が、CSS Nite として参加するのは今回で 2 回目になります。今回は コンテンツからはじまる新しい Web ワークフロー と名付けて、コンテンツの設計をしっかりしないと、モバイルをはじめとした他デバイスに向けて Web サイト制作をしても意味ないよというメッセージを込めた講演を行いました。そして、コンテンツを基軸にして画面構成やビジュアルデザインを組み立てていく新しいワークフローの提案も行いました。 今までこのサイトでも何度かプロトタイプ [http://www.yasuhisa.com/could/?s=%E3%83%97%E3%83%

コンテンツ

自己主張ファーストなコンテンツを排除しよう

私はよく「コンテンツがない。壊れている。」と主張していますが、人によっては「既に自分たちには素晴らしいコンテンツがある。アピールするための素材もたくさん用意されている。」と考える方もいると思います。しかし、それは利用者からの視点からすればコンテンツでも何でもないノイズということもあります。 昨年末から全国で開催しているマルチデバイスを見据えたコンテンツ設計講座 [http://www.yasuhisa.com/could/article/content-for-multidevices/] で、企業は的外れなコンテンツを出していることを事例を挙げながら紹介しています。クオリティの高い写真、映像、文章が使われているものの、中身は利用者のことを優先していない自己中心なメッセージばかりということがあります。残念ながら企業 Web サイトの大半はそんなところが多かったりします。 上記は Break Up [http://www.youtube.com/watch?v=D3qltEtl7H8] という、広告主と消費者の関係を人間関係に見立てて表現した 2007 年のビデオです。以下、簡

Webデザイン

Fireworks後のツールとワークフロー

Fireworks 以外の選択肢は? Adobe Creative Suite が終了し、Cloud の一本化が発表 [http://www.adobe.com/jp/cc/letter.html] されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 [http://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html] のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。 Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしい

Webデザイン

世界最初のWebサイトが教えてくれるデザインの原則

[http://info.cern.ch/hypertext/WWW/TheProject.html] 4月30日は World Wide Web にとって重要な日。先日 CERN が、W3 の関連技術をパブリックドメインにしてから、20 年を迎えました。 CERN 公式サイト [http://info.cern.ch/] では W3 の歴史を振り返ると共に、1993 年に公開された 最初の Web サイト [http://info.cern.ch/hypertext/WWW/TheProject.html] もオリジナルの URL に再公開されました。 構造化された情報は未来に繋げるためのディープインプレッションになると話した「スマートフォン戦略から始まる新たなコミュニケーションデザイン [http://www.slideshare.

イノベーション

構造とプロセスとクリエイティブについて

デザイン思考の盲点 利用者への理解を深めながら新しいプロダクトやサービスを作り出すときにデザイン思考が役立つと言われています。異領域の人たちによるコラボレーションや試行錯誤を繰り返しながら完成に近づけるプロセスは、イノベーションの原動力とも言われています。日本でもデザイン思考を取り入れて新しい価値を生み出している企業が増えてきました。 私もプロトタイプ [http://www.yasuhisa.com/could/article/dh-prototyping-course/] をキーワードとして、デザイン思考を取り入れている人間のひとりではあるものの、デザイン思考による盲点が気がかなりになることがあります。 デザイン思考はプロダクトやサービスを作るための考え方・メソドロジーであるが故に、短期的かつ狭い視野に留まりがちになります。人のもつ課題や不満を解決するのは、プロダクトやサービスである場合も多々あるわけですが、時には社会構造、エコシステム、文化といった部分に注目したほうが効果がある場合があります。 例えば朝の満員電車で人が怪我して危険という問題があります。これを解決するためのサ

Webデザイン

カンプがなくなったときのデザイナーの役割

手段を再想像する 昨年末に開催された CSS Nite Shift 5 で「Reimagination(再想像する) [http://www.yasuhisa.com/could/article/prototype-the-future/] 」の話をしました。人とコンピュータの関わり方が行動や価値観を再定義しているのと同じように、Webサイト制作にしても同様のことがいえます。今までの当たり前を疑い、未来に柔軟に対応できるワークフローが必要とされています。 例えば従来必須だと言われていたワイヤーフレームも考慮対象です。少し前に ASCII へ「柔軟性あるデザインプロセスへ移行するためのヒント [http://ascii.jp/elem/000/000/776/776868/] 」という記事を寄稿しました。ワイヤーフレームが果たそうとしているコミュニケーションの目的は間違っていませんが、つくるためのツールや手法に問題があるのではないかという疑問を投げかけた記事。絶対いると思い込んでいるものも、今の時代にマッチしなくなってきているものは少なくありません。 また、Photoshop や

講演

コンテンツ関連の講演・ワークショップのご紹介2

今月初めに幾つかイベントの紹介 [http://www.yasuhisa.com/could/announcement/content-workshops-seminars/] をしましたが、東京でもコンテンツ関連の開催が決まりました。 [http://cssnite.jp/cr-sta/sp1/]来週 4月23日(火)、クリーク・アンド・リバー様 [http://www.cri.co.jp/]と DTP Transit [http://www.dtp-transit.jp/] 様の協力をいただいて緊急開催が決まりました。昨年 11 月よりコンテンツに関わるセミナー&ワークショップを重点的に行っていますが、こちらは番外編のような位置付けになります。 マジカルコンテンツツアー [http://cssnite.jp/cr-sta/sp1/] と題して「コンテンツ」関連に話題になっていること、学習しておきたいポイント、

UI

UIだけでもデザインできる理由

UI(ユーザーインターフェイス)は、いつの頃からか魅力的な視覚要素が含まれた GUI として語られるほうが多くなりました。これはある種、デザインを装飾としてのみ捕われてしまう状況と似ているところがあります。 では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。 昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。 人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Human-Computer Interface) と言い換えることがありますが、UI とは表層的な絵を指すだけではなく、関係性を設計するものというのが分かってきます。 先月のセミナー [http

UI

保存アイコンでみえてくるアイコンデザインの勘違い

先日 Goodpatch さんが 保存アイコン=フロッピーディスクの時代は終わった…? [http://memo.goodpatch.co/2013/04/about-save-icon/] という興味深い記事が掲載されていました。フロッピーディスクを保存アイコンをとして採用するのは古いのではないか、という議論は国内外で何年かに一回はあります。私も 2009 年に変わりゆく「保存」の存在 [http://www.yasuhisa.com/could/article/meaning-of-save/] と題してフロッピーディスクアイコンのあり方も踏まえて、今後の保存の姿を模索していました。また、先月開催された Android Bazaar Conference 2013 Spring [http://www.yasuhisa.com/could/article/text-is-ui/] でも同じ話題に触れています。 アイコンと問題解決について 様々なデザイナーが新しい保存アイコンを提案しているものの、「うん、これは保存だ」と納得できたものはほとんどなかったと思います。ダウンロード

講演

コンテンツ関連の講演・ワークショップのご紹介

[http://www.yasuhisa.com/could/content/images/wordpress/2013/04/content-series.png] 先月の Android Bazaar Conference 2013 Spring [http://www.android-group.jp/conference/abc2013s/] を最後に、久々に講演もない静かな日々を過ごしていますが、今月末から忙しくなりそうです。『基礎講座』と名付けて各地で開催していたコンテンツ講座も三回シリーズにすることを決めて準備を進めているところです。まだ東京都内では開催予定を固めていませんが、都外は続々と日程が決まりつつあります。中には募集を開始しているところもあるので、先 3ヶ月の講演予定をお知らせします。お近くの方はぜひ遊びにきてください。 CSS Nite in AOMORI Vol. 7 [http://cssnite.studiomd.jp/vol07/] 毎年青森には講演に行っているのですが、CSS Nite で登壇するのは

デザイン

デジタルデザインにおける「色あせない」とは

デジタルは色あせないのか 素晴らしいデザインは時代を超えて色あせないなものだと言われています。 建築、産業デザイン、グラフィックデザインなど、色あせないデザインは分野を問わず今でも「良い」と思えるものばかりです。デザインされた当時の社会背景や作り手の想いがタイムカプセルのように詰め込まれているわけですから、時代を感じずにはいられないはずです。しかし、それでも時を超越した魅力があるわけですから不思議なものです。 ディーター・ラムス [http://www.yasuhisa.com/could/article/braun-apple/] のようなモダンな製品は色あせないと言われますし、ルイ・カーン [https://www.google.co.jp/search?q=louis+kahn&hl=en&safe=off&source=lnms&tbm=isch&sa=X&ei=

UI

言葉はグラフィックより大事なインターフェイス

2013年3月16日にAndroid Bazaar Conference 2013 Spring [http://www.android-group.jp/conference/abc2013s/] が開催されました。昨年に引き続き [http://www.yasuhisa.com/could/article/human-centered-game-design/] 今年も登壇。前回はゲームをテーマにして話をしましたが、今回は「コンテンツで改善する UI デザインの極意」と題してコンテンツと UI をテーマに話をしました。 見た目が綺麗だから良い UI というわけではない 見た目とインタラクションの提案は素晴らしいですが、メニューのキャプションは「My」だけ。これは何ができるアプリなのでしょうか。UI のインスピレーションとして Dribblbe [http://dribbble.com/search?q=UI] や Android Patterns [http:

アクセシビリティ

アクセシビリティから変わるビジュアルデザイン

W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 [http://www.jsa.or.jp/stdz/instac/commitee-acc/W3C-WCAG/WCAG20/index.html] の中に「 アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 [http://waic.jp/docs/jis2010/understanding.html] をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです(翻訳サイトより抜粋)

コンテンツ

ネイティブ広告は新たな接点をつくれるのか

昨年頃から注目を浴びている広告形式で「ネイティブ広告(Naitive Ads)」というのがあります。詳しくは Techcrunch(米)のコラム Where You Can Go Right, And Wrong, With Native Ads [http://techcrunch.com/2013/02/17/the-native-ad-movement-and-the-opportunity-for-web-publishers/] を参照していただきたいですが、様々なメディア媒体の形式に合わせた広告を指します。例えば Tumblr [http://www.tumblr.com/sponsors] の右側にある「Tumblr Radar」のように、見た目がサービスのデザインに馴染んでいて、あたかもコンテンツの一部のように見えるものが多いです。 私が最初にこのタイプの広告を見たのは、数年前の Digg [http://digg.com/] でした。昨年に大幅リニューアルしてしまったので今はありませんが、スポンサーのニュースが他と同じデザインでリストに紛れ込んでいました(

デザイン

対話から生まれる今後のビジネス観・デザイン観

従来のやり方は通用しない 上図は Economist Intelligence Unit が 2012 年 11 月に発表した Outside looking in: The CMO struggles to get in sync with the C-suite [http://www.managementthinking.eiu.com/sites/default/files/downloads/EIU_SAS_CMO_WEBr1.pdf] (PDF)から抜粋したものです。CMO が現状、投資に力を入れている分野と、3 年後重要になると考えている分野の割合を比較しています。あくまで CMO の希望ではありますが、今後のマーケティングの青写真といえると思います。 ソーシャルメディアやモバイルといった新しい分野が伸びをみせていて、ブランド広告が大きく落ちているのが分かります。

プロセス

講師をして感じたプロトタイプの可能性

昨年暮れから今年のはじめにかけて デジタルハリウッド大学院 [http://gs.dhw.ac.jp/] 秋葉原校にて「未来のインターフェイス」講座の講師をしていました。全 8 回のこのコースは、予測不可能な社会でデザインをしていく上で、少しでも早くアイデアを形にして伝えるためのノウハウと実践に近い演習を行いました。未来的(SF的)なインターフェイスを考えるというよりかは、今あるデザインの課題へのアイデアをプロトタイプし、未来へ繋げていくためのプロセスを学ぶ講座になりました。 昨年の 5 月から、青森 [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/]、 名古屋 [http://www.yasuhisa.com/could/article/paper-prototyping-seminar/]、金沢 [http://www.yasuhisa.com/could/article/uxkanazawa-prototyping/] でプロトタイプに関するセミナーやワークショップを行いましたが、デジハリ大

WD101

WD101: 画面ではなく部品から始めてみよう

このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 * Webは見た目のコントロールがきかない [http://www.yasuhisa.com/could/article/wd101-nocontrol-in/] * モニターの外をデザインするのが大半である [http://www.yasuhisa.com/could/article/wd101-outside-monitor/] * Webは寛容性をデザインする場である [http://www.yasuhisa.com/could/article/wd101-progressive-enhancement/] * Webのデザインは枠のない世界である [http://www.yasuhisa.com/could/article/wd101-no-edge/] * Webデザインであるもの、そうでないもの [http://www.yasuhisa.com/could/articl

IA

情報アーキテクチャの脊髄を視覚化

2月9日に東京で開催された World IA Day 2013 [http://2013.worldiaday.org/locations/tokyo-japan] に参加してきました。前回の記事 [http://www.yasuhisa.com/could/article/btwn-big-ia-and-small-ia/] で書いた今後の IA の課題のヒントになるようなメッセージを、イベントを通して幾つか見つけることができました。 今回は吸収した内容を自分なりにインフォグラフィックにしてみました。 [http://www.flickr.com/photos/yhassy/8467245165/] イベントを通して『情報』にはデータベースに蓄積できるようなものと、掴み所がないものと二種類あると考えました。言い換えれば右脳的な情報と左脳的な情報があるといったところでしょうか。まったく違う存在のようにみえる二種類ではありますが、4つの段階を踏んでアーキテクチャ(構造)を作り出しているようにみえました。 1. Deconstruct (分解) 2. Sort(分類) 3.

IA

Big IA と Small IA の間で

Big になり過ぎている IA Big IA 広義としての IA 。映画監督やオーケストラの指揮者のような存在で、製品やサービスのビジョンを形にする役割。 Small IA 狭義としてのIA。プロジェクトに関わる人々が理解できるようにビジョンの詳細を設計し、具体化していく役割。 Peter Morville 氏が 2000年に寄稿した記事 [http://argus-acia.com/strange_connections/strange004.html] で、Big IA と Small IA に明確なラインを引かず、情報システムの構造化という IA の核心を軸にしてコラボレーションをすれば良いと説いています。実際、多くの IA プロフェッショナルは Big / Small といった分類を過剰に意識することなく、いずれの設計に携わることもありますし、UXデザイナーと呼ばれる方とコラボレーションをしている場合もあります。 こうした現状を理解しているわけですが、IA で語られる話題が Big (ビジョンの設計)に偏り過ぎていないかと感じることがあります。