富士通キッズ 夢をかたちに : 富士通掲載終了のお知らせ ご利用いただきありがとうございます。誠に申し訳ございませんが、本ページは掲載を終了致しました。 富士通キッズ 夢をかたちに
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
過去のものがかすれていくというインターフェース | S i M P L E * S i M P L E
過去のものがかすれていくというインターフェース March 2, 2007 10:00 PM written by watanabe 以前読んだ三宅氏のコラムに、こんなことが書いてありました。 最近書き込まれた記事は普通に表示されるのに対して、古い記事になればなるほどフォントの色がセピア色にあせていき、最後には記事が消えてしまう機能があればいいかもしれない。 この記事での文脈とはちょっと違うかもしれませんが、指定したURLのFaviconを画像に自動変換できるFavicon APIでは、そんなアイデアの一つの実装例を見せてくれているのではないでしょうか。 » Favicon API ここの「最新の20件」のところにご注目。 ↑ 過去のものがだんだんかすれていってます。 「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報
ウノウラボ Unoh Labs: キャバ嬢メソッド 〜 キャバクラ嬢に学ぶWebサービス運営のコツ
こんにちは、hideです。 皆さんは、キャバクラって行ったことありますか？ キャバクラとWebサービス、この一見、まったく関連が無いように見える２つのサービスですが、実は多くの点で共通点があります。これから新しくWebサービスを作ろうとしている人、現在Webサービスを運用している人は、彼女らの接客態度やサービス精神からいろいろと学ぶことができます。 では、順を追って紹介していきましょう。 1. 見た目が大切 第一印象で悪いイメージを持たれて損をしないように、思いっきりお洒落してユーザを迎えましょう。キャバクラでは香水の香りで嗅覚を刺激するなど、五感を活用した接客というのが行われています。しかし、Webサービスの場合、嗅覚/味覚/聴覚/触覚はないので、使えるのは視覚のみになります。より見た目が重要になってきます。 2. おもてなしの精神 とても基本的な事なのですが、数あるお店（Webサイ
ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点：ITpro
今回は，先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった，使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し，それをプログラミング言語であるところのJavaScriptを使って解決した，というお話です。 その問題とは，「文字の大きさ」に関するものです。 ブラウザには，文字のサイズを変更する機能が用意されています（図1）。例えばInternet Explorer（IE）なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが，「大きく」「小さく」というメニューになっており，より自由に表示サイズを変更することができます。 図1：ブラウザでは文字サイズを変更できる ちなみにOperaは
第9回 どうすればユーザー登録してもらえるか：ITpro
この連載では，エンジニアの視点から使いやすさを考えています。今回はユーザー登録画面などに代表される，フォームを使った入力画面について考えてみたいと思います。 なぜこのテーマを選んだかというと，フォームを介して利用者からデータを受け取って処理をして返すという一連の処理が，ウェブサイトのバックエンドの処理やデータ形式などによって変化しやすく，プログラマやエンジニアの作業がもっとも使いやすさと関係しやすい分野ではないかなあ，と思っているからです。こうした部分はエンジニアが使いやすさに寄与しやすい部分であり，もっと言えば，使いやすさを向上させるに当たって，エンジニアにしかできない事柄がたくさんある部分だってことになると思います。 今回は「ユーザー登録ページ」を例に，フォームにおける使い勝手を考えていきたいと思っています。その理由としてまずは，筆者が勤務する株式会社はてなにもユーザー登録画面があり，
Webサイトのツリー構造とコンテンツのメタ情報、そして、ナビゲーション：DESIGN IT! w-LOVE
この一覧を階層構造的に分類していくのが、Structure段階でのインフォメーション・アーキテクチャのタスクの１つです。 その際、コンテンツ分類を行なう際に意識するものとしては、以下のようなものがあげられるでしょう（これがすべてではありません）。 ターゲット別（個人顧客、法人顧客、株主・投資家、マスコミ、学生など）コンテンツ内容別（製品カテゴリー別、サポート情報、FAQなど機能／非機能コアコンテンツ／サブコンテンツ（企業の基本情報とスペシャルコンテンツ、ブログなど）時系列で並ぶもの／そうでないもの分類は現実のモデルを反映しているか？ 一般的に認知されているものを想起させるか？ もうひとつインフォメーション・アーキテクチャを考える際に行なっておくべきことは、コンテンツにどのようなメタ情報を付与するかでしょう。 メタ情報を付与することで、先のコンテンツの階層化による分類を越えて、コンテンツ間を
ウノウラボ Unoh Labs: ユーザビリティって何だろう？（基本のまとめ）
こんばんわ、Sashaです。フォト蔵のUI改善への要望が高まっているのをうけて、最近、ユーザビリティについてみんなで考えています。 基本の基本が気になる私は、「ユーザビリティって何だろう」というところから考えるべく、『ユーザビリティのguru』と呼ばれるJakob Nielsenの「ユーザビリティ」の定義を復習しました。以下はそのまとめです。 ユーザビリティって何だろう？ ユーザビリティは、UIがどのくらい使いやすいものであるのかを示す質的属性です。「ユーザビリティ」という言葉は、モノをデザインする過程で「使いやすさ」を改善するための方法でもあります。 ユーザビリティは、次の5つの品質によって表すことができます。 「学習しやすさ」 初めてそのデザインに触れるユーザーが、どれだけ容易に基本的なタスクを発見し、遂行できるだろう？ 「効率のよさ」 ひとたびそのデザインを学習したユーザーが
EZ-GREEに見るケータイサービス構築の重要なポイント - キャズムを超えろ！
ここんところ、積極的にケータイサービスを使っている。PCからもケータイからも繋がるWebサービス(ex. mixi)のケータイ版について色々と思い悩んでいる為だ。『ちよろず。』の屋島さんの力作であるEZ-GREEを、PC版GREEと比較してみると、GREEの中の人が考えるケータイユーザの特徴，ケータイユーザ受けするUI，サービス内容といったところが見えてくるので面白い。以下、EZ-GREEから学ぶケータイサービス構築の重要なポイント。 絵文字が使えるのは必須。 PCで見た場合はGIF画像変換などして絵文字を再現してあげる必要がありそう。 規約やその他文言類は軽い口調で短文にて。 ex. 正：今すぐ空メールを送って会員登録！ 誤：まず本文・件名ともに空欄のまま下記アドレス宛にメールをお送りください。その後当社より折り返し会員登録方法についてのご案内メールをお送りいたしますので、メールを確認し
ユーザーの目線を考えることの重要性 | ユーザー視点のウェブデザインガイド | Web担当者Forum
第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと（見てもらうべき）情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン（見た目）がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離脱してしまうことが少なくない。この
シニアはログインでつまづく？！ - Trans
最近、シニア向けのあるWebサービスを構築している。その中で、シニア（特に、団塊世代、もしくはそれ以上）の方が、どういったところでWebサービスにてつまづくのかが少し分かってきたので、自分の備忘録も兼ねてメモしておく。 先に言っておくと、シニアはまずログイン、もしくは新規登録でつまづく。「中に入れない」「何かパスワード間違えているみたいなんだけど」そういった質問が、どんどん寄せられる。このWebサービスを構築する前に、できる限りネット上でシニアのネット行動特性みたいなものは調べてみたが、その多くは「ログイン後」、もしくは「ログインする必要がないサイト」のことだったと、今更ながら気が付いた。例えば、 ユーザビリティ研究所: シニア向けウェブサイト構築のための10のポイント 使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から) そう、シニアのネット上の行動特性はある程度研究が進ん
第26回 どこにメニューをおくべきか，どこが画面の一等地か：ITpro
Webサイトのデザインの中で，ここ2年で大きく変わりつつある「常識」があります。それは，「メニュー（索引）」の位置と「一等地」の場所です。ユーザーの閲覧環境が加速度的に変化しているという認識の下で，それでも最良のユーザビリティを提供しようとするなら，どのようなことを考えておく必要があるでしょうか。 左メニューと右メニュー（視線との交差）のどちらがベスト？ まだモニター画面の大きさが小さかった時代（1995年前後），情報へアクセスしやすくする「メニュー」の位置は，ほとんど誰が考えても左側にあり，議論もされなかったように記憶しています。確実に画面の中に入り，ユーザーも基本的に左端にさえ注意を向けていれば，大切な情報にたどり着けるという「暗黙の常識」が存在していたかのような時代でした。 しかしここ数年，メニューが左側にあると本当に操作性が良いのかという議論を聞くようになり，大手のWebサイトでも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なつみかん＠はてな - ユーザビリティ関連記事 まとめ
COULD：Webデザインに関する 15 の調査結果
http://plaza.rakuten.co.jp/catfrog/diary/200701140026/
ユーザビリティ会議レポート：実績があがるサイトの秘訣を探りました | 100SHIKI PR Board
prima materia diary - XMLのコメントに--を入れてはいけない