ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
ウェブサイトのユーザビリティ、とっても大切な20のポイント
ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの
外部リンクは別ウィンドウで開かせるべきか？ アクセス解析でユーザー行動を理解する
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
インターフェイスとしてテキストをみたときに考慮すること
サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助で
トップページで最低限おさえておきたい5つのポイント | Web担当者Forum
※この記事は読者によって投稿されたユーザー投稿です：編集部の見解や意向と異なる内容の場合があります編集部は内容について正確性を保証できません画像が表示されない場合、編集部では対応できません内容の追加・修正も編集部では対応できません ネットショップでページを作る際に最低限おさえておかなければならないポイントというものがいくつかあります。今回は“トップページ”で最低限おさえておきたいポイントを5つまとめてご紹介したいと思います。 商品詳細ページで最低限おさえておきたい5つのポイントと合わせてご確認下さい。 トップページ、5つのチェックポイントトップページはネットショップの顔であり、看板でもありますが、トップページでは商品を売ることが出来ません。商品の購入は商品ページを見てもらう必要があるわけですから、トップページではショップで扱っている商品にいかに興味をもってもらい、各商品の詳細ページへ誘導で
Webユーザビリティランキング｜トライベック・ブランド戦略研究所
トライベックでは創業以来、独自のユーザビリティ評価プログラムによって国内主要企業のWebサイトの使い勝手を客観的な指標によって評価してきました。 毎年、各業界売上上位の国内主要企業全150社をピックアップし、企業Webサイトを当社専門家が評価・スコアリングを行い、企業のユーザビリティ品質に対する取り組みの実態やトレンドを明らかにする取り組みを行っています。 100点満点でスコアリング 当社実施の各種ユーザーテストやコンサルティングで培われたUI/UX視点の詳細な評価基準。 毎年ユーザー環境・意識やトレンド変化に合わせ評価基準は最新化されます。 全117評価項目 ユーザビリティコンサルタントによる専門家評価を実施。全117評価項目について使い勝手を4段階評価します。当社実施の各種ユーザーテストやコンサルティングで培われたUI/UX視点の詳細な評価基準。 毎年ユーザー環境・意識やトレンド変化に
エモーショナルエクスペリエンスデザイン - Webサイトは「使いやすい」だけじゃダメ | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
など、さまざまな答えが返ってきました。 考えてみると、我々は顧客として企業と接しているとき、何かしらの感情（エモーション）を感じますよね。感情は場合によって、喜び、ショック、不満、混乱、落胆、または安心などさまざまです。さて、オンラインチャネルをデザインしているとき、こういった感情について考えられているでしょうか？ ほとんどの場合、このようなお客さまの感情については考えずにデザインしているのではないでしょうか。多くのWebサイトでは、まずユーザビリティの問題を解決しようとしていて、感情について考えるのはまだ先のことと考えられているようです。 しかし、感情的な部分は今やサイトにとって、とても重要です。それはなぜかというと2つのポイントがあります。 お客さまが初めて企業と交流する場所がWebサイトになることがあるから。米国の小売店ベストバイ社のシニアバイスプレジデント、ジョン・トンプソン氏は次
今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話。 - Feel Like A Fallinstar
最近はJavaScriptのライブラリ整備や、大きなモニターが増えたせいもあり、リッチな見た目のサイトが増えてきたなーって思います。 でも、その一方で、それ以上に増えている様相なのが「低速度回線」のユーザ。 今だからこそ、技術をきちんと理解して軽いウェブサイトを作るべきなんじゃないか、というお話を少し。 増えているのは、フレッツよりも「持ち歩きPC」「スマートフォン」のアクセス これは今木が運営する、とあるポータルサイトの利用者の接続速度の変化のデータです。 月間PVが大体150,000位で、割と昔からあるタイプのまじめなコンテンツのサイト。携帯は対応していませんし、IT系とかに偏ったコンテンツもありません。 見ると分かる傾向は ダイヤルアップ、実はあまり減っていない ケーブルはそこまで延びていない Unknownが年々増えている ADSL / 光(T1）も割合としてはむしろ減少傾向 グラ
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
メガメニューはサイトナビゲーションに効果あり
大きな二次元のドロップダウンパネルは、ナビゲーションの選択肢をグループ化することでスクロールの必要性を無くし、タイポグラフィやアイコン、ツールチップを使うことで、ユーザの選択できる内容をわかりやすく提示してくれる。 Mega Menus Work Well for Site Navigation by Jakob Nielsen on March 23, 2009 もうすぐ開催予定のナビゲーションデザインセミナーに向け、我々は様々なナビゲーション機能についてのユーザスタディを実施している。いつものことだが、中にはひどい結果が出てしまった機能もあるし、これまた、いつものことだが、今、流行のようになっている機能（今回の場合はタグクラウド）にはユーザビリティ上の大きな課題が見つかった。 幸いにも、他のウェブトレンドは本質的にユーザビリティに優れており、ユーザの行動やゴールによく合っているというこ
フォームにおける「進む」ボタンと「戻る」ボタン。どのように配置する？ (ユーザビリティ実践メモ)
これまで実践メモではフォームを設計する際に注意すべき点をいくつかご紹介してきました。 フォーム設計についての記事一覧 今回はフォームによく出現する「進む（次へ）ボタン」と「戻るボタン」を配置する際に気をつける点を纏めました。 ウェブサイトにおいては「進む（次へ）」ボタンなど前進するものを右側に、「戻る」ボタンなど後退するものを左側に置くことが一般的になっています。 ユーザは多くのサイトを利用している中でこの配置に慣れていますので、配置が逆になっていると次へ進むつもりがうっかり「戻るボタン」を押してしまうことになりかねません。最悪の場合、これまで入力したものがクリアされてしまい、入力を一からやり直すはめになります。 そういう訳ですから、フォームのボタンを配置する際は「進む（次へ）」ボタンを右側に、 「戻る」ボタンを左側へと一般的な慣習に従う方がユーザに対して親切と言えるでしょう。 2.「進む
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
404 Not Foundページをユーザーにとって、より有用にする5つのチップス
2. Keep it familiar 見慣れたデザインで 404ページのデザインは、そのサイトの他のページと同様にするのが望ましいです。異なったデザインにしてしまうと、ユーザーはサイトから離脱したと思うかもしれません。 404ページには、最低限、あなたのサイトのロゴと404のエラーメッセージを配置してください。 3. Keep it Basic ベーシックに 404ページでユーザーにエラーということを突きつけて圧倒させないでください。404ページのゴールは、可能な限りユーザーが探していたページに導くことです。 その１つの方法として、404ページにアクセスが多いページのリンクを掲載する方法があります。 また、検索機能を設置することも効果的な方法です。 4. Offer some direction 道案内を提示 404ページには、ユーザーにいくつかの道案内を提示するべきです。 最も重要な道
ウェブページの高速化に必要なもの
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、オークション事業部のさかいです。 ネットサーフィンに慣れている techblog 読者のみなさんの中には、あちこち見て回っているうちに重いページに行き当たり、イライラしながら応答を待ったり、容赦なくバックスペースキーで前のページに戻ったり…という経験をされた方が多くいらっしゃると思います。 そういったストレスのないレスポンスが行えるよう、バックエンドのプログラムの最適化や、サーバーのチューニングを行うのは私たち技術者の仕事のひとつです。 しかし、あるウェブサイトにアクセスして、そのサイトを閲覧できる状態になるまでの時間のうち、そういったバックエンドでの処理に必要な時間は 1〜2 割でしかないというデータがあります。残り
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン？ | 初代編集長ブログ―安田英久
http://japan.internet.com/webtech/20090908/8.html?rss
IDEA * IDEA
