この記事はGreylock(VC)でパートナーを務めるJosh Elman氏のブログ記事を公式に許可をいただき翻訳したものです。 多くの人が、Snapchatのインターフェイスに戸惑っている。年長者の人たちをからかうつもりはないが、ある年齢を超えた人の多くが、フェイススワップ機能のようなSnapchatの基本的な使い方を理解するのに苦労しているようだ。Snapchatの使い方に関して何人から愚痴を聞いたか分からない。彼らは訴える。「あー、使い方が分からない。なんでこんなに複雑なんだよ？」 Snapchatのデザインにおける難解さはバグではなく、むしろ一つの機能であると私は言いたい。Tinderと同様に、そのデザインはユーザーが積極的に参加し、自分の経験を他人とシェアすることをうながすように設計されている。そして、その点こそSnapchatが成功に至った重要なポイントなのだ。 Snapcha

Column ＜COLUMN＞ SnapchatとPeachから解く、ミレニアル世代が生み出した「ミレニアルデザイン」 皆さま、こんにちは、高橋クロエです。 突然ですが、皆さんは時々SNS疲れを起こすことはありませんか？ 近頃私の周りでは、FacebookやTwitterの中の人間関係に疲れ、もっと気楽に写真や近況をアップしたい！と呟く人が増えてきました。 そのニーズを埋めるかのように密かに流行り始めているのが、アメリカでスタートした新しいクローズドSNSアプリの「Snapchat」と「Peach」。職場の人やあまり知らない人と繋がる必要もなく、Instagramのように毎度キメ顏を選んで載せる必要のないこのSNSアプリは、今私の住む地域の若者の間ではちょっとしたブームとなっています。 今回はそんなSNSの救世主、「Snapchat」と「Peach」から見たミレニアル世代のSNS活用の実態

世界中の若者の間で流行っているSnapchat。 インストールはしてみたものの、何をどうすればいいのかわからないという方も多いのではないでしょうか。 私もその一人で、もう既にターゲットユーザーから遠ざかってしまったみたいで、いまいち馴染めないでいました。 世界でこんなに普及しているアプリなのに、使いづらいと感じてしまう理由はなんなのか。 少なからずその理由にUIが関わってくるはず。改めて、使いづらい理由をデザイナー視点から探ってみたいと思います。 起動画面が自撮りのカメラSnapchatの新しいところは、何と言っても「メッセージアプリと思いきや起動画面がカメラ」というところではないでしょうか。 下記のように、他人に何かメッセージを送る時は普通は送る相手を先に選びます。そして、伝えるためのテキストを入力し、必要であれば写真やスタンプなどを送ります。 これが一般的だと考えられていたフローをSn

パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア（Bloomberg Media）は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様したのだ。 パブリッシャーは、トップページへのトラフィックの全体的な減少に苦しんでいる。だが、ブルームバーグメディア（Bloomberg Media）は、その対策を見つけたと考えているかもしれない。10月にテクノロジーセクションを再開した際、各記事を下へスクロールしていくと、トップページが現れる仕様にしたのだ（Technology – Bloombergのトップからどれか記事を選んでスクロールしてもらいたい）。 「メディアでは、全体としてトップページへのダイレクトなトラフィックが徐々に減少する傾向がある。新

Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの

パスワードを忘れた方はパスワードの再設定を行ってください。 初めての方ははてなID登録 (無料) してください。 うまくログインできない方はお問い合わせをご覧いただき、Cookieの設定をご確認ください。

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

〜「スマートフォンで”夢中”を体感させるゲーム作り」を掲げ、サイバーエージェントが設立した「UIUX Lab」。「ビジネス的な価値」を理解するデザイナーを育成するなど、デザイン組織のあるべき姿を大公開〜 競争が激化し続けるスマートフォン向けゲーム市場。そんな中、株式会社サイバーエージェントは今年、ゲームに最適なUI/UXを考える専門組織「UIUX Lab」を設立した。 ▼スマートフォン向けゲームに最適なUI/UX研究をする専門組織、UIUX Lab UIUX Labは、サイバーエージェントグループ各社の第一線で活躍するUI/UXデザイナー7名で構成され、制作するゲームのクオリティ向上と、デザイナーの育成をミッションとしている、プロのデザイナー集団である。 その組織を率いるのが、「説明できないデザインは、デザインではない」と語る、代表の鷲山 優作さん。今回は同氏に、「ビジネス的価値」を高める

チャットボットの会話とデザイン。一見すると何の関係もなさそうですが、「会話がユーザーとのインターフェイスになる」と考えれば、立派なUIのデザイン。ビジュアルだけがデザイナーの仕事ではなくなる未来が近づいているようです。 ピザを注文したいとき、いつものように「ピザが欲しい」と思ってアプリを開く代わりに、メッセージアプリを起動してメッセージを送信。メッセージの受け手はあなたの好みを知っていて、早くピザを食べたがっていることも感じ取ります。同じ日のこと。あなたはピザを注文する前に「『X-Men』の映画チケットを2枚と会場への車を手配して」とも頼みました。 ——いずれの会話も、ピクセルパーフェクトなUIには依存していません。その代わり、ベースとなるサービスは、同じメッセージアプリを利用しています。UXの視覚的な要素は少なくなり、メッセージに応じて反応するように準備されているボットが機能する、会話型

image via. flickr <Pick Up> Robotic shopping carts will suggest what to buy 米国のスーパー大手チェーン「Walmart」が、ロボット開発企業「Five Elements Robotics」と協同で新たな取り組みを検討していることがわかりました。買い物リストを片手に、大きな買い物かごを押しながら店内を歩き回る従来の体験を置き換えるものだとか。 どんな買い物も家のソファに座ったまま完結するAmazonなどEコマースの台頭で、Walmartのような店舗型のスーパーの売り上げが下降の一途を辿っています。これをうけて、Walmartもネットスーパーやアプリを使った精算、店舗内をバーチャルに回遊できるサービスなどを提供するように。 現時点でWalmartは詳細なコメントを避けているものの、Five Element Roboti

UIを考える前に本質を探る 人と情報の関係が会話（チャット）のようになることに伴い、コンテンツだけでなく UI デザインも、会話の中でどのように表示すると適切なのか考える必要があります。会話型になる UI デザインについて2年前に記事にしましたが、今は状況が大きく異なります。 Facebook Messenger はボットの開発やコンテンツの最適化ができるプラットフォームを発表していますし、Slack Bots は開発者にとって馴染みの深いものになっています。 また、友人のように振る舞うことができる Xiaoice（微软小冰）も多くの方に利用されるようになりました。Xiaoice は、昨年 WeChat でリリースされて以来、数百万のフォロワーがいる人気ボット。同じ技術が採用されているりんなは、 LINE で楽しむことができます。ボットが友達と呼べる日は遠い未来の話ではありません。 チャッ

SlackやHipchat上でチーム間のスケジューリングをチャットボット形式でスムーズに実現する、Meekanというプロダクトがあります。この記事では、スマートスケジューリングサービスのMeekanのプロダクトデザイナーが、チャットボット形式のUIをデザインするにあたって気をつけた点や施した工夫などを紹介していきます。 今回は対話型のUIをデザインすることの難しさを、いくつかの例を通して紹介しつつ、それに対してMeekanが見つけた解決方法を見ていきたいと思います。 入力内容の検証 典型的なGUI、つまりフォームなどでユーザーに更なる情報を求めるときは、処理が行われる前に正しい形式で入力が行われているかどうかをあらゆる手を使って検証すると思います。 これは有効なメールアドレスか？　これは電話番号か？　このユーザーネームはすでに別の人に使われていないか？　項目によっては数字やあらかじめリスト

しかし、サイトのカルーセルは果たしてユーザーの役に立つものなのでしょうか？　それとも、ただコンテンツを収納するための常套手段として利用されているだけなのでしょうか。 この問いを誰かに投げかけたとしたら、カルーセルはアンチパターン（よく陥りがちな避けるべき悪い典型例）だと答えが返ってくるでしょう。カルーセルが良いデザインだと思っていない人もいるのです。 Erik Runyon氏による調査によると、サイトの訪問者のうちの１％しかカルーセル上でクリックしないということが明らかになっており、しかもそのうちの84％の人が最初のスライドをクリックしているそうです。 Jared Smith氏は自身のサイトShould I use a carousel?で、もし選択の余地があるのなら、カルーセルを使うべきではないと言っています。おそらくSmith氏の主張はLee Duddell氏の考えからきているもので、

Webサイトのメインナビゲーションを非表示にすると、発見しやすさはほぼ半減する。その上、タスク達成に時間がかかるようになり、タスクがより難しく感じられるようになる。 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu on June 26, 2016 日本語版2016年9月26日公開 非表示のメニュー（ハンバーガーアイコンなど）と、表示されているメニュー（ページトップを横切る形で置かれたリンクなど）について、定量的なユーザビリティテストをおこなったところ、以下のようなことが明らかになった： 非表示のナビゲーションは発見されにくい。表示されているあるいは部分的に表示されているナビゲーションよりも。 ナビゲーションが非表示だと、ナビゲーションはユーザーから利用されにくくなる

無限スクロールのメリット １．ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言

新しいアプリを企画したり、開発・デザインをするとき、多くの方が競合調査をすると思います。 多くの場合、同じカテゴリに属するアプリやユーザー層が似ているアプリを片っ端からダウンロードすることが多いと思いますが、この方法だと純粋に「アプリ」を研究するあまり「ユーザー」という観点が抜け落ちてしまうことも少なくはありません。 競合調査で大事なのは自分の将来のアプリのユーザーを知ることです。とくにヒットアプリを調査する最大の理由は、そのアプリが多くのユーザーにとっての「あたりまえ」になっているからです。後発のアプリとしては既存の文脈に沿うことでより本質的な新しい価値にフォーカスすることができます。 今回はアプリの競合調査で、少し違った視点をもたらしてくれるWebサービスをいくつかご紹介したいと思います。 ユーザーのホーム画面を知る #Homescreenはホーム画面を共有するサービスです。 ホーム画

Pinterestから人気が出始めたカード型UIは、ここ1, 2年の間に日本でも多くのWebサイトで見かけるようになりました。BootstrapやMaterial Designにも採用されており、レスポンシブデザインとも非常に相性がよいUIコンポーネントです。 そんなカード型UIのレイアウトやデザイン、アニメーションを伴ったインタラクションの実装アイデアを紹介します。 各リンク先ではHTMLやCSS、使用していればJavaScriptも編集・ダウンロードできます。 Recipe Card インタラクションの一部をアニメーションにしてみました。他にも写真がズームしたり、タブ（機能は未）などが用意されており、省スペースに多くの情報を掲載することができます。