2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

2024/04/19 257 users フォームバリデーション バリデーションエラー 要件 HTML

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があり... 続きを読む

プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog

2024/03/12 65 users プレースホルダー アクセシビリティ アクセシビリティ上 課題

こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては... 続きを読む

「UIの良さ」ってのはユーザビリティだけじゃないんだよ〜UNDERTALEのUI｜Yamashita Angelica

2023/09/20 244 users Undertale アンダーテール インディーゲーム ゲーム

この記事には、ゲーム「UNDERTALE」のネタバレが含まれます。 ネタバレによってゲーム体験を致命的に損なう可能性が高い作品です。今後プレイする予定のある方は、ぜひプレイ後にお読みください。 UNDERTALE（アンダーテール）とは、「知る人ぞ知る」と言うにしてはあまりにも有名になりすぎたインディーゲームです。201... 続きを読む

エンジニア兼SF作家がGPT-4執筆支援を実戦投入できないか実験してわかったこと｜Anno Takahiro｜note

2023/04/07 698 users 実戦 Anno Takahiro｜note GPT4 実験

今のGPT4は実践投入レベルの使い方もあれば、そうでない使い方もあると思っている。今回のポストでは、私がやった執筆支援の実験を8つほど紹介し、物書き目線から3段階評価した。○は作品制作にすでに実戦投入している利用方法。△は自分が実作に活用はしていないものの、ユーザビリティが良くなれば使いたいと思えるもの... 続きを読む

HTMLが強みになる解説書、アクセシビリティやユーザビリティに配慮したコーディングを学べる -武器になるHTML

2022/12/02 62 users アクセシビリティ コーディング CSS 本書 HTML

Webページを実装する際に重要なのは、HTMLです。しっかりと確かなHTMLが書けないと、CSSやJavaScriptにも影響を与えてしまいます。 HTML Living Standardに基づいた知識、アクセシビリティやユーザビリティに配慮したコーディングを学べる、HTMLのみに特化された解説書を紹介します。 本書は仕事としてWeb制作に携わって... 続きを読む

サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable

2021/10/14 125 users ユーザーインターフェース インタラクション ウェブ ユーザー

公開日 : 2021年10月14日 カテゴリー : ユーザビリティ / アクセシビリティ / ユーザーインターフェース (UI) / ユーザーエクスペリエンス (UX) ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化するインタラクションがあります。たとえ... 続きを読む

【フロントエンド初心者向け】ユーザビリティを上げるちょいテク

2021/06/30 212 users チョイテク

フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現する... 続きを読む

UXにおけるビジュアルデザインの5つの原則 – U-Site

2020/12/17 230 users U-Site ゲシュタルト 階層 原則 スケール

スケール、視覚的な階層、バランス、コントラスト、ゲシュタルトの原則を正しく適用すれば、美しいデザインを生み出せるだけでなく、ユーザビリティも向上させられる。 5 Principles of Visual Design in UX by Kelley Gordon on March 1, 2020 ビジュアルを見たとき、我々はそれが魅力的か不愉快かを、通常、すぐに判断... 続きを読む

アプリで「ログインしっぱなし」はどのように実現されているか？ - Qiita

2020/01/22 489 users Qiita Authentication アプリ ツイート

このツイートを見て、「アプリで再ログインを頻繁要求されるってユーザビリティ良くないな。」と思ったのですが、普段裏側の仕組みは意識していなかったりテックリードの方に任せきりだったりしていたので、これを気に調べてみました。 そもそもスマホアプリ の時代、もはやauthenticationですらないと思うのよね。（何... 続きを読む

早め早めの脆弱性対策！ 開発チームでできるアプリとサーバのセキュリティ診断と要件定義の作り方 - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2019/11/12 160 users エンジニアHub サーバ 要件定義 若手Webエンジニア 松本

こんにちは、松本（@ym405nm）です。 みなさんは業務やコミュニティ、趣味などでWebサイト作ってますか？ SEO対策、ユーザビリティ、レスポンジブル、オートスケールなどなど、Webサイトを1つ作るだけでもさまざまな技術や考え方が必要であり、非常に奥深いものであるということは、このエンジニアHubの記事の多さが物語... 続きを読む

アプリで「ログインしっぱなし」はどのように実現されているか？ - Qiita

2019/07/11 672 users Qiita Authentication アプリ ツイート

このツイートを見て、「アプリで再ログインを頻繁要求されるってユーザビリティ良くないな。」と思ったのですが、普段裏側の仕組みは意識していなかったりテックリードの方に任せきりだったりしていたので、これを気に調べてみました。 そもそもスマホアプリ の時代、もはやauthenticationですらないと思うのよね。（何... 続きを読む

テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか | コリス

2019/06/25 55 users コリス 苦労 手間 ユーザー テキスト

テキストをボタンにするのはデザインに手間がかからないので、簡単に設置できます。しかし、ユーザーはそのテキスト ボタンのテキストを読んだり、認識したり、タップすることに苦労を強いられます。 テキスト ボタンがスマホのユーザビリティを損なう理由、代わりに何を使えばいいのか、テキスト ボタンはどんな場合に... 続きを読む

明るいUI or 暗いUI？ ユーザビリティから考えるUIの明るさ | UX MILK

2018/07/30 59 users Sean リサーチャー IoT UX MILK 比喩

SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。こ... 続きを読む

モバイルアプリにおける５つのアニメーションの活用法 | UX MILK

2017/05/22 69 users モバイルアプリ ユーザーインターフェイス アニメーション

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。 Bringing Mobile Apps to Life Through Motion (2017/3/11) 10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWeb... 続きを読む

理解するべきユーザビリティとデザイラビリティの違い | UX MILK

2017/05/15 51 users usability UX MILK デンマーク発 非営利団体

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 「デザイラビリティ（Desirability）とユーザビリティ（Usability）の違いとは何か」という質問はUXデザインの分野でよく見受けられるため、区別できることは重要です。 なぜなら、ユーザビリティはUXの基本であり、ユーザビリティ（使いやすさ）がなければ、... 続きを読む

CSS3だけで表現！ コピペで使えるマイクロインタラクション作りました - ICS MEDIA

2017/03/13 163 users マイクロインタラクション ICS MEDIA コピペ アラー

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 例えばFacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラー... 続きを読む

美しい見た目は不要？ユーザビリティとデザイン | UX MILK

2017/02/05 56 users Craigslist 迷信 UX MILK 美しい見た目 関係

この記事は、2015年10月15日に掲載した「【UXの迷信】ユーザビリティさえ良ければ、サイトの見た目は関係ない？」を再編集したものです。 あなたは「ユーザビリティが担保されていれば、Webサイトのビジュアルは美しくなくてもいい」と思いますか？ Craigslist のように、見た目は味気なくても人気があるWebサイトもあるので、サイトのビジュアルデザインを重視せずにユーザビリティだけに重きを置く... 続きを読む

よくわかるダメUI/UX画像コレクション - Design

2016/09/13 247 users DESIGN マゾヒスト ギネス認定 ビジョン MS Word

1. よくわかるダメUI/UX fladdict 2. 仕様上はすごい ギネス認定の多機能ナイフ 3. 単体テストも機能テストも合格、ユーザーテストはしてない
 マゾヒストのためのコーヒポット 4. ユーザビリティって言ってみただけ
 車椅子ユーザーのための階段 5. 全部を目立たせたい
 MS WORDの全ツールバーを表示した状態 6. チームメンバー間でビジョンが食い違った ルネ・マグリット作「... 続きを読む

2015年総まとめ、jQueryのプラグインとスクリプト100選 | コリス

2015/12/17 501 users jQuery コリス SVG スクリプト アニメーション

毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連... 続きを読む

【寄稿】セグメントなきユーザビリティはない「マーケティングの常識と通じるユーザビリティの考え方」 | UIDEAL

2015/10/06 72 users UIDEAL 寄稿 マーケティング 常識 考え方

こんにちは、ポップインサイトの木原と申します。 ポップインサイトはユーザテスティング、特に被検者が自宅にいながら調査に参加するリモート・ユーザテスティングを専門とする調査会社です。創業以来3年弱で、ウェブ事業者、そのほかにも一般企業など、2000件以上の調査のご用命をいただいています。 幸いなことに、ご依頼の数は現在も順調に伸び続けており、お客様の業種の幅も広がってきているのですが、それに伴って、... 続きを読む

material - マテリアルデザインを行うベースにどうぞ MOONGIFT

2015/03/26 66 users MOONGIFT MATERIAL materia ベース

Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmateria... 続きを読む

ユーザビリティを高める7つの基本テクニック | freshtrax | btrax スタッフブログ

2015/03/04 112 users btrax freshtrax ユーザービリティ 購買意欲

デバイスがパソコンからモバイルへ、そしてウェブからアプリの時代へ移り変わっていくとしても、ユーザビリティとは常に変わらず求められるものである。そしてユーザービリティはそのサービスが提供する価値に大きな影響を持っている。例えば、ECサイトを考えてみるとユーザビリティが直接購買意欲につながるわけではないが、商品購入までの過程をスムーズにおこなうことができたら、ロイヤリティーの高い顧客を増やすことが出来... 続きを読む

ユニクロはなぜ「カテゴリ検索」をなくしたのか　リニューアルしたスマホECサイトをチェック：MarkeZine（マーケジン）

2014/12/07 58 users オリジナリティ MarkeZine 各社 マーケジン 先駆者

各社「正解」を模索中のスマホECサイト。先駆者のサイトを例に、スマホECのユーザビリティを追究します。今回は、リニューアルされたユニクロさんを取り上げます。 リニューアルしたユニクロのスマホECサイトをチェック！ 最近、ユニクロのスマホECサイトがリニューアルしました。 ユニクロは、スマホに限らずWeb全般で革新的なUXを実現しています。Web表現のオリジナリティを追究しつつ、ユーザーに新しい導線... 続きを読む

フラットデザインとユーザビリティ — Website Usability Info

2014/09/21 50 users Website Usability Info UCD 多く

Talking about web usability, accessibility, IA, UCD, UX,... フラットデザインとユーザビリティ 公開日 : 2014年9月22日 カテゴリー : アクセシビリティ , ユーザビリティ , ユーザーインターフェース (UI) ここ数年、多くのウェブサイトで「フラットデザイン (flat design)」が採用されるようになりました。立体的な/... 続きを読む

スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所

2014/08/18 146 users コンバージョン 鎌田 EFO 昨今 LPO研究所所長

LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 ... 続きを読む