こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot

ユーザーファースト推進室、デザイナーの坂本です。 私が担当をしている「クックパッドおいしい健康」には、クックパッド本体の様々な場所から導線（誘導のリンク）が張られています。その中の1つに、特定キーワードで検索した時の導線があります。 ↓こちらは、スマートフォンサイトの特定キーワード検索時に表示される「おいしい健康」への導線です。例えば「糖尿病」や「高血圧」など特定の病名が入ったキーワードでレシピ検索をしたとき、この導線が表示されます。 この導線は検索ボリュームに対する遷移数の割合が著しく低かったため、改善のABテストをしました。小規模な改善だったのですが、その時に考えたことと、結果が興味深かったので、ご紹介できればと思います。 変更前の問題点 変更前の問題点として、以下のようなものがありました。 ユーザーへのメリットが不明瞭 別サービスに遷移することがわかりづらい キーワード検索のノイズに

UX Tokyo Advent Calenderへの参加のお誘いを頂いたので、僭越ながら記事を公開します。 内容としては時間軸によるUXの定義の中の、予期的UXについての部分になります。全体としては多くの記事などに書かれていますが、個々の段階についてはフォーカスしたものがないため、改めて考え直しまとめたものになります。また、その他の時間軸の部分についても今後書いていく予定です。 もし情報の漏れや解釈の誤りがあれば、UX Tokyoのグループや直接お会いした際にご指摘頂ければ幸いです。 時間軸としてのUX 2010年のドイツでのセミナーを翻訳されたUX白書というものがあります。 UX白書では異なる期間で生じる体験のプロセスを、図のように4つの段階に分類して説明しています。それぞれ「予期的UX」「一時的UX」「エピソード的UX」「累積的UX」の4つの段階に分類されており、全体をデザインしていく

公開日 : 2014年5月21日 (2014年6月4日 更新) カテゴリー : ユーザビリティ / 情報設計 (IA) Web サイト上に提示される情報は、「シンプル」であるに越したことはありません。ユーザーの目的達成に関係しない情報ノイズは、極力、無いのがよいと言えるでしょう。 そして、その情報が不要なノイズかどうかは、ユーザーの目的の大小や粒度、ユーザー自身の当該分野に対するリテラシー (理解の度合い)、ユーザーの利用コンテキスト、などによって異なります。 この記事では、ユーザーに合わせて情報ノイズを排除する考えかたとして、「Progressive Disclosure」と「Progressive Reduction」について考えてみたいと思います。 Progressive Disclosure (プログレッシブ ディスクロージャー) 「Progressive Disclosure」と

公開日 : 2015年6月6日 (2015年6月10日 更新) カテゴリー : ユーザビリティ Pull to refresh という UI パターンがあります。タッチインターフェースにおいて、指を下方向にドラッグして離すと、画面の表示内容が最新状態に更新される、というものです。 iPhone を例に挙げると、Twitter、Facebook、Instagram、Pinterest、Swarm、Dropbox、Google Drive、Gmail、YouTube、…など多くのアプリで採用されており、アップル純正のメールアプリや Podcast アプリなどにも採用されています。 iPhone の Twitter アプリの pull to refresh。指を下方向にドラッグすると図示のようにローディングアイコンが現れ、指を離すとタイムラインが更新される。 この pull to refresh

サイトのUIを検証 １．TOPページ/カテゴリページ TOPページ（左）の表示に必要にして、スマートフォンECサイトとして売上を上げていく上で、必要な情報が表示されており、賑わっている感じも出ています。 その中でも目に留まったのが、スマートフォン以外の携帯電話では、間もなく通信販売を終了するというお知らせ。 MM総研「2014年度通期国内携帯電話端末出荷概況」（http://www.m2ri.jp/newsreleases/main.php?id=010120150514500）によると 携帯電話の出荷台数のうち約4分の3はスマートフォンですが、フィーチャーフォン出荷台数は前年度比6.0％増といったデータも出ています。 根強いフィーチャーフォンユーザー向けにも通販を継続させるかの判断は、どのECサイトでも悩ましい決断なのかもしれません。 カテゴリページ（右）でも、商品のサムネイル画像や販売

スマートウォッチアプリは、ナビゲーション要素よりもジェスチャーに頼り、不可欠なものを優先し、ハンドオフをサポートし、目的に適合した、単独で用をなすコンテンツを作り出す必要がある。 The Apple Watch: User-Experience Appraisal by Raluca Budiu on May 17, 2015 日本語版2015年6月22日公開 私は昨年、Samsung Galaxyシリーズのスマートウォッチ、Gearを分析して、「スマートウォッチこそが未来である。しかし、Samsung Galaxy Gearはまだその途中経過にすぎない」と書いた。今、Apple Watchが多数の技術系サイトであふれんばかりの熱狂を引き起こしている。にもかかわらず、残念ながらそのUIは我々を未来にそれほど近づけてくれるものではない。今回の記事ではApple Watchについての所見と、デ

私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し

買物情報事業部の三浦です。 クックパッドではApple Watchの発売に合わせて、iOSアプリをApple Watch対応にアップデートしました。 クックパッドのWatchアプリは、レシピを閲覧するという機能だけをもったとてもシンプルなアプリです。 実はそんな王道なアプリでも、いくつかの紆余曲折を経て完成させました。今回はその開発の経緯を通して、改めて実感したシンプルさやユーザー視点の大切さをお伝えできればと思います。 アプリの機能紹介 クックパッドのWatchアプリでできることは以下の２点のみです。 とてもシンプル。 一番最後に見たレシピの閲覧(材料と手順のみ) 調理時間から起動できるタイマー機能 レシピ閲覧機能にした経緯 クックパッドでWatchアプリをつくるとなれば、「レシピを見る以外他にはないでしょう」と思われるかもしれません。 でも開発当初は「Watchでレシピを読まなくない？

UIデザインに特化したプロダクションは日本だとまだ珍しい。そんな中で注目されるのが「STANDARD inc」だ。彼らが掲げる「社会における課題を解決するためのデザインの本質」とは？代表の鈴木健一さんに立ち上げの背景、デザインの本質に迫るに対する考え方を伺った。 「デザイン」がビジネス戦略の核となる時代 革新的なUIデザインなどでも話題になった「SmartNews」だが、そのウォークスルーとコーチマーク（操作性ガイド）のデザイン等を手がけたのが「STANDARD inc（スタンダード）」だ。UIデザインに特化したプロダクションとして設立。UI専門家集団として注目を集めている。 SmartNews Walkthrough & Coachmark 日本でもユニクロやセブン＆アイなど大企業においてデザイナーやクリエイティブディレクターが顧問・相談役を務めるケースが増加。海外では、世界大手のコンサ

みなさん、こんにちは。助田です。 株式会社イノセンティブとしては、ディレクターのみなさんのキャリアアップにお役立てできるよう、今後も精進していきたいと思っています。 今日はディレクターのキャリアを整理する方法を伝えます。 僕は本業で、ディレクターを中心に「転職したい！」、「キャリアアップしたい！」という方々のご相談に乗っています。 そして、今も昔もディレクターの方々は自分のキャリアに悩み続けています。 最近は、より正確に求職者の方々を知るために、レジュメや口頭でのコミュニケーションに加えて、とあるフォーマットを使っているんです。 弊社では10年後のキャリアを想像して、方向性を決めた上で、どの方向にどんなキャリアやスキルを積んでいくのか。 という考え方を大事にしていますが、自分の先々なキャリアの想像、ひいては10年後の世界、なんてなかなか具体的に想像できまへんわ、って当然だと思います。 最大

プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ

こんにちは、@h0saです。 HCD-Net主催の「2014年度サービスデザイン方法論 第2回：カスタマージャーニーマップ」に参加しました。 2014年度サービスデザイン方法論： 第1回　エスノグラフィ 安藤昌也氏（HCD-Net理事・千葉工大） 第2回　カスタマージャーニーマップ 長谷川敦士氏（HCD-Net理事・コンセント）・坂田一倫氏（コンセント）【この記事】 第3回　発想法 山崎和彦氏（HCD-Net理事・千葉工大） 第4回　ユーザーインタビューと要求抽出 早川誠二氏（HCD-Net理事） 第5回　構造化シナリオ法 早川誠二氏（HCD-Net理事）・高橋克実氏（ホロンクリエイト） 第6回　ペーパープロトタイピング 浅野智氏（HCD-Net理事）・坂本貴史氏（ネットイヤーグループ） 第2回のテーマは、コンセントの長谷川さんによる、「カスタマージャーニーマップ」。アシスタントとして坂田

なお、ズレの大きい言葉でしか表現されていない場合が問題であって、「お問い合わせ・ご相談」「登録・入会」のように企業側の言い回しとユーザ配慮の言葉の両方が併記して用いられていることで、よりわかりやすく表現できる場合もあります。 ユーザの行動手順に基づいていること 注意しなければならないのは、ユーザにとってわかりやすい表現というのは、ユーザが言葉の意味を理解できるようになってさえいれば良いというわけではありません。ユーザの行動手順に基づいているかまでを含めて考える必要があります。特にコンバージョンに結びつくボタンなどの場合はこれができているかできていないかが決定的なコンバージョン率の違いをうむことになります。 わかりやすい事例として、beBitさんのユーザビリティ実践メモに掲載されていた宿泊先を探して予約できる旅行サイトの事例を紹介します。 ラベリングが及ぼす影響 - 「予約」か「検索」か (

クックパッド検索・編成部の須藤耕平です。 昨年の夏に担当した、PCサイトのトップページリニューアルに引き続き、今年の２月にスマートフォンサイトのトップページをリニューアルしました。 前バージョンのスマートフォンサイトは、設計時から約１年半が経過していたため、コンテンツが増えた現在では全体的にかなり煩雑になっていたこと、また、PCサイトでの成功事例をスマートフォンサイトにも取り込むことを主眼として取り組んだリニューアルでした。 本エントリーでは、今回のリニューアルにあたって、主にデザイン的な面で工夫した点、及び、それにまつわる苦労話を、具体的な事例と合わせて紹介したいと思います。 PC版をそのまま移植したらものスゴイ長いページになった 今回のケースでは前述のPCの事例が先行してあり、結果も概ね良好であったため、当初は特にコンテンツを絞らず、PC版とほぼ同内容を移植する形で進めていたのですが、

一般的なアクセス解析で測定するのはPCのモニタ解像度の場合が多い。しかし、それをそのままユーザーがブラウザが描画できる領域と想定しWebページのデザインをしてしまうと、間違いが起きる。なぜなら、大半のユーザーがブラウザの描画領域がPCモニタの解像度に比べて小さいエリアに過ぎないからである。 PCモニタの解像度がブラウザの描画領域と同じになるのはWindowsであれば、タスクバーを隠した状態でブラウザを全画面表示にしなければならない。しかし、実際には日常的な利用においてそのような使い方をしているユーザーは稀だろう。通常のユーザーは画面下部にはWindowsのタスクバーがあり、ブラウザの上部にはメニューバーや、ロケーションバー、タブエリアなどが並んでいる。仮にウィンドウを最大化したとしても、その分縦方向の描画領域は狭くなっている。横方向に関しても、例えばお気に入りをブラウザのサイドバーに表示し