公開日 : 2014年4月15日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー
UI/UXデザインでサービス開発を進める際に欠かすことのできないプロセスの1つに、ユーザビリティテストが挙げられます。しかし「聞いたことはあるけどどんなものか説明できない」「導入したいけど何をすれば良いのか分からない」といった悩みを持つ方は多いのではないでしょうか？そこで今回は、ユーザビリティテストがなぜ必要なのか、やり方、注意点についてご紹介します。チームでサービス開発をしている方は是非参考にしてみてください。 ユーザビリティテストとは ユーザビリティテスト（Usability Test）とは、システムやサービスのユーザビリティの程度や内容を調査することです。ユーザー対象者に対して、製品のプロトタイプを使ってもらうことでどの程度使いやすいか/使いにくいかといった問題が明らかになり、開発の貴重な指標を得ることができます。開発チームは、ユーザーからプロトタイプに関するフィードバックを直接受け
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ
スマートフォン利用者に配慮して「レスポンシブWebデザイン」を採用するサイトが増えています。このデザインは1つのHTMLファイルで、パソコンとスマートフォン、それぞれに適したページを表示できるのが特長。特に若い人をターゲットにする大学サイトで注目を集めています。Googleも推奨する優れた手法ですが、デメリットもあります。話題になることが少ない、ユーザビリティ上の問題点について指摘しましょう。 「レスポンシブWebデザイン」（以下、レスポンシブ）とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます（中には、タブレット向けデザインを用意しているサイトもあります）。 レスポンシブを採用するサイトは最近増えていま
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
ビジネスにおけるユーザーインターフェイス(UI) や、ユーザーエクスペリエンス(UX)の重要性が頻繁に語られる事が多い。 Webサイトやアプリから始まり、自動販売機、券売機、車のダッシュボート、テレビ、トイレ、エレベーターのボタン配置に至るまで、”ユーザビリティー”と表現される ”使いやすさ” の大切さが注目を浴びている。 そして、その使い易さを生み出す最初の入り口がインターフェイスである。 インターフェイスとは、ヒトとデバイスとの円滑なコミニュケーションを達成するための媒介役であり、操作性や使い易さを印象づける点ではソフトやデバイスの成功を最も左右する、唯一無二の存在である。 今さら聞けないUI（ユーザーインターフェース) の基本 最終的なインターフェイスの仕事は “ユーザーゴール + ビジネスゴールの達成”であり、どんなに良いプロダクトを作っても正しい方向にユーザーを導き、ビジネスとし
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 昨日、ウェブサイトのリーダビリティに関する記事を配信しましたが、意外と好評でした。ということで、2匹目のドジョウを狙って今回はユーザビリティについての記事を紹介したいと思います m(__)m ウェブデザイナーにもSEO担当者にも、基本ながら一読の価値ある内容。 — SEO Japan ユーザビリティは、ウェブサイトにとってものすごく大切なことだ。訪問者が素早く簡単に楽しくウェブサイトにアクセスしてそれを使うことができなければ、ウェブサイトの外観がどんなに格好良くても、コンテンツがどんなに素晴らしくても関係ないのだ。訪問者の多くは、ただ諦めて他のどこかに行ってしまうだろう。 それでは、どうやってで
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的
今運営しているブログをより魅力的したい、これからブログをつくる、という人向けにブログに必要な8つのデザインエレメントをSmashing Shareから紹介します。 8 Design Elements Your Blog Should Have はじめに 1. RSS/E-mail購読 2. 独自性のあるヘッダ 3. 分かりやすいナビゲーション 4. コメント 5. ソーシャルメディアのアイコン 6. グラフィックのガイドライン 7. スポンサーのスペース 8. リッチなフッタ はじめに ブログのユーザーを幸せにし、あなたのコンテンツに関心を抱くようにしておくために必要な特定のデザインエレメントがあります。 ユーザーは記事を簡単に読め、素早くコメントができ、TwitterやFacebookのアカウントでシェアできることを期待しています。 ブログのデザインはクリーンで、整合性のあるレイアウトを
ビギナーのためのセマンティックでアクセシブルで機能性にも優れたフォームを制作するための習作Nettuts+から紹介します。 20+ HTML Forms Best Practices for Beginners 下記は、その意訳です。 1ステップずつフォームを改善し、アクセシブルで機能性をアップするポイントを紹介します。 セマンティック アクセシビリティ ファンクショナリティ デザイン 結論 セマンティック 1. fieldsetを使用 ユーザーが入力する多くのフィールドがある際、fieldset要素を使用して類似情報をまとめます。 <textarea name="code" class="html" cols="60" rows="5"> <fieldset> <span>Billing Address</span><input type="text" /> <span>City</sp
3クリックルールとは、ユーザーが目的とするページまで、3クリック以内にたどり着けることが理想であるという目安を設定したものです。ここで重要なのは、サイト内でのユーザーの動きを最小限にするような設計にすることで、作業効率が向上し、ユーザーが効率よく閲覧できるという利点があります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
