メインコンテンツへスキップ
 

マガジン一覧

TikTokのUIとインタラクションの観察

今までちゃんと使ったことがなかったTikTokを最近がっつり触ったところ、UIやインタラクションの細かな作り込みに気づくことが多く、発見の連続でした。今後の機能開発やUIデザインの参考にもできそうなので記事にまとめます。 1. アクションなしの没入体験TikTokで最も特徴的なのは動画フィードでのレコメンドの仕組みです。フルスクリーンで表示されるショート動画が上下のスワイプで切り替わり、視聴行動(視聴時間やスキップなど)に応じて次の動画がレコメンドされ続けます。そのため利用

369

Spotifyのプロダクト戦略をUIの変化から読み解く

2018年にSpotifyのiOSアプリでは5つあったタブが3つに変更されました。 長く使われ続けているサービスでは、新しい機能がどんどん追加されていきます。新しいユーザーを増やしたり、現在のユーザーを引きつけ続けることが主な理由で、Spotifyにも様々な機能が追加されています。それにも関わらず主要なナビゲーションのタブを減らすのは勇気のいる選択だと思いました。プロダクト開発に関わっていると実感しますが、何かを付け加えることよりも何かを削ることのほうがずっと難しいのです。

437

検索結果の絞り込み・並び替えUIの観察

先日、検索結果の絞り込みUIの検討をするために事例を調べたところ、意外にもアプリによって様々な違いがありました。面白いテーマなため観点ごとに違いを整理し、メリット・デメリットや設計意図を考察しました。注目した観点は以下の7つの点です。 これらの観点をもとに以下の条件で12のアプリを調査しました。 1. 絞り込み・並び替えボタンの配置 まずは、絞り込み・並び替えボタンの配置場所について。ボタンの配置場所は大別するとこの2種類です。 それぞれの事例をみていきます。 A.

897

ストア評価★4.0以上のアプリが実践しているレビュー施策をまとめてみた

アプリをDLしてもらうために重要な要素の一つである★評価。 Apptentiveの調査では約8割の人がDL前にレビューを見ていて、DL率にも大きく影響をもつと言われています。 ★1で約12%、★2で約15%、★3で約50%、★4で約96%、★5で約100%のユーザーがDLしようと思う。 裏を返せば、アプリストアで見つけてもらっても★4以上ないと半分以上の人がDLをためらう悲しい事態に。 そこで今回は400個以上のアプリを触る中で良いなと思った「レビュー依頼施策」につい

270
もっとみる

「YouTube」のコメント機能をリデザインする

YouTubeを見ているとコメントが気になることがありますよね。動画の内容によると思いますが、数百件もコメントが投稿されている動画も珍しくありません。 動画を中心にコニュニケーションが取れるところがYouTubeとテレビの大きな差でもあります。 しかし、アプリではコンテンツの最下部に配置され、ショートカットリンクもありません。関連動画が16件も配置されており、スクロールしない限り辿り着けません。 個人的にコメントを見ることが多いのでもったいないなーと感じたのがリデ

4

「Google翻訳アプリ」をリデザインする

いきなりですが、Google翻訳を使っている人は多いのではないでしょうか。 App Storeで「翻訳」と検索すればトップに表示されます。 そろそろ海外旅行に行きたいなーと考えながらアプリを立ち上げてみると何となく使いにくい。 アプリの評価は2018年6月現在で「4.1」です。細かく見ていくとデザイン視点で改善できる部分が多かったのでリデザインしてみました。(バージョン5.20.1 iOS11.3) Google翻訳とは基本的な流れをおさらいです。 翻訳したいテキストを

8

connpassのホーム画面を考える

こんにちはThingoです。 前回「connpassのアプリを考える」の続きをやっていきましょう。 今回はハイブリッドアプリではなく完全なアプリ化をすると仮定した場合のデザインを考えて行きたいと思います。ただ、ベースとなるのはやはり既存のサイトなので、その辺りも極力汲みながら挑んでみます。 STEP1、タブメニューを考える軽くサービスを触った段階で、考えたメニューがこちら。 ホーム ・ 検索 ・ クリップ ・ チケットという並びです。 connpassの持っている機能で

11

connpassのアプリUIデザインを考える

こんにちはThingoです。 先日のThe Guildの勉強会の記事、たくさんの方に読んでいただけましたようでありがとうございます。とても有意義な勉強会でした。 さて、その時に「connpass」のアプリを使いました。何度か使ったことあったのですが、とても気になったのでアプリのUIデザインを勝手に考えてみたいと思います。 STEP.1  今すぐできそうな改修から考えるおそらくですが、ハイブリッドアプリだとおもうので、なるべく今の資産を生かした形で変更できそうなところから攻

18
もっとみる

マイクロインタラクションの観察

マイクロインタラクションをデザインする際のインプットとして色々なアプリの挙動を観察し、それらが及ぼす効果を考察します。

31 本

メルカリのマイクロインタラクションを考察してみた

つみきでデザイナーとして活躍してるYukikoです!「不用品が誰かの宝になる素晴らしさ」をメルカリ出品者として身を持って経験した私です。iPhone12がでる1ヶ月前に魔が差してiPhone11新品を衝動買いし、当然のごとくiPhone12の最新スペックに嫉妬して後悔…。初メルカリでiPhone11(ほぼ未使用)を出品したら4時間で即売したミラクル体験を元にUXの特徴を考察したいと思います。 This is Mercari超人気フリマアプリ。アマゾンで探す前にまずメルカリで

51

デザインに特化した天気アプリを動かしてみる。

数年前に Daily UI という100個のお題に挑戦するUIデザインをやっていました。 こちらの天気アプリはデザインに全振りしたのですが、実際の機能面もシンプルで扱いやすいものになっています。せっかくなので静止画ではなく、マイクロインタラクションを追加しつつ、動きもつけてみようと思います。 都市の移動都市の移動はタップ、もしくはスワイプで移動できます。 都市によっては昼夜逆転するので、そのあたりも日が暮れるのか、夜があけるのか背景の動きで補完しています。 テキスト情報は

8

スマホに最適化した新しいパンくずを考えてみる

弊社ではマイクロインタラクションを意識したUIデザインを得意としていて、キービジュアルはもちろん、細かいUIもこだわっているところが強みです。使い慣れたUIでも、新しい提案ができるんじゃないかと常にアンテナを張っています。 新しいパンくずを考える。今回はよくみなれたパンくずにマイクロインタラクションを追加してみようと思います。サンプルとなるサイトは一般的なコーポレートサイトの会社情報になります。 一般的なパンくずとナビゲーション一般的にパンくずは以下のように表現されます。

36

noteのマイクロインタラクションを考察してみた

つみきでデザイナーとして活躍してるYukikoです!三日坊主ならぬ半日坊主、むしろ1/3日坊主と呼ぶに相応しいであろう私がnoteでデザインネタの記事発信を初めてもうすぐ10記事目になります。ジム通い・アロマテラピー・盆栽・ピアノ教室…、興味が湧いたいろんなことに手をつけまくっては、形になる前にすぐに飽きて放りだしてきた過去があります。そんな天性の飽き性の私をここまで書く気にさせてくれたnoteのUXについて考察したいと思います。 This is noteまさに今ここ、記事

20
もっとみる

「言葉使いを明瞭に。ボタンには結果をイメージできる言葉を選ぶ」 #UI改善の基本

前回から3ヶ月以上も空いてしまいましたが、UI改善の基本の2回目です。今回の改善ポイントはこちらです。 新たに加入するサービスの注意事項や、意図せずに遭遇したエラー画面。元に戻せない重要な決定の確認ダイアログなど、アプリやWebサービスを利用していると、システムからのメッセージに頻繁に遭遇します。ユーザーはコンテンツやコミュニケーションに集中したいため、こうしたシステムからのメッセージを注意深く読み、じっくり考えることを好む人はいないでしょう。特にスマホで長い文章を読むのは

123

「コンテンツが空の場合は行動を促す」 #UI改善の基本

これまでクライアントワークとして、様々なアプリやWebサービスのUIデザインや改善に関わってきました。使い勝手を考える際に、多くのアプリやサービスで共通する基本となる改善ポイントがあることに気づきました。複数回にわたって、それらの改善ポイントを事例とともに紹介していきます。 今回の改善ポイントはこちらです。 検索画面で目的の情報が見つからなかった場合や、お気に入り登録した写真がまだ1点もない場合など、アプリやWebサービスの一覧画面で表示すべき情報が1件もない場合には、「

70
もっとみる

120 個のアプリを触って見えてきたオンボーディング 15 種類・そのメリットとデメリット

オンボーディングとアクティベーションについて考察した 前記事 の続き。今回は 120 アプリのオンボーディング体験を調査してそれらを 15 種類の UX に分類、それぞれの UX について共通項・個人的に思ったメリット・デメリットをまとめました。 次回はこれらの統計結果を公開。今回は実際の UX 事例について。現場で「これ使ってみる?」と今日から検討できる(かどうかは知らないけど…)記事になっていれば幸いです。全 6 記事予定の 2 記事め。 00# こんな感じで 120

1,310

iOS もシャドウ使っていいの?  - iOS の階層表現をまとめてみた #Zaim

あれ、iOS ってフラットデザインじゃなかった? でも、最近シャドウ表現増えてない? 最近、iOS でもボトムシートや Floating Action button など 階層(Z 軸)が異なる UI が少しづつ多くなってきた気がします。App Store の Today もカードにシャドウついてますしね。 そこで、整理をかねて最近のデザイン傾向をコンポーネント別にまとめてみました。 *** ボトムシートのまとめ 傾向 シャドウあり。 ボトムシートを画面上部まで引っ

124

オンボーディングまとめてみた

どうすれば新規の定着率は伸びるのか。 サービスの良さがより伝わるのか。 全ユーザーに影響を与えるオンボーディング。自分なりに UI をまとめたのでアップします。 また、今回は UI パターンの前に「オンボーディングとは」の定義からはじめました。概念があいまいに感じたので。ちょっと長いですが、お付き合いいただけると嬉しいです。 オンボーディングとはアプリにおける オンボーディング は 新規ユーザーをアプリに定着させるためのフロー。では、具体的に何ができればオンボーディング

177
もっとみる

スキ・キライ・得意・苦手を可視化したら、互いに成長を支え合うデザインチームができた話

クックパッド VP of Design/デザイン戦略本部長の宇野です。 みなさんは苦手なスキル、得意なスキルをどのように把握し成長につなげていますか?今日はそんなお題に向き合ったクックパッドでの取り組みをご紹介します。 僕が今年2月に入社したとき自身の自己紹介資料に入れた簡単なチャートがあります。それがコレ。 スキルマップって基本的には「得意」を可視化するためにあります。でも「得意」だから好きとは限らない。「苦手」だけど好きだってある。 それを可視化するために「得意/苦

737

デザイナーの成長を支えるしくみができました

こんにちは、クックパッドデザイン戦略部部長の倉光(@transitkix)です。 デザイン戦略部は2019年に設立した組織で、現在はメンバーも続々と増加中。 初期メンバー's 昨年もデザイナー陣は各サービス最前線でさまざまな制作を行っていました(詳しくはマガジンにて!)。わたしは?と言うとUIデザインから少し離れてデザイナーの採用 /育成領域に注力していました。 今回はそこで生まれたデザイナー成長を支えるしくみを紹介します。 🚨当時抱えていた課題感 組織設立前後、

323

【まとめ】2年間で自律型のデザイン組織の立ち上げるまで

弁護士ドットコムのデザインマネージャーを初めて2年が経ちました。 私のnoteはその過程で得てきた知見をまとめてきたものが多数だったので、私がこの2年間で実行した事業会社における「デザイン組織の作り方」を総復習したいと思います。 はじまり「あ!やっとマネージャーが来た!w色々教えて下さい!」そう元気よく入社1ヶ月目の新人デザイナーに元気よく声をかけられた入社初日。 私の配属された弁護士ドットコムは、黎明期を支えたベテランのマネージャーが次に注力する新規事業に異動したタイミ

314

「デザイン組織、お悩みあるある」をどう解決する?自分はこうしてみました。

みなさま、おひさしぶりです。夏ですね。自転車通勤がしんどくなってきました。あしたのチーム デザイン事業部 部長 鈴木雄大です。 あしたのチーム デザイン事業部も立ち上げから1年3ヶ月。メンバー4名。2Q目に入り、目まぐるしく仕事をしております。 最近、規模が同じくらいの会社でデザイン組織のマネージャーを担当している方とお話する機会がありました。色々お話させていただき、お互い組織を持つ身として同じような悩みを抱えていました。 ということは、どのインハウス組織も同じような悩み

151
もっとみる

ショッピングカートのマイクロインタラクション試作

前々回のQRコード決済、前回の登山記録アプリに続き、今回はショッピングカートのプロトタイプをつくりました。この記事では着想のきっかけや制作意図を説明します。 ショッピングの体験価値 私たちは様々なアプリやサービスを通じて日常的に商品を購入しています。 ショッピングの体験として最も重視されるのは、必要な商品を素早く発見しスムーズに購入できる利便性にある思います。しかし他方で私たちはショッピングそのものを娯楽の一部として楽しんでもいます。 最新のロボット掃除機の機能や特性を比

24

登山アプリのマイクロインタラクション試作

先日登山アプリのプロトタイプを作成しました。 数年前に頻繁に山に訪れている時期があり、帰宅後にヤマレコで山行記録を残したり、他人の記録を見ながら週末の計画を考えたりして楽しんでいました。その頃の記憶を頼りに、登山アプリに活かせるマイクロインタラクションのアイディアを形にしてみました。この記事では着想のきっかけやデザインの意図について説明します。 登山アプリの特徴 登山アプリと一言に言っても種類は様々です。山行記録に機能を絞ると、YAMAP、ヤマレコが代表的なサービスだと思

72

マイクロインタラクションによるQRコード決済の改善

QRコード決済でのUI改善のアイディアとして、先日以下のようなプロトタイプを作成しました。 https://www.behance.net/gallery/77099891/Payment-Interaction-Concept-Adobe-XD-Auto-animate  QRコードを表示してから支払いが完了するまでのインタラクションの試作です。この記事ではデザインの意図や目的、前提としたQRコード決済での課題点について説明します。 QRコード決済への心理的な壁 20

157

これからのアニメーションと、XD

上の画像かこちらをクリックすると、Twitterの動画を見ることができます。 この記事は、2019年3月20日に開催されたAdobe XDの勉強会「Adobe XD ユーザーグループ 東京 vol.22」にて私が発表した資料になります。 概要「アニメーションって流行っているみたいだけど、これから先も役に立つの?」「一過性のものなんじゃないの?」そんな不安をお持ちの方、いませんか? このセッションでは「これからのアニメーション(特にインタラクション)」にスコープを当て、

35
もっとみる

デザインのクオリティを上げる「リフレクション力」

先日、上平先生のブログを拝見して、雑談してたらデザイナーの話で盛り上がったのでその話や考えなどを図解と共に整理してみました。 哲学者のドナルド・ショーンは、1983年にReflection(省察)を二つに分けています。それが、「Reflection in action(行為の中の省察)」と「Reflection on action(行為にもとづく省察)」です。 1つ目のリフレクション "Reflection in action"Reflection in action(行

279

「ポエティカルデザイン」というアプリデザイン手法

ポエティカルデザインは、ポエムを通してアプリのコンセプトを伝えることで、価値観をユーザーと共有する方法です。 【2021/08/14 追記】ポエティカルデザインの考え方をよりわかりやすく・多角的にまとめるため、現在別の記事(マガジン)を書いています。お楽しみに! はじめまして、宮内です。 高校一年の頃からアプリ作りに没頭していて、今はアプリクリエイターとしての人生を主軸に生きています。先月大学を卒業し、今月からサイバーブレイン株式会社でデザイナーをし始めました。 この

46
¥500

株式会社カラックのコーポレートサイトができるまで。(TOPページ編)

インターネット広告やマーケティング企画などを提案する株式会社カラックのコーポレートサイトのリニューアルデザインを担当しました。 主にデザインコンセプト、PC・SP画面デザイン、アニメーション・写真のディレクションが主な担当になります。 今回は自分なりのデザイン制作工程(コンセプトやモチーフ作り、デザインFIXまでの案など、コーポレートサイトができるまで(TOPページ))の様子を紹介します。主にWebデザイナーになったばかりの方などちょっとした参考になるのではないかと思いま

22

プラットフォームの居心地をデザインするために、料理写真の世界観を決めた話

はじめまして。クックパッドマートのデザイナー、米田(@tyoneda)と申します。「世界観」と聞くと、脳内でクリープハイプのボーカル尾崎世界観が邪魔をしてくる問題に悩んでいます。 このnoteでは、わたしたちクックパットマートが、どのように食材写真や調理写真にしようとしているかをお話したいなと思います。 大人の事情によりモザイク多めのnoteに仕上がってしまいましたので、モザイクの向こう側を見る能力が鍛えられることまちがいなし。 ▲「ごぼうのきんぴら」画像検索結果。調理方

149
もっとみる

会社名と電話番号を補完入力する問い合わせフォーム

先日、以下のような問い合わせフォームを試作しました。 https://shin-go.net/contact_test/ この問い合わせフォームは法人からの問い合せを想定したもので、ユーザーがメールアドレスを入力するとドメイン名を元に、会社名と電話番号を補完入力します。 元々は自社サイトでの問い合わせフォームのアイディアの技術検証のために作成したのですが、思いのほか多くの方に反応していただきました。アイディアや技術自体の新しさではなく、多くの方の潜在ニーズとマッチした結果

19

確認ダイアログのUI改善

先日、読書しようとiPhoneのKindleアプリを開いたところ、以下のようなダイアログが表示されました。 iPhone + Kindle Paperwhiteなど、複数端末でKindleを使用している人にはおなじみだと思いますが、前回他端末で読書していた場合に、その端末での続きページまで移動するかを確認するダイアログが表示されます。毎回どちらを選べば良いのか迷うため、ダイアログのUIを考える題材として改善案を検討してみました。 改善案1:タイトルとボタン名のみ変更。本文

71
もっとみる

ロゴの「マーク」はあったほうがいいの?なくてもいいの?

こんにちは、三宅佑樹(@yuki_miyake)です。 普段はビジュアルデザインやクリエイティブコンサルティングを通じて企業のブランドづくりやサービスづくりをお手伝いしています。 デザインの仕事を始めて9年ちょっと。これまで、100まではいかないかもしれませんが、数十個のロゴをデザインしてきました。 ロゴは、幾何学的な形や有機物を図形化したマーク(シンボル)と、組織などの名前を記述した文字(ロゴタイプ)とで構成されます。 場合によってはマーク(シンボル)が無く、文字(ロ

346

FOLIOリブランディングの裏側 ──構想からリリースまでの8ヶ月の軌跡──

株式会社FOLIO CDO(Chief Design Officer)の広野です。 この度、オンライン証券サービス「フォリオ」の正式リリースに伴いまして、思い切ったリブランディングをおこないました。 ビフォーアフターはこちらです。 ご覧の通り、今回のリブランディングプロジェクトはいわゆる「ロゴリニューアル」に留まらず、サービスを提供する上でのスタンスを改めて定義し直した、新たなブランドとしてのフォリオを再誕させることになりました。 パット見のビジュアルでいうと、安心を

1,681

株式会社brossomのロゴをつくった

会社で一番仲良かった元同期たちが起業しおった…!副業を支援するスタートアップだ。 株式会社brossom 社名の由来であるblossomには“開花”という意味があり、会社のミッションは“未だ見ぬ自分にワクワクしている人を増やす”。 ↓詳しくは社長の記事 ロゴを作る上で僕は「レンギョウ」という春先に一斉に咲く黄色い花に出会った。 花言葉は期待・希望・集中力彼らの会社にピッタリやんけ 頭文字にレンギョウのつぼみを描き、これから花開くワクワクをぎゅっと込めました。 名刺

17

ロゴデザインを学んだ本 私的8選

こんにちは。ONO BRAND DESIGNの小野圭介です。前回のnoteにたくさんの反響をいただきありがとうございました。 今回はこれまでに私がロゴデザイン/CIデザイン/ブランドデザインの学びに役立った本、ずっと手元に置いておきたい本を8冊ご紹介したいと思います。 ①DECOMAS―経営戦略としてのデザイン統合DECOMAS委員会編著/代表 中西元男 三省堂 (1971) 日本でのCI先駆者、PAOS中西元男さんの名著です。 出会ったのは大学4年生の頃。当時は建築を

475
もっとみる