中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス
Top 5 Web Design Mistakes Small Businesses Make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを目的にあなたのサイトを訪問します、それはあなたの会社がどのように見えるかを意味しており、サイトのアピアランスとユーザビリティは成功への重要なポイントとなります。 しかしながら、サイトのデザインを間違ったものにしてしまうと、あなたのビジネスに悪影響を与えてしまうことになります。ここにあ
もしもtoyota.jpを解析するなら（前半） [第1回] | 有名サイト、かってに解析！
新連載「有名サイト、かってに解析！」では、毎回1つの有名サイトを取り上げ、アクセス解析で実際に解析データを見る前に、あらかじめサイトの問題点やチェックポイントにあたりをつける方法を解説していく。 アクセス解析を行う際には、データを見る前に、自分なりの仮説を立てることが、分析効率を高める上で効果的だ。サイトをユーザーの視点で閲覧しながら、問題点やチェックポイントを整理してみよう。着眼点はサイトのタイプによって異なるし、必勝法則などがあるわけではないが、ある程度はパターン化できるのではないかと考えている。 見ながら仮説を立てるのは、自社のサイトに限らない。情報収集で検索をしていて、たまたまたどり着いた初めて見るWebサイトや、Web担当者Forumのような定期的に購読している情報系Webサイトでも、問題点の仮説を立てながら見る癖をつけよう。いちいち文章に落とす必要はない。面倒くさければ、「ちょ
![もしもtoyota.jpを解析するなら（前半） [第1回] | 有名サイト、かってに解析！](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c67aa2184ccf3ff946517fd56c653f8d7587055/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2011%2Fkatte%2Fkatte_icon.png%3Fitok%3DtLD2V8dP){kind=icon}
ユーザーを“納得”へ導く「サイトストーリー」の作り方 (1/3)
Webでは一度に1ページずつしか読めません。各ページはリンクされていても視覚的には分断されていますから、各ページがユーザーの心の中でしっかりつながるようなサイト構成にするには「サイトストーリー（納得への流れ）」が必要です。サイトストーリーを作ることで各ページ、各コンテンツが有機的にユーザーの心の中で結びつき、「納得」につながるのです。 Webサイトは、アクセスしてくれたユーザーに対して情報を提供します。情報の見せ方は「情報の持つ質、量、幅」によって大きく変わってきます。ある単独の商品について訴求するようなプロモーションサイトを作るケースと、会社案内サイトのように会社の規模、事業内容から社長の経歴、役員構成まで幅広く掲載するようなサイトを構築するケースでは、作り方もまったく変わってくるわけです。 プロモーションサイトは、「この商品を売りたい」「広く宣伝したい」と目的がハッキリしています。です
mixi のユーザーインターフェースガイドライン作成に協力［株式会社ミクシィ様］
日本最大の SNS「mixi」を運営している株式会社ミクシィ様ではユーザーインターフェースを重要なものと位置づけて改善活動を始めていらっしゃいます。その活動の第一歩として、現状の mixi（PC版）のUIカタログとしてのガイドライン作成をソシオメディアが協力いたしました。 今回インタビューさせていただきましたのは株式会社ミクシィ 開発部 デザイングループ 馬場沙織様、河野崇史様のお二人です。 デザイングループでは mixi のユーザーインターフェースの管理・設計、そして実際のデザインを担当されており、馬場様と河野様は今回のUIガイドラインのプロジェクトの中核を担われました。 株式会社ミクシィ 開発部 デザイングループ 馬場沙織様 株式会社ミクシィ 開発部 デザイングループ 河野崇史様 聞き手：ソシオメディア 上野 学 ソシオメディアはUIの重要性をアピールしていますので、日本最大の SNS
nanapiの初期バージョンに検索窓がなかった理由 : けんすう日記
はじめに 【仕事における８０：２０の法則】個人・企業のパフォーマンスを最大限に高める方法 | [b] bizMode｜世界のデジタルトレンドを読む というブログの中で nanapiというレシピサイトがありますが、c/o時は全然機能がなく、レシピを探せませんでした。果たして、カットオーバー時点において、レシピ検索機能は備え付けておく必要があったのでしょうか？また、個人ページにも全く機能性はありませんでしたが、今はどうでしょう？十分パワーアップしています。 そこに、多くの問題が発生したでしょうか？していません。 少しの問題は発生していましたが、プロダクト価値を脅かすものではありません。 徹底的に８０％にこだわり、重要なポイントは、十分に抑えられていたと思います。 こんな記事で紹介してもらったので、ちょっと書いてみます。記事内では、最初は検索結果に対しての工数をさかずにあとで回した、というニュア
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer
数年前に「日本語でケアナビ」プロジェクトに加わったことをきっかけに、「カテゴリとタグというナビゲーション要素をどう扱うか」は僕の問題意識のひとつになっています。で、１月ちょっと前に公開され話題になったライフレシピ提供サイト nanapi [ナナピ] のナビゲーションは、この問題に対するひとつの解を示しているように思いました。せっかくなので考えたことを以下まとめてみます。 カテゴリという（階層構造も含む）分類の仕方は、サイト利用者の多くがスムーズに理解できる一般的な概念といえるのですが、タグという概念の認知度はまだまだ「Webに詳しい人は知っている」の域を出ていないのではないかと思います。タグという属性のラベルを使い、複数のタグを使って「AかつB」という条件でモノを絞り込んでいく手法は、とても便利で面白いものです。でも知らない人にとっては、タグを用いたナビゲーションは難しいものに映るのが現状
![nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bfac3b933cc6d724ac32a64f3bcd1b289ae1176/height=288;version=1;width=512/http%3A%2F%2Fwithcomputer.jp%2Fthemes%2Fwc%2Fimages%2Ffacebook%2Fogp200.png)
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
トップページは誰のもの？ 現代流の動線に合わせたトップページ再評価法 | Web担当者Forum
今回はトップページの位置づけについて調整しよう。 これまで何度も考察してきたとおり、実際にアクセス解析を行うと、最初にトップページを訪れるユーザーは、今やわずか25％程度しかない。言い方を変えると、トップページを入り口とする来訪者は25％程度なのだ。 そういった状況を理解せずに、これまでのようなトップページ偏重の考え方のままサイトを運営していては、機会損失の原因ともなってしまう。 解析結果の「1番上」だからこそ 気づきにくいトップページの盲点アクセス解析で「アクセスの多いページ」「入り口になることが多いページ」を調べると、解析結果リストの1番上には、たいてい「トップページ」が出てくる。いろいろな動向はあるが、いまだにトップページは非常に重要なページであることに変わりはない。これまで、「訪問者はトップページからやってくるから、そこからどう誘導するかが大切」とよく言われてきた。“見せたいページ
ゲシュタルト心理学 - Wikipedia
ゲシュタルト心理学（ゲシュタルトしんりがく、Gestalt Psychology）とは、心理学の一学派。形態心理学ともいう[1]。一つの図形のように個々の要素の総和以上のまとまりのある形態をゲシュタルトという[1]。精神や意識をゲシュタルトとしてみる立場から考察する心理学[1]。人間の精神を、部分や要素の集合ではなく、全体性や構造に重点を置いて捉える。この全体性を持ったまとまりのある構造をドイツ語でゲシュタルト(Gestalt ：形態)と呼ぶ。 ゲシュタルト心理学は、ヴントを中心とした要素主義・構成主義の心理学に対する反論として、20世紀初頭にドイツにて提起された経緯を持つ。精神分析学や行動主義心理学に比べると、元々の心理学に近いと言える。特にユダヤ系の学者が多かった事などもあって、ナチスが台頭してきた時代に、同学派の主要な心理学者の大部分がアメリカに亡命した（例外的にヴォルフガング・ケー
情報アーキテクチャの間違い・トップ10
ウェブサイトは、その構造とナビゲーションシステムとが互いに支え合っていなければならない。検索システムとも結びついていなければならない。サブサイトに至るまで一体化していなければならない。複雑で、一貫性が無く、選択肢が隠れていて、UIが扱いにくければ、ユーザーは必要なものを見つけられない。 Top-10 Information Architecture (IA) Mistakes by Jakob Nielsen on May 11, 2009 ウェブサイトで思いどおりの操作がまったくできない原因の大半は、情報アーキテクチャの出来の悪さにある。これは、ウェブユーザビリティにからむ他の問題点に比べてなかなか改善しにくい。その理由を解き明かすため、腫れた親指のようにずっと前から目についていた間違いを10個洗い出してみた。これを全部合わせれば、ウェブサイトは毎年何十億ドルも無駄にしていることになる。
CNET Japan連載：インフォメーションアーキテクトの視点:マーケティング
The Japanese edition of 'CNET' is published under license from A Red Ventures Company., Fort Mill, SC, USA. Editorial items appearing in 'CNET Japan' that were originally published in the US Edition of 'CNET', 'ZDNET' and 'CNET News.com' are the copyright properties of A Red Ventures Company. or its suppliers. Copyright (c) A Red Ventures Company. All Rights Reserved. 'CNET', 'ZDNET' and 'CNET New
トップページにみる日本のウェブデザイン--Yahoo! Japanは「社会の縮図」 - builder by ZDNet Japan
データの説得力 ポータルサイトのトップページは、複数存在する自社サービスの担当部署や広告主との関係を保ちつつ、主役である利用者と良い関係を築かなくてはいけません。利用者とひとことで言ってもリテラシーは幅広く、運営側が良いと判断して導入した機能やサービスが、利用者にとって「使い難い」という結果になることさえあります。 つまり、ひとつの情報を動かしたり調整をするだけでも、大変なプロセスになることがあるのです。特に今回のリニューアルのように大幅な変化を伴う場合、海外版のYahoo!の見た目を継承するだけでは解決しない課題がいくつか出てきます。 何をするにもまず、可能な限りデータを収集して分析することが必須であると、Yahoo!トップページ企画に所属する西田修一氏は話しています。20〜30ほどアイデアが挙がったトップページの中から、8つのデザイン案をユーザーテストにかけ、アイトラッキングやインタビ
ユーザー中心のインタラクション
Web Designing誌の「ユーザ中心のインタラクション設計の考え方」に賛同・反論してみる。 【賛同】 ・サブミットボタンのラベルには動詞を使う ・システムエラーをユーザーのせいにしない。 これは同意ですね。あまり人のこと言えないかもしれませんが、システム屋さんってエラーメッセージなどのセンスが異様にない人が結構います。 さらにシステムの作りで自動化されてたり複数の画面でメッセージが共通化されてたりしたら、かなりブルーです。 ・クリアボタンは不要 そうそうなんで、いまだにクリアボタンってつけるんでしょうかね？ 僕は今のHTMLにおいて、このボタンの存在意義がわからんのです。なんかセキュリティ周りで、クリアボタンの有用性を説いてたのを見たかもしれませんが覚えてない。消せないことを不安に思うから・・・だったかな。 でも、そういう人は「入力クリア」の意味が理解できないでしょうから、それで消し
その画像、必要ですか？～ 「連想的シンボル」「機能的シンボル」「コンテンツ」3つの価値 - Feel Like A Fallinstar
ウェブサイトの画像はただの「イメージ」ではなく、明確な「役割」を持っているべきです。 なんとなくデザインが見栄えいいから なんとなく他のサイトでも使ってるレイアウトだから なんて理由で（特に上司に見せたときにかっこいいから、とか）画像を多用するのは避けたいもの。 最近は、ノートPCを持ち歩いて、イーモバイル等でネットを見たり、フルブラウザを使う人も増えてますし、無駄な重さは排除したほうが賢明ですしね。 個人的には、ウェブの画像には 「連想的シンボル」 「機能的シンボル」 「コンテンツ」 の3つの価値があると思っています。 （この3つに当てはまらない画像は不要なことが多い、という意味でもあります） 1.連想的なシンボル これは、その画像があることで特定の業種やサービスを扱っていることを想起させる使用法。 例えばIBMのサイトで使われているこの画像。 別にIBMが夜景の都市開発をやっているわけ
Information Architects Japan » ユーザビリティとブランディング
企業のウェブサイトというのは往々にして顧客との最初の、そして緊密な接点となるものです。その点で、ユーザビリティとオンライン・ブランディングはどのビジネスにも重要です。 企業やブランド・ポートフォリオにとってウェブサイトは名刺やパンフレット、製品、パッケージや、オフィスの所在地などと同じくらい重要です。ブランディングが企業価値を大きく影響するようになり、ユーザビリティは数字の面でウェブサイトの善し悪しを左右します。しかしながらウェブデザインとユーザビリティはしばしば矛盾するのです。今回は、私たちがどのようにその矛盾を解決しているのかをご紹介したいと思います。 ユーザビリティとオンライン・ブランド・エクスペリエンス ウェブサイトはインフォメーション・ツールです。そして、それ故にウェブサイトは一定のルールのもとに構築されています。企業サイトでは使いやすく、役に立ち、そして印象に残るような強力なブ
fladdict.net blog: 質問厨房がウザイのは、サイトの設計に問題があるんじゃないのか
たまにflash系の質問フォーラムとか見てると、物凄いレベルの不毛なやり取りばかりを目撃する。 「バージョンが判りません、明記してください」 「なにをどう検証なさったのでしょうか」 「テスト環境をお教えしてください」 「それでは判りません、もっと具体的に教えてください」 あれって、質問者以前にサイトの設計に怠慢か、問題があるんじゃないの？とか思う今日このごろ。 いくら注意しても直らない、誰もがそうする、というのならば悪いのはユーザーではなくデザインだと、ダニエル・ノーマン先生も仰ってる。 フォームでそれは改善できるのではないかと。 例えば初心者ヘルプフォームの、初期投稿をこんな風にするだけでも、やり取りはだいぶスムーズになるはず（１０分ぐらいで適当に作ったやつだけど）
サイトID（ページ左上の会社ロゴ）のリンク先はどうあるべき？ (ユーザビリティ実践メモ)
サイトIDとは、「何のサイトか」「誰が運営しているサイトか」を表現する企業やブランドのロゴマークのことで、ページ左上に設置されるのが一般的です。 「サイトの顔」とも言えるサイトIDは、ユーザが「サイトの基点（多くの場合トップページ）に戻りたい」と思うときクリックすることが多いですが、サイトによってはユーザの予期しないリンク先が設定されており、ユーザが困惑してしまうことがあります。 今回は、サイトIDの最適なリンク先について検討したいと思います。 ビービットのアメリカ現地法人、ビービットアメリカの情報が掲載されているサイトです。このサイトでは、全社共通の企業ロゴ（赤枠）と現地法人名（青枠）がサイトIDとして表示されています。サイトIDのリンク先としては、以下の3パターンが考えられますが、どのリンク先が最もふさわしいでしょうか。 1. 全社共通の企業ロゴ（赤枠）はビービット本社トップページへ、
就活生が本当に見ているもの--失敗しない「新卒サイト」の作り方とは？
4月になり、街を歩くとフレッシュな新入社員の姿を見かけるようになりました。また、早い企業では翌々年度の採用活動について考える時期でもあります。 さて今回は、新卒者向けの就職情報サイト（新卒サイト）を検証しました。被験者は、就職活動中の大学生5名（男女混合）です。学生たちが普段使っている「リクナビ」「マイナビ」サイト内で、どの要素が見られ、どの要素が見られないのかを、アイトラッキングツールを使って分析します。なお学生たちには調査の目的は明かされておらず、あくまで普段通りの情報収集をしてもらいました。 今回の調査にて、被験者たちに共通するある傾向が見えてきました。次年度の新卒サイトを作る際にご参考いただければと思います。 新卒学生に「刺さる」写真 他サイト同様、今回の調査においても、学生たちは画像に注目していました。以前、本コラムの中で「転職求人サイトにはどんな画像が適しているのか」という調査
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ビービットが提供するプロのユーザビリティ改善プロセスを体験―勝手にユーザビリティ診断 | Web担当者Forum
