この手のUIを見るたび「どっちやねん」と心の中で叫んでる→オンオフ状態が分かりづらい「フリップフロップ問題」回避のために規格統一して欲しい
謎水💦暗黒通信団リチウム戦闘員 @genmeisui 説明を追加しました 要するに「On」という表記で、内部状態について「On」「Off」２つの可能性があるのです アプリがどちらの意図で作られているか判別しにくい pic.x.com/Gs11HxCym4 2025-03-16 18:27:23 謎水💦暗黒通信団リチウム戦闘員 @genmeisui 「チェックボックスなら間違えない」というコメントもありますが、「押した瞬間に反映されるとは思わなかった」というエラーが起こりえます 通常、チェックボックスは複数選択してから最後に「OK」を押すという行動パターンを求めるはずなので 2025-03-16 18:30:13
すぐにできる！UIデザインが劇的に変わる7つの秘密テクニック | PhotoshopVIP
この記事はRefactoring UIの著者Adam Wathan ＆Steve Schoger がMediumに投稿した「7 Practical Tips for Cheating at Design」を、許可をもらい日本語抄訳しています。 ウェブ開発者であれば、一度はビジュアルデザインの判断を迫られる場面に遭遇したことがあるでしょう。 フルタイムのデザイナーがいない会社で、新しい機能のUIを自分で実装しなければならなかったり、サイドプロジェクトに取り組んでいて、平凡なBootstrapのサイトよりも見栄えを良くしたい場合などもあるでしょう。 「自分にはデザインのセンスがないから、これをカッコよくするのは無理だ！」 そんな風に諦めてしまいがちですが、実はグラフィックデザインの知識がなくても、デザインをレベルアップさせるためのコツがたくさんあります。 今回は、すぐにでも使える7つの簡単なテ
失敗しない美しいUIにする配色の選びかた【実践編】 | PhotoshopVIP
Refactoring UIで公開された「Building Your Color Palette」より許可をもらい、日本語抄訳しています。 これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。 完璧な配色を選ぶためのこの計算された科学的アプローチは、とても魅力的に見えますが、実はあまり役に立ちません。 自分のサイトをこんな風にしたのなら話は別ですが… 実際のホームページに必要な配色 ずばり、５つのHEXカラーコードだけでは何も作れません。 実際にホームページを制作するには、もっと包括的な色のセットが必要です。 インターフェースにはこれだけたくさんの色が使われている 良いとされる配色カラーパレットは、3つのカ
Droomから一生退去できなくて困っている【ほぼ解決】
【TL,DR】 ダイワリビング（大和ハウス）の賃貸住宅Droomを解約する際、解約専用サイトから申請できないトラブルが発生過去に別のアパートを借りていたことによって、2件分のIDが発行されており、無効な方でログインしていたのが原因（←これ結構混乱する） 正しいIDでログインし申請していたが、修正箇所を直そうとしたら申請前なのに受付を拒否されてしまう 仕方なく営業所に電話するも、そこは既に賃貸業をしていないので中央オペレーターにつなぐよういわれたオペレーターに電話するも全然繋がらないオペレーターから解約申請が終了していると告げられた。日程の変更は別途営業所から連絡があるらしい。たぶん解決 とりあえず解約までは終わったらしいので、表現がおかしかったり間違っている部分は後で訂正します 【注意】 一部に不適切な表現があります 必ずしもダイワリビングが悪いとは限りません自身の落ち度や勘違いもあります
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023)｜アプリマーケティング研究所
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023) 2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ（メルカリ）メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事：https://markelabo.c
気温には棒グラフを使わない - データ可視化ミニ講座（７）｜荻原 和樹 / Kazuki OGIWARA
棒グラフと折れ線グラフは似た表現方法です。しばしば交換可能なものとして使われる両者ですが、使うべきポイントには違いもあります。 代表的な例が気温です。気温は棒グラフではなく、折れ線グラフで表現するのが正しいです。 そもそも棒グラフは、棒の長さ（≒ 棒部分の面積）の比率と数値の比率を対応させることで視覚的に数値を比較するものです。したがって、数値が2倍なら棒グラフの長さも2倍になります。棒グラフにおいて、縦軸を省略してはいけないのはそのためです。 しかし、気温において「X倍」に意味はありません。気温が10℃から20℃に上がっても「10℃上がった」とは言いますが「2倍の暑さになった」とは言いませんよね。気温とは、水が凍る温度を0℃、水が沸騰する温度を100℃とする相対的な指標です。気温がマイナスになることはしばしばありますが、これは本当に何かがマイナスになっている、失われているのではなく、水が
ミルクボーイがUIとUXの違いを説明したら｜広野 萌
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
【2024年6月版】ベイジの業務システムUIデザインワークフロー（100のタスクを徹底解説） | ベイジのUIラボ～業務システムとSaaSのUIを考える
ベイジは2010年の創業以来、ウェブ制作事業を中心に事業を展開してきました。この事業では、サービスの質を統一するために2014年頃からワークフローの整備に取り組んできました。 一方ウェブアプリデザイン事業については、事業拡大したのがここ数年で、まだワークフローが整備されておらず、各人の裁量に委ねた進め方になっていました。そこで今後の事業拡大とメンバー増員を想定し作成したのが、業務システムやSaaSのUIデザインに特化した「ベイジの業務システムUIデザインワークフロー」です。 基本的な進め方は国際規格（ISO 9241-210※）の人間中心設計プロセスに基づいて組み立てていますが、細かいタスクの順序や内容は、今までベイジで培ってきたノウハウをふんだんに盛り込み、組み換えています。 そして、様々なプロジェクトでこのワークフローを実用しながら、今もアップデートを続けています。 また今回のワークフ
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します｜ベイジの図書館
このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレームPNG版（8.6MB） Adobe XDでパブリッシュしたプロトタイプ 編集可能なファイルはAdobe XDのみです。それ以外のデザインツールをお使いの方は、PNG版を参考に自作してみてくだ
インタフェースデザインのお約束
デジタル製品のデザインに役立つ101の指針。製品のユーザビリティや性能を高める上で必須かつ基本のツボ、マスターすれば時間を節約し顧客満足度をアップできるテクニックが101のコンパクトなルールにまとめられています。メッセージが明確で説明もわかりやすいので短時間で気軽に読むことができます。101のルールは、タイポグラフィ、コントロール、カスタマージャーニー、各種要素の統一、UX全般に関わるプラクティスに分類されているのでリファレンス的に読むことも可能です。「よくある落とし穴」を巧みに回避し、自信をもってユーザーのために闘い、すばらしいユーザーエクスペリエンスを提供するプロへと成長させてくれる一冊です。 ●翻訳者による「日本語版のサポートページ」。 ●日本語版独自の8つの追加ルールが収録された「訳者あとがき」のPDF（6MB）。 というわけで、この長すぎる「訳者あとがき」では、原著者があげなかっ
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
むずかしすぎる！五輪大会ボランティア応募フォーム(神田敏晶) - 個人 - Yahoo!ニュース
KNNポール神田です。 いよいよ、東京五輪の大会ボランティア募集が開始となった。 『ブラックボランティア』などとネットでいくら言われようとも、ボランティアする側が納得していれば、それはブラックなボランティアではないと思う。母国の五輪のボランティアで得られる経験は、人生のうち、何度もあるものではないからだ。 ボクが1963年の東京五輪の聖火リレーを見たのは神戸市の兵庫区だった。たった２歳であったが、あの雨の日の聖火リレーは、しっかりと脳裏に焼き付いている。だからこそ、ボランティアでも五輪に参加したいと考えている。 1963年10月神戸市兵庫区上沢通3丁目 出典:神田友治撮影11万人のボランティアが必要とされている大会ボランティアが８万人（組織委員会）、そして、都市ボランティアが３万人（東京都）の募集が昨日（2018/09/26）より開始となった。それぞれの申し込みページが公開された。 大会ボ
メールアドレスの確認フィールドをなくすべき理由 - ポップインサイト
メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける可能性があるため、確認フィールドの目的に反してしまいます。確認フィールドは、ユーザーのメールアドレスの入
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 __「演習ファイル＋動画＋演習付き」__で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 __ハンズオン用__などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。
The Grid
Dear people of the Grid, we have placed V2 sites in an archived state and current users will be emailed a tool to acquire & backup their content. User registration will reopen with V3. Releasing the next, nay the first realization of our shared vision to smooth over the fragmented value chain between acquiring a domain & making a name, to partake in sophistication using but simple motions over sim
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
概要 ▶ 2014年のA/Bテストの結果によれば、いわゆるハンバーガーメニューは使わない方が良いという結果に。本ページはプロモーションが含まれている場合があります スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのしたじき
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
セキュリティ診断・検査のGMOサイバーセキュリティ byイエラエ
