効果的なウェブサイトに対する意識のギャップ
「効果的なウェブサイトって？」というのは単純な質問ではあるものの、視点や役割によって意見が違いそうです。この抽象的な質問に関してレポートにまとめている文書を見つけました。オンラインラーニングやウェブ上のクリエイティビティの推進のために様々な活動をしている NPO 団体 IDEA が Factors that improve online experience というレポートをまとめています。NPO, ウェブサイト制作会社, 利用者の３つのブループに分けて「効果的なウェブサイトの要素は何か」という質問に応えてもらったそうです。詳しい調査結果と解説が書かれた PDF も同ページでダウンロードすることが出来ます。 作る側と利用者とのギャップというのは未だにあるみたいですね。今回の調査で大きく分けて 8 つの特徴が見つかったみたいなので以下にまとめておきます。自分も改めて意識しなければならないなと
ライブアイコンを使った情報の見せ方
デバイスが違えば情報との関わり方は変わってきます。同じウェブからの情報を受信するといってもパソコンとモバイル機器では関わり方とアプローチに違いがあります。最も大きな違いであり、課題になるのが、モバイル機器でははるかに小さなスクリーン上で多くの情報を掲載しなければならないという点。『モバイル (移動)』という環境化の中で、欲しいときに必要な情報をすぐに出す必要があります。スクリーンが小さい割にはパソコンより多くの情報を目の前に出せるようにしておく必要があるわけです。 こうした難しい課題の中、モバイルインターフェイスで適応されているテクニックが「ライブアイコン」という概念。パソコンのアイコンといえば、アプリケーションを概念的に象徴するシンボルですが、突然形が変わるということはありません。しかし iPhone や Sony Ericsson の Xperia X1 のアイコンはアプリケーションに
UX を構成する要素と測定方法
ユーザーエクスペリエンス (UX) という言葉は、体験という意味も含まれていることもあり、曖昧で測定し難いもののように捉えがちです。作る私たちがよく使う言葉ですし、今やセールストークとして使われている場合もあるかもしれませんが、「じゃ、実際どうやって効果を報告するの？」ということになると、難しい課題です。しかし、主観的な感想を述べることだけが UX の測定方法ではありません。UX はウェブサイトやアプリケーションを構成するひとつの独立した要素ではなく、以下の 6 つの要素の集合体といって良いでしょう。 コンピュータとのインタラクション 情報構造 (IA) インタラクションデザイン ユーザーインターフェイスデザイン ユーザビリティ ビジュアルデザイン 上記に挙げた要素の中には、既に解析や分析がされているものもあると思います。つまり、今まで使ってきたツールやメソッドを採用し、それらを複合するこ
メディアの消費の仕方の進化
テクノロジーの発展により人々は多くのメディアを消費出来るようになってきました。グーテンベルクが活版印刷技術を発明することで、多くの人々が文字にアクセス出来るようになった 15世紀から、テクノロジーがメディアの流通に大きな役割を果たしてきたといえると思います。 より個人的な体験へ 文字、映像、音声と様々なメディア媒体がありますが、共通しているのが、テクノロジーが発展していくにつれて徐々にパーソナルな体験へ移行しているという点です。書籍も昔は値段が高く数も少なかったので、ひとつの本を共有して読書していましたが、今はひとりで何冊も持っており、いつでも何処でも本を持ち出して読むことが出来ます。 テレビにしてもそうですね。 最初はひとつのテレビに家族が集まって視聴していましたが、テレビも安値で小型のものが登場するようになり、ひとつの部屋に1台テレビになるほど普及しました。そして今は携帯機器にテレビが
CSS Variables と CSS の未来
ここ数年にリリースされたウェブブラウザは W3C の仕様に従いつつ、実験的に独自の要素を実装して表現の幅を広げようとしています。CSS まわりでは WebKit がリードしているのではないでしょうか。マルチカラムや複数背景画像のような CSS3 にあるものから、反射やマスクのような変わったものまで実に様々です。 最近 WebKit のほうにも実装され、今月の CSS WG で草案化する可能性がある仕様で CSS Variables というのがあります。その名のとおり「CSS で変数を扱う」というもので、値を一元管理出来るようになります。詳しくは withD のこちらの記事が参考になりますが、サンプルコードを書くとこんなかんじです。 @variables { companyTheme: #069 highlight: #ffc; PageTitleSize: 18px; SubheaderS
建設的な会話をするために気をつけておきたいこと : could
ウェブサイトの構築といっても、立場関係を考慮することなく、コラボレーションのようなデザインプロセスになってきています。デザインプロセスのどのフェイズにおいても、開発メンバーやクライアントを交えて意見を交換するときがあります。皆でサイトを作り上げて行くわけですから、会話をすることはとても大事な時間ではありますが、建設的な意見ばかりが出て来るわけではありません。時には会議が迷走してしまったり、開発メンバーの士気を下げてしまう可能性もあります。 チームメンバーだけでなくクライアントにも伝えておきたい、建設的なフィードバックの仕方。よりよいウェブサイトを皆で作って行くために覚えておきたい項目を5点紹介します。 感情を含む熟語を含めない 「好みではない」「違う気がする」といったネガティブな表現だけでなく、「好きだね」も使うのを控えたほうが良いです。もちろん、違う意見を言うことは悪い事ではないですし、
ピクサーが考えるイノベーションの鍵
正直言って、12月の公開まで待てない Pixar の新作「Wall-E」。Pixar は初の長編 CG 映画「トイストーリー」以来、ひとつもハズレ映画を作っていないとんでもない映像制作会社です。圧巻の映像美も素晴らしいですが、シーンの見せ方や、ストーリーにたくさんのアイデアが盛り込まれていて、新作が出る度に驚きと感動があるのが最大の魅力だと思います。アニメーションの世界でイノベーションを続けている Pixar ですが、その秘密は何なのでしょうか。 「Mr.インクレディブル」「レミーのおいしいレストラン」の監督を務めるブラッド・バードが The McKinsey Quartlerly のインタビュー (GigaOM のレポート) でイノベーションのためのキーポイントについて語っています。アニメーションスタジオからの視点ではありますが、参考になるところは数多くあります。 厄介者達を集めよ 皆と
クリエイティブになるための4つの視点
クリエイティブという言葉を聞くと、何か前例のないものを生み出す力だったり、アーティスティックな部分を指す場合があると思います。しかし、クリエイティブな実際そういったアートもしくはデザインだけに特定しているものではなく、すべてに関係しているものです。実は誰でも毎日クリエイティブな瞬間はあります。 私たちは毎日のように課題や問題に出くわします。それらをいかに解決するかを考える・・・これだけでもクリエイティブです。何も考えずに済ましていることも実はクリエイティブの結果だったりします。時間がかかったり出来ないと思っていることも工夫することで解決することもクリエイティブでしょうし、限られた時間の中で出来ることをするということもクリエイティブです。 「どうなったらクリエイティブになれるのか」という言葉をたまに耳にしますが、クリエイティブになるのは意外なほど単純であると同時に難しいものだと思います。クリ
UXに関するよいお言葉 : could
UCD言葉 UXに関するよいお言葉 最近見つけたおすすめブログは、inspireUX というユーザー・エクスペリエンスやデザインに関する言葉を引用されているシンプルなサイト。まだ始まって２ヶ月くらいしか経っていないですが、様々な職種の方がそれぞれ独自の視点と言葉でデザインについて語っています。引用をインデックスカードに印刷出来そうな小さめの画像も用意してある気前の良さ。Webデザイン関連の言葉も多く、短い言葉ですがインスピレーションになるものも多いです。今回はその inspireUX で見つけた印象のある引用を幾つか紹介します。 Dan Saffer (Adaptive Path): インタラクションデザインは単に問題解決のためだけではなく、より良い人々の関係を促進するためにも存在する。人と人を繋げるための良い方法をつけることが世界をもっと良い場所にすることにも繋がる Aaron Gust
Webサイトはまったく同じ見た目である必要はない
Do websites need to look exactly the same in every browser? (Webサイトはすべてのブラウザでまったく同じように見えていなくてはいけないのか？) リンクをクリックすると答えが分かるのでぜひどうぞ。去年の暮れから今年にかけてこんな長い URL を使った一問一答系ページが増えており火曜日かどうか、クリスマスかどうか、Twitterが落ちているかどうか、パリス・ヒルトンは刑務所にいるかどうか、自分はスゴいかどうかなどたくさんあるみたいです。 最初に紹介した「Webサイトはすべてのブラウザでまったく同じように見えていなくてはいけないのか？」は、Web標準デザインテクニック即戦ワークブックの著者としても知られている Dan Cederholm さんが作ったページ。実際 複数のブラウザで確認すると、見た目が若干違ったりします。 レイアウトが崩
今必要とされている『IT』 : could
IT (Information Technology) はみなさんにとってどういった意味をもつ言葉でしょうか。効率的に情報を行き来させる技術の総称と説明することが出来ます。「IT革命」という言葉のようにバズワード化してしまった部分もあるので、逆に意味が分からない怪しい領域に見られている可能性もなくはないでしょう。未だに IT 業界と呼ばれるところはどうも別世界に見られているような印象もあります。 技術を見えなくする 技術という言葉があるので確かに技術的なことではありますが、人に使ってもらうものを作るために技術だけで簡潔した例は今までありません。今のケータイ・インターネットの火付け役になった i-mode にせよ、新しいゲームプレーを提案した Wii にせよ、最新の技術を使ったわけでもなければ、ほとんどの方が技術をきちんと理解して利用しているわけではないです。技術中心ではなく、人を注意深く観
サイドバーの行方 : could
サイドバーはブログが広まる前から存在していたコンポーネント。メインコンテンツ以外の情報を上部に載せることが出来るので、多くのサイトでサイドバーが採用されています。実装も簡単に出来ますし、３カラム、４カラムと増やすことも出来るわけですが、実装の敷居も低いのでただの賑やかしになってしまいがちの部分でもあります。情報の配置の仕方によって、情報が活かされるときもあれば、そうでないときもあります。サイドバーもメインコンテンツ以外の情報を放り込む場所ではなく、的確な情報が載る場所として扱わなくてはいけません。 ブログのサイドバーで必要なもの サイドバーによくある情報は 最近のエントリーリスト 最近のコメントリスト アーカイブリスト カテゴリリスト タグクラウド Feed をはじめとした購読ボタン ウィジェット諸々 アクセス解析やサイトコンセプトによってサイドバーの使い方も変わってきます。このサイトは
拡張性のあるデータ配置を模索する
そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。 下の図はページを大まかに4つに別けて、異なる配置を考えたものです。 ※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。 ナビゲーション サイトのグローバルナビゲーションに当たる
コメントを残す8タイプの読者
「コメントリストで考えられるパターン」では、ブログのコメントリストの見せ方から読者との関係を良いものに出来るかを考えて行きましたが、今回はもう少し突っ込んで読者にスポットを当てたいと思います。読者と一言でいってもブログに訪れる方は実に様々です。住んでいる場所も職種も年齢もすごく幅の広いです。それゆえ明確な切り分けは出来ませんが、コメントを残す方はある程度決まっていると思います。 もちろん人間なので、そのときのムードやちょっとしたことがきっかけで変化すると思うので明確な区別は出来ないですが、８つのタイプの方（もしくはモードになった方）がコメントを残したりコメントを残す可能性を秘めています。 友達・同僚 その人を個人的に知っているから読んでいる方も少なくないです。たとえ日常を書いた日記でもおもしろく読めるのは、文字だけでは伝わらない何かを読み取ることが出来るからかもしれません。今でも mixi
コメントリストで考えられるパターン
Webサイトの基本３要素のひとつである「Relationship」。ブログでは重要な部分ですし、例え企業サイトを構築する際にも重要な要素になっていきます（もちろんブログと同じ見せ方ではないですが）。ブログで最も簡単に関係を築く方法がコメントです。それぞれのエントリーにコメントフォームを置いて読者がいつでも感じたことを自由に書き込むことが出来るようにします。コメントを通じて筆者と読者の関係がより濃いものになるだけでなく、そのコメントを読む他の読者とも共感という間接的な繋がりをもつことが出来ます。 ひとつの窓口としてコメントは良い機能だと思いますが、不満点がないわけではありません。コメント数が長いと見た目が単調になり、読み難いという印象もありますし、多くの方に読んでもらうべき貴重な情報もコメントにあるがために読まれないというケースがあります。自分のサイトは自分が管理しているので気にはなりません
UCDではないもの
UCD (User Centered Design) / 人間中心設計プロセスは、ここ数年注目を浴びている言葉のひとつ。特に私が携わっている Webサイト制作業界でよく聞く言葉のひとつですし、エンジニアやプログラマーも UCD を意識している方も少なくありません。UCD について詳しく知りたい方は、棚橋さんが書いた「 User Centered Designが必要な理由」が参考になると思います。 今このサイトで行っているオープン Web デザインも UCD を考えてやっていることではありますが、他のバズワードと同様 UCD も扱いに気をつけなければならない言葉だと思います。利用者のことを考えてデザインしていますという意思のようなものが UCD という言葉から伝わってきますが、「利用者を中心とした」という言葉の真意は何処にあるでしょうか。ペルソナを作ったとしてもごく少数のためにデザインするわ
Laws of Simplicity : could
シンプル本 Laws of Simplicity 『シンプル』をテーマに、デザインやアートだけでなく、人生そのものについても書かれている興味深い本です。シンプルには 10つの『法則』があり、彼の経験に基づいてひとつひとつ説明がされています。 MIT Media Lab に所属し、現在 Rhode Island School of Design の学長である John Maeda。 今も日本をはじめ世界各地を飛び回りながらアイデアや作品をブログを通して発表したりしています。そんな彼が 2006年に出版した「The Laws of Simplicity」は、彼の作品のテーマにもなっている『シンプル』をテーマに、デザインやアートだけでなく、人生そのものについても書かれている興味深い本です。シンプルには 10つの『法則』があり、彼の経験に基づいてひとつひとつ説明がされています。 本そのものもわずか
カテゴリとタグを上手に使い分ける : could
CMS にタグというコンセプトが組み込まれる以前は「カテゴリー」はどういった情報がコンテンツに含まれているのかを示すものでした。例えば、Mac、映画、ライフハック、仕事といった具合だと思います。しかし、タグ機能が CMS に導入されるようになると、以前カテゴリ名として扱っていた名称 (キーワード) がタグへ移行していきました。 ここで課題になってくるのが、タグがコンテンツに含まれている情報を示すようになったので、カテゴリに明確に違う役割を示さなくてはならないところです。もし従来のように「Mac」というカテゴリを作ってしまうと、Macに関する情報が書かれたエントリーに Mac というタグを書き込むことは重複になりますし、管理する側もこれはカテゴリなのかタグなのかというのが分かり難くなり、記事によって異なる示し方になりかねません。 ブログエントリーとひとことで言ってもエントリーによって様々なタ
ニュースサイトならではのウィジェットを考える
先日、朝日・日経・読売3社の記事を同時に読み比べることができる新s あらたにすがオープンしました。手短に言ってしまえば３社しか見れない Google ニュースといったところでしょうか。このサイトについては、いろいろ思うところがありますが、自社サイト以外にも記事を開放することを積極的にし始めているのは事実。RSSの配信やウィジェットの公開など少しずつステップアップしているといえます。 ニュースとの接点は増えて来ていますが、ただ新着情報を電光掲示板形式で流すだけでは物足りないです。BBC Backstage ほど革新的なものは求めませんが、それでも出来ることは幾つかあるような気がします。ネットユーザーとニュースの関係をより親密にさせ、かつトラフィック増加に繋がるような形を考えてみました。 公式の情報が使えるという強み Webにおけるニュースサイトの利用のされ方は、他の媒体のように受動的に読者が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
