iPhone向けサイトのユーザビリティ最適化でチェックしておきたい項目まとめ
iPhoneを始めとするタッチパネル＆フルブラウザ搭載のスマートフォンの普及が進んでいる。iPhoneの出荷台数は世界で3000万台、日本国内に関して公式な発表はないが200万台を超えていると推測されている。今後はWindows Mobile端末の進化やAndroid携帯電話により、このスタイルの携帯端末の利用者がさらに拡大していくことが予想される。 今回は、こういったタッチパネル＆フルブラウザ搭載のスマートフォンからのウェブサイト／サービスのユーザビリティについて、主にiPhoneを題材に考えてみよう。 iPhone対応は形式にとらわれず「ユーザー中心」視点で iPhoneからのウェブ利用には、従来の携帯電話と同様の「携帯性の高さ」「位置情報との連動」などに加え、 従来の携帯電話と比べて画面サイズが広い 端末の処理能力が高く、アプリでのサービス提供の自由度が高い 独自の操作（画面をつまむ
「サイトの横幅」再論：950px時代のウェブデザイン［絵文録ことのは］2009/01/14
以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論［絵文録ことのは］2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
SEOを意識したサイトデザイン | パシのSEOブログ
完成したサイトにSEO対策を施すよりも、始めからSEOを考えて制作を行った方が効率も良く、バランスの取れたサイトが出来上がります。 基本となるデザインレイアウト 上図はネットで配布されているテンプレートなどで良く見かけるデザインですが、SEOを意識した簡易的なレイアウトとなるとどうしてもこんな感じになってしまいます。あくまで基本となるレイアウトですので、作るサイトにあわせ位置の調整や、必要な項目の追加を行ってください。 ヘッダー ページの見出しとなるh1と、ページの概要を説明するためのテキストを配置します。h1とテキストは全ページ異なるユニークなものを記述します。 ヘッダーの左側にはロゴを配置し必ずリンクにします。ロゴは、ソースの上部に位置し、全ページ共通のトップページへのリンクとなる為、CSSの画像置換えを使用しアンカーテキストにはメインキーワードを含ませた方が良いでしょう。 イメージリ
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ！
本エントリは、20〜40代のPCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなやYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ
ここが変だよウェブマーケティング第1回 勘と経験に頼る流れにさようなら | Web担当者Forum
集客のためによかれと思ってやっている、さまざまなマーケティング手法。なのに結果がついてこない、アドバイスを聞いてもなんとなく納得いかない……とお悩みの方は多いのではないだろうか。もしかしたらそんなあなたと、あなたの周囲のウェブマーケティングは、どこかが「変」なのかもしれない。 デジタルフォレスト 清水昌浩氏が、実話をもとにウェブマーケティングの問題点とその解決策を読み解くシリーズ。 サイトの問題点を改善するとき、あなたは何を頼りにするだろう。過去の成功例、周囲のアドバイス……。いろいろあるが、それは本当にサイトにとって大きな効果を生むものなのだろうか？ そもそも、改善するべきその問題が生じた原因を明らかにしなければ、前には進めない。ここでは、適切な分析と施策の判断について、具体的な事例を挙げて紹介していく。 第1回となる今回のテーマは、「コンバージョン数の向上」。コンバージョン数の向上は多
検索行動パターン（２）～具体的な行動パターンとその支援策：ナレッジ！？情報共有・・・永遠の課題への挑戦：オルタナティブ・ブログ
昨日の続きでBoxes And Arrowsの「Search Behavior Patterns」という記事から、具体的なユーザの検索行動の分析。昨日書いたような６つの要素が相まって実際のユーザの行動はだいたい以下の6つのパターンに分けられるとしている。メモも兼ねて以下簡単に説明しておくが詳しく知りたい方は、是非原文をあたって欲しい。元の記事ではペルソナという仮のユーザ像も使って補足説明してる。 １．「サーチ」と「ブラウズ」の交互動作 ユーザは検索から、目的の情報にぴったり合っていなくても最も近い結果を選び、次に目的の情報を見つけるためにそのページ中のリンクをさぐっていく。このようにサーチングとブラウジングは一体の行動として機能しするので、多くのユーザはこのふたつの行動を交互に行う。 従ってこの振る舞いへの支援策（サイトやページのデザイン上の工夫）は ページ間の相互リンクを強化する パンく
カテゴリとタグを上手に使い分ける : could
CMS にタグというコンセプトが組み込まれる以前は「カテゴリー」はどういった情報がコンテンツに含まれているのかを示すものでした。例えば、Mac、映画、ライフハック、仕事といった具合だと思います。しかし、タグ機能が CMS に導入されるようになると、以前カテゴリ名として扱っていた名称 (キーワード) がタグへ移行していきました。 ここで課題になってくるのが、タグがコンテンツに含まれている情報を示すようになったので、カテゴリに明確に違う役割を示さなくてはならないところです。もし従来のように「Mac」というカテゴリを作ってしまうと、Macに関する情報が書かれたエントリーに Mac というタグを書き込むことは重複になりますし、管理する側もこれはカテゴリなのかタグなのかというのが分かり難くなり、記事によって異なる示し方になりかねません。 ブログエントリーとひとことで言ってもエントリーによって様々なタ
検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
JavaScript(AJAX)・スタイルシート サンプル集 ポップアップ
ポップアップといえば、昔は新しいWindowを開くのが主流(だったような気がしています)が最近は色々な方法で実現しているのを目にします。ここではいくつかのポップアップを試してみたいと思います。 新規ウインドウ window.open <a href="javascript:;" onclick="window.open('http://foo.bar.com/file.html', 'winName', ' left=0, top=0, width=100, height=100, status=0, scrollbars=0, menubar=0, location=0, toolbar=0, resizable=0' );">click me!</a> * 実際は一行で書く。 パラメータの意味は、left=横座標, top=縦座標, width=窓の幅, height=窓の高さ, st
人力検索はてな - 入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構で
入力フォームのデザインがすばらしいページを教えてください。 派手さや装飾ではなく、使いやすさ、見やすさなど機能美優先でお願いします。 海外のサイトでも結構です。
自分のプロフィールを何パーセント書き込んだかわかるインターフェース（LinkedIn） | SIMPLE*SIMPLE
SNSが盛り上がるためには参加者が自分の情報をなるべく書き込んでくれることが重要です。 そこでLinkedInではプロフィール編集ページに一工夫加えています。このページの目立つところに「今何パーセントぐらいの情報を書き込んでいます。あと○○を書けば○%あがりますよ」と表示しているのです。 別に100%になったところで何かがもらえる、というわけではないですが、人の心理として「ここは100%にしとくかね」と思ってしまうもの。なかなか上手い仕組みですよね。 ↑ こんな感じ。25%って言われるとあと75%埋めちゃおうかな、と思いますよね。 ちょっとしたゲーム仕立てにすることでユーザーの情報を促す、というのは悪くない手法かもしれません。 » LinkedIn: Edit My Profile （要会員登録）
初めて来た人がすぐに使えるはてなにしたい : 2007-11-06 - jkondoの日記
毎日毎日はてなのサービスを使っていると、どこの部分が使いにくいのかがだんだん分かりにくくなります。たとえば「適当にブログを探していてたまたまふらっとはてなに立ち寄った人」の気持ちになって、そこからはてなダイアリーを使ってみようと思うまでを想像するのは実はかなり困難です。 しかし毎日新たに登録して利用を開始する人の多くはそうした初心者であり、こうした方に迷わずにはてなを使い始めて欲しいと思います。そのために誰でも使いやすいインターフェースにしなくてはいけないと考え、昨年末からユーザービリティテストを開始しました。ユーザビリティテストとは、一般の方にパソコンを操作してはてなを使ってもらい、その様子を見せてもらうテストです。 一般の方と言っても、すぐに適当な人を見つけてくるのは大変なので、まずは社員旅行の時に社員の家族の皆さんに順番にいろいろな操作を行ってもらうところから始めました。それからは、
AJAXタブを作る際の13のユーザビリティガイドライン
先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。 さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! タブユーザビリティ、13のガイドライン Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。 1. タブは同じ文脈内で一覧を作る代わりに使おう 異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過
検索キーワードを自サイト内検索に引き継ぐインターフェース | SiMPLE*SiMPLE
検索キーワードを自サイト内検索に引き継ぐインターフェース October 14, 2007 1:05 PM written by Gen Taguchi ちょっと検索をしていて「おっ！」と思ったインターフェースのご紹介。ソフトウェアライブラリのベクターでは、Googleから検索して辿りつくと、検索キーワードを自サイト内検索に引き継いでくれます。 ↑ 「携帯 待ち受け 画像 作成」で検索してベクターへ。 ↑ すると検索キーワードが自サイト内検索フォームへ自動的に挿入されるみたいです。 続けて似たようなツールを探したいときもあるのでこれは便利ですね。自サイト内検索機能があるサイトは検討してみてはいかがでしょうか。 » Vector：ソフトウェア・ライブラリ＆PCショップ Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://browsersize.googlelabs.com/
gooランキング - あらゆるものをランキングで紹介！ランキングの総合サイト
http://japan.internet.com/webtech/20070711/6.html
Japan.internet.com Webマーケティング - ユーザビリティを極めても顧客志向にならないワケ