Official website of WonderWall/Masamichi Katayama
使い易いユーザーインタフェースとは何かを勉強しています。 そこで、質問です。 - 使い易いユーザーインタフェースを持ったウェブサイトやソフトウェアを教えてください - また、それが使い易いと感じた理由を教えてください 条件は以下、 - 一般的なパソコンのディスプレイ、マウス、キーボードで触れるインタフェース - あなたが実際に体験したインタフェース よろしくお願いいたします。
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ(見つけやすさ)を改善するものとなります。 また、ランディングページ(検索などから訪れた最初のページ)にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは,活字印刷物のフォントとは違い,横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので,やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字+α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙,つまり本のサイズがA4を超えるような大判になると,1ページを左右2段組に分けて25~28字程度に調整されています。 一方,縦書きの場合には識別許容量はグンと増加し
「検索キーワード起点だから失敗する」SEO歴30年の渡辺隆広氏が説く、成果が出るコンテンツの作り方 4月2日 7:05
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Newest blog post: Why Create a Design System Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise
バナー画像の3倍の効果をあげたテキストリンク(powered by beBit) November 6, 2007 3:41 PM written by Gen Taguchi ※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 今回ご紹介するのはレシピサイト、Cookpad.comの事例です。Cookpad.comでは有料会員(月額300円)があるのですが、その会員数が伸び悩んでいました。 そこでbeBit社に相談するのですが、それまではかわいいバナーをどーんとサイドバーに貼っていました。 ↑ なかなかかわいらしいバナーです。凝っていますよね。 しかしユーザビリティ調査をしてみると、そのバナー広告がほとんど見られていないことがわかりました。最近は「広告=邪魔なもの」というイメージがありますよね。 そこでbeBit社ではこのバナーのかわりに次のテキスト
2005年、ユーザをうんざりさせてきたWebデザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。 Top Ten Web Design Mistakes of 2005 by Nielsen Norman Group on October 3, 2005 Webデザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。 読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ!
テレビで見た話題をYahoo!で検索したり、ネットショッピングで買い物をしたり……かつて“仕事の道具”だったPCはすっかり日常的な存在になり、家庭にも当たり前に入り込んでいる(9月10日の記事参照)。 ところで家庭では、みんなどのような環境でPCを使っているのだろうか。 コンサルティング会社のブライト・ウェイは9月7日、「家庭でのPCの使用状況、設定について」アンケート結果を発表した。調査期間は2007年8月1日から8月31日までで、同社が運営する子育て支援サイト「こそだて」で実施したもので、回答数は516人(男女比24:76)。 調査によれば、家庭で使用しているPCは、デスクトップが51.8%、ノートPCが47.1%だった。ディスプレイの画面サイズは、14~15インチ程度(ノート)が34.1%で最も多く、次いで17インチ程度(デスクトップ)21.8%だった。デスクトップを含めると、14~
【業界別】27卒就活生の「人気企業ランキング」発表! IT系ではサイバーエージェントが急浮上【学情調べ】 12月15日 6:00
これはあるエントリーの一部であることを先に告げておきたい。 Exploring Design: Outstanding Start Pages 海外の記事だけど、これだけは見ておいたほうが良いと思った7つのFLASHサイトへのリンクが、非常に興味深かったので抜粋して紹介しておきます。 見逃してはいけない7つのFLASHサイト すごい。 このFLASHは久しぶりに感動した。 マウスが鉛筆と化し、そのたどる道を書いているまでは良い。 そこから文字をクリックして拡大したとき、鉛筆の起動が3Dとして表現される。 特に動画の開き方などは参考になる。 それぞれのメニューがゴムで挟まれたような感触。 触ってみるとわかるけど、結構癖になる。 ドラック&ドロップをうまく活用しているのがわかる。 本がばたばた倒れるように開いたり閉じたり。 動作のアイデアがすばらしい。 これだけの動きで十分頭に残るインパクトが
(2012年1月28日追記) この記事内容をアップデートした記事を、別途公開しました。「別ウィンドウを開くことの是非 (その2)」をご参照ください。 Webサイトを制作していると、<a href="xxx" target="_blank"> などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。 別サイトにリンクする場合 (できれば 別サイトを回遊した後、自サイトに戻ってきてもらいたい) 開いたページであれこれ操作が予想され、その間、元ページは残しておきたい場合(ブラウザの [戻る] ボタンではすぐに戻れないケースなど) お気持ちはよくわかるのですが、ユーザビリティやアクセシビリティの観点で考えると、リンクは別ウィンドウを開くべきではないと考えます。理由は、以下の通りです。 初心者ユーザーやシニアユーザーは、別ウィ
これまで長い期間に渡って、ソフトウェアは一人で使うためのものだった。 ここで言う「一人で使う」ということの意味は、自分以外にも家族も使うかどうかというような意味ではない。例えばテキストエディタは他の PC の前に座っている誰かとリアルタイムで共同編集するものではなかったし、ゲームはネットに接続せずに自分一人で遊ぶものだった。そういう意味でソフトウェアはこれまで長い期間に渡って一人で使うためのものだった。 だからこれまで私たちは、ユーザビリティのことを考えるとき、まず自分が一人で使うときに使いやすいかどうかを考えてきた。 例えば、昨日はてなの伊藤さんが書いていたような、コミュニティに蓄積されるコンテンツを良質なものにするために、あえて一人で使うときの利便性に目を瞑るという考え方は、ソーシャルウェア・ユーザビリティを重視したアプローチと言えるだろう。 以前、はてなブックマークと del.ici
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
Dynamic Page Flip v2 from shift control Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files: Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」。 Webページだけど、本を見るみたいなUIにしたいっていう需要はなかなかあるんじゃないか、と思っていたのですが、そんなUIを実装するためのFlashサンプルが公開されました。 次の画像のように、マウスでページの右端をドラッグ&ドロップでページをめくれます。 本の中身は自由に書き換えることができるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く