Tagged

デザイン

A collection of 255 posts

デザイン

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 項目が紹介されています。開発で躓いたこと、課題に挙がったこと、解決につながったことが経験に基づいて書かれているので説得力があります。ステップバイステップのハウツ

UI

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

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

デザイン

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

作れることは重要ですが デザインを「作る」を軸にして話すと、デザインの本質が失われることがあります。もちろんデザイナーは何か形にすることが仕事であるわけですが、作る話の多くは答えありきで語られることがあります。「◯◯の作り方」「△△を効果的に見せる方法」など、作ることが目的であったり、課題への答えが既に出た上でデザインが解説されていることは少なくありません。 何かを作り出すためのスキルを磨く上で、作り方を知る必要があります。しかし、答えがあらかじめ提示された状態で作るというやり方ではデザインをする仕事として必要な根本的なスキルを得ることが難しくなります。 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🍑から学ぶデザインに関わる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 が維持・管理されていること。ソースを読んで学習せよでは十分ではない。 * どのように書けば動作するのか分かる例が用意されていること 。コンポーネントの互換性など、ドキュメンテーションだけでは説明しきれないことが分かるもの。 * 拡張性、柔軟性があること。別の言語で書かれたプログラ

デザイン

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 サイトやアプリデザインでも重要です。見た目が良いということで、使い始めてくれる場合がありますし、製品やサービスの評価が中身ではなく見た目で判断されることがあります。人は 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 は多くの方に「始

デザイン

デザインにある様々な対立について思うこと

デザインの議論で以下のような対立を見かけることがあります。 * アプリ/Web * 文系/理系 * テキスト/ビジュアル * アート/デザイン * アクセシビリティ/視覚表現 * UI/UX 私たち人間は様々なことを分類することを好みます。一見相反するものは、明確に分類しようとしますし、それぞれの定義を明確にしようともします。片方を選ぶことで、もう片方は諦めなければいけないと考えている方もいると思います。それぞれの言葉の意味を理解しておくべきですが、どちらかを選ぶというものではないと考えています。 ふたつを合わせることで、私たちの仕事の可能性を広げることができるはずです。 * 自分の仕事をアプリか Web いずれかに絞ることはありません * 文系だからといって数字が弱いということはありません * テキストとビジュアルが合わさることでコンテンツが増幅します * アートと呼べるような問題解決は存在します * 視覚的な表現が豊かでもアクセシブルにはできます * UI から生まれる体験もありますし、体験の理解が UI を生むこともあります 深みにハマった定

デザイン

ひとりから始めるデザイン批評

孤独だから見えにくい デザインは孤独な作業になりがちです。ひとりでデザインファイルと向き合う時間が長いので、自分がつくったものに対し感情的な繋がりができてしまうことがあります。また、プログラムのように、ひとつのファイルを何人かが触るということも少ないので、ある程度のステージに到達するまで誰もデザインを目にしないことがあります。つまり、『完成品』しか提示されないので、その間どのような試行錯誤がなされたのかも分からないわけです。 自分の視点だけに閉じこもることを避けるために、デザイン批評 [http://www.yasuhisa.com/could/article/design-ciritique/] を通して、何が改善できるかをクライアントや同僚と話し合いをおこないます。批評を意識した会話は、ひとりのデザイナーとしての成長にも大きな影響を及ぼしますが、誰でも会話ができる環境にいるわけではありません。フリーランスはもちろん、まだデザインの会話を始めにくい環境で働いている方もいるでしょう。 デザイン批評は複数人で実践するのが理想的ですが、ひとりで自分のデザインを批評することもできます

アクセシビリティ

今からできるWebコンテンツの次のコト

10月25日、仙台で The NEXT WEB CONTENT 2015 [https://weba11y.jp/the-next-web-content-2015.html] が開催されました。主催である株式会社インフォアクシア [http://www.infoaxia.co.jp]設立11周年記念として、Web アクセシビリティを中心に、デザイン、ユーザビリティ、SEO など、Web に関わる様々な話題を扱ったイベントになりました。トピックは広く浅いわけですが、異業種の専門家が集まることで、新たな視点の発見や共通点を見つけることができました。 本イベントの様子は Togetter #tnwc2015 [http://togetter.com/li/891063] をご覧ください。 Web利用は『終わった』のではなく『変わった』 ここ1年「Web は終わった」というニュアンスが含まれた話題を国内外で耳にします。Mashable

UI

大きいスクリーンのタッチデザインを考える

タッチは大前提 発表後、発売を待たずに売れ切れ状態になった Surface Book [http://www.gizmodo.jp/2015/10/surface_book_sold_out.html]。ノートパソコン並みの大きさを誇る iPad Pro [http://www.apple.com/jp/ipad-pro/] 。それぞれコンセプトが異なる製品ですが、スクリーンサイズが従来のタブレットの域を超えたものが注目されているのは、デスクトップパソコン以外で本格的な作業をしたいというニーズが高まりつつあるからでしょう。 Adobe のコアアプリも Windows 向けにタッチフレンドリー [http://www.engadget.com/2015/10/05/adobe-touch-friendly-design-apps/] に改良が加えられています。 Windows だけでなく、Linux 製の Gnome [https://www.gnome.org/

デザイン

海外の動向からみるデザインツールの現在

デザイナーとツールは切っても切り離せない関係です。ときにはデザイナーのスキルはツールの熟練度や使い分けの仕方で決まることもあります。長く使い続けたいですが Web やアプリのデザインは、テクノロジーと密接に繋がる仕事であるが故に、いつの間にか新しいツールが主流になることがあります。 特にここ 10 年でデザインの仕事は大きく変わりました。今でも Web デザイン、アプリデザインにおいて Adobe 製品 [https://www.amazon.co.jp/dp/B00FOHQZPI?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B00FOHQZPI&adid=1CY484XRPNWJFAPJ9TD9&] は多大な影響力をもっていますが、それがほぼ唯一の選択肢だった頃と今は違います。また、今まで以上にデザインにスピードと柔軟性が求められているので、Adobe 以外のツールも必要になってきています。 [http://tools.subtraction.

UX

ネガティブ体験を軽減するデザインアプローチ

過大評価されがちな悪い体験 心理学で Nagative Bias [https://en.wikipedia.org/wiki/Negativity_bias] (ネガティブバイアス)という概念があります。不快な感情、苦痛な思い出といったネガティブな経験は、ポジティブな経験より私たちの考え方に大きな影響を及ぼすというものです。言い方を変えるのであれば、ポジティブな体験は私たちの記憶や今後の行動に及ぼす影響は少ないということになります。たとえ、全体的に良い体験だったとしても、最期に悪い体験をした場合、私たちの記憶には「悪かった」と残ることがあります。ネガティブバイアスとは、負の要素を『拡大・拡張』してしまう状態といえます。 アプリストアのレビューが低くなりがちなのも、ネガティブバイアスの影響があります。問題なく普通に使えたという体験は、記憶に残ることは少ないでしょう。しかし、自分の思うようにいかなかった場合、たとえ他の機能が問題なく動作していたとしても「悪い」と考えてしまうことがあります。「この部分だけ良くないけど、他は満足」と評価する人はわずかです。 一度「悪い」と判断してしま

デザイン

プロセスから学ぶペルソナ活用法

「ユーザーのためにデザインをする」という言葉はデザインの現場ではよく耳にする言葉ですが、ユーザー像が共有されていないこともあれば、それぞれ異なるニーズやゴールを想像していることがあります。また、ユーザーは「お客様」という少し遠い存在になりがちで、感情移入が難しいことがあります。 ペルソナをつかった共有や活用に興味があるけど、どのように始めたら良いのか分からない人は少なくないと思います。そこで「基礎からはじめるペルソナ活用法 [http://growthhack.academy/seminar-all/seminar14/] 」という講座をグロースハックアカデミー主催で開催しました。以前からワークショップ [http://www.yasuhisa.com/could/article/behind-scene-workshop/] でペルソナを扱っていましたが、今回は受講時間すべてペルソナについて深く学べるカリキュラムを組みました。 潜在ニーズや行動が分かるペルソナ ペルソナはユーザーインタビューや Web 解析など様々な調査データを基にして作られます。ワークショップという限られた

デザイン

デザインを理解してくれないと嘆く前に

分かっていないのは誰か? デザインの評価 [http://www.yasuhisa.com/could/article/starting-design-critique/] は、デザイナー同士でも難しいこと。それが違う職種や背景の方と話をするとなると、さらに難しくなります。プロであれば、仮説を基にして議論をするよう努力しますが、周りがそうであるとは限りません。 人間工学者 Gitte Lindgaard が 2006 年に発表した文献「Attention web designers: You have 50 milliseconds to make a good first impression! [http://www.anaandjelic.typepad.com/files/attention-web-designers-2.pdf] 」によると、ユーザーはわずか 0.05 秒で Web サイトの見た目に判断を下すそうです。

デザイン

利用者の声と意図のギャップを理解する

利用者の声は解ではない 利用者の声を受け止めて、よりよい製品を作りたいとデザイナーであれば考えるはずです。しかし、利用者の声がデザインの解を提示しているとは限りません。ときには根本的な問題の解決になっていないことがあります。 それを裏付ける考え方として、政治学者であり認知心理学者でもあるハーバード・サイモン [https://ja.wikipedia.org/wiki/ハーバート・サイモン]博士が 1956 年に提唱した「Satisficing [https://en.wikipedia.org/wiki/Satisficing]」という用語が参考になります。これは、Satisfy(満足)と Suffice(十分)を組み合わせた造語で、日本語では「こんなもん化(参照 [http://cruel.org/econthought/profiles/simon.html])」「満足化(参照 [http://www.weblio.jp/

デザイン

プロトタイプの使いどころからみる紙の真価

今だからこそ再入門 2015年7月12日東京 OpenCU のイベント「CMS SUNDAY Vol.4 [http://opencu.com/events/cms-sunday-vol4]」に登壇しました。セミナーと一緒にワークショップも実施されましたが、CMS のカスタマイズ知識なくても参加できるカリキュラムが組まれていました。ファシリテーションを務めた羽山祥樹さん [https://twitter.com/storywriter] のワークショップの進め方も含めて勉強になる充実した1日になりました。私のほうはワークショップ前の準備運動としてプロトタイプの基本を振り返る話をしました。 2012年頃から [http://www.yasuhisa.com/could/article/prototype-the-future/] プロトタイプに関するセミナーやワークショップをしています。翌年にはデジタルハリウッド大学院 [http://www.yasuhisa.com/could/article/dh-prototyping-course/]でプロトタイプの講座も開いています。