入力フォームにおけるUI設計の基本とUXを改善するためのデザインルールとは？ - Act.3 Consulting 通信お問い合わせや資料請求、サインアップからデータの登録まで...フォームのUI設計は、ビジネスの成果を上げるために最も重要な要素の一つであるといえます。 本記事では、入力フォームのUIデザインにおける基本とUXを改善するために必要な20のUI設計ルールについて、ご紹介していきたいと思います。
UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント
iPhoneやAndroidでもダークテーマが採用され、ダークテーマが注目されています。サイトやアプリをダークテーマ対応にするには、単純に色合いを反転するだけではありません。読みやすく、バランスのとれた、快適なダークテーマをデザインする時に気をつけたいポイントを紹介します。 How to design delightful dark themes by Teresa Man 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ダークテーマをデザインするポイント1. 奥の面を暗くする ダークテーマをデザインするポイント2. 知覚コントラスト ダークテーマをデザインするポイント3. 明るい色の大きなブロック ダークテーマをデザインするポイント4. ブラックとホワイト ダークテーマをデザインするポイント5. カラーを濃くする 快
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
第15回 カードUIの向き不向き | gihyo.jp
スマートフォンUIのトレンドは、現実のものを模したデザイン（スキューモフィズム）からフラットなデザインとなりました。そんな中でもカードUIは、現実のもの（カード）を模したUIコンポーネントであり便利であるため、立体感や影などを付けながら使うこともあります。 カードUIはなんとなくとっつきやすく、エンジニアやデザイナーはよく使ってしまいがちなコンポーネントだと感じています。特にマテリアルデザインではガイドラインにCardsの項目があり、AndroidアプリやGoogleのアプリケーションではよく利用されています。 そこで今回は、そんなスキューモフィズムのなごりが残るカードUIを利用する際に注意しないといけないケース、最近筆者が感じた迷いどころなどについて、実例を交えながら説明していきます。 カードUIが効果的な場面 カードUIは前述したとおり立体感や影などを付けて使うことから、フラットなデザ
徹底図解 入力フォームのデザイン・UXを高める15の方法 - ポップインサイト
サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。本記事では、入力フォームデザインのUXを高める15のルールをご紹介します。 ポップインサイトでは、ユーザーリサーチのファクトにもとづいたWEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。⇒UXデザイン/UXリサーチについて相談する ※紹介資料の無料ダウンロードはこちら ※関連記事：【EFOとは？】入力フォーム最適化施策8選：CVR（コンバージョン率）改善のコツ ※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。 翻訳元記事：Design Better Forms (2016/7/5) 著者：Andrew Coyle
有機野菜などの安全食材宅配
オイシックスは有機野菜など安心安全でおいしい食材をご提供しています！初めてご利用される方限定で「おためしセット」 をご紹介！お得なキャンペーンはもちろん、オイシックスが自信を持って厳選した商品をお手頃価格で提供しています！
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
ユーザーを的確に情報に導くナビゲーション設計 : ビジネスとIT活用に役立つ情報
Webサイトの使いやすさに最も影響を与えるのが「ナビゲーション」です。目的を持ったユーザーをスムーズに必要な情報に辿り着かせるためには、ユーザー視点に立ったナビゲーション設定が求められます。 今回は、ユーザーエクスペリエンスの高いナビゲーションを実現するためのポイントについて解説していきます。
大型化するスマホに対応する時に確認したい「親指ゾーンマップ」
Scottは元Tinderのプロダクトマネージャー兼リードデザイナー。現在はプロダクトコンサル会社Philosophie所属。ウェブやモバイル製品の構築を15年以上行っています。https://twitter.com/scotthurff。 本記事はTinderの元リードデザイナーであり、今はGoogleや任天堂をクライアントに持つプロダクトコンサル会社Philosophieに所属するScott Hurff氏のブログエントリーからの翻訳転載です。記事自体はiPhone 6発表時に書かれたものですが、議論自体は現行のものにも適用されますので、時事的な部分は割愛しつつ翻訳してお届けします。 親指のためのデザインとは、親指が自然な動きで弧を描く動作で使えるように、最適な形でインターフェイスを構築することです。 しかしこれは非常に複雑な問題です。私たちは画面上の至るところに点在するUI要素に触れよ
カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Oisixのおせち2025 ｜ おせちの通販ならOisix（おいしっくす）