アプリのアップデート300本ノックから学ぶUI改善のヒント｜宮﨑 晃
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう！ 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
【深く考えるシリーズ】メルカリの UI がダサい理由を考えてみた。｜あき - 良いもの作って正しく届ける
どうも、UIUX デザイナーのあきです。 先日、メルカリさんがIPOしましたね（IPOの申し込み落選してしまいました、残念）。 ところで最近、非デザイナーの友人から 「メルカリってデザインダサいけど、すごい人気だよね。何がすごいの？」 と聞かれました。 その際、「ちょいダサなデザインだけど、全部すっごいよ」としか回答できなかったので、今回はメルカリの UI について、いまさらですが考えてみました。 また最初に断っておきますと、この記事でお話しするのは「メルカリはダサくてイケてない」や「どこがダサいか解説する」ではなく、「戦略的にダサい UI を採用する勇気と洞察力がすごい」です。 メルカリ関係者の方、誤解招いてましたらごめんなさい。 深く考えるシリーズ 深く考える訓練。気になったことを一切ググらずに考えます。正解不正解ではなく、自分で結論を導き出す訓練。 正解を求める方、ここでお戻りくださ
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
無料で統一感のある実用的なカラーパレットを論理的に分析・作成・編集できる「Palettte App」
ウェブサイトやアプリのUIを作る時には、スッキリと見やすい色使いでページを構築することが重要です。スペースキーを押すだけでさまざまなカラーパレットを生成してくれるツールや、写真や画像からカラーパレットを作るアプリを用いて、サイト構築に使用するカラーパレットを作るという人も多いはず。ウェブデザイナーのGabriel Adorf氏が作った「Palettte App」は、カラーパレットをより論理的に分析・作成・編集できるツールで、他のカラーパレット作成ツールと比べても負けず劣らず役立ちそうだったので、実際に使ってみました。 Palettte App https://palettte.app/ Palettte App Build, analyze and edit smooth color palettes https://www.gabrieladorf.com/palettteapp/ 多く
「お金を払った感」はどのようにデザインすればよいのか｜Goodpatch Blog グッドパッチブログ
私たちは普段、お店でものを買う際には必ず「お金を払う」ということを行っています。現金やクレジットカード、交通系電子マネーに加え、最近ではApple Payなどのスマートフォンによる電子決済サービスも登場しています。そのような新しい決済サービスを使ったことがあるという方も増えてきているのではないでしょうか。 このブログでも度々注目されているお金とデザインのこと。先日起こった私の実体験を通して、このような「お金を払う」という体験のデザインについて考えてみたいと思います。 とあるコーヒーショップでの体験談：フィードバックの勘違い これは、とあるコーヒーショップでバーコード決済アプリを利用した際に体験した実話です。 さて、3コマ目で私はなぜ「会計が終わったな」と勘違いしてしまったのでしょう？ 振り返ってみると、会計時に私はこんなことを考えていました。 1コマ目：「電子決済アプリで支払いたい」 2コ
iOSアプリ開発におけるイースターエッグのすすめ - NSBlogger
はじめに この記事はiOS Advent Calendar 2015 - Qiita 19日目の記事です。 昨日はhachinobuさんのMVVMっぽい構成のデモアプリを公開してみるでした。 本日はイースターエッグについて。 イースターエッグとは簡単にいうと隠し機能のことです。余裕のある開発者が仕込んだ粋なお遊びですね。 発見したときはついつい友達に教えたくなります。イースターエッグが仕込まれているアプリおよび実装例について紹介しますね。 イースターエッグの例 まず、イースターエッグが仕込まれているアプリをいくつか紹介しますね。 Google検索 「Google」という名前のGoogle検索アプリです。ロゴ部分をタップすると…！ ちなみにロゴが新しくなる前は、なぞるとロゴがバラバラになりました。 www.youtube.com スーモ 「スーモ」アプリには複数のイースターエッグが仕込まれて
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
アプリデザインの7ステップ｜dwango creators' blog（ドワンゴクリエイターズブログ）
株式会社ドワンゴ、デザイン戦略室のデザイナーの宮下と申します。 デザイナーのみなさんはアプリのデザインを行う際に、どのようなワークフローで制作を進めていますか？ すべての仕事がそうであるように、アプリデザインのワークフローについても、制作体制やゴールの違いによって無限の選択肢が生まれます。 ここではわたしが関わったプロジェクトを元に、アプリが完成するまでのデザインサイドのワークフローをご紹介いたします。参考になるかわかりませんが、大まかな流れをつかみたいという場合は、ご一読ください。 STEP.0 普段から ここでは、プロジェクトにアサインされる前から、日常的に気にかけておきたい項目をあげます。 あなたがもしもアプリのデザインを行ったことがないのであれば、以下の情報を頭に入れておくことをお勧めします。また、すでに経験があったとしてもアップデートの速度は速いので、制作の前に改めてチェックして
PhotoshopでiPhoneアプリのUIを作るための準備と設定
WebデザイナーがWebサイトだけでなく、スマートフォンアプリをデザインする機会が増えています。 ところが、Photoshopを使いこなしているデザイナーでも、UIのデザインとなると勝手が違い、試行錯誤している方が少なくないようです。本連載では、Photoshopを使ってアプリのUIをデザインするコツを、デザイナーのハマダナヲミさんが解説します。（編集部） Photoshopはもともと写真編集のためのソフトでしたが、印刷物やWebのデザインツールとしても使われるようになり、いまではデザインツールとしてPhotoshopを使っている方が多いのではないでしょうか。最近ではアプリのUIデザインにも便利な機能がどんどん追加されています。この連載ではWebデザイナーを対象に、iPhoneアプリを題材として、PhotoshopでUIをデザインする方法を紹介します。 第1回は、アプリ開発の大まかな流れを
【UI/UX考察付】デザイナーが解説！女子向けアプリのデザインのポイント
ここ最近、女子向けアプリが多数リリースされているのはご存知でしょうか。 SNS、ユーティリティ、ライフスタイル、ナビゲーションなどアプリのカテゴリも様々です。 そこで今回は、最近話題になっている女子向けiOSアプリ5サービスについて、それぞれのアプリの特徴・UI/UXのポイントと、女子ウケする共通エッセンスをデザイナー・企画視点で考えていきます。 恋するマップ-女子ちず- /ナビゲーション 特徴 女子向けの地図アプリ。 もうご存知の方も多いかもしれませんが、地図業界を震撼させた女子向けの地図アプリです。 通常の地図アプリ機能に加え、女子には必須なトイレからカフェ、サロンなどの情報も写真付きで確認することができます。 ポイント 一番の特徴であり、女子ウケポイントでもあるのが画面右上にある“チャーム”。 スマホの傾きをキャッチして揺れるだけですが、こうしたさりげないところにかわいい！と思えるポ
SINAP | スマホアプリ立ち上げ時の機能・操作説明のチュートリアル画面まとめ
こんにちは、シナップの小茅です。 夏ド真ん中、蒸し蒸しした暑い日が続いていますね。 外でアクティブに行動するもよし、家で涼しみながらのんびるするもよし。 どちらにせよ夏は特に様々なシーンでスマホアプリにお世話になる機会が多いのではないでしょうか。 アプリを初めて立ち上げた際、アプリの機能紹介や操作説明などのチュートリアル画面をよく見かけますが、その方法は様々です。 ちょっとしたアプリ紹介とあわせて、ポイントとなる機能や操作説明を押さえたもの、美しいデザインのものなど、いくつかのチュートリアル画面をピックアップしてみました！ お金を扱うアプリだから信頼と安心がないと使えません。 Moneytreeのチュートリアルではその2つをうまくクリアしているなと思いました。 説明が多くなってしまいそうな商材ですが、機能のポイントをうまく抽出して横スライドで見せています。
45万回のアイコンABテストにみる、ダウンロードされやすいアイコンの特徴とは？ – 佐藤航陽のブログ
決済サービス「spike（スパイク）」のリリースのほうに時間を割いていて、ブログの更新が滞っていました。。。何かの片手間でブログを続けるってなかなか難しい。気分転換にブログを新しくしました。調べるおタカノリさんやサイプロさんスゲーなと思うこの頃です。 先日Google Playがリニューアルされた記事をアップして、アイコンの大きさが２倍になり、今後Google Playでますます重要になるなと感じたわけですが、７月の末に今度はPC版のGoogle Playもリニューアルされてダウンロードページのクリエイティブがアイコンとスプラッシュだけになってしまいました。以前は大きい長方形のバナーが表示されていましが、こちらは使われるのはGoogleのおすすめに入ったときだけで、ほとんどのディベロッパーには無縁のものになってしまっています。 今後アイコンが重要になってくる流れは間違いないので、これを無料
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
アプリ制作者必見！人気iPhoneアプリトップ200のスクリーンショットが一覧で見れる
■「ウイイレ」から進化した「eFootball™」 人気サッカーゲーム「ウイニングイレブン」が「eFootball™」とタイトルを変え、大きく進化して生まれ変わり...さらに見る 人気サッカーゲーム「ウイニングイレブン」が「eFootball™」とタイトルを変え、大きく進化して生まれ変わりました。「eFootball™」で新しいサッカーゲームを体感しよう！ 【基本的な遊び方】 ■自分だけの「ドリームチーム」を作成しよう FCバルセロナ、マンチェスター ユナイテッド、FC バイエルン ミュンヘン、ACミラン、インテルといった欧州各国のビッグクラブはもちろん、南米やＪリーグなど世界各国のクラブチーム、さらにナショナルチームの最新ユニフォームやエンブレムが選べる！ ■選手を獲得しよう チームを作成したら、選手を獲得しよう。現役のスーパースターや、歴史に残るレジェンドたちが、君のクラブでの活躍を待
【Android】いまさら聞けないdp入門 - Qiita
dpとは？ Androidのデザインにおいて、必ず理解しておくべきポイントのひとつがdpについてです。 dp(density-independent pixels)とは密度非依存ピクセルのことで、dipとも呼ばれています。 Androidはこのdpのおかげで多用な端末をサポートできているのです。 dpのない世界 - 端末の解像度ごとに表示サイズが違う dpのある世界 - 端末の解像度が違っても表示サイズは保たれる Supporting Multiple Screens | Android Developers More Resource Types | Android Developers px、dpi、dp dpを理解する上で欠かせない要素がpx(ピクセル)とdpi(画面密度)です。 px px(pixel)というのはハードウェアで実装されている解像度そのものです。ピクセルとも言います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
http://www.ogura.blog/entry/2017/02/28/190245
Seneste nyt