コ・デザインのためのシンキングシート
「Design System(デザインシステム)」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー(PM)やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの?」 「Design Systemをつくった目的は?」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか?というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう! 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。 ----------------------------------------------- 記事内容の削除についてのお詫びにつきまして 本記事は、ゲームタイトルの作例をもとに自分の目線で文章を書いておりました。 しかし、「ゲームUI演出ブログ」での記事削除などの事例もあり、 法的な部分での判断により記事を削除いたしました。 本記事にコメントを寄せていただいた方、みていただいた方々、そしてご紹介したゲームタイトルに関わっていた制作者の皆様方、本当に申し訳ございませんでした。 中には記事になったものに対して不快に思われた方もいるかもしれません。 制作者の皆様に強く敬意を表すとともに、以後改めて著作物であることを強く意識していこうと思います。
「Game Graphic Design Advent Calendar 2019」の初日の記事です。 ゲーム制作に関する素敵な記事がたくさん公開されると思いますので、私自身もワクワクしてます。 言い出しっぺとして、初日としてまず何を書こうかなと思ってたんですが、以前Twitterでチラッとつぶやいた「普段ゲームUIを作るときってどういう工程があって、どういう流れで作っているか」をまとめてみたいと思います。 というのも、いろいろな方から「何から手を付けていいのか…」「デザインが上手くまとまらない」「デザイナーが社内外注みたいになってしまって…」みたいな話をよく聞きまして。 そのアンサーになるかは分かりませんが、自分の場合はこういうフローで、こういうことを意識してますよ。というのを書いてみたいと思います。 もちろん組織や人によってやり方は様々だと思いますので、こんな風にやってる人もいるんだ、
UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか? 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
来年新卒入社する UI デザイナーにブックリストをおくるから、おすすめの本はないかと同僚に聞かれたので「 そりゃあもう、オシドリ本一択だろう 」と即答した。 O'Reilly の『 デザイニング・インターフェース 第2版 』Jenifer Tidwell ( 著 )、色鮮やかな水鳥の細密画が目を引く、通称オシドリ本。UI デザイナーならおそらく、手にしたことないという人はいないだろう。 しかし私の返答に、同僚は苦い顔をしたのだ。 「 それはちょっと初学者には重いと思います... 」 重い?何もハーマンを読めとは言ってないじゃないか。オシドリ本だよ?何一つ難解な表現などないこの本が重い?心外だな、と思いつつも手にとってみたら、なるほどずっしり重かった。 うん、これは 1kg はこえている気がする。なんだか無性に気になったので測ってみたら 1,198g あった。 確かに重いな。電車で読んだりす
この記事は、GoogleのデザインリードManuel Lima氏のブログ記事を公式に許可をいただき翻訳させていただいたものです。 Googleがデータビジュアライズの新ガイドライン導入 2017年8月、Googleのデザイナー、リサーチャー、エンジニアの有志が集まり、データビジュアライズに関する総合的なガイドラインを作成した。 このガイドラインでは、色、形状、タイポグラフィ、図解、インタラクション、モーションなどデータビジュアライズに関するすべての分野を網羅している。本ガイドライン制作の成果から、2018年5月、Google初のデータビジュアライズに特化した“データビジュアライゼーション”チームがスタートした。 本記事では、その取り組みから得た知見をシェアしたい。 正直であることデータの正確さと誠実さを最優先にする。情報を歪曲し、混乱させたり、演出したり、公平さを欠くものにしてはならない。
スマホでボタンをどこに配置するとユーザーは操作がしやすいのか? 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか? タスクを素早く完了することで、より満足のいくエ
毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト
『OffSec Training』の対象コースが世界最安となる早割+10%OFFキャンペーン中です。 脆弱性診断やペネトレーションテストのエキスパートを目指す方へ絶好のチャンスです! 詳細はこちら
どうも、UIUX デザイナーのあきです。 先日、メルカリさんがIPOしましたね(IPOの申し込み落選してしまいました、残念)。 ところで最近、非デザイナーの友人から 「メルカリってデザインダサいけど、すごい人気だよね。何がすごいの?」 と聞かれました。 その際、「ちょいダサなデザインだけど、全部すっごいよ」としか回答できなかったので、今回はメルカリの UI について、いまさらですが考えてみました。 また最初に断っておきますと、この記事でお話しするのは「メルカリはダサくてイケてない」や「どこがダサいか解説する」ではなく、「戦略的にダサい UI を採用する勇気と洞察力がすごい」です。 メルカリ関係者の方、誤解招いてましたらごめんなさい。 深く考えるシリーズ 深く考える訓練。気になったことを一切ググらずに考えます。正解不正解ではなく、自分で結論を導き出す訓練。 正解を求める方、ここでお戻りくださ
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2~3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
2018年8月21日〜8月24日に神奈川のパシフィコ横浜で行われた開発者向けカンファレンス「CEDEC 2018」。2日めとなる8月23日には講演「ワンランク上のゲームデザイン・レベルデザイン・UIデザインを考える 『コンテキスト』『コンフリクト』『コントラスト』デザイン」が行われ,ゲームが面白くならない理由や気をつけるべき点が体系立てて語られた。 講演を行ったO-Planningの大野功二氏は「3Dゲームをおもしろくする技術」「2Dゲームをおもしろくする技術」といった,ゲームメカニクスについての書籍を書いた人物だ。 この講演では,業界歴24年という氏が「コントラスト」「コンテキスト」「コンフリクト」という三つのキーワードを使い,ゲームデザインにおける「ゲームの手応えが感じられない」「ゲームが分かりにくい」「ゲームが面白くない」という問題の原因と対処法について語った。 「手応えが感じられな
任天堂の新人研修で語られているのは「あそび心を伝える」という大切さについて。『スーパーマリオメーカー』を例に、UI/UXデザインチーフである正木義文さんが語ってくれた。 [目次] ・「みなさんとクイズをしたいと思います」 ・任天堂流「伝え方」のこだわり ⅰ教えるよりも体験してもらう ⅱファーストインプレッションを大事にする ⅲ体験は面白く ・わかりやすさと高機能を兼ね備えた、UIのデザインプロセス ・「あそび心を伝えるUIデザイン」3つのポイント ⅰUI脳と娯楽脳の二人三脚 ⅱ短所を「娯楽脳」で長所へ変える ⅲ将棋3席 麻雀5席 「みなさんとクイズをしたいと思います」 ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「まずは、みなさんとクイズをしたいと思います」 そんな、あそび心溢れる一言で幕を開け
前エントリで論じられた、正しいランキング設計の考察の続き。第2回は、ランキングの収奪性、格差の固定性を軽減する手段を、具体的に論じてみる。 前回の記事へのTwitter上のフィードバックは、Togetterにまとめてある。こちらもご興味があれば、一読の価値がある。いくつか被ってしまったものもあるけれど、諸々の後半記事。 「ランキング」以外の名称を用いるこれはほぼ確定。ランキングという名前は、「noteとして競争原理を推奨する」という強いメッセージを発する。noteの全てのユーザーが、競争原理で動いているわけではないので、これは望ましくない。 おそらく最終的には「注目」「人気」などの名称を使うことになるかと思われる(「オススメ」はパーソナライズ用にとっておく)。また、「ランキング」という名称やスタンスをやめることで、後述するようないくつかの公平性のための施策を行う余地が生まれる。 時間による
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く