「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。 Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 （※Live Searchは画像検索からキャプチャを取っています） こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、
nanapiを作る上で気をつけたことのまとめ : けんすう日記
ライフレシピ共有サイトの「nanapi」というものをリリースしてみました。 nanapi[ナナピ] | 7分であなたの生活を便利にしちゃうライフレシピ共有サイト おかげさまでいろいろと紹介していただいたみたいでアクセス数高くていい感じです。 今回、どのような設計にするか結構考えて作ったのでそれを公開します。 ※ここでいう設計とは、どうユーザーに動いてもらいたいか、等のコンセプトに近い意味での設計で、システム的なものではありません！ 参考にしたサイトや記事 作るにあたって参考にした記事はこちら 『Stack Overflow』から学ぶ最近のコミュニティ構築術 - IDEA*IDEA すごくよくまとまってます。コミュニティを作る人には絶対よむべき記事ですね・・・。 デザインとかインターフェイスはこのサイトを結構参考にしました。 Kickstarter シンプルで伝えたいことを伝えているなあ、と
あなたのサイトは大丈夫？--ECサイト3つのチェックポイント
夏のボーナスシーズンがやってきました。こんな景気ではありますが、ボーナス、エコポイント、定額給付金と、ECサイトでは様々な商戦が繰り広げられています。 ユーザーの購買意欲がかき立てられるこの時期にちなんで、今月はECサイトを検証しました。特に今回はECサイトの検索機能に焦点を当てます。被験者は男女混合5名、「Amazon.comとYahoo!ショッピングにて、食器洗い洗浄機を買う」というタスクを課しました。はたして被験者たちは満足のいく買い物ができるのでしょうか？ ストレス1：「商品が見つからない！！」 被験者D（20代男性）は、Yahoo!ショッピングにて「食洗機」と検索窓に打ち込みました。その結果が下記の図です。 図1：ユーザーが検索結果を見た際の視線の様子。赤い線は視線の動きを、丸は視線の滞留時間の長さを示す。検索結果が見られていないことがわかる（※画像をクリックすると拡大表示します
成果アップの期待に応える！「伸びシロのツボ」発見のヒント
◆本コラムのサマリ ・ウェブサイトで成果を伸ばす難易度は上がっている。 ・「伸びシロのツボ」を押さえた上で、そこでどのような施策展開が効果的なのか、検証のサイクルを高速で回していくことに集中できる企業が、今後成果を伸ばし、勝ち残る可能性が高い。 ・「伸びシロのツボ」は簡便に発見することができる。 ウェブサイトで成果を伸ばす難易度は上がっている 「成果が上がらない、上げ辛くなってきている」 にも関わらず、 「社内での期待値はあがっている」 という状況に見舞われているウェブサイト担当部門の方も多いのではないでしょうか？ 近年、企業の戦略を考える上で重要度が増しているウェブサイトですが、実際、ウェブサイトで成果を上げる難易度は上がってきているといえるでしょう。主だった理由としては、以下のようなものが挙げられます。 成果を伸ばすには、より多くの工数を投入すれば良いのか？ ではどうすれば社内の期待に
就活生が本当に見ているもの--失敗しない「新卒サイト」の作り方とは？
4月になり、街を歩くとフレッシュな新入社員の姿を見かけるようになりました。また、早い企業では翌々年度の採用活動について考える時期でもあります。 さて今回は、新卒者向けの就職情報サイト（新卒サイト）を検証しました。被験者は、就職活動中の大学生5名（男女混合）です。学生たちが普段使っている「リクナビ」「マイナビ」サイト内で、どの要素が見られ、どの要素が見られないのかを、アイトラッキングツールを使って分析します。なお学生たちには調査の目的は明かされておらず、あくまで普段通りの情報収集をしてもらいました。 今回の調査にて、被験者たちに共通するある傾向が見えてきました。次年度の新卒サイトを作る際にご参考いただければと思います。 新卒学生に「刺さる」写真 他サイト同様、今回の調査においても、学生たちは画像に注目していました。以前、本コラムの中で「転職求人サイトにはどんな画像が適しているのか」という調査
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
ユーザの視線に配慮したページ作り：「表」編 (ユーザビリティ実践メモ)
弊社のユーザ行動観察調査では、アイトラッキング（ユーザの視線分析）を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」（ユーザになりきってそのサイトを検証する）という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか？ この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
ヤフー VS グーグル--見られるリスティング広告はどっち？
前回の記事にて、ユーザーが「見る広告」「見ない広告」について検証しました。その中で、「Yahoo! JAPANの旧デザインではリスティング広告が見られていないが、新デザインではどうだろうか」という疑問を投げました。今回はそのリスティング広告について、再度検証しました。 画像1：Google（左）とYahoo! JAPAN（右）の検索結果画面。赤枠で囲ったリスティング広告欄のデザインが異なる。（※画像をクリックすると拡大します） 上の画像1は、GoogleとYahoo! JAPAN、それぞれのリスティング広告欄です。Googleでは、リスティング広告欄に黄色の背景色がひいてあるデザインとなっています。一方のYahoo! JAPANは、今まではGoogleと同じデザインでしたが、前回のテスト（実施日は2008年11月26日）以降、リスティング広告欄の背景色がなくなり、オーガニック検索結果（通常
ラベリングが及ぼす影響 - 「予約」か「検索」か (ユーザビリティ実践メモ)
リンク名やボタン名は、その先にどういった情報や機能が存在するのかをユーザに伝える重要な役割を果たします。 今回は、旅行サイトのケースを例に、ラベリング（名づけ）が与える影響を取り上げます。 旅行サイトに訪れたユーザAは、宿泊先を探すという目的でサイトを訪れたにも関わらず、トップページにある、『宿泊予約』というリンクを見て、本当は正解であるこのリンクを意図的に避けてしまいました。 同様の目的をもったユーザBは、別の旅行サイトのトップページの『ホテル・旅館検索』というリンク名を目にすると、即座にクリックしました。 いずれも同種のページにリンクされており、ユーザが目的を達成するための正しい入口でした。 ユーザの行動を分けた要因は何でしょうか。主に次のような要因ではないかと考えられます。 宿泊先を探すユーザの行動フェーズは、 宿泊施設、宿泊プランの検討 宿泊施設、宿泊プランの選定 予約手続き とい
ウェブデザインにおける効果的なコミュニケーションの取り方
ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的
ウェブインターフェースデザインに関するスライド – 秋元
これはいい。ウェブのボタンやフォームの配置等についてのティップスがつまったプレゼン。元Yahoo.comのAjaxエヴァンジェリスト、現NetflixのUIエンジニアBill Scottさんの作によるものです。 UIの話で図がいっぱい入ってるから英語読まなくてもなんとなくわかるし。 Yahoo.comの映画レビューで使われているUIは僕も好きだなあ。グレード評価なので日本にそのまま使えるわけではないけど、レビューサイトとか作るとしたらぜひああいうの入れたいと思います。 Javascriptでその場でいろいろする場合にも、マウスの移動距離を考えよ、ってのを見てはっとしました。あんまり考えて無かったかもしれません。 327ページのスライドというのがすごいですね。新刊(↓)の宣伝とはいえ、ここまで出してしまうとは。 [am]0596516258[/am] 今回のプレゼンとは違いますけど、一昨年に
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント（第1回） | モバイルサイト構築のユーザビリティいろは
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
星野リゾート、旅館サイト改良で予約数8割増：日経ビジネスオンライン
気になる記事をスクラップできます。保存した記事は、マイページでスマホ、タブレットからでもご確認頂けます。※会員限定 無料会員登録 詳細 ｜ ログイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js :: 5509
世の中のリアルを速く正しく- BCN＋R
モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回） | モバイルサイト構築のユーザビリティいろは
ユーザーフレンドリーな優れたナビゲーション集