マガジンのカバー画像

実例から学ぶUX/UI、Webデザイン

65
運営しているクリエイター

#UI

アプリのアップデート200本ノックから学ぶUI改善のヒント

アプリのアップデート200本ノックから学ぶUI改善のヒント

こんにちは、HR業界でアプリマーケティングをしている宮﨑です。

・アプリのアップデート前後のUI変化
・Push通知など気になったGrowth施策

こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。
#アプリノックの結果

10月に100本ノックした学びを書いたところ、15,000ビュー・550スキと多くの方に読んでいただけました。

また次のような変化もあり、コツコ

もっとみる
プレースホルダを用いたローディングUI

プレースホルダを用いたローディングUI

ローディングのUIって、なーんかおざなりになりがちよね。

だいたいクルクル回る系のローディングインジケータを使うと思うけど、他にもいろいろ方法はあるんやでぇ。

マテリアルデザインを見ればまぁだいたい参考にはなるはず。

で、今回僕が紹介したいのは、プレースホルダを用いたローディングUI。

知ってる人は知ってるけど、知らない人もまぁそれなりにいそうなのでこの記事が役に立ったらいいな、と思ってい

もっとみる
SoundCloudのケーススタディから考察するUI/UX改善

SoundCloudのケーススタディから考察するUI/UX改善

SoundCloudという音楽ストリーミングサービスをご存じでしょうか?

サービス自体は2008年とSpotifyの2年後に生まれていますが、日本語版が無いことやメインストリームの楽曲をあまり扱っていない為、日本国内ではそこまで知名度も普及度も高くありません。

しかし世界的には1億7500万(2019年時点)ものアクティブユーザーを抱えており、Spotifyとは違ったジャンルや強み(一度Spo

もっとみる
検索 UI まとめてみた

検索 UI まとめてみた

検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。

パターン一覧
1. フリーワード型
2. サジェスト型
3. グループ型
4. あとからフィルター型
5. 条件指定型
6. レコメンド型

フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。

良いところ
シンプル。入力と同時に検索結果を表示できるので、最短で検索対象

もっとみる
ねらいどおりの変化を起こす、UI改善について

ねらいどおりの変化を起こす、UI改善について

こんにちは、クックパッド デザイナーの平塚(@tsukasio615)です。クリエイション開発部では、レシピやつくれぽなどクックパッドの投稿体験に関する開発を行っています。

今回は、レシピ投稿の中でも重要な「レシピを書く画面」のUI改善についてご紹介します。

課題の洗い出しと優先度決めある日、プロダクトオーナーからレシピ投稿のユーザビリティ改善をしたいというオーダーがありました。レシピ投稿と言

もっとみる
言語切替のUIデザインについて考えてみる。

言語切替のUIデザインについて考えてみる。

いま、自分のポートフォリオを英語/日本語どちらにも対応しようと思っていて、どのように切り替えるべきか、リサーチのためにいろんなサイトを見て回った。その時にこれは良い、これは避けたほうが良さそう、と気付いたことがある。

国旗を使うことによる問題

デザイン上のスペースの節約からか、あるいはグラフィカルに補助したいという理由からか、言語切替のUIで国旗を見かけることがある。

日本にいると「日本=日

もっとみる
UXデザインを学ぶデザイナーが絶対に読むべきnote厳選21本

UXデザインを学ぶデザイナーが絶対に読むべきnote厳選21本

去年書いたこちらの記事で実は「UXデザイン」というカテゴリーもつくる予定だったのですが、それだけで3、4つだけ選ぶのが難しいぐらい神noteが存在していたので、今回はUXデザインのみで記事をまとめてみました。

これからUXデザイナーを目指す方や現役UXデザイナーの方はもちろん、全ての方に学びになることが書かれているので、ぜひ読んでみて頂ければ幸いです。

1、SNS時代のマーケティングフレームワ

もっとみる
アプリのアップデート500本ノックから学ぶUI改善のヒント

アプリのアップデート500本ノックから学ぶUI改善のヒント

「ザ・マイクロコピー」という本の中で次のような一説がでてきます。

何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。

ちょっとした「?」がどれだけユーザーの集中力を邪魔しているか。

アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。

そこで今回は

もっとみる
接触確認アプリ「まもりあいJapan」を最速で届けるためにUXデザイナーが取り組んだこと

接触確認アプリ「まもりあいJapan」を最速で届けるためにUXデザイナーが取り組んだこと

Code for Japanが中心となって有志が開発を進めている接触確認アプリ「まもりあいJAPAN」のプロジェクト。フルリモートでのデジタル領域のデザインを手掛けるGoodpatch Anywhereのメンバーもこのプロジェクトのお手伝いをさせていただいており、UXデザイナーの私も主にアプリ領域に関するデザインのプロジェクトマネジメントとしてジョインさせていただいております。

開発の経緯やメン

もっとみる
AbemaTVのマイクロインタラクション

AbemaTVのマイクロインタラクション

前回はEvernoteのマイクロインタラクションを観察しました。今回はAbemaTV(ver. 2.14.0)のマイクロインタラクションを観察し、それらがユーザーに与える効果を考察します。

----

左右スワイプでのザッピングUI
AbemaTVの視聴体験の中心となるマイクロインタラクション。
左右のスワイプで画像や動画が切り替わるUIはありふれているが、ライブ動画の即時再生と結びつくことでテ

もっとみる
UIのお作法。28個の「〇〇できそう感」をまとめました。

UIのお作法。28個の「〇〇できそう感」をまとめました。

UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。

1、進めそう感

時間の流れは左から右に表現します。右矢印は次、進む、

もっとみる
13年続いた「つくれぽ」をリニューアルした話

13年続いた「つくれぽ」をリニューアルした話

はじめまして、こんにちは。クックパッドデザイナーの久保坂 美咲(@misaaa09)です。

クックパッドは中学生の頃から使っていて、料理が好きになったきっかけを与えてくれたクックパッドが大好きで2016年に新卒社員として入社しました。

そんなクックパッドに入社して4年目、先日クックパッドのiOSアプリでサービス初期の頃から続いていた「つくれぽ」機能のリニューアルを行いました。今日はそのリニュー

もっとみる
毎日の料理を楽しみにする「きろく」のデザイン

毎日の料理を楽しみにする「きろく」のデザイン

こんにちは、クックパッドデザイナーの久保坂 美咲(@misaaa09)です。

クックパッドでは「つくれぽ」機能のリニューアルに引き続き、今年の3月にiOSアプリの大幅なリニューアルを行いました。

様々な既存機能のアップデートに加えて、今まではなかった「アイデア」や「きろく」というタブを新しく追加しています。

その中でも今日は、「きろく」についてフォーカスを当て、どのような想いのもとでデザイン

もっとみる
Hook ModelとTwitterの変化

Hook ModelとTwitterの変化

先日、Twitterを見ていてふと思った。

前よりスクロールする量が増えてる。

毎朝目覚めてベッドの中で、行動するだけのやる気がでるまで(もしくは自分に嫌気が差して行動せざるをえなくなるまで)タイムラインをスクロールするのが日課になって久しい。そのスクロールの量が、最近明らかに増えている。もちろん、スクロールしたピクセル数をトラッキングしているわけではない。スワイプする指の疲れ具合から感じたの

もっとみる