A simple library for handling keyboard shortcuts in Javascript. Try pressing some of the keys here: // single keys Mousetrap.bind('4', function() { highlight(2); }); Mousetrap.bind('x', function() { highlight(3); }, 'keyup'); // combinations Mousetrap.bind('command+shift+k', function(e) { highlight([6, 7, 8, 9]); return false; }); Mousetrap.bind(['command+k', 'ctrl+k'], function(e) { highlight([11
ウェブサイト作成時に役立つ7つのテクニック、第5回のテーマは「リンクの装飾と配置」です。ユーザにとって使いやすいリンクの装飾や配置のサイトを作成するためのポイントをお伝えします。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 ←今回のテーマ 目線の操作 他サイトでの慣習 ウェブサイトでは、ユーザがリンクを見つけることができなければどんなにユーザの関心を引くページやコンテンツを用意しても、まったく見られないまま終わってしまう危険性があります。 そこで、今回は「リンクの装飾と配置」をテーマに、ユーザがスムーズにページ間を遷移することが可能な、回遊性の高いサイトを設計するためのポイントをお伝えします。 まずはリンクの装飾について、テキストリンクとボタンリンク、それぞれのポイントを順に解説していきます。 1. テキストリンクの装飾 テキストリンクは青字下線で表すことによ
ウェブサイト作成時に役立つ7つのテクニック、第4回はウェブライティングについて取り上げます。ウェブ上で文章を書く際には、紙媒体とは違った独特のルールが存在します。ルールの観点を押さえて、読んでもらえる文章を書くためのポイントをお伝えします。 ファーストビュー 関連性 具体性 ウェブライティング ←今回のテーマ リンクの装飾と配置 目線の操作 他サイトでの慣習 「ウェブサイトに有益で魅力的な情報を載せているのに、何故か成果が出ない。」そんな経験をお持ちの方もいらっしゃるのではないでしょうか。ウェブサイトでは紙媒体に比べ、可読性が著しく低下します。もしかしたらウェブサイトに適した文章の書き方になっておらず、「有益で魅力的な情報」であることが伝わっていないのかもしれません。 第4回では「ウェブライティング」をキーワードに、メッセージを伝えるための3つの観点をお伝えします。 「ウェブライティング」
前々回から連載しているウェブサイト作成時に役立つ7つのテクニック、第3回のテーマは「具体性」です。「見て欲しいページへのリンクがなかなかクリックされない…」。そんな悩みを解決するためのコツを取り上げます。 ファーストビュー 関連性 具体性 ←今回のテーマ ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 ウェブサイトではページ間の移動は基本的にリンクによって行われます。しかし、一般的に言われているリンクのクリック率は高い場合でも10%程度。リンクがクリックされなければ、どんなにユーザの関心を引くページやコンテンツを用意しても、まったく見られないまま終わってしまう危険性があります。 まとめの第3回では「具体性」をキーワードに、伝えたいメッセージをウェブサイト上で確実に伝えるための2つのポイントをお伝えします。 「具体性」に関わる2つのポイント リンク先にある情報のイメージ
実際にウェブサイトを作っていくときに役立つ7つのテクニック、第2回のテーマは「関連性」です。関連性の強い情報の見せ方について、実例や犯しやすいミスを交えて解説していきます。 ファーストビュー 関連性 ←今回のテーマ 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第2回は「関連性」についてです。ユーザに2つの要素の関連性を認識してもらうには、1つの「まとまり」に見えることが必要です。人がどのようにまとまりを感じるかについては、ゲシュタルト心理学などの分野で議論されてきました。その中で、ウェブサイトを作る上で重要なのは、以下の2点です。 近接 閉合 1.近接 近接とは、簡単に言えば近いということです。例として、以下の図を見てください。 図1 上の図を見たときに、下の図のように右上の2つ、左下の1つをまとまりとして感じたのではないでしょうか。このように、人
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか? 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計/4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません(「やっちゃダメなこと」もしています)ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに 正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合
2013年3月23日 ユーザビリティ 以前「笑っていいとも!」の山口智充さんのコーナーを見ていて、ちょっと驚いた事があります。20代~60代の女性の必需品をランキングしたもので、40, 50代女性では5位圏外だった「パソコン」が60代で3位にランクイン。シニア層のインターネット利用率は年々高まってきているのはニュース等で読んでいましたが、これを見てなんだか実感しました。という事で今回はシニア層のWebサイト設計について考えてみたいと思います! ↑私が10年以上利用している会計ソフト! 上記「笑っていいとも!」の件で興味を持った私は、シニア層のインターネット利用方法なんぞを調べていたところ、丁度私の母親が「インターネットで買い物がしたい」と言ってきました。彼女は海外に住む私と連絡をとるためにメールやSkype等を使う事ができるので、ある程度インターネットについて理解しているのだと思っていまし
web-usability.jpでは、主にウェブサイトのユーザビリティに関する情報を提供します。まずは、「ユーザビリティとは?」から順番に読み進めていただけると、当サイトでの考え方を分かっていただけると思います。 記事は以下のカテゴリごとに分類されています。 理論:ユーザビリティ工学、人間工学などの理論について 規約:WEB UI設計のためのガイドライン 実践:WEBへの適用方法と実例 雑記:イベント参加情報・思ったことなど なお、一方的な情報発信だけでなく、提供していただける情報に関しても大切に考えていますので、内容に対する指摘・訂正や質問、そして情報提供がありましたら、ぜひお知らせください。 htmlの標準コンポーネントとして用意されているセレクトボックスですが、選択肢に色を付けたいとか、画像を使いたいというようなことに対応できないので若干機能不足を感じたことは無いでしょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く