UIは閲覧画面からつくろう。｜Shino | Software Designer
ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R
HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
ログインフォームは変わった方法で実装しないで！
Webサイトのログインに使用するパスワードをどのように管理していますか？ 私は1Passwordで管理していますが、他にもChromeのパスワードマネージャーやmacOSのキーチェーンなどを使用している人も多いと思います。 そんなパスワードマネージャーとうまく連動するログインフォームを実装するためのポイントをまとめた記事を紹介します。 don’t get clever with login forms by Brad Frost 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ログインフォームの避けるべき例 ログインフォームの適した例 はじめに 日増しに、私はログインフォームでイライラすることに気がつきました。1Password（私が使用している）やChromeのパスワードマネージャー（これも私が使用している）のような
スマートフォンのディスプレイ巨大化に伴う、UIデザインの潮流｜Go Ando / THE GUILD｜note
前回の投稿でAppleのFluid Interfacesについての論考しましたが、Fluid Interfacesが生まれた一つの背景として、ディスプレイの巨大化があります。 本稿では大画面化するディスプレイへのUIデザインの対応について、現在どの様な流れになっているのか、個人的に観測している中で考察している事をご紹介したいと思います。 巨大化し続けるディスプレイサイズ2007年に初めてiPhoneが世に出てから、現在の最新のモデルiPhone XS Maxまでのディスプレイサイズの変遷をまとめたのが下の図です。 初代iPhoneとXS Maxを比較すると、物理的なディスプレイ面積は約2.7倍大きくなり、ディスプレイの縦横比は約1.4倍縦長になっています。 iPhone Xから22%縦長化特に著しく変化したのが、iPhone Xが登場した事によってそれまで1.77だった縦横比が2.16まで
スマホのメニューボタン、上に置くか？下に置くか？｜平安和馬｜note
時代と共にスマホが縦長になっていく昨今。それに伴い画面上部にあるメニューボタンが、タップでよく使う親指から遠のいていきます。 この状況について言及している記事があります。 画面の上端は、親指がもっとも届きにくい領域です。メニューを上部に置くと、ユーザーはインターフェイスの操作が困難になります。ユーザーはメニューをきわめて頻繁に使用します。そのため、親指の届く範囲にメニューを設置することは不可欠です。 (引用:モバイルではメニューを画面下に表示すべき理由)私の場合、親指でタップするのでメニューボタンが下にあると便利だと思いました。しかし下記2点のように感じる人もいるのか気になりました。 ・アプリで下にメニューボタンがあることは見慣れているが、WEBでは見慣れない ・アプリのように下にアイコンが並んでいたら認識しやすいが、ハンバーガーアイコンのみは見慣れない 冒頭で引用させていただいた記事の転
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
本当に優れた「デザインの勝利」は空気のような存在になり知覚すらされない
まとめ 誰だか知らないが、この展望台のデザインした奴は天才だなと思った。これが『デザインの勝利』なんだよ。 東京ミッドタウン日比谷の「極力シンプルで美しいデザインにしよう」というデザイナーの欲求がトイレのアイコンを小さくしすぎて「トイレはどこ？」という質問が多発して看板が設置されるの、まさに『デザインの敗北』というほかなくてとてもすき 130844 pv 526 106 users 1394 ニカイドウレンジ @R_Nikaido 「デザインの勝利」が可視化されないのは、優れたデザインは空気のように透明な存在だから知覚されなくなってしまうからだと思う。個人的に凄いデザインだと思うのは ・鍵を閉めないときは自動的に開放状態になるトイレのドア ・鍵を閉めないと扉から鍵が取れないロッカー この2つは凄いなと。 2018-04-04 10:21:45 ニカイドウレンジ @R_Nikaido 「鍵を
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
「OK」「キャンセル」、どちらが先か？
OKボタンはキャンセルボタンの前と後、どちらに置くべきか？ ダイアログボックスをデザインするたびにその都度判断するよりも、各プラットフォームでの慣習に従う方が大切だ。 OK–Cancel or Cancel–OK? by Jakob Nielsen 2008年5月27日 ユーザエクスペリエンス全体には大して影響しないようなUIデザインの細々とした問題について、われわれの元には数え切れないほどの質問が寄せられる。昔からよくあるのが、ダイアログボックス内でのボタンの並び順はどちらにすべきかという質問だ： OK / キャンセル キャンセル / OK 両方ともそれなりに筋が通っている並べ方であり、どちらを好むかは人それぞれで、一方に決めるのは無理だろう： OKを先にする並べ方は、英語を始めとする左から右へ読むタイプの言語では、自然な読み取り順序に沿っていることになる。これ以外のボタンの組み合わせも
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
PCサイトでのグローバルナビの最小化は避けよう
PCサイトで、メインコンテンツのカテゴリーをドロップダウンメニュー内に格下げすると、あなたの提供するものをユーザーが見つけにくくなってしまう。 Killing Off the Global Navigation: One Trend to Avoid by Jennifer Cardello and Kathryn Whitenton on February 9, 2014 日本語版2014年5月12日公開 従来、グローバルナビゲーションはWebサイトの全ページに表示され、以下の2つの機能を果たしてきた： ユーザーがどこにいようと、彼らが容易にトップレベルのカテゴリーを切り替えられるようにする。 トップページを経由しないで入ってくるユーザーにも、そのWebサイト上で利用できるものをすぐに感じ取れるようにする。 最近、グローバルナビゲーションのカテゴリーをドロップダウンメニューの中に入れるW
Pttrns — Mobile User Interface Patterns
Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save
オーバーレイ表示を行う際の注意点 (ユーザビリティ実践メモ)
1ページでは載せきれない補足情報などを提示する際、元のページの上に重ねて表示する方法がしばしば用いられます（オーバーレイ表示と呼ばれています）。 今回は、オーバーレイ表示を行う際にどのような点に注意すべきかについてお伝えしたいと思います。 前提としてオーバーレイ表示には、下記のような利点があると考えられます。 ・ ページ遷移を挟まずに情報を提示できるため離脱されづらい ・ 情報に触れてもらえる確度が高い 一方で、この表示方法が抱えるリスクも存在します。 特にモーダルダイアログ（オーバーレイで表示されたダイアログを閉じるまで、他の部分が操作できないタイプのもの）を用いる場合にはかなり致命的なリスクが存在することが弊社のユーザ行動観察調査で発見されました。 実は調査の中で、オーバーレイで表示されたコンテンツ（下図B-2）を見終えたユーザが、ブラウザの「戻る」ボタンを押してしまうシーンが何度も見
UX とユーザビリティ のお話 【基礎編】 : LINE Corporation ディレクターブログ
こんにちは。10月からブロググループのディレクターをしている真田 (さなだ) です。 これまで私はマークアップエンジニアをしていましたが、コンテンツの設計段階から参加できることは多くありませんでした。ディレクターとなったからには、根本からHCD (人間中心デザイン) を意識したコンテンツ作りをしていきたいと思っています。 そこで今回はまず、ユーザーエクスペリエンス (以後UX) とユーザビリティの基礎についてまとめてみたいと思います。 UXってなに？ なかなか明確に定義することが難しく、さまざまな解釈がなされているUXという言葉。 直訳すると「ユーザー体験」となりますが、国際規格のISO 9241-210の中では、「製品やシステム、サービスを使用、あるいは使用を予想した時の、人の知覚と反応」とされています。 それを利用したときに感じるあらゆる感情、また「使用を予想した時の」とあるように、製
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
iPhoneデザインボックス