デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
「Twitterのタイムラインをごちゃごちゃにする仕事」は本当に実在したのか？ 話題の元Twitterエンジニアに聞いた
「Twitterのタイムラインをごちゃごちゃにする仕事」は本当に実在したのか？ 話題の元Twitterエンジニアに聞いた実際にはどういう仕事で、どのようにして導入されることになったのか。タイムラインの「重要度順表示」の導入に関わった、 元Twitterエンジニアのイハラさんにお話を聞きました。 「タイムラインごちゃごちゃにする仕事」で波紋Business Insiderが12月1日に掲載した、「感謝祭の前夜にTwitterをレイオフされた日本人エンジニア」のインタビューが話題になっています（もともとは英語版Business Insiderが11月28日に掲載した記事で、日本版はこれを翻訳したもの）。 インタビューの内容もさることながら、特に注目を集めたのは、インタビューを受けたエンジニアがTwitterで行っていたという「業務内容」でした。 「解雇される前、私はツイッター（Twitter）
ダークモードとライトモード：どちらが良いのか
正常な視力の人（または視力を矯正している人）は、ライトモードのほうがよく見える傾向があるが、白内障および関連疾患のある人の中には、ダークモードのほうが見え方が良好になる人もいる。その一方で、ライトモードでの長時間の読書は、近視を引き起こす可能性も指摘されている。 Dark Mode vs. Light Mode: Which Is Better? by Raluca Budiu on February 2, 2020 日本語版2022年10月31日公開 最近、iOS 13へのダークモードの導入をきっかけに、ダークモードのデザイントレンドとしての人気とそのユーザビリティについて、ある記者からコメントを求められた。また、UXカンファレンスの参加者からもダークモードについてのこの質問を何度か受けている。 iOS 13：ライトモード（左）とダークモード（右）。 前もって言っておかなければならないが
UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto
コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ
商用利用無料、UIデザイン用のSVGアイコンが220種類！改変・再配布も可の太っ腹ライセンス -System UIcons
システムとプロダクトのUI用にデザインされた、オープンソースのSVGアイコンを紹介します。Webサイトやスマホアプリに最適です！ アウトラインのシンプルなデザインで、220種類のアイコンが揃っています。SVGなので、サイズやカラーなども簡単に変更して利用できます。 System UIcons System UIcons -GitHub System UIconsの特徴 System UIconsのダウンロード System UIconsの使い方 System UIconsの特徴 System UIconsは、システムとプロダクトのUIによく使用されるアウトラインのアイコンです。フォーマットはSVGなので、使いやすいと思います。 ライセンスはThe Unlicenseで、商用プロジェクトでも無料で利用できます。改変・再配布もOKです。
Ameba Pickのアクセシビリティ向上への取り組みについて | CyberAgent Developers Blog
こんにちは、Ameba事業本部という部署でフロントエンド開発をしております宮本 (@hrfmmymt) です。 2020年4月(iOSアプリ版は5月)にAmebaブログの新アフィリエイト機能である Ameba Pick (アメーバピック) がリリースされました。 Ameba Pickのランディングページ ( はじめ方_Ameba公式アフィリエイトAmeba Pick ) Ameba PickはAmebaブログの管理画面やエディタから操作できる、Amebaブログの内包する一つの新機能という位置付けではあります。しかしながら、モーダルウィンドウなども含めた画面の数や、PCブラウザ・SPアプリへの対応、デザインや機能を既存の管理画面へ整合させる必要性があることなどの事情を含めると、要した開発期間はおよそ10ヶ月に及ぶもので、開発規模としては一サービス程度のものとなりました。 さて、本稿ではそんな
『あつまれ どうぶつの森』で目指した、想像のスキマを残し、可能性を広げる記号的デザイン【CEDEC 2020】 | ゲーム・エンタメ最新情報のファミ通.com
2001年にニンテンドウ64用ソフトとしてシリーズ第1作が発売された『どうぶつの森』シリーズ。時代の変化やハードの進化に合わせて開発が重ねられてきたが、コンセプトである“人と人とのコミュニケーション”はずっと変わっていない。本セッションでは、そのシリーズの積み重ねと向き合い、『あつまれ どうぶつの森』（以下、『あつ森』）のアートをどのように考えていったのか解説が行われた。 想像のスキマを残す、語り過ぎないデザイン ひとつめのトピックスは、アートの土台となる考えかたについて、アートディレクターを務めた高橋幸嗣氏が解説。『どうぶつの森』では、釣りをしたり、買い物をしたり、どうぶつたちと話したり、さまざまな“遊び”が存在する。その中で、ユーザーが自分なりに目的を持って遊べるのが特徴のひとつ。また、人によってそれぞれの体験が生まれるのが『どうぶつの森』シリーズの魅力でもあり、それがたくさんあるほど
CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
"Neumorphism" なるUIデザインのトレンド｜木村 博信 (hiro_kimu)
「新しいスキューモーフィズム」を謳う "Neumorphism" というデザインが最近一部で提唱されているようです。 Skeuomorph Mobile Banking by Alexander Plyuto この例のようにボタンやカードなどの要素が凹凸で表現されていて、明るい影（光）が落とされているのが特徴です。それによってボーダーや塗りを使わずに要素の形状を表します。 Neumorphism in user interfaces 単色の物体に凹凸が付けられているように見えるビジュアルは、ディーター・ラムスがBRAUNで手掛けたブロダクトや初期iPodのデザインをちょっと想起させますね。 端的に言えば「スキューモーフィズムに半分回帰した」ようなUIデザインです。 The Book Of Life - "Dieter Rams" ルールこちらに解説記事がありますが、次のようなルールがあるよ
よくあるコーポレートサイトのワイヤーフレームを無料で配布します｜Yoshiki Kojima / chot Inc.
前回、フリマアプリのワイヤーフレームを配ったら好評だったので再び。 よくあるコーポレートサイトのワイヤーフレームを作りました。 トップページにお知らせやバナーが貼ってあって、各ページに詳しい情報が載ってる感じ。 プレスリリースのページとか。 会社概要とか。 採用ページ モバイルもあります WordPressのテンプレート用にスクリーン名を付けていますコーポレートサイトをオリジナルで作るなら大抵WordPressでやることになるかと思います。なのでスクリーンの名称にWordPressのテンプレート作成時のファイル名を付けておきました。 採用情報ページの募集職種・オフィス環境・福利厚生あたりはカスタム投稿・カスタムフィールドを使うと良い感じにあとから管理しやすくなると思います。 ダウンロード
フォームにおけるエラーの通知方法： 10のデザインガイドライン
問題を明確に特定し、エラーのある入力欄にユーザーがアクセスして、すぐに修正できるようにすることで、ユーザーがエラーから復帰できる手助けをしよう。 How to Report Errors in Forms: 10 Design Guidelines by Rachel Krause on February 3, 2019 日本語版2019年9月3日公開 フォームは、多くのアプリケーションやWebサイトに必要なコンポーネントで、ログインや商品の購入、フィードバックの送信、個人情報の入力に利用される。自分が使っているWebサイトで、情報の入力を何回おこなっているかを考えてみてほしい。その結果、それがエラーになる頻度はどのくらいあるだろうか。また、そうしたエラーをうまく切り抜けるのにイライラすることはないか。 エラーメッセージとは、システムの状態表示の1つだ。すなわち、ユーザーに彼らが直面してい
なぜECで「カゴ落ち」は起こるの？価格表示や決済など、ユーザー調査で見えた思わぬ離脱ポイント
EC事業者にとって悩みのタネなのが「カゴ落ち」。購入の意思をもって入力フォームにたどり着いたユーザーが、離脱してしまうのはなぜでしょうか？エンドユーザーへのインタビューやアンケートで見えてきたもの。それは、「価格の総額を表示するタイミング」など事業者側では見落としがちな意外なポイントが、実は離脱要因になっていたことでした。A/Bテストによるカゴ落ち改善事例と合わせて、お伝えします。 改善事例1：送料や手数料が離脱理由の1位！・・「総額表示」を1ページ目で見せたところ？ ユーザー調査で不安や疑問に感じた事例で多かったのが、価格について。 私たちが行った200人を対象としたアンケート調査でも、フォームで離脱する理由では「送料手数料が気になる」という回答が15.2％で1位でした。 情報入力や支払い方法の段階で、「総額でいくらかかかるか分からないのが不安」と、入力をやめた経験を語るユーザーが多くい
レシピのUX／UIを改善する｜Goodpatch Blog グッドパッチブログ
普段、何気なく利用している身の回りのもので、使いづらかったり分かりにくいものはありませんか？このブログをご覧いただいている皆さんであれば、必ず一度はそういった経験をされたことがあるのではと思います。今回は「料理レシピ」にフォーカスしてUX／UIを改善してみましたので、そのプロセスをプロジェクト風にまとめてご紹介します。 改善の経緯 私は現在、Goodpatch社内のCookingサークルに所属しているのですが、先日みんなでフォカッチャを作ろうとしたところ教材に使用したレシピがとても分かりにくく、作るのが久々だった私自身も含め大混乱を招いたため、勝手にレシピを改善することにしました。 プロジェクトの目的・要件 既存レシピの改善。 レシピ利用者の背景や思考、調理時の行動などに合わせ、理解しやすく実際に調理する際にも迷うことのないレシピのフォーマットを作成する。 実施計画 利用者の背景を踏まえた
特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この
誰かのせいで良いUXが提供できないと感じたら
PaulはUXデザイナーであり、サービスデザインのコンサルタント。UNICEFなどの非営利団体や企業に対して、ユーザーのデジタル体験を向上させるためのコンサルティングを行っています。 私がUXの専門家から聞いた一番の不満は、「同僚や顧客、マネージャーが改善の障害になっている」ということだ。しかし、それはなぜでしょう。そして私たちはそれに対して何ができるのでしょうか。 以前から気になっていたことでシェアしたかった内容です。これが学びのあるブログ記事というより愚痴に近い内容であることは十分に理解していますが、これは私のブログ記事ですし、好きに書かせていただきます。 私は、UX分野の仲間たちが、同僚や顧客、経営者について不平を言うのを聞くのにうんざりしています。公平を期すために言っておくと、他のデジタル専門家も同じことをしていると聞いていますが、このあとすぐ触れるように、UXの専門家ならもっと良
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユニクロアプリが動画メインになっていて、なかなか見たい商品まで辿り着けない！と話題に「素直に静止画で見せてお願い」→対処法もあるらしい
「Twitterの無駄機能を全部殺せる」 ブラウザ拡張「Tweak New Twitter」が話題 フォローのツイートだけ表示など
“ディズニープラス”を退会しようとすると、ちょっと面倒な感じの手続きになるらしい「絶対にやめるという強い意志を試される仕様」
スマホ時代のEC市場の将来とECの検索窓から見たベストなUIの提言 ｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL
