Yasuhisa Hasegawa

Yasuhisa Hasegawa

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

デザイン

Twitterから学ぶアプリ設計・運用のススメ

作り方ではなく進め方が知りたい スマートフォンをはじめとしたモバイル機器向けのアプリ設計・開発がはじまって数年。検索をすれば世界中の開発者、デザイナーの知見をたくさん見つけることができますが、「実際どうやって進めるの?」という部分が見えにくいことがあります。仕様書や Tips を読むだけでは分からない、プロセス特有の課題をどのように取り組めばいいのでしょうか。そんなとき、Twitter が公開している Mobile App Playbook: Lessons Learned [https://dev.twitter.com/playbooks/mobile-app-playbook] が参考になります。 Twitter アプリはもちろん、Cannonball [http://www.cannonballapp.io/] や Furni [http://furni.xyz/] のような社内プロジェクトを通して学んだこと10 項目が紹介されています。開発で躓いたこと、課題に挙がったこと、解決につながったことが経験に基づいて書かれているので説得力があります。ステップバイステップのハウツ

コンテンツ

デザイナーが見たオウンドメディアの課題と接点

4月21日に開催されたオウンドメディア勉強会 [https://blog.sixapart.jp/ownedmedia-group.html] に参加してきました。肩書きがデザイナーの参加者は私ひとりという個人的に珍しい環境での集まりでしたが、自身のサイトでもコンテンツに関わる記事 [http://www.yasuhisa.com/could/article/who-does-content-work/] を幾つか書いていますし、何か学べることがあると思って参加しました。バズワードと化したオウンドメディアやコンテンツマーケティングですが、第一線で活躍されている方たちの実態を知るという意味でも有意義な時間になりました。 バズることは重要なのか 毎回テーマを変えてディスカッションをしているオウンドメディア勉強会ですが、今回の議題は「バズ記事を生み出す編集会議」。バズ記事という言葉を聞くと、PV を稼ぐために釣り記事を作るための施策?と思う方もいるかもしれません。Yahoo! トピックスに載るという緩い目標も耳にしましたが、そもそも何をもって『バズ』と呼ぶのかといった根本的なところから

デザインシステム

デザインシステムにあるヒトとコトの課題

今なぜデザインシステムなのか 4月16日 Webridge Kagawa 主催で「パターンラボ – 柔軟性と拡張性をデザインに取り込む方法 [http://webridge-kagawa.com/?p=326](#wmsp20 [https://twitter.com/search?f=tweets&vertical=default&q=%23wmsp20&src=savs] )」というワークショップを開催しました。昨年はコンテンツ戦略 [http://www.yasuhisa.com/could/article/behind-scene-workshop/]やペルソナ [http://www.yasuhisa.com/could/article/using-persona/] など企画・設計寄りのワークショップを実施していましたが、パターンラボは少し実装に寄り添ったカリキュラムにしました。ポッドキャスト [http:

プロセス

デザイン調査にあるバイアスとの向き合い方

シミュレーションとリアリティ デザイン調査は利用者の理解、そしてプロジェクトの方向性を共有するために欠かすことができません。調査がないデザインプロセスは UX デザインとは呼べないといっても過言ではないほど重要ですが、調査だけで利用者の『現実』を捉えるのは難しい場合があります。 ユーザーインタビューを通して様々な意見を聞き出すことができますし、その場で使い方を見せてもらうこともできるでしょう。しかし多くの場合、 利用者の声と意図にはギャップがあります [http://www.yasuhisa.com/could/article/voice-behavior-intent/] し、会議室という日常とは異なる場で、現場で起こっていることを再現するのは難しいです。ユーザーインタビューだけでなく、ユーザビリティテスト、カードソーティングなど様々な手法はありますが、調査する側によってつくられた状況の中(シミュレーション)で行われることが多いです。調査の多くはシミュレーションであり、現実(リアリティ)とは異なることを理解していないと、調査の仕方や集めるデータにバイアスがかかることがあります。

UI

小さく考えて積み上げるデザイン思考

体験のグラデーション デジタルは 0 と 1 で構成された世界であることから、すべてを正確に決めることができるように見えます。しかし、実際のところ紙のデザインに比べてはるかに流動的で予測が難しかったりします。グラフィックツールでつくった世界がそのままの形で再現されることはまずありませんし、利用者の環境によって見た目を変わることもあります。 昔からすべてのブラウザで Web サイトの見た目をまったく同じにすることはできない [http://dowebsitesneedtolookexactlythesameineverybrowser.com/] と言われていますし、スクリーンサイズや OS のバージョンが多彩なスマートデバイスでも同様のことがいえます。しかし、見た目を同じにすることはできないからといって、ビジュアルデザインを諦めるという意味ではありません。Web やアプリをはじめとしたデジタルプロダクトのデザインで難しいのは、何をどこまでをデザインによってコントロールするのかを考えることです。 デザインのコントロールをブラウザが ECMAScript や CSS をはじめとした

仕事

作るだけではないデザイナーの生きる道

職種を超えたデザイナーの集まり 3月20日、浜松市にてDORP INSPIRATION 2016 [http://www.dorp.jp/event/dorp-inspiration-2016/] が開催されました。様々な分野で活躍するデザイナーを対象にしたイベントだけあって、Web デザイナーの来場者数は半分以下。グラフィックデザイナーはもちろん、建築家やインテリアデザイナーの方も参加していました。デザインという限定されたテーマではありますが、様々な分野のデザイナーが集まるイベントは珍しいと思います。 参加者だけでなく、登壇者も多彩な顔ぶれ。オイシイワークス [http://oisiiworks.com]の佐藤実紗さん。書籍「なるほどデザイン [https://www.amazon.co.jp/dp/B012VJNW6Q?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B012VJNW6Q&

UI

プロトタイプに発生する溝と対処法

完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します [http://www.yasuhisa.com/could/article/web-designer-next/]。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間(可変状態)でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」という部分を踏まえてデザインを見ることができますが、誰でもできることではあり

プロセス

評価と効果で見えなくなりがちなデザインの価値

先週末、大人向けワークショップ deCAFE [http://decafe.in] に参加してきました。昨年にも一度参加したことがあって、今回で 2 回目。今回はワークショップではなく過去を振り返りながらお喋りをする会でしたが、運営メンバーにイベントの意図や裏話を聞くことができて大変楽しかったです。 運営チームの方々は Web や IT 業界働くデザイナーがメインですが、ワークショップの内容はそこからかけ離れたテーマを扱っています。テーマの抽象度が高いことから、具体的に「◯◯を学んだ」とは言い表せないものの、他のイベントでは得ることができない何かを掴むことができます。 最近は数十分話すセミナーよりワークショップが多くなってきています [http://www.yasuhisa.com/could/article/behind-scene-workshop/] が、自分のワークショップにも何か取り入れるものがあるかもしれないという好奇心が参加のキッカケでした。前回と今回の参加を通して、漠然としていた deCAFE で得れた「何か」を鮮明にすることができました。それは、今 Web や

デザイン

抽象性と具体性の間で動けるデザイナーになろう

作れることは重要ですが デザインを「作る」を軸にして話すと、デザインの本質が失われることがあります。もちろんデザイナーは何か形にすることが仕事であるわけですが、作る話の多くは答えありきで語られることがあります。「◯◯の作り方」「△△を効果的に見せる方法」など、作ることが目的であったり、課題への答えが既に出た上でデザインが解説されていることは少なくありません。 何かを作り出すためのスキルを磨く上で、作り方を知る必要があります。しかし、答えがあらかじめ提示された状態で作るというやり方ではデザインをする仕事として必要な根本的なスキルを得ることが難しくなります。 UI の実装には、デザインの学習と成長における課題をたくさん見つけることができます。 今でも多くのサイトが採用しているカルーセル(carousel)は良い例です。「クライアントに言われたから」「作るという仕様になっているから」「競合サイトも実装しているから」という理由で作り始める場合がありますが、そこには「 そもそもなぜ必要か」という問いかけが抜け落ちています。 カルーセルの実装に留まる話ではありませんが、ひとつの UI に

デザイン

コミュニケーションとしてのプロトタイプの真価

カンプ2.0になっていないか プロトタイプを作ることが今日のデザインプロセスにおいて、不可欠になりつつあります。3年前ではなかなか響かなかった話題 [http://www.yasuhisa.com/could/article/prototype-the-future/]でしたが、ますます複雑になるアプリ / Web サイトデザインにおいて、いきなり完成品に近いものを作り込むという手法が通用し難くなりつつあります。また、高機能ツール [http://www.yasuhisa.com/could/article/wcan-prototype-design/]も手軽に使えるようになったことで、 とりあえず作って見せるという行為がしやすくなりました。 実機で画面遷移を確認するだけでなく、アニメーションもコードの知識なしで作れるようになった現在。ツールはますますパワフルになっていきますが、プロトタイプツールの目的は実装のための青写真を作るためにあるわけではありません。 ビジュアルデザイン(インタラクションデザインも含)と実装には以前から大きな溝が存在します。デザインカンプと呼ばれる、あた

デザイン

おすすめデザイン入門書8選(洋書編)

予習として洋書はいかがですか? 前回おすすめデザイン入門書 [http://www.yasuhisa.com/could/article/books-for-designers-2016/]を 10 冊紹介しました。どれも自信をもって紹介できる書籍ですが、選書しているときに訳本がない書籍を幾つか見つけました。私の場合、読んでいる本の半分以上は洋書なので、翻訳されていないものは渋々リストから外すことになりました。 そこで今回は、2016年2月現在、訳本が出版されていない洋書を 8 冊紹介します。前回と同様、Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍です。いずれ翻訳される可能性があるので、そのときに備えてメモ程度に見ていくと良いかもしれません。 [https://www.amazon.co.jp/dp/0123969808?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=0123969808&

デザイン

おすすめデザイン入門書10選

[http://www.yasuhisa.com/could/content/images/wordpress/2016/02/book-cofee.png] たまには本もいかがですか? セミナーやワークショップのあとに質問を受けることがありますが、「おすすめの書籍はありますか?」と聞かれることがあります。 Web には膨大な情報がありますし、英語まで手を広げると研究者による文献にもアクセスすることができます。しかし、ある特定のトピックを要所を落とさず学びたいときは書籍が便利です。 目まぐるしく状況が変わるだけでなく、デザイナーとして知っておくべき領域も広い今日のデザイン。ソフトウェアの使い方を覚えることも重要ですが、作るための考え方や伝えた方を学ぶことに多くの時間を費やしたほうが良いでしょう。自分のデザインの意図が説明できて、ようやく同僚やクライアントにデザインを理解してもらえるからです。 今回は、デザイナーとして読んでおきたいオススメの入門書を紹介。Web やアプリに特化したものではなく、デジタルプロダクトに携わるデザイナーに向いている書籍を選びました。すべて日本語で読むこ

アクセシビリティ

絵文字のアクセシビリティについて少し調べてみた

Peach🍑を紹介する記事 [http://www.yasuhisa.com/could/announcement/peach-cool/] で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ+絵文字 [https://blog.twitter.com/ja/2015/2023tv] を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコード [http://apps.timwhitlock.info/emoji/tables/unicode] です。実際、どのように読み上げられるのでしょうか?そもそも読み上げられているのでしょうか? サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice [https://www.google.com/googlevoice/

サービス

Peach🍑から学ぶデザインに関わる4つの傾向

いろいろ学びがあるPeach Peach [http://peach.cool] というアプリ、ご存知ですか? Vine [https://vine.co] の創始者として知られている Dom Hofmann の新作。ひとことで言い表すとメッセージアプリですが、チャットと言うより、ステータスアップデートをメッセージ形式で更新できるアプリ。小さな情報を気軽にやりとりするという Vine、そして同じチームが開発している Byte [http://byte.co] と重なるコンセプトです。 今年の CES [https://www.cesweb.org] は 1 月 6 日から 9 日まで開催されましたが、イベント期間中に合わせてリリースしたというタイミングも絶妙。リアルイベントとソーシャルメディア両方で広がった印象があります。知り合いの『今』を知るためのアプリなので、 CES のように多くの方が一箇所に集まるイベントとの相性が良かったのかもしれません。 もちろんデザインについて Peach から学べることは幾つかあります。 コンテンツのメッセージ化

デザイン

性別選択UIにあるデザインの課題

私は男性として生活をしています。 ソーシャルメディアなどにプロフィールを記載する場合は「男性」を選択しています。女性であればプロフィールに「女性」と選択して、自身を「女性である」と考えるでしょう。 こうした性別選択は、多くの方にとって当たり前すぎて深く考えないことです。しかし、こうした自分を表現する小さな部分にも課題は隠されています。人によっては「男性」「女性」という分類に当てはまらない方もいますし、それを特定の人にしか公表したくないという場合もあります。自分のジェンダー(gender, 性)は男性でも女性でもなく、「〇〇である」と意思表示をしたい方。自分の意向に合う呼ばれ方をしたいと考える方もいるはずです。 この課題に取組んでいるソーシャルネットワークを幾つか見かけるようになりました。男性、女性のという選択肢だけでなく「カスタム」という項目を用意し、そこに自分の性を表すのに適切な言葉を自由に記入することができるというアプローチです。 例えば Facebook の場合、誰に対して自分の性を公表するかを決めることができるだけでなく、自分をどのように呼ばれたいのか「him

ガイドライン

デザインSDKの可能性を探る

SDKから学べること SDK(Software Development Kit – ソフトウェア開発キット)とは、ソフトウェアを開発するために必要な文書、関連ファイル、ツールが揃ったバンドルのようなものです。例えば Android SDK [http://developer.android.com/intl/ja/sdk/index.html] には、Android アプリを開発するために必要なライブラリだけでなく、プレビューをするためのエミューレータや、開発を効率良くおこなうためのユティリティが含まれています。 良い SDK には、以下の 4 つの特徴があります。 * コアライブラリが安定していて、主張通りに動作していること。 * ドキュメンテーションはもちろん Issue Tracking が維持・管理されていること。ソースを読んで学習せよでは十分ではない。 * どのように書けば動作するのか分かる例が用意されていること 。コンポーネントの互換性など、ドキュメンテーションだけでは説明しきれないことが分かるもの。 * 拡張性、柔軟性があること。別の言語で書かれたプログラ

Webデザイン

Webデザインシステムはじめの一歩

CSS フレームワーク活用のタイミング Bootstrap [http://getbootstrap.com/]、Foundation [http://foundation.zurb.com/sites.html] をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex [http://gridlex.devlint.fr/] のように Flexbox を活用したグリッドシステムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザ

コンテンツ

Mediumでコンテンツ配信して気づいたこと

遠くなりはじめた Web サイト 2015年11月から12月にかけて Medium [https://medium.com/] のほうでコンテンツ配信をしていました。 Medium は昨年から日本へ本格進出をしていることから、注目している方も少なくないと思います。Medium の人気の秘密は、使いやすくコンテンツの邪魔をしないライティング環境を提供している部分だけではありません。Twitter の創業者のひとりであり、現 Medium の CEO である Evan Williams [https://twitter.com/ev] を中心としたスタートアップ & テック界隈から徐々に Medium の文化が広がったという背景も魅力。こうした機能やデザインだけでは表現できないところまで日本語化されているわけではないですし、日本では昔からあるブログプラットフォームをはじめ、書く環境が豊富に揃っています。 私の場合、情報発信ができる環境が既にあるので Medium に魅力を感じていなかったわけですが、ある実験・検証をしたくて始めることにしました。 [https://medium.

デザイン

2016年、デザイナーが実践すること

デザインってなんだっけ? デザインはこれから重要になる。 デザイナーの端くれである私ですが、そんなこと言っている状態ではないのでは?と思うことがあります。 2016 年はデザインの重要性を伝える前に、デザインへの信用を取り戻すためのアクションが必要ではないかと考えています。ここ数年、海外(特に欧米)ではデザインの役割が大きく進化してきていますが、それを真に受けて日本で同じように実践しても意味がないと思います。なぜなら、デザインという言葉や、デザイナーの仕事における考え方の『前提』が大きく異なるからです。 デザインの価値を商業的なものだけにせず、人々や社会に良い影響を及ぼすためのデザインをしようという意向を示すデザインマニフェスト [http://www.yasuhisa.com/could/article/design-manifesto/] が1964年に発表されています。見た目だけでなく、問題解決のためのデザインを考えていこうという動きが 50 年前からあります。また、アメリカのデザイナー協会 AIGA は、無料で「とりあえず作ってみて」と注文がくる Spec Work は

デザイン

プロトタイプが閉じたデザインを切り開く

12月12日、名古屋にて WCAN 2015 Winter [http://wcan.jp/news/report-wcan2015winter.html] が開催されました。今年はスクリーンが 32:9 という超ワイドスクリーンがある会場でした。今までにないスライドデザインで困難なところが幾つかありましたが、良い経験をさせてもらいました。会場や観客に応じてスライドデザインは工夫していますが、その大切さを改めて痛感したイベントでした。 登壇内容も含め、イベント全体に関するレポートを参加した方々が公開しています。ぜひこちらも参考にしてください。一緒に登壇した佐藤歩さん(@ahomu [https://twitter.com/ahomu])の「HTML6 でも CSS4 でもない Web 技術のゆくえ – WCAN 2015 Winter に登壇してきました [https://havelog.ayumusato.com/news/e688-wcan_2015_winter.html]」も必読です。

アクセシビリティ

コンテンツデザインから始めるWebアクセシビリティ

[http://www.yasuhisa.com/could/content/images/wordpress/2015/12/cover-content-a11y.png] 理解という名のアクセシビリティ Web アクセシビリティの課題には大きく分けて 2 種類あります。ひとつは、色、形状、動きといった視覚に関わること。そしてもうひとつは、マークアップをはじめとしたマシンリーダブルに関わることです。マークアップが正しく記述されていて、視覚的にも分かりやすいことは Web アクセシビリティの確保において必須ですが、これらとは別に『第三の課題』のようなものがあると考えています。 それは利用者が理解できるコンテンツを制作・配信する という課題です。正しくマークアップされていたとしても、そのマークアップされたコンテンツが人にとって理解しにくいものであればどうなるでしょう。利用者はタスクを達成することができないでしょうし、情報を求めて彷徨うことになるかもしれません。 単に情報へアクセスできるだけでなく、意味のある情報へアクセスできるようにする必要があります。利用者の目的が達成されない

コンテンツ

コンテンツをデザインするということ

見た目はとても重要だけど 第一印象は Web サイトやアプリデザインでも重要です。見た目が良いということで、使い始めてくれる場合がありますし、製品やサービスの評価が中身ではなく見た目で判断されることがあります。人は 0.05 秒で Web サイトの良し悪しを判断する [http://www.tandfonline.com/doi/abs/10.1080/01449290500330448#.VmtzuBp96Aw] 傾向にあるので、見た目は良くしておくべきでしょう。しかし、長く使われる要因がビジュアルではなく、コンテンツということは多々あります。 例えば Reddit [http://www.reddit.com/] はデザインが洗練されたサイトとは言えませんが、世界的に利用されているサイトです。 利用者が求めているコンテンツがそこにあれば、見た目が少し良くなくても人は戻ってきます。 しかし、これは良質のコンテンツがあれば、デザインは必要ないという意味ではありません。先述したように、見た目で印象が変えることができますし、使い勝手も向上すればコンテンツへアクセスしやすくなる

UX

データに踊らされないようにするためのデザインアプローチ

11月28日に MTDDC Meetup Tokyo 2015 [http://mtddc2015.mt-tokyo.net/] が開催されました。 Movable Type [http://www.sixapart.jp/movabletype/] に関わるセッションだけでなく、特定の CMS に囚われないディレクションやサイト設計・運用の話もありました。昨年もそうでしたが、WordPress [https://wordpress.org/] や Drupal [https://www.drupal.org/] といった他 CMS のコミュニティメンバーを交えた座談会もあるのも MTDDC の魅力です。 今回は「データと上手に付き合ってデザインする方法」と題して、クリエイティブとデータを繋げるための考え方や手法を紹介しました。 数字が嘘をつくこともある 近年、すべてを数値化して測定・評価しましょうという動きがあります。本サイトでもデータの重要性を伝え続けています [http://www.yasuhisa.

コンテンツ

Webサイトの成熟へ導くシンプルな視点

11月7日に Jimdo で作成された年間ベストページを決定する「Jimdo Best Pages 2015 [http://www.jimdopages.com/]」が開催されました。このイベントで、株式会社ウェブライダー [http://www.web-rider.jp/]の松尾 茂起さん、株式会社インプレス [https://netshop.impress.co.jp/]の瀧川 正実さんと一緒にベストページの審査をしました。 個人的に文脈をきちんと理解していない Web サイトを評価することに躊躇がありました。漠然とした印象の評価にならないように、自分なりに情報収集をしたり、アワードとは別の視点から評価指標を設けるなど工夫をしました。手間のかかる作業になりましたが、Jimdo の枠を超えた課題を幾つか見つけることができました。CMS、画面設計、コンテンツ運用の課題が、表層的なデザインにも影響するものだと改めて思いました。 初めての次へどう進むか Jimdo のユーザー層で特徴的なのが、本サービスで初めて Web サイトを作ったという方が多い点。Jimdo は多くの方に「始

UI

すべてがUIになるVRの世界

先日、報道を VR で楽しむ NYT VR [http://www.nytimes.com/newsgraphics/2015/nytvr/] を試してみました。VR はゲームをはじめとしたエンターテイメント性の高い分野で注目されていましたが、 NYT VR はジャーナリズムからのアプローチだったので新鮮でした。これは仮想空間だと分かっていても、次第に世界に没頭してしまい、現実と仮想の境目が曖昧になる感覚は VR 体験ならではです。 スマートウォッチをはじめとしたウェアラブルや IoT の登場によって、従来のような GUI を前提としたインタラクションデザインではなく、No GUI のデザイン [http://www.yasuhisa.com/could/article/designer-should-use-wearable-now/] が注目され始めています。すべてをボタンのような操作 UI で表現するのではなく、音声、触感、行動でインプット・アウトプットすることがありえます。しかし、VR