IDEA * IDEAドットインストール代表のライフハックブログ
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
画像よりもムービーの方が説明しやすい、デスクトップ操作を動画キャプチャーで記録できる「カムタジア スタジオ」 - GIGAZINE
ソフトの使い方や操作方法、あるいは相手に何か説明をするとき、文字をただ並べるよりも画像を加えた方が理解しやすいのは自明の理です。そして、画像よりも映像のほうがより理解しやすいというのもまた当然の話ですが、実際にムービーを作成しようと思うと一気にハードルが上がってしまいます。 そこで使えるのがこの「カムタジア スタジオ（Camtasia Studio）」、動画マニュアルや動画コンテンツなどを非常に簡単かつ強力に作成できます。 単純にデスクトップでの動きを記録するだけであれば他にもいろいろとあるのですが、このCamtasia Studioは単純に録画するだけでなく、その強力な編集機能の豊富さと簡単さがウリ。通常のムービーとは一線を画するクオリティの動画を少ない手間と時間で作成できます。 中でも特に強力なのが「SmartFocus」という機能。全自動で見せたい部分にズームインしてくれるため、デス
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum
Web担編集部では、今回、Web担当者Forumのサイト向けに実際にペルソナを作成してみたので、その様子をレポート形式でお届けする（ペルソナについて詳しくは「ウェブサイト向けペルソナを理解して、思いこみのユーザー像と決別しよう」を参照）。 結論からいうと、ペルソナ作りはWeb担当者にとって非常に役立つものであり、編集部のスタッフは、今回のペルソナ作りによって新しい発見と良い刺激を得ることができた。また、ペルソナ作成はしっかりとした方法論のもとに行う必要があり、経験のある人の助けを借りることは必須だということもわかった。 使えないペルソナで失敗した経験実はWeb担編集部では、最初にメディアの中心としてのウェブサイトWeb担当者Forumをスタートした2006年7月の時点で、一度ペルソナを作成していた。「台東区にある玩具などのメーカーに勤める三島啓介さん（32才）」というペルソナだ。しかし、そ
![[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ab74e15948c807ebbb39ce141223cec7464b905/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2008%2Fpersona_design%2Fpersona_icon.jpg%3Fitok%3DiOf_wBp2){kind=icon}
Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）
ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。 Avoid Within-Page Links by Jakob Nielsen on February 21, 2006 最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。 質問その 1： 今、リンクをクリックして「名前付きアンカー」（同一ドキュメント内の別の場所）に移動する、「ジャンプ・リンク」についての議論に関わっています。私は、ジャンプ・リンクが新規ウィンドウを開くリンクと同等に、あまりよくないものだということを、貴方の書いた 2 つの記事で裏付けようとしています。 質問その 2
プレゼンにも最適、ページ内のユーザーの視線をシミュレートする -Feng GUI heatmap | コリス
Feng GUI heatmapは、独自のアルゴリズムに基づいて、ユーザーの視線がどのようにページ内で移動するかとその頻度を表示するヒートマップを作成するサービスです。 Feng GUI heatmap Feng GUI heatmapは、実際のユーザーの視線やマウスの動き・クリックを検出するものではなく、独自のアルゴリズムに基づいてヒートマップを作成します。そのため、サーバーのログなどは必要ありません。 フラッシュの場合は、キャプチャした画像（960x640）をアップロードすると生成されます。 ヒートマップを作成するには、３つの方法があります。 オンラインで Firefoxのエクステンションで ViewFinder website heatmap 1.0 ブックマークレットで Feng GUI heatmapは独自のアルゴリズムでヒートマップを作成するので、実際にアップロードされていない
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
ユーザーの動き。｜CSS HappyLife
ボクたちみたいな、ウェブサイトを閲覧するのが当たり前の人間からすると、全く気づかない事に気づかされたりしたので、自分用メモ。 2008年2月14日の22：47頃に追記 ボクのただのメモ書きをもうちょっとちゃんと以下のエントリーで書いてもらってるので、あわせてご覧になって頂くと、良いかと思います。 Webアクセシビリティについての覚書 - ねんがんのWebユーザビリティテストに参加した ロゴクリック＝トップページに戻るという認識は殆ど無い。 トップページに戻る場合は、ブラウザの「戻る」ボタン。 サイドバーのバナーは、認知すらされない傾向が強い。 そもそもバナーとして押せるものではなく、デザイン上の飾りとして見られる場合も。 リストのマークとかのマーク部分をクリックしよーとする人が居る。 それにより、クリックできないと諦めるケースも。 プルダウン（ドロップダウン）型メニューは、近くのボタンを押
第30回 JavaScriptの動作を軽くするための工夫：ITpro
今回はJavaScriptとWebページの表示・操作の体感速度について考えてみます。というのは，JavaScriptのせいでWebページの表示や操作などの速度が遅くなっている，と感じることがあるからです。 現在のWebサイトでは，JavaScriptを使って使い勝手を向上することは，ごく当たり前に行われています。例えば，動的にページを書き換えたり，ページ遷移を行わずにサーバーと通信を行ってデータを取得したりと，JavaScriptを使うことで，Webサイトをより便利に，より使いやすくすることができます。 Ajaxという言葉がはやってから，もう2年以上がたつんですよね。何年か前，JavaScriptはじゃまで，セキュリティを低下させる不要なものだと見なされていた頃がありました。しかしそれから一変して，「JavaScriptをがんがん使ってもいい」という空気になったことで，Webサイトを作成す
サイト作りに使えるインターフェースのパターンが満載！『UI Patterns』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
綺麗にアニメーションする星型投票作成用JavaScriptライブラリ「Starbox」:phpspot開発日誌
Starbox - Rating stars for prototype Starbox allows you to easily create all kinds of rating boxes using just one PNG image. 綺麗にアニメーションする星型投票作成用JavaScriptライブラリ「Starbox」。 次のように、見栄えも綺麗で、カーソルを離すとアニメーションしてくれます。 実装は、次の流れで簡単に実装できます。 <script>タグでprototype.js等、必要ライブラリを読み込み CSSを読み込み、かつ画像をcssと同じパスに設置 new Starbox で初期化。コンストラクタに渡すオプションで挙動の調整が可能 自分でスタイルしてオリジナルの投票インタフェースを作るのもよさそう。 ライブラリ自体は、prototype.js/script.acu
ウェブに激しく使えるインタラクティブなインターフェース集『Welie』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
インタラクティブなデザインがどうあるべきか、そのデザインパターンを集めまくっているのがデザイナーのWelieさんだ。 彼のサイトではカテゴリーごとにどういったインターフェースデザインが有効かをまとめてくれている。 検索サイト、ショッピングサイト、サイトナビゲーションなどなど、ウェブを作る仕事をしている人にとっては必見だろう。 またそれぞれのパターンにはスクリーンショットの例や、いつ使うべきか、使うときにはどういった点に気をつければ良いかも教えてくれる。 こうした資料は知っておいて損はないですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「便利」よりも「不便」で人は買い、「凄い」よりも「面白い」で人は喜ぶ - shi3zの日記
UIパターンいろいろ - DesignWalker
https://www.openvista.jp/archives/note/257/?257/