1 - 40 件 / 329件
1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか?今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ?最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ!」官公庁のサイトですよ?官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース(住所フォーム)は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能(郵便番号による住所補完)は、住所フォームの改善方法として最も効
"シリコンバレーを作った人物の1人"と称され、故スティーブ・ジョブズ氏が頼りにした人物がいる。 レジス・マッケンナ氏。 半導体関連の企業で働いたあと、70年代にみずからのマーケティング会社を設立した、マーケティングのプロだ。 あるときマッケンナ氏は、うわさを聞きつけたジョブズ氏から電話でコンタクトを受け、ジョブズ氏、そしてエンジニアのスティーブ・ウォズニアック氏との打ち合わせにのぞんだ。 相談は「アップルII」(1977年発売)というコンピューターのマーケティングについて。 ジョブズ氏らは、製品についての記事を雑誌に載せる方針を明かした。 マッケンナ氏は、その内容があまりに専門的で、一般の消費者には受け入れられないと感じ、「市場を広げたいなら、自分と同じようなタイプの人たちに発信するのではだめだ。記事は書き直すべきだ」と助言した。 ところが2人はその意見を気に入らず、部屋を出ていってしまっ
多摩ニュータウンができて50年以上。総面積約3000ha、計画人口34万人という日本最大のニュータウン計画だったがゆえに、「第四の山の手」から「陸の孤島」「オールドタウン」まで、よくも悪くも世間の注目を浴び続けてきた街だ。 現代の東京に住んでいると当たり前の存在になっているが、「巨大な実験都市」とも言われるように、実は日本史上でも二度とあらわれない、貴重な場所なのかもしれない。 建造物は50年たつと文化財の仲間入りできるというけれど、一方で多摩ニュータウンは生きた街である。東京都は2040年代を見据えた都市計画を立てているらしい。 多摩ニュータウンの過去から未来へ。 これを機に、ニュータウン以前の多摩丘陵の面影、多摩ニュータウン黎明期、バブル〜平成の多摩ニュータウン、そして未来の多摩ニュータウンについて...四世代にわけて、実際に歩いてみたい。 多摩ニュータウンのなにがすごいのか 1971年、
結論から書くと、ちょっと思い当たらない。というおはなし。 そもそも「えきねっと」とはJR東日本の予約サイト。今週末にリニューアルを実施しました。 切符オタクの界隈では「あの切符が発行できない」「売ってはいけないはずの切符が検索結果に出てくる」などなど、いろいろな反応があったようですが、一般の方からすると「鉄道オタクがなんか騒いでいるなぁ」っていう感じかもしれません。私も個々論的なところはあまり興味がないから、そこについては書きません。 じゃあ、ここで何を書くかというと、UIの話をします。鉄道に限らず、いろいろなシステムにも言える話かな、と思ったので。 きっぷを買うまでの道のりが大変先述のプレスリリースには色々と変更点が書かれているんですが、1番目に書かれているのが「列車のお申し込みの操作方法が変わります」という点。 「えきねっと」トップページからダイレクトに、「乗車駅」「降車駅」や「日時」
こんにちは。カンムで業務部長してます平湯(ひらゆ)です。 カンムは現在、Visaプリペイドカードの「バンドルカード」と手元の資産形成に活用できるクレカの「Pool」の2つの事業をやっています。今回はバンドルカードのお話です。 2022年末に過去の問い合わせ率を集計したところ、一番多かった時期と比べると問い合わせ率が半分になってました。(問い合わせ率 = 問い合わせ数 / 稼働会員数) 良きタイミングなので頑張ってきたことを振り返ってみます。 どんなことをやったか一次情報から課題特定 →問題提起 →オペ整備 →リリースのサイクルを回した結果です。何よりも一次情報の取得が大事です。時間がかかるし、単純作業なので苦しいんですが、生の声を読むことで感情や背景が頭に染み込みます。問題により深く入り込めているという感じでしょうか。 この課題の解決策をエンジニア・デザイナー陣と考えていきます。カンムはエ
皆さん、フォーム作ってますか? Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
先日、任天堂の株主総会が行われた。例によって詳細をまとめているので前回の記事をご覧いただきたい。 任天堂株主総会レポート2024 | N-Styles 株主総会レポートでも記載したが、質疑応答で最初に指名された質問者が「任天堂は視覚障害者対応が遅れているのではないか」と指摘し、私はこの質問に非常に驚いた。 なぜなら、私自身が株主総会参加の半年以上前から用意していた質問とほぼ同じだったからだ。 この質問内容を7月1日に任天堂が掲載した議事録から引用する。 Q1 ゲームを遊びたいと思っている視覚障がいを持つ人も、世の中にはいると思う。任天堂がこうした方に向けて取り組んでいることがあれば説明してほしい。 A1 代表取締役社長 古川俊太郎: 当社では、世界中の多くの方々に当社のゲームを遊んでいただきたいと考えています。この場で具体的な取り組みを申し上げることは控えさせていただきますが、視覚障がいの
enden @enden_nix 松屋の券売機のUIはこれまでも着々と悪化を進めてきたがここに来て「「極み」」に到達した感ある デザイナーいないんですか? pic.twitter.com/O4Ivhfvbhs 2023年04月25日 17:56:26 enden @enden_nix これまでも牛丼1杯と半熟玉子頼むだけで16回のボタン操作が必要だったりして異常だったけど流石にこれは無いと思う、個人経営のラーメン屋さんがなんとか導入したとかならまだしも大手全国チェーンの最新型機ですよ???? 2023年04月25日 18:04:36
村井理子 @Riko_Murai 義母も義父も、コンビニには行けなくなってしまった。カードやポイント、画面操作が必要だから、怖くて行けないらしい。銀行もハードル高いらしく、毎度、予約して(!!)、行員さんに全部やってもらっているらしい。なんかもう、どうしたらいいのだろうな 2023年04月26日 16:52:06 村井理子 @Riko_Murai 翻訳家・エッセイスト。愛犬は長い棒を回収する琵琶湖の至宝。『射精責任』(太田出版)『ラストコールの殺人鬼』(亜紀書房)、『未解決殺人クラブ 市民探偵たちの執念と正義の実録集』(大和書房)、【最新刊】『ある翻訳家の取り憑かれた日常』(大和書房)映画『兄を持ち運べるサイズに』原作『兄の終い』もよろしくお願いします。観てね! rikomurai.com/%e7%a7%81%e3%8...
でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu... 2021年10月05日 18:00:54 Lacnor @Lacnor_JP ボタンを、形はそのままで、グラデーションと枠を無くして、コントラスト強めな単色で構成してくれれば、使い勝手そのままでナウくなると思いましたまる twitter.com/ichirowo/statu... 2021年10月05日 15:57:32
かべ @kataru_kabe 友達が「子育て中のママはみんな履いて欲しい」と力説していたNIKEのゴーフライイーズ、私も履かせてもらったらマジで"そう"だった...子や荷物で両手が塞がっていても脱ぎ履きできるし、屈まなくて済むから妊婦さんにも良いと思う。妊娠中に知ってたら間違いなく買ってた。 nike.com/jp/flyease pic.twitter.com/bNfuX9540h 2022年12月11日 10:43:35 かべ @kataru_kabe この靴はTwitterで話題になったので存在自体は知りつつもそこまで関心がなかったんですが、自分の立場が変わったことによって「これめちゃくちゃ便利やん」となった。元々は障害を持つ人の声をベースに開発したとのことで、ユニバーサルデザインってこういうことだよなーとしみじみ実感している。 2022年12月11日 10:43:36
日本―ドイツ戦では、ABEMA1日の視聴者数が1000万を超えた。今回のW杯が、配信と放送の考え方や楽しみを変えるきっかけになるだろう(写真/アフロ)この記事の写真をすべて見る 連日連夜、日本中を"楽しい寝不足"にさせているサッカーのワールドカップ(W杯)カタール大会。その中継で名を上げたのが、無料で楽しめるインターネットテレビ局「ABEMA」だ。「移動中もスマホで楽しめる」「試合後も見られる」「全64試合視聴できるアプリがわかりやすい」と、人気が急上昇。日本代表が1次リーグの初戦で強豪のドイツに逆転勝利した日の1日の視聴者数が「1000万を超えた」とABEMAは高らかにアナウンスした。これまでW杯のような国際大会の中継は、テレビの独壇場だった。今回ABEMAがFIFAに支払った放映権料は200億円ともいわれる。"新しい未来のテレビ"を掲げるABEMAが設立した当初から藤田晋社長に取材して
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ(表示)を
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
誰もが気軽に電子機器を持つようになった今、私たちの生活はデジタルの恩恵で確実に便利になっています。しかし、UIは"よりよさ"を求めた結果、期待した評価とは正反対の声が集まること少なくありません。 そこで今回は、慶應義塾大学環境情報学部の教授で、予測型テキスト入力システム「POBox」やiPhoneのフリック日本語入力システムの開発者であるUI研究者の増井俊之氏に、UIの本質についてお話をうかがいました。まずは増井氏がUIに関わることになったきっかけと、使いやすさの本質について。 UI研究に関わるようになった流れーー学生時代には電子工作やソフトウェアに興味をお持ちで、現在のUIにつながる研究は社会人になってから取り組まれるようになったとのことですが、もともとUIやデザインにご興味があったのでしょうか? 増井俊之氏(以下、増井):小学生のころからずっと電子工作が趣味で、デジタルおもちゃやアナロ
謎水💦暗黒通信団リチウム戦闘員 @genmeisui 説明を追加しました 要するに「On」という表記で、内部状態について「On」「Off」2つの可能性があるのです アプリがどちらの意図で作られているか判別しにくい pic.x.com/Gs11HxCym4 2025年03月16日 18:27:23 謎水💦暗黒通信団リチウム戦闘員 @genmeisui 「チェックボックスなら間違えない」というコメントもありますが、「押した瞬間に反映されるとは思わなかった」というエラーが起こりえます 通常、チェックボックスは複数選択してから最後に「OK」を押すという行動パターンを求めるはずなので 2025年03月16日 18:30:13
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
吉永龍樹(ヨシナガタツキ@僕秩) @dfnt 昨日の放送で一番反応があった「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技、 設定→アクセシビリティ→画面表示とテキストサイズ→カラーフィルタ→オン から設定できます。本当にスマホが色を失うだけで魅力が激減して全然触らなくなるのは不思議。 pic.twitter.com/y0j49u56Fu
USBが誕生したのは「奥さんのプリンタをつなげる手間にキレたから」 USBの設計当時を振り返る:"PC"あるいは"Personal Computer"と呼ばれるもの、その変遷を辿る(1/6 ページ) IBM PC、PC/AT互換機からDOS/Vマシン、さらにはArmベースのWindows PC、M1 Mac、そしてラズパイまでがPCと呼ばれている昨今。その源流からたどっていく大原雄介さんによる解説連載の第8回。前回はPCのアーキテクチャを巡るIntelとMicrosoftの動きを描いたが、今回はそこでIntelの取り組みの成果の一つとして挙げたUSBのお話である。 USBはいろいろ失敗もある(というか、現在進行形で失敗し続けている気もしなくはない)が、それでも大成功したインタフェースである。そして単にPCだけではなくマイコン(※(注記)1)などでも普通にサポートされるようになってきており、加えてP
もういろんなところで言われてるけど、最近よく見るタッチパネル式の食券発券機ってなんであんなに無駄なステップが多いの? 行きつけのラーメン屋でノーマルラーメンを頼もうと思ったらこんだけの画面を経なきゃならない。 ・ラーメン、サイドメニュー、ドリンクからラーメン選択 ・ラーメン、チャーシューメン、煮卵ラーメンなどからラーメン選択 ・トッピング選択画面でトッピング無しを選択 ・麺普通、大盛から普通を選択 ・お支払方法選択ボタンをタッチ ・電子マネー、現金から電子マネーを選択 ・いくつかの選択肢からたとえば交通系ICを選択 ・カードをタッチ→発券 こんなのこうすりゃ簡単じゃん。 ・注文画面(=初期画面)で注文する品を選択→他メニューやトッピングも追加選択できる状態で「電子マネーをタッチ、あるいは現金を入れてください」の表示 ・カードをタッチあるいは現金を投入して発券(どの電子マネーかは自動判別)
日常のハッとするような気付きを与えてくれるツイートを、イラストとともにご紹介する企画「その視点はなかった」。今回は大学教授のKohei Kawaguchi(@mixingale)さんが驚いた、アプリが違うだけで大きく変化した学生たちの反応です。 (イラスト:野田せいぞ) Discordに変えたら生徒の反応が激変 今年の授業はSlackじゃなくてDiscordにしたんだけど、それだけで学生の反応がぜんぜんちがってびっくりした。サーバーに参加した学生同士で勝手に会話を始めている。SlackでもDiscordでも機能的にみて同じようなもんでしょと思ってたけど、UIとコンテクストがちがうと受け止め方が全然違うんだな。 (Kohei Kawaguchiさんのツイートより) 大学の講義で使うアプリを、SlackからDiscordに変更したKawaguchiさん。すると、それだけで学生の反応が大きく異な
ローソンのプライベートブランド(PB)商品のパッケージデザインが変更され、「分かりやすくなった」と好評を博しています。これまで「かわいい」という声もあった反面「わかりにくい」という不満もあったデザインが変更された理由をローソンに聞きました。 多くの人が賛同を示しています ローソンの従来のPBパッケージは2020年3月に導入。「かわいい」「高級感がある」という評価の一方で(関連記事)、商品の画像が小さいことなどから「区別がつきにくくなった」という不満の声もありました(関連記事)。 商品の写真が大きくなっているのが一目瞭然(画像提供:シアンさん) デザイン変更はいつから、なぜ実施されたのかをローソンに聞いてみました。 ―― 商品パッケージの変更はいつからですか。 ローソン 2020年から順次切り替えを行っております。 ―― どれくらいの商品のパッケージデザインが変更されていますか。 ローソン
TrelloのUI(UX)が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード(Todoリストでいうタスク)の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。 ただそういう次元じゃないんですよね。たとえば以下の機能があります。 Descriptionが空のときは「Add a more detailled description...」を表示する Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない Descriptio
よんてんごP @yontengoP 📖情シス女子の社内バトル漫画💥描いてます 💻️AIベンチャー/上場企業情シス/ブラックSES/フリーランス経験 ✎週刊ダイヤモンド/📺️ABEMA出演 漫画/WEB/動画/ゲーム制作など、お仕事以来はDM📧宛まで! https://t.co/sfH3L2RW3a よんてんごP @yontengoP コレ僕がIT業界の人間だからなのか分からんのだが、 「エラーに何が画面に出てるかおしえてください」 ってそんなに難しい作業...? 普通に 「画面上に、エラー:XXXって文言がでてると思うので、その内容を教えて」つったら 「こっちはITの人間じゃないんだから出来ない!!💢」とキレられてな 2021年05月15日 18:56:53 よんてんごP @yontengoP ちなみにお客さんじゃなくて社内の他部署。 「多分画面にERR_ってのが出てると思うので そ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く