ロゴもレスポンシブロゴの時代へ デザイン会社 ビートラックス: ブログこれまでのロゴの基本は、どのようなサイズにも対応できるデザインを施すことだった。例えば、高速道路脇の巨大なビルボードから、新聞に小さく掲載される白黒のバージョンまで、さまざまな利用用途に対応したロゴをデザインするのが基本。
「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
文字組版の教室 note版｜モリサワ note編集部
なんとなく使っていませんか？ 括弧の種類と使い分け 突然ですが、質問です！ 以下の文章で、登場人物が実際に声に出して言っている部分と、心の中…
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023)｜アプリマーケティング研究所
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023) 2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ（メルカリ）メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事：https://markelabo.c
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編｜i3DESIGN Designers
「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリスティクスについては、以前記事にまとめています。 具体的な事例を一緒に取り上げ、よりわかりやすく解説していますので、こちらもあわせてご覧ください。 また弊社ホームページにて、ユーザビリティチェックリストをダウンロードいただけます。こちらも合わせてご活用ください。 1. システムステータスの可視化（Visibility of system status）1-1. 入力項目が多いときはステップを分けるフォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。 フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。 その上で、ステッパーを設置して現在の進捗
TODOは不快になるように残す | Marginalia
実行しなければならないことは、それが実行されないとストレスが溜まるようにデザインする。やる気という積極的なモチベーションが十分にあるなら不要かもしれないが、やる気があるなら大抵の場合はすぐに実行されており、やる気が湧かないからこそタスクとして残るといえる。そういう場合は、やる気とは違う消極的なモチベーションに頼ることをする。 たとえばTODOの管理は、タスクが残っている状態が不快であるようにする。間違っても、タスクが整然と並んでいる様子に満足感を覚えるようなデザインではいけない。残っているタスクが常に意識にちらつき、さっさと片付けないとイライラするような仕方を心がける。たとえばディスプレイや作業スペースにベタベタと付箋を貼り付けるのは、その見栄えが悪いことに意味がある。片付けたくなるように、あえて散らかすことに意味がある。 積読もそうしたデザインと捉えられる。物理的に本を積み上げてデスクや
工業デザインを勉強していた後輩が、とある商品のパッケージの素晴らしさを熱弁していた→「デザインの敗北」という言葉は何を指すのか？
Rootport🍽 @rootport 作家・マンガ原作者。／好きな言葉は「群盲撫象」／TIME誌「世界で最も影響力のあるAI業界の100人」選出／Blog→rootport.hateblo.jp ／マシュマロ→marshmallow-qa.com/rootport youtube.com/channel/UCp6RK… Rootport🧬 @rootport 学生時代に工業デザインを勉強していた後輩が、誰でも一発で「牛乳だ！」と判別できる『おいしい牛乳(2002年発売)』のパッケージがいかに優れているのかを熱弁していたのを思い出すと、昨今の「デザインの敗北」って、敗北以前の問題でただの「悪いデザイン」なのではないか……って 2023-09-29 15:15:40 Rootport🧬 @rootport もう20年以上も前で現在ではすっかり定番商品になったけれど、明治の『おいしい牛乳
明度を用いて配色を直感的に行うコツ／たじま ちはる（HUMORE） #ノンデザ25周年｜ノンデザイナーズ・デザインブック【日本語版公式】
『ノンデザイナーズ・デザインブック』25周年記念、特典PDF「Missing Pages 2023」からの抜粋です。 25周年キャンペーン情報 特典PDF「Missing Pages 2023」のpp. 65-69に掲載しています。 配色を直感的に行うための明度の使い方を3つのステップで紹介します。 このテクニックは、『ノンデザイナーズ・デザインブック』の第5章で説明されるコントラストに関連しています。 色の三属性と色相環本題に入る前に、配色の基礎知識として色の三属性と色相環について説明します。 色の三属性とは、「色相（色味）、明度（明るさ）、彩度（あざやかさ）」を指します。これらの属性を調整することで、扱える色の幅が広がります。 色相環とは、色を円環状に配置して表したもので、色相を体系的に捉えられます。 Step 1 | 色の選択に役立つ明度チェック1-1. 印象をコントロールするコツ色
figmaからXDへファイルを変換→移行する - クライマー株式会社 | 福岡・東京
こんにちは。クライマーの山口です 弊社のwebデザイン制作はAdobe XDからfigmaになり、figmaで制作を進めていたのですが、 figmaはサイトの「動き」の部分をお客さんに見せたい場合、不十分なところがあったので、途中まで作ったfigmaからXDにファイルを変換することにしました。 どんな所が不十分だったかというと、position stickyのようにスクロール途中から固定ができない部分が大きかったです。 今回は無料のプラグインを利用してfigma→XDのファイルを作ります。 ①このファイルをfigma→XDファイルに変換したいと思います。 ②上部のメニュー「Plugins」から「Browse plugins in Community」を選択します。 ③こちらのページに移るのでPluginsというタグから検索します。 「Convertify」を検索してください。 ④こちらをイ
UIモーション01： UIになぜ動きが必要か？｜鈴木慎吾 / TSUMIKI INC.
スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション（動き）が使われています。 こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。 UIモーションとUIアニメーション「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で使われることもありますが、元々の言葉の意味を踏まえると以下のような違いがあると言えます。 UIモーション：UI要素に動きを与えたもの。ユーザーの操作や時間経過に応じてUI要素が移動・拡大・縮小・変形などの変化が生じること。（例：モーダルウィンドウの表示・非表示など） UIアニメーション：時間とともに変化するグラフィックをUIに取り入れること。（例：Twitterのいいねボタンを実行した際の演出） 厳
玄関前のタイルに吹き付けた雪が不思議な模様を描いていた→なぜこうなるの？→答えがわかっても不思議な印象に
ちぃたDay's▶まこシャーク @chitaDays @QbSuBtWyDvInDiL 初めて見ました。 多分地面(基礎)とモルタルで接着された部分は地熱で雪が溶けるって事でしょうね。 紙が地熱を遮断して模様となった。 面白い現象です。 2023-01-27 22:51:30 リンク 楽天市場 【楽天市場】タイル庭床タイル タイル 床用 玄関タイル 外床タイル 砂岩タイル 床材 磁器質タイル 庭【TIフロアー 150角平ユニット 60 ケース(15シート)販売】：インテリアショップ セラコア 砂岩面状・フルボディの柔らかい質感と使いやすい色調の床タイル温かみのある風合いは、様々なシーンを演出してくれます。タイル庭床タイル タイル 床用 玄関タイル 外床タイル 砂岩タイル 床材 磁器質タイル 庭【TIフロアー 150角平ユニット 60 ケース(15シート)販売】
FEエンゲージのUI不満点 - Privatter
進撃準備〜戦闘の不満 ・「進撃準備」のメニュー画面でBボタンを押してもマップ確認（配置変更）に移行せずワールドマップに戻るかの確認になる（マップを見るには上から4番目の「配置変更」を選ばないといけない） なんでえ？そんなに頻繁にワールドマップ戻らないのになんで変更しちゃったの？ ・マップ上でのキャラのステータスに基本能力等が非表示（マイナスボタンで見られる） 主要な能力は出てるからいいけどアイテム名が詳細見ないといけないんだよな〜 ・戦闘予測画面で2回攻撃の表示が真ん中矢印部分に移動し、ダメージ数値は全合計になった 連携とかのダメージ計算で煩雑になるから「×2」表示やめたのかな…矢印部分は「×2」表示なんだけどどっちも見ないといけない 矢印のとこに命中併記してくんない？ ・戦闘予測画面の数値の並びが「攻撃→連携」で実際の順番とは逆 ・移動時の矢印表示がなくなったため、自分が今移動中なのかカ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
駅に貼ってあったマナー啓発のポスター、完成度が高くて感動した「自分のことも顧みないとな…」
登録手続きのこの画面、生まれた年までひたすら連打できつすぎる→実はここから年選択できるが「悪いUIの例として教科書に載せたい」
【追記】フライパンのパンフに載ってたこの擬人化キャラ、目が覚めるようなキャラデザで衝撃走る「天才すぎ」「発想がすごい」
BOSSの新作カフェイン飲料、とんでもない量のカフェインが入ってるのに買いやすそうなパッケージデザインで不安になる
点字ブロックに隠れアンパンマン「危ないからやめて」視覚障害者が指摘 アンパンマンミュージアムの見解は｜まいどなニュース
イラストレーターの描いたラフに監修者などが修正を入れている資料、描き手にもクライアントにも勉強になる
Miyamoto | DeNA Design on Twitter: "なぜかあまりネットに流れてない情報なんですけど。UXデザイン界隈では有名な「グーグルUXデザインプロフェッショナル認定証」って講座があるんですが、実はそのコース3でFigmaのEducation planの特典があります。 社会人… https://t.co/1pURyKMUCt"
