デザインのしたじきコ・デザインのためのシンキングシート
「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)
「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの？」 「Design Systemをつくった目的は？」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
管理画面のUIデザインにおける20の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
『ペルソナ5』のカッコよすぎるUIの制作工程を紹介！ アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】 - ファミ通.com
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
アプリのアップデート300本ノックから学ぶUI改善のヒント｜宮﨑 晃
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう！ 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
多言語対応のゲームUI注意点覚え書き - デザイナー脂肪
こんにちは！ドイツに住んでるUIデザイナーのいまがわ (@i_magawa)です。 この記事は「GameGraphicDesign AdventCalendar 2019」の23日目の記事になります。 自己紹介 現在はフリーでUIの仕事をやりつつ、夫婦や育児に関するマンガを描いたりしています。以前は東京でスマホゲームの開発やってました。 こういう記事も書いてます（宣伝）↓ 何の記事書くの…！？ スマホゲームUIのローカライズ対応について今回は書きたいと思います。 いくつか案件関わった気がしたりしなかったりするのでまとめてみました。あくまで日本っぽいゲームを海外対応するときの注意点です！ また今回参考として「ポケモンマスターズ」のUIをよく載せています。 ポケモンマスターズはなんと驚異の8言語対応…！殺す気か！ちなみに私は一切運営と関係ないただのファンです。 海外対応の目標 英語ネイティブの
2019好きなゲームUI/UXまとめ｜尾形
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
iOS ヒューマンインターフェースの原則 - Qiita
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
ユーザーが見落とすことがない入力フィールドを作るには
UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか？ 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ
UI デザイナーなら抱いて寝るべき1,198gの道具箱｜Fenrir Designers
来年新卒入社する UI デザイナーにブックリストをおくるから、おすすめの本はないかと同僚に聞かれたので「 そりゃあもう、オシドリ本一択だろう 」と即答した。 O'Reilly の『 デザイニング・インターフェース 第2版 』Jenifer Tidwell ( 著 )、色鮮やかな水鳥の細密画が目を引く、通称オシドリ本。UI デザイナーならおそらく、手にしたことないという人はいないだろう。 しかし私の返答に、同僚は苦い顔をしたのだ。 「 それはちょっと初学者には重いと思います... 」 重い？何もハーマンを読めとは言ってないじゃないか。オシドリ本だよ？何一つ難解な表現などないこの本が重い？心外だな、と思いつつも手にとってみたら、なるほどずっしり重かった。 うん、これは 1kg はこえている気がする。なんだか無性に気になったので測ってみたら 1,198g あった。 確かに重いな。電車で読んだりす
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
iOS 11 iPhone GUI from Design at Meta
Today, there are many user interface kits available for designers to speed up their work. However, few if any incorporate motion. This year, we’ve created Origami and Framer components that mirror the behavior of the most important UI elements in iOS 11 as well as recreating elements found in the public release of iOS 11 in Sketch and Photoshop. Whether using these files to mock up apps, concept i
【深く考えるシリーズ】メルカリの UI がダサい理由を考えてみた。｜あき - 良いもの作って正しく届ける
どうも、UIUX デザイナーのあきです。 先日、メルカリさんがIPOしましたね（IPOの申し込み落選してしまいました、残念）。 ところで最近、非デザイナーの友人から 「メルカリってデザインダサいけど、すごい人気だよね。何がすごいの？」 と聞かれました。 その際、「ちょいダサなデザインだけど、全部すっごいよ」としか回答できなかったので、今回はメルカリの UI について、いまさらですが考えてみました。 また最初に断っておきますと、この記事でお話しするのは「メルカリはダサくてイケてない」や「どこがダサいか解説する」ではなく、「戦略的にダサい UI を採用する勇気と洞察力がすごい」です。 メルカリ関係者の方、誤解招いてましたらごめんなさい。 深く考えるシリーズ 深く考える訓練。気になったことを一切ググらずに考えます。正解不正解ではなく、自分で結論を導き出す訓練。 正解を求める方、ここでお戻りくださ
検索 UI まとめてみた｜あき - 良いもの作って正しく届ける
検索 UI を作る機会があったので、リファンレンスを集めた。あたまの整理をかねてパターン分け。 パターン一覧 1. フリーワード型 2. サジェスト型 3. グループ型 4. あとからフィルター型 5. 条件指定型 6. レコメンド型フリーワード型キーワードで検索。入力中に検索結果がリアルタイムに変わるものが多い。 良いところ シンプル。入力と同時に検索結果を表示できるので、最短で検索対象へたどり着ける。 イマイチ キーワードが間違っていると、対象へたどり着けないことがある。 感想 タスク管理やシンプルなファイル管理に多く採用されていた。 複雑な検索条件が不要。ユーザーが検索対象のキーワードを把握している場合に有効そう。見つける、というよりも、ショートカット的な役割に近い。サジェスト型キーワードを入力すると、検索候補が表示。 良いところ キーワードを正確に把握していなくても対象へたどり着け
配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki Ikeda｜note
どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
コンテンツ無しのUIギャラリー Empty States
