アクセシビリティからデザインを学ぼう
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
スクロールがユーザー体験に与える影響とは
Alanは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 些細なことがユーザー体験を大きく左右することもあります。私たちがインターネット上で行うことの大部分は、無意識下で行われます。私たちは、漠然と画面を見て、Webサイトを訪れ、コンテンツを消費しています。 ユーザーはほとんどのことを無意識に行っていますが、Webサイトはユーザーの行動を強く意識しなくてはなりません。Webサイトは、いかなるときでもユーザー１人ひとりのニーズとウォンツに対して責任を負う必要があります。Webデザイナーは、顧客データとペルソナを活用してWebサイトのトーンやビジュアル要素を作り出し、ターゲットユーザーに最適な形でサイトを提供しなければなりません。 画面のスクロールは過小評価され
Webデザインのトレンドを採用するときの９つの注意点
Stephen Moyersはオンラインのマーケティング担当およびデザイナー、テクノロジーに詳しい熱心なブロガーです。彼はロサンゼルスに基点を置くSPINX Digital Agencyと契約しています。 音楽やアートなどのカルチャーと同じく、Webデザインにもその時代ごとの思潮があり、毎年新たなデザイン要素や機能、トレンドなどが発生します。また、デザインに対する考え方も、新しい技術の急速な発展に伴い急激に変化します。 Webデザインのトレンドの中には、時の試練に耐えられないものもあります。ユーザビリティを損なうトレンドやユーザーのサイト訪問を妨げるようなトレンドは避けるべきです。以下に挙げるトレンドは、ユーザーはサイトから離れてしまう可能性もあるので、これらを採用する場合は慎重にならなければなりません。 ネガティブスペース ネガティブスペースはホワイトスペースとも呼ばれ、画像やデザイン要
ポップアップは悪か？ ポップアップを適切に使うためのポイント | UX MILK
ポップアップには、モーダルウィンドウやダイアログボックス、モーダルポップアップと複数の名称があります。しかし、どのような名称であれ、ポップアップはユーザビリティの面で問題があると言われています。平均的なWebサイトでのポップアップの表示頻度から判断すると、UIデザイナーと開発者はポップアップを好むようです。 しかし、ユーザーはポップアップをあまり好きではないようです。実際、ポップアップは大多数のユーザーやUI専門家には評判が悪いです。では、なぜポップアップはこんなにも広く利用されているのでしょうか。 弊社Justinmindで調査を実施することにしました。ユーザーの意見を詳細に調査し、社内のデザイナーから情報を聞き出しました。以下がポップアップについて、そして代わりの手段について発見したことです。 なぜポップアップが使われるのか？ ポップアップの基本に立ち戻ると、ポップアップの機能自体の魅
無限スクロール vs ページネーション：それぞれの特徴と使い分け
無限スクロールのメリット １．ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。
パララックスや無限スクロールはどんなときに使えばいい？
課題 ・サイトが多様且つ大量の内容を含んでいて、複数のページでは誘導が難しい ・サイト上のコンテンツをスムーズに、そして連続して展開したい 解決策 Webサイトに含む情報を一か所に集めたいなら、長距離スクロールサイトをシングルページで作りましょう。ソーシャルメディアのサイトや、その他ユーザーの制作物を含むサイトには絶大な効果を発揮します。これらは内容を一度にまとめて閲覧することが楽しみの一つであり、また常に内容の更新が行われるために、情報の分類が難しいからです。 画面が小さいためにスクロール量が多くなるモバイル環境の普及も、長距離スクロールにとっては追い風です。 後述する無限スクロールを長距離スクロールと組み合わせれば、Webサイトの閲覧に没入感を生み出します。ユーザーが特定の情報を探している場合は、Amazonのような体系的な仕組みに軍配が上がりますが、情報を次々に閲覧するなら、長距離ス
ソート時のドロップダウンとボタン、どう使い分ける？
Webサイトで特定のアクションを起こす方法が見つけにくいと、ユーザーのストレスになります。ドロップダウンメニュー（またはプルダウンメニュー）にアクションが隠されている場合も同様です。このようなことがしばしば起こるケースとして、コンテンツを探す場面があります。 ドロップダウンは項目を隠してしまう ユーザーがコンテンツを探すとき、存在しうる全てのコンテンツを見なくてもほしいものを見つけることができるのが理想です。多くの人が、すべての項目をドロップダウンメニューに入れてしまう間違いを犯します。ユーザーは選択された項目しか見ることができず、その他の項目は隠されてしまいます。 ドロップダウンメニューを使わないで、すべてのボタンを水平に並べて使いましょう。ドロップダウンメニューは、ユーザーのタスクに関係のないオプションがある場合にスペースを節約するのに有益です。しかし、ユーザーがコンテンツを選んでいる
登録フォームにおけるパスワード確認用の入力欄は必要か | UX MILK
登録フォームは、Webページの中でもいちばんデザインが難しいもののうちの一つです。あるフォーム要素を入れるか入れないかといったことが、コンバージョン率に影響を与えます。どの要素を入れるか入れないか考えることもデザイナーの仕事です。 パスワード確認はコンバージョン率を下げる たいていのWebクリエイタ―は、パスワードを初めて作る場合にはパスワード確認用の入力欄を表示させなければいけないと考えています。 これは、パスワードを入力する欄がユーザーの入力をマスキングするためです。ユーザーはミスタイプしてもそれに気づきません。パスワード確認で、ユーザーに２回パスワードを入力させることにより、ミスタイプを発見します。 パスワード確認欄は理にかなったものに思えますが、それを表示させることはコンバージョン率を下げる可能性があります。ある調査によると、登録フォームを離脱した全ての人のうち、４分の１以上が、パ
Adobe初のUXデザインツール「Adobe XD」を使ってみた
この春から六本木で働き始める駆け出しデザイナーです！ MAMORIOという落とし物追跡タグのUI/UXデザインをやっています。 先日、ついに「Adobe Experience Design CC (Preview)」（以下、Adobe XD）が公開されました。 以前からAdobe初の”UXデザイン”に特化したアプリケーションとして話題になっていた「Adobe XD」ですが、一体何ができるのでしょうか？ 実際に使ってみながらご紹介します。 デザインとプロトタイピングの行き来ができる デザインソフト「Sketch」や、プロトタイピングツール「POP」「Prott」など、UXデザインをするためのツールはたくさんあります。「Adobe XD」の一番の特徴は、「Sketch」などが行っていた”デザイン”のプロセスと、それに遷移をつけて動くモックアップにする”プロトタイピング”のプロセスを、１つのアプ
実はあのアニメやマンガで使われていたフォントまとめ
デザインをするとき、「あの作品みたいなフォント」のようにイメージしたり、説明したりすることはないですか？ 今回は有名なアニメ作品の中でもフォントが特徴的なものを集めてみました。 マティス-EB アニメのフォントとして必ず引き合いに出される定番フォントがマティス-EBです。こちらは「新世紀エヴァンゲリオン」の題字で使用されていることで有名ですが、元のフォントを見ればわかるように、使用の際にはかなり横幅を圧縮しており、独特の緊張感を醸し出しています。 ラグランパンチUB こちらは見覚えのある方も多いのではないでしょうか。作中にもタイポグラフィを大胆に使ったことで話題になった「キルラキル」のフォントです。そのインパクトあるボールドさと、大胆な赤と文字づかいでラグランパンチはキルラキルフォントとして一躍有名フォントとなりました。 ゴシックMB101 モリサワフォントに収録されている、使い勝手のいい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
