Googleが119時間のテストをしてわかった「モバイルサイト設計25の指針」｜男子ハック
@JUNP_Nです。GoogleがGoogle AdSenseに関する最新情報を伝える公式ブログ「Inside AdSense」にて、119時間にもわたるユーザービリティテストを行った結果をまとめて公開しています。詳細は以下。 モバイルサイトの最適化は必須！モバイルの特性を理解したサイト設計が必要img via：モバイルサイト設計の指針 Googleがシカゴとサンフランシスコで119時間にもわたるユーザービリティテストの結果をまとめています。調査対象はAndroid、iOSの両方のユーザーで、商品の購入やサイト内を調べるなどの操作を行い、各サイトでの体験を調査委とともに評価したそうです。 関連：スマホに特化したアクセス解析「Pt engine」スマートフォンサイトのヒートマップが凄い！ この調査の結果で明らかになったことをまとめたものが「モバイルサイト設計を成功させる25の指針」となってい
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか？ 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な写真があるというものです。 これは美容院という商売の特性
スマホ向けサイトのユーザビリティとランキングを低下させる12個のマイナス要因
[対象: 中〜上級] さまざまなモバイル向けサイトの研究中に出くわした、ユーザビリティを大きく損ねる12個の要素をE-consultancyがブログで解説しました。 ユーザビリティの悪化だけではなく、なかにはGoogleのランキングを下げる原因にも繋がるスマートフォンサイトの構成ミスも含まれています。 モバイル対応が必須になっている現在のサイト運営において、とても参考になる記事なので紹介します。 なお直訳ではなく、僕なりの言葉で要点を説明します。 英語がわかる方は原文も読んでください。 モバイルサイトのユーザビリティを損ねる12個の欠陥 1. 突然デスクトップ向けサイトに切り替わる モバイル向けのページを閲覧していたのに、デスクトップ向けページに突然移動させられてしまうサイトは確かにありますね。 モバイル向けのデザインだったのに、ページを移動したら何の前触れもなくPC向けのデザインに切り替
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
"Amazon"に学ぶ、4つの観点で考察するUXデザイン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆様こんにちは、シリコンバレーでUXデザイナーをしているライターのYUKIです。今回はあるひとつのサイトについてUXデザイナーとしての立場からレビューをしてみようと思います。 はじめに 私は友人らと作っていたスタートアップ会社を軌道に乗せるために数年前シリコンバレーにやって来て、現在は某米国の大企業でデザイナーとして働いています。公式な肩書きはヴィジュアル・デザイナーなのですが、実質的にはインタアクションやヴィジュアル両方に携わるユーザー・エクスペリエンス・デザイナーというところです。 LIGでは、かなり個人的な見解で、ユーザビリティに優れていると思ったサイトを説明もふまえながらレビューしたいと思います。 ただ、私が現在持っている知識は本格的にユーザビリティやデザインを学校で学んで得たものではなく、あくまでも実際の現場で働いて得たものばかりなので、「これが絶対に正しい」と思うのではなく、「
メタファーがUXを向上させる5つの理由 | Goodpatch Blog
メタファー、日常生活であまり使うことのない言葉ですが、実はWebを通して私たちは日常的に触れています。 そもそものメタファーの意味はwikipediaに下記のように説明がありました。 メタファーは、言語においては、物事のある側面をより具体的なイメージを喚起する言葉で置き換え簡潔に表現する機能をもつ。わざわざ比喩であることを示す語や形式を用いている直喩よりも洗練されたものと見なされている。 参考: wikipedia Webにおけるメタファーで代表的、かつ議論があるものと言えば、保存を示す「フロッピーディスク」のアイコンでしょうか。 フロッピーディスクは昔、（今ではあり得ない量ですが）データを保存するものでした。そのなごりで私たちはフロッピーディスクのアイコンを見ると「保存するアイコン」と認識するようです。 この他にもWebにおけるメタファーの例はたくさんありますが、 今回は「メタファーがU
10代のユーザビリティ： ティーン向けWebサイトのデザイン
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
ユーザーの疑問を素早く解決するためのWebサイト設計
2017年6月29日 Webサイト制作, ユーザビリティ サービス系・企業系Webサイトでよく見かけるサポート関連のコンテンツ。問い合わせをせず、自己解決を望むユーザーが増加し、よりよいサポートページの作成が必要となってきています。ユーザーが抱える疑問を積極的に解消するWebサイトを作成し、問い合わせ数を減らせば、ユーザー・企業側ともに手間を省くことができます。また、Webサイト内だけで解決できなかった疑問も素早く対処する事でユーザーのストレスを軽減することができます。そこに注目し、どのようにWebサイトを設計していくのかを考えてみました。 ↑私が10年以上利用している会計ソフト！ 問い合わせを未然に防ぐ サービス関連のWebサイトでは、同じような質問を何度も受ける事が多いです。そのような質問にひとつずつ回答していくのは非常に非効率。どのような問い合わせを受けやすいのかを的確に理解し、ユー
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した - かちびと.net
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
Av-jyo.com
The domain av-jyo.com maybe for sale. Click here for more information. Av-jyo.com Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Web Designing Courses AVI DVD Player Online Data Protection MatchMaking Services Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Privacy Policy
[CSS]フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
利用者の期待とUIデザインについて
Service discontinued
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
