WD101: Webは見た目のコントロールがきかない
このシリーズでは Web Design101（WD101）と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSS と HTML （ときどき JavaScript）を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D
2011年 UI / UX トレンド
2011年の1月。まだ年が始まったばかりでしたが、今年の Web デザイントレンドという記事が発表されたりしていました。その後、数々のトレンド記事が国内外で数多く紹介されていますが、ルック＆フィールに関する話題、又は技術的な側面から見た話題が多くを占めています。こうしたトレンドを知ることは重要ですが、トレンドの全体像として捉えるには多少偏っていると思います。そこで今記事では、UI / UX デザインの側面からみた 2011 年のトレンドを幾つか紹介していきます。 この記事で挙げる幾つかのトレンドが現れるキッカケを作ったのは、テクノロジーと Web が今まで以上に強い連携が可能になったからです。デスクトップ（又はオフライン）アプリケーションと同等の能力を Web で実現出来るようになったことで、UI デザインの考え方も大きくシフトしました。Ajax が大きな注目を浴びた 2005 年頃も同じ
SNSにある自己表現とFacebookが見出した人の欲求
以前 脱テンプレートなFacebookの難しさと関係の変化 という記事で、SNS の構造や仕組みから見た Facebook の独自性を解説しました。今回は SNS と利用者との関わり方を重点において解説します。日本でこれからどうなるか分からないですが、海外では学生からお年寄りまで魅了している Facebook。なぜ彼等は他の SNS ではなく Facebook にハマるのでしょうか。 ハマるといえば、最近ではゲームの要素を盛り込むという話がよく出てきます。私も昨年末に ゲームをテーマにした講演 をしましたし、そこでもゲームの要素を加えることで楽しさを増幅させることが出来ると解説しました。しかし、そうした要素を追加する前にソーシャルアプリやサービスの本質を見極める必要があります。そこの理解をなしにしては、たとえゲーム的な要素を加えたり、最新技術を盛り込んだとしても意味がありません。Faceb
モバイルにある３つの場所レイヤー
モバイルコンテキストの見分け方と注意点という記事で、モバイル機器とそれに触れる人間との間で生まれる文脈を、誰が使っているか・何を使っているか・何処にいるのかの３つに分けて解説しました。しかしこの３つは文脈を理解する上での始まりにか過ぎません。例えば何を使っているか（What）を想定するにしても、ハードウェア、OS、ソフトウェア、そして前回の記事でも指摘した回線速度など幾つかの考慮項目があります。今回は、何処にいるのか（Where）をもう少し深く掘り下げてみたいと思います。 「何処にいるか？」という質問を「電車にいる」「お店のショーウィンドウを見ている」といった場所・地名だけに限定できません。もう少し視野を広げて「何処」という意味を探ることで、モバイル利用者の像がより明確に浮かび上がる場合があります。ここでは「何処」を３つのレイヤーに分けてみました。 文化レイヤー 経済、社会構造、流行など、
パン屑リストについてもう一度考えてみる
様々なパン屑リスト 利用者が辿ってきた道筋を示し、いつでも先に戻れるような配慮としてパン屑リストがあります。IA の専門家 Keith Instone によると、パン屑リストには以下のタイプがあると言われています。 場所の示す Webサイトをツリー状として捉えたときの利用者の現在地を表示する 経路を示す 利用者が現在地まで辿り着いた道筋を表示する 属性を示す 断面的な検索をして絞り込む際、選択済みの属性を表示する 進行状況を示す アプリケーションの利用の際、タスクの進行状況を表示する それぞれのパン屑リストには特有の機能があり役割を果たして来たわけですが、本当に必要かどうかを再考するべきタイプもあります。例えば経路を示すパン屑の場合、ブラウザで既に実装している「戻る / 履歴」と重複しています。また、利用者が幾つかのページをブラウジングしているだけの場合など経路を残すべきか判断しにくい場合
SEOとデザインは今後より密接になる理由
SEOの終わる部分とそうでない部分 情報が無限大に広がる Web の世界。そこから自分にとって必要な情報を見つけ出すのは至難の業です。 そこで、検索エンジンが活躍するわけですが、ただ Web サイトを作っただけで的確なかたちで検索結果に表示されるとは限りません。コンテンツ配信側が検索エンジンに対して自分たちのサイトがどういったサイトなのかを的確に知らせることを「SEO (Search Engine Optimization)」と呼びます。検索する利用者に対して効果的に露出したいという意味で「SEO対策する」という言葉が使われることがあります。この場合、SEO は瞬時にアクセス数を上げるための起爆剤として活用していると考えることができます。 SEO はこうした起爆剤的な要素だけを指しているわけではありませんが、「アクセスが上がる」というキャッチーなフレーズが付随されていることもあり、SEO
今月のデザイン変更点
昨年8月に「記事ページのアクセス通信簿」と題して記事ページのデザインの変更の意図とその効果について解説しました。その後、いろいろ機能を追加して模索をしているのですが今月が大きな機能が幾つか追加されたのでその紹介も含め、効果と課題について紹介していきます。 次に繋げるための工夫 まとめ系記事を除いて、記事は非常に高い割合で最後まで読まれている場合が多く、滞在時間も長いです。コンテンツの質も月ごとで若干異なるのでなんともいえないですが、今月は直帰率も低かったので読者が滞在してくれた月といえるかもしれません。 しかし、このサイトは検索やソーシャルメディアなどを通じてサイトにアクセスする方が多いこともあり、一期一会の関係で終わってしまう場合が多々あります。平均ページビューを増やすにはどうにかしたらいいのか、どのサイトも頭を悩ませているかと思います。たくさん選択肢を与えればクリックするわけでもありま
直感を殺した効果測定崇拝は止めよう
宗教になった効果測定 昔、Webデザインは直感・経験・感性のみで作られていました。しかし、低価格・無料のデータ解析ツールが登場したことにより、より多くのサイトがデータ解析をサイトの成果測定に利用するようになりました。従来はページビューという大まかな数でしか価値を測定することが出来なかったわけですが、その場にいる利用者の姿も徐々に見えてくるようになりました。現在はページビューだけでなく滞在時間、訪問頻度、コンバージョンなど様々な要素を効果測定要素として取り上げるようになりましたし、それらを基に改善のプロセスが組まれるようになってきました。 ビジネスを考える上において、直感・経験・感性に行き過ぎていた従来の Web デザインは不十分な存在でした。そこで効果測定を積極的に取り入れようという動きが生まれたわけですが、今度は効果測定が『宗教化』してしまい本質を奪ってしまう場合も出て来ています。 効果
らくだをデザインしていませんか？
A camel is a horse designed by committee. (ラクダとは委員会によって設計された馬である)Alec Issigonis らくださんがかわいそうですが、いろいろなアイデアを盛り込むことで結果的に何がなんだか分からない不細工なものが出来てしまうという意味が込められています。「We just made a camel（らくだをつくってしまった）」という表現を使う場合がありますが、語源は上記の格言になります。デザインの決定権をもっている人がたくさんいて、彼等の意見をすべて取り入れてしまうことで最初のビジョンとはかけ離れたものになってしまう・・・なんとも人ごとではないシナリオです。 以前「デザインが失敗してしまう理由」でもデザインをしない方や知識のない方が決定権をもつことが失敗に繋がると紹介しました。プロジェクトに携わっているのであれば誰でも言いたいことはあり
キーワード2011: Empower（元気づける）
今回から4回にわたって 2010 年のキーワードを事例と共に紹介します。まず最初は「Empower」です。エンパワーメントというカタカナ表現はよくマネージメントでも使われている表現。英和辞書でこの言葉を調べると「能力を高める」「権限を移譲する」といった少々堅苦しい言葉になりますが、言い換えれば「元気づける」「活躍の場を設ける」といった表現になります。 Webの魅力は幾つかありますが、そのなかに「共有」があります。YouTube は毎分 13 時間以上のビデオがアップロードされていますし、Flickr には既に 30 億枚もの画像がアップロードされています。それらをはじめとした Web コンテンツは猛烈な勢いで共有され多くの方がコンテンツを消費しています。私たちが何気に利用しているソフトウェアもオープンソースという共有・共働の原動力があるからです。たくさんのコンテンツが無料に存在し、いつでも
キーワード2011: Analyze（分析 / 観察）
2010 年のキーワードを事例と共に紹介するミニシリーズ。今回は「Analyze」です。Google Analytics のようなツールがあるので、Webサイト制作をしている方であれば馴染みのあるフレーズ。データという単なる数字から意味を見出すのが分析になります。 従来の分析の対象はユーザーを獲得する（サイトに招き入れる）ことでした。ページビューやユニークユーザー数がその価値の指標として価値があったわけですが、徐々に現状は変わりつつあります。ユーザーを獲得するという考えから、ユーザーをどのように保持する（サイトに滞在してもらう）かという考え方に変化しています。ページビューはもう時代遅れだと言ったのは 2006 年頃でしたが、それが具体的になりはじめたのが昨年でした。2011年は定着し始める年と同時にサービスとして提供する企業も増えてくるでしょう。 文脈から人間像をつかみ取る 新規で顧客を手
UXから除外されているもうひとつのU
コンテンツ管理者も利用者 「利用者中心」「訪れた方へのケアを」という言葉は私たちがよく使うフレーズ。忘れてはならない視点ですし、今はその視点を抜きしてコンテンツの開発や情報を整理しても成功しないといっても過言ではないでしょう。それゆえ近年、ペルソナ、シナリオ、エスノグラフィなど利用者への深い理解と共感が注目されています。 利用者第一というのは当然のことですが、ここで私たちがいう利用者とは誰のことでしょうか。恐らく多くの場合は、パソコンやモバイル機器などを利用して、情報を求めて Web サイトへアクセスする方達を指すと思います。いつも私たちは Web サイトへアクセスする人たちのことを忘れませんが、コンテンツを管理する人たちも利用者であることを忘れてはいないでしょうか。 サイトに訪れる方達にとって価値のあるコンテンツを提供することが出来なければ、彼等はすぐに離れていきます。訪問者・顧客との関
日本的なUXの解釈とは
おもてなしをどう解釈してますか？ UX という言葉を仕事とどう関連付けさせるのかという課題は「UXの定義と私たちの仕事の関係」という記事をはじめ何度か取り上げています。とはいうものの以前から気になっているのは「良い体験」というのは果たして世界共通なのかということです。日本的に解釈するとどうなるのか、何が共通しているのかについて時々考えています。何気に使っている外来語（例えばイノベーションとか）も日本独自の解釈で使われていることがあります。Webデザインにしても日本独自のトレンドはもちろんありますし、海外では流行していることがそのまま日本で使えるとは限らない場合があります。 よく UX の言葉の和訳的存在になっている「おもてなし」という言葉。日本人の耳にはとても気持ちよく聞こえるわけですが、この言葉をどう解釈しているのかで考え方も変わります。「モノを持って成し遂げる」という語源をもつこの言葉
インターフェイスとしてテキストをみたときに考慮すること
サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助で
Q&A: エンゲージメントを与えるための考え方や手法はありますか？
成果物のUXにおいて、Jesse James Garrettが話しているようにエンゲージメントを与えるということが重要になってくると思います。それぞれのサイトの趣旨によっても変わってきますが、長谷川さんはどのようなアウトプットの仕方でエンゲージメントを与えようと考えますか？また、その際、気を付けていることや長谷川さんが持っている方法論等があれば教えてください。 from: toshi ここ数年、デザインやマーケティングなど様々な分野で耳にするようになった「エンゲージメント」。愛着心や絆など、分野でによってニュアンスが微妙に異なるこの言葉ですが、ここで言う「エンゲージメント」とは「積極的に行動する状態」「集中・没頭出来る状態」を指します。アプリケーションやサイトを利用において、利用者が意味のある体験をしたかどうかを測る測定値としてエンゲージメントに注目する場合もあります。エンゲージメントのあ
新聞サイトのコンテンツと広告領域
何度もサイトを訪れているリピーターは、もしかすると頭の中では上記のスクリーンショットのようになってニュースを読んでいる可能性はありますね。こうしてみると、読むニュースが意外と少ないのが分かります。毎日新聞のレイアウトは他と大きく違いますが、ニュースコンテンツが中央にずっと続いているので、スクロールして次々と読むのには最適かもしれません。毎日新聞と同様、ニュースコンテンツ領域が大きい産経もトップ記事からランキングまで中央にまとまっているのでこちらも見やすそうです。共に広告領域が狭いのでコンテンツをそれだけ盛り込めたということでしょうか。 当然ながら新聞サイトはニュースだけでなく様々なコンテンツを提供しているので、パーセントが少ない読売がボリュームがないというわけではありません。どのサイトも読者に訪れてもらうための工夫（たとえば特集などコンテンツボリュームを増やしたり写真をたくさん使ったり）は
ブラウジング型インターフェイスの長所・短所
検索は Web が使われるようになってから続く永遠の課題。技術だけでなく検索結果の見せ方も年々進化してきています。近年、セマンティック Web への注目が一層高まっていることから、また検索がおもしろくなりそうな気配です。検索の精度、そして結果を利用者に示すためのインターフェイスへの探求はこれからも続きますし、デザイナーとして興味深い話題のひとつ。 検索（特に検索結果）と少し関係があるデザインパターンのひとつにブラウジング（Browsing）があります。多くの情報を次々を観覧するのに長けているわけですが、最近ブラウジングを採用したサービスや Web サイトをよく見かけるようになりました。 Google Fast Flip ニュースサイトをページをめくるような感覚で次々と見ることが出来ます。キーボード操作で次々とページを移動。ローディング時間も含めサクサク Cooliris YouTube や
様々な意味をもつWebサイトのスピード
「UXの測定要素」で最初にスピードを挙げたのは、Webの体験において近年重要なポジションになってきているからです。ブロードバンドだからこそスピードを要求されますし、モバイルだと欲求はさらに高まるでしょう。プログラムがより早く動作するように記述の工夫や構成の検討したり、CSS や HTML といったマークアップからでもパフォーマンスを上げることが出来ます。こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。 例えば、トップページのように様々な導線も含まれた情報量の多いページがあるとします。技術的な工夫を施し、表示速度が早いページにしたとしても、情報が入り組んでいて利用者が見つけ難い構成であれば「時間がかかる＝遅い」と感じるでしょう。「２つ以上の製品を比較したい」「製品の特徴を把握したい」という利用者に明確な目的がある場合はどうでしょうか
UXの測定項目を考えてみた
日本でも UX デザイナーと名乗る方が増えてきましたが、去年あたりから Web では一種のバズワード的な存在になっている UX (User Experience)。『バズワード』と書きましたが、重要と感じている方が多くいるからこそ注目されているわけですし、流行から次のステージに進んでいるのも事実です。デザイナーと呼ばれている方はもちろん、Web サイトを構築する様々な職種の方が UX に反応しているのをみると、ひとつの共通言語 (認識) として重要なポジションになる可能性を秘めています。 ユーザーテスト、ペルソナ設定、アジャイル開発など、水準の高い UX を実現するための様々なアプローチが存在しますし、今でも模索が続けられています。作り出すほうだけでなく、作った後、つまりサイトの測定方法はどうでしょうか。UX を意識して作ったまでは良いですが、それをどう評価すれば良いのでしょうか。ページビ
関係作りとしての IA の役割
IA (Information Architecture) において「関係」は重要なキーワードです。ページを構成する情報と情報との関係、サイト内のページとページとの関係。コーポレイトサイトであれば、メインサイトとサテライトサイトというサイトとサイトの関係も考慮します。これに加え、利用者という別の軸の関係も考慮して情報を組み立てて行きます。こうしたことから、IA の専門家達は、建築、情報科学、インダストリアルデザイン、認知学など様々な分野の知識に長けている方が少なくありません。彼等はその広い知識を活用することで様々な情報とコンテキストを繋ぎ合わせている（関係を作り上げている）といえるでしょう。 近年、情報とコンテキストが多様化し初めています。 情報の種類はテキストから動画まで様々ですし、サイズや扱われ方もたくさん出てきました。また、利用者が情報にアクセスする背景を考えてみると、自社の Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
