Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

https://x.com/yhassy https://www.facebook.com/yhassy/
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 （ビジョンの設計）に偏り過ぎていないかと感じることがあります。
デザイン

パフォーマンスは技術課題ではなくデザインの課題

人気デザインギャラリーサイトから幾つかモバイル向け Web サイトのパフォーマンスを検証してみました。以下が各サイトのリクエスト数とファイルサイズになります。 * FELISSIMO 500色の色えんぴつ [http://www.felissimo.co.jp/500/]: 81リクエスト / 1.94MB * 旅館 大村屋 [http://www.oomuraya.co.jp/] 55リクエスト / 1.52MB * UR オンラインストア [http://www.urban-research.jp/sp/] 90リクエスト / 705kb * JiNS PC [http://www.jins-jp.com/jins-pc/sp/] 78リクエスト / 1.39MB * らでぃっしゅレシピ [http://recipe.radishbo-ya.co.
教育

情報だけでは価値がない時代の学びの姿

「時代の流れが速すぎて学ぶのが辛い」 「いろいろありすぎて覚えるのが大変」 このような言葉を聞いたことがあります。確かに学ぶことが多いですが、知識との向き合い方で学習の仕方が大きく変わります。学習への向き合い方の変化が、気持ちを和らげてくれることもあります。 昔は情報をもっていることが知識であり、情報を得る方法が学習と捉えられていた時期もありました。故にセミナーに参加したり、書籍を買っても自分が知らない情報があるかどうか、たくさんの情報が書かれているかどうかが評価の基準になり、情報を得たから「学べた」という満足に繋がったのかもしれません。昔の学校の授業は情報が中心なっていたのも、何か関係しているかもしれません。 終着点があった従来の学習 従来の情報の取得方法。わずかなソースから情報を受け取ることが知識になった。 知識を得る方法が書籍、新聞などといった媒体の場合、そこに書かれている情報が知識であり、学びの『終着点』でした。 その理由は媒体の制約が関係しています。 新聞や書籍の情報は紙面という制約があることから、「もっと知りたい」「この言葉がわからない」「関連した動向は何」といった
コンテンツ

キーワード 2013: Transparency（透明性）

ビジネスは信頼を失いつつある Web コンテンツは透明であるべきと 2005 年から書いている [http://www.yasuhisa.com/could/article/rethinking-web-content/] ので、透明性をわざわざ今年のキーワードにすることはないかもしれません。しかし、今の社会背景を考えると、今また注目しておきたいと思い、キーワードに選びました。 * マルチデバイス化による情報アクセスの多様化 * いつでも情報がアクセスできることにより、能動的な情報収集を助長 * ネットワークで繋がっていることで共有が加速 * 様々な情報が行き交うことで賢い消費者が増加（逆もしかりですが） 情報に敏感な消費者は Web 以前からいましたが、Web がマルチデバイスでアクセスできるようになったことで、その数は爆発的に増えてきています。こうした背景を考慮すると、従来のようなイメージ戦略だけでは、「怪しい、信頼できない」と疑う人もでてくる可能性があります。実際、それを裏付けるデータもあります。 Edelman によるビジネスの信頼度に関する調査結果 [ht
プロセス

コラボといっても平等ではない

2人以上が共通のゴールに向かって協力して進めるコラボーレション。クリエイティブな環境ではコラボレーションが発生しやすいわけですが、複数人がプロセスに参加するだけという形だけのコラボレーションだと、良いアウトプットが生まれません。ただ集まるだけではなく、参加者それぞれの意見やアウトプットがしやすくなる環境をつくるには、以下の条件があると考えられます。 * 信頼関係が築かれているか * プロセスが透明かどうか * オープンな対話が可能か * リスクをとることができるか * 間違いを許すことができるか 多くの人がプロセスに参加しやすい環境をつくることがコラボレーションの第一歩ですが、ゴールに向かうためのディレクションや最終的な決断を下す人がいなければ、 らくだになる [http://www.yasuhisa.com/could/article/we-just-made-a-camel/] 可能性があります。皆が平等な立場でプロセスに参加できるコラボレーションですが、ひとりひとりのアウトプットまでが平等というわけではありません。また、時には独裁者のような存在によってゴールに向かう
サービス

キーワード 2013: Stimul-experience（同時体験）

昨年、 Everyscreen [http://www.yasuhisa.com/could/article/2012-everyscreen/] というキーワードを提唱しました。スマートフォン、タブレットという特定のデバイスだけでなく、生活の様々なシーンに登場する「スクリーン」に対してどうデザインすれば良いのかを解説しました。今年はこの傾向がさらに強くなると考えられます。昨年は O2O [http://www.sophia-it.com/content/O2O] のようなオフライン、オンラインの連携が注目されましたが、導線をつくることに重きを置くところがありました。しかし、人々の生活はオフライン、オンラインと明確に分離できる状態ではなくなったことで、単なる導線では十分ではないと考えられます。 同時に存在し体験する [http://www.slideshare.net/yhassy/webweb-6266527]2年前に講演した「多次元化するWebと今後のWebデザイン [http://www.slideshare.net/yhassy/webweb-6266527] 」。
デザイン

Year in Review 2012

#a01レスポンシブにデザインするために克服すること [http://www.yasuhisa.com/could/article/responsive-design/] 今年 Webサイト制作者の間で話題になった『バズワード』ですが、今年の最初に書いたこの記事はひとつの到達点だと思います。作り方・考え方変えないと作れない。 記事を読む [http://www.yasuhisa.com/could/article/responsive-design/]#a02 楽天から学べる日本的なWebアプローチ [http://www.yasuhisa.com/could/article/rakuten-and-webdesign/] 好き・嫌いではなく、なぜそうなったのかを考えるためのヒントになる記事。日本の社会背景まで踏み込むと納得のところが多々あります。 記事を読む [http://www.yasuhisa.com/could/article/rakuten-and-webdesign/]#a03 スタートアップとデザインについて [http://www.yasuhisa.com/
デザイン

機械化によってはじまる未来のデザインプロセス

毎年恒例の年末イベントは、東京は CSS Nite Shift [http://www.yasuhisa.com/could/article/prototype-the-future/] ですが、名古屋の WCAN [http://wcan.jp/2012winter/] も毎冬講演しています。今年は「モダン・タイムス　〜 コンテンツと作り手を自由にする Web デザイン 」と題して今後の Web デザインワークフローのヒント紹介しました。チャーリー・チャップリンの名作「モダン・タイムス [https://www.amazon.co.jp/dp/B004IPQE6W/ref=as_li_ss_til?tag=could-22&camp=1027&
プロセス

未来をプロトタイプしよう

12月15日に年末恒例のイベント CSS Nite Shift [http://lp25.cssnite.jp/] が開催されました。今年はカバーする分野もグッと広がり、合計 9 セッションという大イベントになりました。また、参加者のおよそ半数が都外からの方で、 Web サイト制作に関わる専門家たちが全国から集まった日になりました。 今年の基調講演は 未来をプロトタイプしよう というタイトルで話をしました。今年は何度か プロトタイプをテーマにした話 [http://www.yasuhisa.com/could/article/webdesign-and-prototyping/] をさせてもらいましたが、昨年から感じていた課題へのひとつの回答だと思っています。 繋げるためのプロトタイプ 昨年の CSS Nite Shift [http://www.yasuhisa.com/could/article/shift5-the-end-of-websites/] で、従来の Web サイト制作のあり方は終わり始めているという話をしました。当時は、Web サイトを制作することだけを
コンテンツ

小さくなる配信パッケージと思考・設計の変化

先週、iPad 専用の雑誌として注目を浴びていた The Daily [http://learn.thedaily.com/] が、12月15日で廃刊 [http://www.theverge.com/2012/12/3/3721544/the-daily-ipad-news-mag-shutdown-december-15th] になりました。創刊後、Web にプレビュー記事を公開したり、多デバイス化を進めていましたが、うまくいかなかったようです。 2 年前に iPad が登場して以来、紙の雑誌と同じような見た目にインタラクティブ性を加えた「タブレット雑誌」は幾つかでてきました。しかし、多くのタブレット雑誌の売れ行きは 印刷版の10%も満たない [http://www.themediabriefing.com/article/2012-05-31/Data-shows-magazine-publishers-are-failing-to-join-tablet-revolution] と言われており、複数バージョン作らなければならないコストに合うかどうか難しいところ。まだ伸び
ユーザビリティ

模索が加速するユーザーテストのコツと今後の可能性

テストするとは模索すること ユーザーテストをすることのメリットは、Web やアプリの開発に携わる方であれば周知のことだと思います。例えば、スポーツ系 SNS Sidelines [http://sidelinesapp.com/] は、6 つの異なる A/B テストを実施 [http://quicksprints.com/post/32792397474/how-we-increased-landing-page-conversion-from-5-to-55] したことで、コンバージョンを 5% から 55% まで上げることに成功しました。 最近見つけたユーザーテストの面白い例といえば、先月の大統領選挙でのオバマ大統領のメール戦略 [http://www.businessweek.com/articles/2012-11-29/the-science-behind-those-obama-campaign-e-mails] 。キャンペーンEメールの件名を「有権者の皆様にお会いしたいです」のようなよくある件名から、「支出が多過ぎるかも」みたいなちょっと変わったものまで様々なパターンを
プロセス

ツールなんてどれでも良いですよ

以前から ピクセルパーフェクトなカンプを作ることに意味はない [http://www.yasuhisa.com/could/article/cssnite-takamatsu/]と話してきました。Photoshop や Fireworks のような絵描きツールは、様々は誤解を引き起します [http://www.yasuhisa.com/could/article/visual-tools-and-webdesign/] し、ピクセルパーフェクトな世界を作り上げることは、可変で自由自在に変化する [http://www.yasuhisa.com/could/article/wd101-no-edge/] Web の世界では不可能に近いです。開発の初期段階でカンプと呼ばれる架空の完成図を作り込むことのリスクは実は大きかったりします。 しかし、それが「Photoshop / Fireworksを使うな」という意味ではありません。 絵描きツールは、ビジュアル面での試行錯誤するときに [http://www.yasuhisa.com/could/article/creative-lag
コンテンツ

コンテンツから始める人間中心設計

11月23日、岡山市で amplifizr, Vol. 3 [http://amplifizr.jp/seminar-event/vol3-basis-of-content-design-on-the-multi-device.html] が開催されました。ポッドキャスト [https://itunes.apple.com/jp/podcast/automagic-podcast/id74183614]の第 51 回、54 回に出演された 大月さん [http://twitter.com/ohtsuki2843]が主催するこのイベント。 1 時間弱のセミナーが多い中、amplifizr は数時間つかってじっくり学べる場になっています。 今回は、「マルチデバイス化を見据えたコンテンツ設計 基礎講座 」と名付けて、スマートフォンやタブレットという今流行のデバイスをはじめ、今後登場するであろう未知のデバイスを利用する人々に対して、どのようにコンテンツを配信したら良いのかという話をワーク（練習問題）も交えて行いました。今までも何度かコンテンツを話題にした講座を行っていますが、今回は長時