日付入力フォームのUXデザインガイドライン
日付入力欄は、適切なデザインパターンを利用して、あいまいさのない、タスク達成に役立つものにしなければならない。小さなデザイン変更で、大きなユーザーエラーが防げる可能性もあるのだ。 Date-Input Form Fields: UX Design Guidelines by Angie Li on January 22, 2017 日本語版2017年4月24日公開 日付入力欄の書式設定など、ささいなことだと思うかもしれない。しかし、書式の実装が不適切だと、ちょっとしたインタラクションによって、入力のプロセスが立ち往生してしまうこともある。日付入力に関するデザインが良くないと、ユーザーが悩んだり、イライラすることになり、その入力フォームを全面的に断念してしまうというリスクがあるからだ。それどころか、ユーザーが間違った日付を指定してしまって、取引自体が悲惨なことになってしまう可能性もある。たと
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
iOSブラウザのセレクトボックスUIが使い辛すぎ問題 | キノコログ
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザーが商品の購入を行う際に、必ず経由するであろう「フォーム」の入力。 ここがストレスなく入力できるかが、成約の肝となるのだが…。 ユーザーに入力する際に、選択肢の中から項目を選んでもらう「セレクトボックス」というものがある。 複数の選択肢の中から、ユーザーに選んでもらう、というフォームを設けたい場合は、「セレクトボックス」が最も使われていると思う。 （ラジオボタンやチェックボックスよりも癖がないため） 「セレクトボックス」とは、↓コレのことである。 今見ている端末によって、このSELECTの仕様が異なっていると思うが、iPhone端末はこんな表示になっている。 いわゆる
ユーザーの目に入るタイミングで適切に表示させる
ウェブサイト上でユーザーに快適に操作を行ってもらうためには、画面上で適切な誘導を表示した方が負担が少なくなる場合があります。 分かりやすい例では「入力フォーム」です。 スポーツジムの入会フォームの例 スポーツジムの店舗窓口で、新規入会手続きのため指定されたウェブサイトをスマホ使って手続きしました。 その時の会員情報登録フォームは以下になりますが、長くて大変な経験をしました。 詳細は、こちらになります。 入力すべき項目を整理すると以下のようになります。 既にお客様番号や、会員番号がある人のための検索フォーム 入会者の情報登録 未成年の保護者情報の登録 個人or企業orスクールかの種目登録 来館予定日の登録 これらがひとつの画面内に表示されています。 情報量の多さに戸惑ってしまったのか、入力ミスを連発してしまいました。 さらにこの会員情報登録フォームを終え、別の登録をしている最中にもなにか操作
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
ブックマークしておきたい！WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。 ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。 Mobbin -Latest Mobile Design Patterns デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。
Bootstrap Page Builder - Bootstrapを使った画面設計ツール
WebのUIは自由度が高い分、イチから作るのは手間がかかります。そうした状況だからこそ、Bootstrapのように見栄えの良いUIが作れるフレームワークに人気が集まりました。しかし、Bootstrapの記法に沿ったHTMLの手打ちすら面倒に感じてきます。 そこで使ってみたいのがBootstrap Page Builderです。ドラッグ&ドロップで簡単にUIが作れます。 Bootstrap Page Builderの使い方 メイン画面です。左側に部品が、右側にエディタが表示されています。 グリッド構成も簡単に実現できます。 多数のパーツが用意されており、それらをドラッグ&ドロップして画面を作っていきます。 プレビューです。基本的には同じ見た目が再現されます。 スマートフォンサイズなどレスポンシブな表示確認も簡単です。 Bootstrap Page Builderを使えばBootstrapを使
Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）
素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 | TechAcademyマガジン
【デザイン事例を紹介！】グリッドデザインのWebサイトが良い15の理由 Webサイトを作る上でグリッドデザインが良い理由について述べています。レスポンシブデザインなどデバイスに対応するWebデザインが主流になっていますが、これからWebデザイナーを目指している方は必見の内容でしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を
CrossUI - 多数のブラウザに対応したWebアプリケーション開発ライブラリ MOONGIFT
Web技術が進歩していることもあって、これまでローカルでないと実現しなかったようなUI、機能などがWebブラウザ上でできるようになっています。とは言え、それはできるという話であって、実現しようとすればかなり大変なのは間違いありません。 特にUIやJavaScriptと連携させた動きの制御は苦労が伴います。そこで使ってみたいのがCrossUI、JavaScript用のRADツールです。 CrossUIの使い方 CrossUIではリッチなUIを持ったWebアプリケーションが簡単に開発できます。このようなD&Dで画面設計できるツールもあります。 さらに画像編集ソフトウェア。 Outlook風UI。 注文管理システム。 データベースマネージャ。 フローチャート。 表計算。 CrossUIはちょっと昔風（YUIあたり？）のUIとなっていますが、業務アプリケーションとしては十分なデザインでしょう。その
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「このUIエグいて。」リセットボタンの配置が罠すぎる入力フォームに戦慄する人たち
駅のタッチパネル券売機で、一般の人が躓くところはどこにあるのかという疑問に対して様々な意見 - Togetter
The Blog | Welcome to Adobe Blog
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP