無限スクロール：利用すべきとき、避けるべきとき
無限スクロールは、インタラクションコストを最小限に抑え、ユーザーエンゲージメントを高めるが、すべてのWebサイトに適しているわけではない。ページネーションや「さらに読み込む」ボタンのほうが良い解決策になることもある。 Infinite Scrolling: When to Use It, When to Avoid It by Tim Neusesser on September 4, 2022 日本語版2023年1月24日公開 無限スクロールは、商品一覧ページに使われるデザイン手法の1つで、ユーザーがスクロールダウンしていくと、コンテンツが次々に読み込まれるというものだ。これを利用すれば、ページネーション（訳注：コンテンツを複数のページに分割すること）の必要がなくなる。 Adidas.com：Adidasの商品一覧ページでは、ページネーションを使って商品を表示している。 Nike.com
ミルクボーイがUIとUXの違いを説明したら｜広野 萌｜note
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
都合の良いUIデザイン〜わがままで怠惰で理不尽なユーザーのニーズに応える10のポイント〜｜SOMPO Digital Lab デザインチーム
こんにちは、SOMPO Digital Labデザインチームのデザイナーの金（https://twitter.com/seikei_kin）です。普段はUIデザイナー・ウェブデザイナーとしてサービスやプロダクトの開発・設計に携わっています。 突然ですが、みなさんは真面目で、協力的で、積極性があって、物覚えがよい方でしょうか？あるいは最新のアプリの動向に詳しく、それらを使いこなせるリテラシーを十分にお持ちでしょうか？ 果たして自分はどうかと振り返ってみると、少なくとも自信をもってそうであるとは言えないのが正直なところです。なまけものかつわがままで、物覚えや察しも良くなく、実際、馴染みのないウェブのサービスやアプリを利用する場合には、些細なことでつまづいたり悩んだりした結果、途中で嫌になり諦めてしまうこともしょっちゅうです。 そして、実は私のようなユーザーは決して少なくないのではないでしょうか
アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
GoogleのUXデザインを学びはじめました | DevelopersIO
UI/UXデザイン1年目のIsodaです。 UXデザイン初心者として学習教材を探していたところ、とても面白そうな教材を発見したので、7月中旬から受講しはじめました。 グーグルUXデザイン プロフェッショナル認定 Google UX Design Professional Certificate Google UXデザイン プロフェッショナル認定とは？ 7つのコースで、エントリーレベルの仕事に就くために必要なスキルを身につけます。 週に10時間以下の勉強量で、早ければ6ヶ月以内に修了することができるらしいです。 動画教材を中心に、テキストベースの教材や選択式のテスト、生徒同士での記述式のディスカッションなどがあり、 あらゆる角度からUXデザインについて学び、考えるプログラムになっています。 コース毎に学べる内容と感想 コース１ 「Foundations of User Experience
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
カラーユニバーサルデザインガイド ＣＵＤの具体例（折れ線グラフ）です - 福島県ホームページ
カラーユニバーサルデザイン（CUD）ガイドCUDの具体例 色弱者が見分けにくいと感じている事例について、カラーユニバーサルデザインの手法を用いて解決する具体例を見ていきましょう。 凡例を上部にまとめて、彩度の高い色を使い各国の違いを表現した一般的な折れ線グラフです。 「日本」と「イギリス」、「アメリカ」と「ドイツ」の色が似ているため、区別がつきにくくなっています。例えば98年のドイツがこの中で何位なのか即答できません。 色弱者も判別しやすい色を使う 線を太くして色の面積を増やす 凡例をやめ、折れ線の近くに文字を表記 色以外の情報を追加・線の太さを変えたり点線を使用・線種で不十分な違いを点の形（■や●）で明確に 色弱者も各国の区別がつきやすくなりました。一般色覚者にとっても、白黒コピーで資料を配付した場合などでも判別可能なので、用途が広がります。 ＞＞次ページ：CUDの具体例──案内地図
ハンバーガーメニューがステキなWebサイト 10選。｜Rex mag. / ラナエクストラクティブ
こんにちは、ラナエクストラクティブ（通称: Rex）広報のしまだです。 今回はRexメンバーに、「ハンバーガーメニューがステキだと思うWebサイト」（＋推しハンバーガー）を聞いてみました。 ハンバーガーメニューと言えば、Webサイトの横三本線のシンプルなナビゲーションメニューとしてお馴染みですが、今回改めて注目して見てみると、Webサイトのコンセプトにマッチしていたり、心くすぐる遊び心があったりと様々にステキな体験がありました。 ラインナップはこちら！ 1. PRESS BUTTER SAND CHOCOLATE COLLECTION 単なる三本線でなく一癖ある見た目が好きです。メニュー画面への遷移も素敵です。（デザイナー・S） 推し🍔：エッグチーズバーガー。たまごしか勝たん！ 2. ザ・レインホテル京都 公式サイト 「THE REIGN HOTEL」というホテルのサイト。名前にある「R
14つのUXライティングルール・ガイドライン｜Hitomi Bremmer UI UX
最近、UXライティングのガイドラインについて会社でWikiページを作ったので、日本語だとどんな感じかな、と思い興味本位で調べてみました。日本語も英語も結局「わかりやすく、簡潔に」が一番重要なんですが、文法まで掘り下げて考えてみたので、皆さんと共有したいと思います。 １、ハッキリと簡潔に曖昧な表現は避けましょう。私たちは小説を書いているわけでないので、分かりやすく、読みやすく、役に立つ文章を意識してください。 DON'T：投稿を保存するには、「保存する」をクリックまたは「コマンド＋S」もあります。 DO：投稿を保存するには、「保存する」をクリックまたは「コマンド＋S」があります。 ２、一貫性を保つデジタルプロダクトの声のトーンは一貫性を保つようにしてください。時々フレンドリーになったり、時々ロボットのように話したり、しないようにします。また、「子ども」「子供」、「お客さん」「お客様」はなどの
現役デザイナーが解説サイドバーデザインの参考事例と注意点【2024年4月最新版】 | Web幹事
「Webサイトにはサイドバーって必要なんだろうか…」 「サイドバーを設置するとしたら、どんなデザイン・内容にするべき？」 最近はビジュアル重視のサイトなど、ダイナミックな印象にするためにサイドバーをあえて設置しないサイトも増えました。 しかし、デザイン性を重視したばっかりにユーザーにとって使いにくいWebサイトになってしまっては本末転倒です。 Webサイトはユーザーが使いやすいものでなければなりません。 そこで、今回はサイドバーは何のために設置するのか、その必要性についてご紹介します。 Webサイトにサイドバーは必要か？ サイドバーを配置する際の注意点は？ 参考になるWebサイトは？ 合わせて、Webサイトを制作する前にチェックしておきたいサイドバーのデザインやギャラリーサイトをご紹介しますのでぜひ参考にしてみてください。 【無料】サイドバーデザインについて相談する サイドバーの必要性 サ
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第4弾は、UIに一貫性・統一感を持たせるためのデザインテクニックです。 UI & UX Micro-Tips: Volume Four. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. デザイン要素に一貫性を持たせる 2. ホワイトスペースはたっぷり使用してください 3. 冒頭のパラグラフをスタイルして、ユーザーを引き込む 4. 短いパラグラフを効果的に使用する 5. カラーパレットを定義し、デザインに統一感を持たせる 6. アイコンをグリッドシステムで使用する際の注意点 はじめに 次のプロジェクトのため
満たしておくべきWebアクセシビリティを向上させる5つの手法｜Yuji Mine
こんにちはフロントエンドエンジニアの峯です。 今回はアクセシビリティを向上させる５つの手法について紹介します。 みなさんアクセシビリティについて、どのくらい意識して普段のプロダクト開発に携わっていますか？ ここで紹介する５つは、あなたのサイトがより多くの方にとって有意義なサイトにするための基本的かつ、不可欠な要素です。 アクセシビリティについてまず、アクセシビリティとは「利用しやすさ」を表します。主にWebサイトなどでは、「情報へのアクセスしやすさ」などを意味します。 「環境や能力、状況にかかわらず、サービスの利用しやすさ、情報へのアクセスしやすさ」に配慮しようということです。 高齢者や障害を持った方に対する対応という印象が強いですが、健常者でも、一時的に障害を抱えた状態はこれにあたります。 高齢者や、視覚障害、聴覚障害、運動機能障害など、様々な障害を持つ方、持たない方、全ての人にとってア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
配色のバリアフリー
UI/UX事業終了のお知らせ
セマンティクス | Vue.js