グーテンベルグの法則から考えるモバイルのCTA
ユーザーがどれだけ速くタスクを完了できるかは、ボタンの置き方次第で大きく変わります。タスクが速く完了すれば、より満足できる体験が生まれます。もしそれを望むのなら、ユーザーがそこにあってほしいと思う場所にボタンを置くべきです。 これは、あなたが使うであろうすべてのボタンの配置についての包括的な分析です。ユーザーが時間を無駄にすることが無いように、どの置き方があなたのアプリに最適なのかを学びましょう。 ユーザーは行動を起こす前に、画面をざっと見なければなりません。画面上にあるコンテンツが、どのアクションを行うべきかについて決断するための情報を与えるのです。画面を見終わるとすぐに、CTA（Call to Action＝行動喚起）が現れなければなりません。画面を見終わったとき、ユーザーはどこを見ているでしょうか？ ユーザーの視線は、左上の隅から右下の隅までジグザグに移動することがわかります。著名な
デザイン崩れがよりよいデザインを生む
AlexanderはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。 UIデザインは難しいものです。スマートフォンやタブレット、ノートパソコンなどのデバイスによって形やサイズはさまざまで、キーボードやマウス、タッチパネルといった入力方法を採用しているかどうかも異なります。こうした状況で優れたデザインをするには、何よりデザインを徹底的に変える方法を学ばなければいけません。 私はこれまで、十分な種類の方法でテストしなかったために、開発プロセスの終盤でデザインが破綻してしまうプロジェクトを何度も見てきました。このような時間と労力の浪費は、簡単に減らすことができます。 こうした失敗にはいくつか理由があります。たとえば、ストレスや土壇場での修正、不明瞭な要件といった原因が挙げられるでしょう。ただ、単にデザイナーが行き当たりばったりで不注
Webサイトの「空白」がデザインに与える３つの効果
Tomerは、受賞歴のあるデザイナーであり、プロのデザイナー向けのコードフリーWebサイトデザインプラットフォームWebydoのUXマネージャーです。 完成したデザインを見つめて「何かが足りない」と感じたことはありませんか？ より具体的に言えば、デザインが「空っぽだ」、「散らかりすぎだ」という結論に達したことはないでしょうか？ 私たちデザイナーにとって、このような状態に陥らないよう、制作物に十分な時間を費やすのは難しいことです。 このような現実は衝撃的ではないでしょう。結局のところ、デザインのもっとも基本的な原則は、クリエイティブに要素を取り除き空白を作ることに関連しています。しかし、この作業は私たちの仕事の中核であるにもかかわらず、もっとも難しい作業の１つです。どのようにすれば空白を効果的に利用できるでしょうか？ 空白の本当の意味 空白を「デザインの間のスペース」と考えていませんか？ デ
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
フィッツの法則をUIデザインに活用する
よく知られているように、人間の行動は予測がつかないものです。重力、電気、摩擦とは違い、毎回いつも同じように振舞うわけではないようです。 そしてこのことが、フィッツの法則を興味深いものにしています。フィッツの法則とは、人間の振る舞いについての非常によくできた予測モデルです。 デザイン時にフィッツの法則を活用することで、標準的な人間の振る舞いを用いて、使いやすいインターフェイスを作れるようになります。あなたのWebサイトにも、ソフトウェアのプログラムにも、ゲームにも、これを用いることができます。食料品店のセルフレジから金融系のWebサイトまで、人間の行動は変わらずに同じままなのです。 どんなインターフェイスも、フィッツの法則から得られる教訓を用いることで、ユーザーが起こすエラーを減らして、彼らがタスクをより素早く達成するようにできます。 フィッツの法則とは何か フィッツの法則は、人間の行動をモ
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
感情レベルを考慮した魅力的なWebデザインとは | UX MILK
Anna Dzhulii氏はVintage Web ProductionのUIデザインのリーダーです。ビジュアルデザインのテクニックと実践についてのブログを執筆しています。 私たちデザイナーにとっては受け入れがたい事実ですが、クライアントの目標達成の助けにならなければ、どれだけ美しい作品でも意味がありません。どのクライアントにとっても最優先すべきことは、Webサイトと商品に魅力を感じてもらうことです。 攻撃的なデジタルマーケティング（Web広告やバナー、ポップアップ）の時代は終わりました。ミレニアル世代や高齢者も含め、現在のネットユーザーは余計なもののない「クリーン」で美しいWebサイトの閲覧体験を求めています。広告ブロックアプリについての検索数がこの５年間でどれだけ増えたかを考えてみてください。 あらゆるデバイスに広告ブロッカーがインストールされているので、Web広告やバナーなどの簡単で
UXデザインにおけるビジュアルヒエラルキー
SeanはCodalの技術研究者かつライターで、UXデザインからInternet of Thingsまで幅広いトピックについてのブログを執筆しています。開発者、デザイナー、マーケティング担当者の傍で、Codalが最高品質の魅力的なwebコンテンツを作成できるよう補助しています。 今、あなたはこの文章をどのように読んでいますか？ ノートPCやスマートフォンといった、デバイスの話ではありません。どのように読んでいるのかという方法についてです。目で見た情報は、一体どのようにして脳で処理されているのでしょう？ 数年前、良く出回ったミームでは、私たちは一文字ずつ読むのではなく、文章を全体を読んでいるということを示しています。もしかしたらTwitterやチェーンメールで、以下の乱雑な文章を見たことがある方もいるかもしれません。 It deosn’t mttaer in waht oredr the l
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
マテリアルデザインの概念を受け継いだ、マテリアルデザインライトとは
今年のデザインのトレンドが、マテリアルデザインの表現であることは、間違いありません。 GoogleのAndroidをベースにしたデザイン手法であるマテリアルデザインは、当初モバイル端末向けのインターフェイスとしてスタートしました。しかし現在では、デバイスやプラットフォームの境界を越えて使われています。 ここ数年はフラットデザインが最大のトレンドですが、マテリアルデザインはフラットデザインにはできないユーザビリティを高めるための装飾をきちんと加えることができます。フラットデザインのように、視覚的な魅力を重視して装飾をそぎ落とすのではありません。マテリアルデザインの根幹は、ユーザビリティなのです。 マテリアルデザインライトとは？ マテリアルデザインライト（Material Design Lite : MDL）は、マテリアルデザインの次段階です。マテリアルデザインの概念を受け継ぎ、あらゆるデバイ
海外の人気サービスで使われているCSSスタイルガイド８選
CSSのスタイルガイドとは、コーディングを行う際の決まりやルールのようなものです。 CSSのスタイルガイドを作成することで、一貫性のあるスタイルシートを実現しやすくなり保守性や拡張性を向上させることができます。ひとりで開発するときにも役立ちますが、特にチームで開発を進めるときに効果を発揮します。 今回は参考になる海外の有名サービスのCSSスタイルガイドをまとめてみました。CSSスタイルガイドを作成するときや、コーディングをするときにぜひ活用してみてください。 Airbnb AirbnbのCSS/Sassのスタイルガイドです。各用語のルールから始まりCSSやSassの合理的な記述方法について記載されています。こちらは日本語訳されたスタイルガイドもあります。 Airbnb Style Guide Google GoogleのHTML/CSSのスタイルガイドです。シンプルなデザインのスタイルガイ
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
