Good CSS Format gurdian.co.uk

いろんなニュースサイトを見ていますが、最近見た中で一番フォーマットが見やすいと感じたサイトです。

gurdian.co.uk

レイアウトもそうですが、何よりテキストのフォーマットがいいですね。文字量があるサイトながら、シンプルなレイアウト設計とスタイルで一目で各コンテンツブロックが分かり、見だしがまず目に入ってきます。結構英文のニュースサイトはぱっと見でうんざりするサイトが多いのですが、このサイトは文字サイズとカラー設定が上手く、文字を楽しく読めるサイトですね。

CNNやBBC,Newsweekなどと比較して気づいたポイントを見てみようと思います。

まず英文サイトにしては本文の文字サイズが大きめで読みやすい。CNNやNewsweekは記事本文の文字サイズがかなり小さく読みづらい印象を受けます。

次に見出しと本文、リンクなど各文字サイズのメリハリが上手く、まずポイントとなる見出しなどが目に入り、その後本文に移動するという視線の流れを上手く作れています。また、各カラム毎の文字サイズやサブコンテンツなども文字サイズがプライオリティにあわせて設定しており、文字が多くてもそれが読むときに邪魔にならず、付加情報として機能しています。他のサイトでは、サブカラムやサブコンテンツの文字サイズがメインコンテンツと同じだったり、より大きかったりするため、視線が集中出来ずあちこちに目がいってしまいます。

そして文字サイズを上手くサポートするスペースとライン（仕切り線）とカラーの使い方に注目です。Newsweekはキャラクター的にも派手な紙面なのでかなりトーンは違いますが、グラフィックパーツを多用しており、各コンテンツを枠で囲むなどの処理で画面全体がうるさい印象を受けてしまいます。BBCなどは比較的gurdianと近い印象なのですが、スペースとラインの使い方がguradianの方が一歩上という印象ですね。特に画面下部に行くほどBBCはコンテンツが整理されていない印象を受けます。

最後にカラーナビゲーションが上手く機能していますね。ニュースサイトはよくどこにいるか迷子になるケースが多いのですが、グローバルメニューとローカルメニューと各見出しの色がナビゲーションとしての役割を果たしつつ、コンテンツを移動したときにフレッシュな印象を与えて読むのを飽きさせません。

ちなみに、英語だからよく見えるんじゃないの？という意見もあるかなと思い、Google translationで日本語訳してみたところ、日本語でもいいですよ。これは僕自身もびっくりでしたが。しっかりした設計がなされていれば言語は関係無いんですね。一度試してみてください。

厳しく見ればカラーナビゲーションや一部グレーに白抜き文字などはアクセシビリティ的に調整が必要なところもあるのでしょうが、ぜひ参考にしたいサイトです。

Mega Drop-Down Navigation Menus Work Well メガ・ドロップダウンメニューはいい感じ

以前に書いた検索候補提案機能と関連するドロップダウンメニューに関する記事がJakob Nielsenのサイト（Alertbox）にあったのでご紹介します。

うちの会社では結構昔からグローバルメニューのドロップダウンメニューが悪とされてきました。（ここでいうドロップダウンメニューはナビゲーション利用時です）これはSEOやアクセシビリティ的な考え方に加え、うちの会社の代表がプルダウンは古い、ダサい、使いづらいという意見を持っているという理由があるのですが。
ただ、僕自身はドロップダウンメニューによるメニュー設計はあまり行いませんが、ユーザとしては結構好きです。確かに5年ほど前までは何でもかんでもプルダウンメニューになっているサイトが多く、ブラウザによって崩れが起きたり、ラべリングとサイト設計がいい加減で、結果ドロップダウンを利用することでメニューを隠してしまったりするなど使いづらくなっているケースが多かったのは確かです。実際、5年以上前に構築された公共のサイトやイントラサイトなどのリニューアル依頼を受けるとほとんどがプルダウンをこれでもかと使っているサイトが多いです。ただ、最近はサイトの規模が拡大していることによる必然性と、Javascriptが認められたことなどから利用されるプルダウンメニューも使いやすく、いいものが結構あると思っています。

で、そんな中Jakob NielsenがMega Drop Down Menuは結構イケてるという記事を書いていたのを見つけ、ユーザビリティの観点からもドロップダウンメニューが評価されたようなので、彼のアドバイスを参考にしながら今後のプロジェクトに取り入れたいなと思っています。

まず、前提としてJakob Nielsenはこれまで結構ドロップダウンについて記事を書いていますが、どれも悪い評価としての記事が多かったのが事実です。そのため使う時の注意点とあまり頻繁に使わないようにという警告が多かったと思います。まあそういう経緯もあったので今回の記事はちょっと驚きもあったのですが。

さて、今回彼がMega Drop Down Menuとして定義しているのは以下の要素を含んだドロップダウンメニューです。

• 大きく、ナビゲーションパネルの中がグループ分けされている
• レイアウトやタイポグラフィー、アイコンなどを使って構造化されている
• すべてのメニュー内容が一度で見れる（スクロールしない）
• トップメニューから水平もしくは垂直表示される。左カラムのメニューの場合はパネルが表示されずページへ移動する（ちょっとここの訳は怪しいです）

参考サイトが2つ掲載されていたので見てみてください。（なお仕様にあたっての注意点などはAlertboxをご覧ください）

Food Network


Action Envelope


彼の定義している内容は検索候補提案メニューの内容とほぼ一致しますね。まあ、あちらもドロップダウンメニューと言えるのでもちろんそうなのでしょうが。ただ、これまで単純なリストとしてしか表現していなかったメニューや検索結果などへ、今後の傾向としてグルーピングやレイアウト、タイポグラフィーなどによる視覚的な設計とデザインが必要になっていくのは必須ですね。ただし、検索候補提案メニューの記事で僕が感じたメニューか広告か分からない？という表現と、やはりAction EnvelopeやAppleのメニューはちょっと回線的に表示に時間がかなりかかってしまうので、そういった点には注意が必要でしょう。

ちなみにドロップダウンメニューに関する基本的な注意点はAlertboxにいくつか記事があるのでご参考まで。

Drop-Down Menus: Use Sparingly

Does User Annoyance Matter?

User action of Graduates these days in Japan いまどきの新卒ユーザの行動パターン

僕も仕事で企業サイトを作ったり、大学サイトを作ったりするんですが、ちょっと意外だった新卒ユーザの行動パターンに関する記事があったのでご紹介。

就活生が本当に見ているもの--失敗しない「新卒サイト」の作り方とは？
イー・エージェンシー　奥井さん　Cnet

この記事の中でやっぱり驚きだったのは、「先輩社員の声」を見ている学生が少ないということ。僕の感覚ではこのコンテンツなんかは学生受けが良さそうだとすっかり思いこんでいたし、自分の就職活動時は、Webじゃないですがパンフレットの若手社員インタビューみたいなのをずいぶんと見た記憶があったので。しかもテストを行った学生のインタビューの内容が面白い。（以下引用です）

• （今回のテストに関わらず）こういうコンテンツはほとんど見ない。「やらせ」のような気もするし……。セミナーに行けば、雰囲気で伝わる。
• こういうことは、セミナーに行って肌で感じたい。むしろセミナーには、（先輩社員の声など知らずに）まっさらな状態で行きたい。
• 大体が「なぜこの会社に入ったか」というような話になっているが、聞きたいのは、その人が入社してどんな経緯で現在の仕事をしているのかということ（例：最初は何の仕事をして、次にどこに異動して、何年目にリーダーになって、など）。

3つ目の意見は随分と冷静に見ているなという感じだけど、1つ目、2つ目は今どきっぽいなぁと（苦笑）。確かに最近の新卒コンテンツは良く出来過ぎていて、広告っぽく見えてしまうところも多いし。ただ、今回のイーエージェンシーさんの調査では5人の被験者だということと、おそらく都会の学生（？）が対象っぽいのでちょっとすれてたのかも（すいません、勝手な憶測で）しれないので、地方の学生へ対象を広げるとまた結果も変わりそうです。

ただ、奥井さんも指摘するようにこのコンテンツ自体が悪いのではなく、内容やそこへ導くリード文が大事とのこと。確かにインタビューでもあるように「やらせ」と思われるような綺麗なコンテンツではリアル感が伝わらないんでしょう。大人のずるさを知っちゃってますからね。

とはいえ、大手企業のコンテンツはそのほとんどが先輩社員を主体にしたコンテンツになっています。ただ、今回テストしたサイトのようなテキスト主体のものよりも動画やFlashなどのインタラクティブコンテンツになっているものが多く見られます。やはりエンタテインメント性を持たせると学生受けが違うのでしょう。ただ、最近の新卒コンテンツで気になるのは、面白さに走りすぎて本業やその会社の雰囲気と関係ないコンテンツになってしまっているものが 多々あることです。しかも、学生が結構それを面白いと捉えて希望者が増えるのはちょっとどうかなという感じがします。

企業の新しいことへの取り組む姿勢やチャレンジ精神が伝わるものであるというのは非常に大事ですが、リアルな現場の生の声や雰囲気を伝えるというのも大事ではないかと思います。
企業側としてもあまり入社前に風呂敷を広げたり、本来の企業イメージと違いすぎて、結局入社後すぐに退社してしまうという事態にならないために、提案する私たちとしても広告とは違った目線で新卒サイト企画する必要がありそうですね。

大手企業の採用サイトはこちらをどうぞ。
RECRUIT　CS　採用情報ケーススタディ

ちょっと特殊な例ですが、飛び抜けたことをやっていながらも会社の雰囲気をちゃんと伝えているのはさすがだなと思わせるのがカヤックの新卒向けコンテンツです。カヤックさんには何度かお伺いしたことありますが、ほんとにコンテンツが会社そのものを表現出来ているので、ある種このノリは無理・・・という人にはほんとに無理とわかりやすい（？）
代表の柳澤さんのブログもぜひご覧くださいな。


カヤックDAN数
2010年新卒採用スペシャルコンテンツ

新卒向けWebコンテンツの作り方
by　柳澤さん（カヤック代表）

同じようなノリですが東北新社さんのコンテンツも面白いながら、実際の仕事内容と雰囲気が分かるいいコンテンツだと思います。楽しさだけじゃなく、結構細かいところで仕事って大変だよ〜みたいなことをアピールしてるし。是非ごらんください。
東北新社新卒向けコンテンツ

しかし、こういったエンタメ要素のある企業はいいけど、某銀行やら某メーカーのような真面目で面白さが社風に無いところはどうすればいいのかなと考えたのですが、逆に平凡や安定は、今の不況の中、学生への強いアピールになるかもしれませんね。相変わらず公務員人気が高い昨今ですし。
とにかく平凡に幸せな社員さんの自宅や家族を紹介するとか、財形の運用を具体的に見せるとか、仕事はこなす感じで趣味に生きる社員さんを紹介するとかが意外と受けたりして。

Wordpress Prologue

最近Wordpressネタが多いですが、この間MovableTypeのMotionについて書いたのでちょうど比較としていいかなと思うので書いときます。WordpressのPrologue p2が1年ぶり？にリリースされましたね。あまり日本ではPrologue自体が知られてないと思うのでどんなものか見てみました。（アカウントが作れなくて使えなかった。。）


まあ見ていただくと一目瞭然。WordpressをTwitterみたいにしちゃうThemeです。見た目は一見MovableTypeのMotionとすごく似てるんですけど、こっちは見る限りMotionのように画像や動画などをアップしたり、他サービスのアクションをアグリゲートするような機能はないようです。

で、どういう風に使うといいんだろうなぁ、と考えてみたんですがTwitterとはちょっと違う使い方になりそうです。フォローとかいう概念が無さそう（あるのかな？）なのと、テーマ毎でフィルタリング出来るので、ある程度決まったメンバーでいくつかの話題について情報を共有する、かつその過程がわかってる方がいいよねという感じでしょうか。Forumみたいな感じですね。コメントに対しての返信も出来るようなので。

1年前のMattさんの記事では、バーチャルカンパニーなど人が離れて働いている時のコミュニケーションの方法の一つとしてBasecampみたいに使ってみたらって言ってましたが、確かにBasecampのメッセージみたいには使えますが、ファイル添付などが出来ないとなるとかなり用途が絞られちゃいますね。

話がちょっとそれちゃいますが、Basecampに興味のある方はこちらのblogでもどうぞ。
work style memo
僕も結構この意見に賛成です。確かにシンプルで使いやすいツールなのですが、Milestoneなどはシンプルに作りすぎていてカレンダー形式で見れないので逆に分かりづらい点があったり、MilestoneとTodoがもうちょっと便利に連携しておいてくれるといいのになぁ、なんて感じがちょこちょこあります。ただ、いわゆるフリーのWebツールなんかを使い慣れている僕らの業界の人達には満足な出来だと思います。利用料も安いし。

ただ、何はともあれPrologueはオープンソースで無料で簡単に使えますから、自分でブログたてれる人にはアイデア次第でいろいろ遊べそうですよ。ぜひ試していいアイデアがあったら教えてください。

Prologue p2の紹介記事はこちら。
Prologueのデモはこちら。

そういえばこの間Mattさんが日本に行ったみたいですね。 Cnetに記事 がありました。P2を押してたみたいだけど、Buddy pressじゃないのか？

Share User Flows ユーザフローをチェック!!

これいいですね。いろんなサービスのユーザフローが図で確認出来ます。サイト構築する時のフロー検討時にいろんなパターンを参照できますね。
また、フローが直線的なのか、循環型なのか分岐型なのかも一目瞭然なので、バイラルを狙うなど目的に合わせて検討しやすいです。

Product Planner

Buddy Press of WordPress MU

ちまたで話題のBuddy Pressを試してみました。最近なんでもソーシャルですが、これは結構完成度が高そうです。先日の記事で書いたMovableTypeのMotionとはソーシャルでも利用法が違い、かなり高機能なSNSが構築できるようになっています。



機能はざっと以下の通り。

• 拡張プロフィール
  
• プライベートメッセージ
• フレンド
• グループ
• ワイヤー（いわゆるコメント機能ですが、グループやフレンドに公開するマイクロブログみたいなもの？いまいちはっきりわからん・・）
  
• アクティブストリーミング
• ブログトラッキング
• フォーラム
  
• ステータスアップデート（2009年内リリース予定）
• フォトアルバム（2009年内リリース予定）

詳しくは本家サイトの機能紹介ページをどうぞ。ちゃんとそれぞれデモ画面もあります。Buddy press.org

などなど、こう書くともうちゃんとしたSNSですよね。というか、いまどきSNSっていうのかな？ただブログがちゃんと構築出来るので、CGMサイトを構築するにはとても向いていると思います。MovableTypeのMotionが他サービスのアグリゲート機能が売りという感じで、こっちはFacebookのフレンドコネクトでのログインが出来ますが、基本的にはBuddy press内での活動をメインに設計されています。

オープンソースでいえば対抗馬はDrupalとかになるんでしょうか？でも両者のスタンスは結構違うので今後が楽しみです。

ちなみに、Buddy Press.orgがすごいなと思うのは、すでにいくつかのサイトが様々な形で立ち上がっており、実際のサービス利用イメージが持てることです。これってホントに運用しているサイトなのかどうか良く分かんないんですが。


日本でもだいぶWordPressが知られてきましたが、グローバル規模のオープンソースだけあって開発規模も技術もすごいですね。もっと日本でも利用されていくといいと思うんですけどね。

みなさんもぜひお試しを。
Buddy Press.org
Buddy Press Demo site

Motion: Roll Your Own Social Network with Movable Type

もうリリースされて随分経ちますが（正式リリースしたのかな？）、Movble TypeのMotionを先日仕事がらみで触る機会がありました。いわゆる流行りのソーシャル化エクステンションなのですが、なかなかお手軽に楽しめそうな機能です。


さわった感じでは、これまでのブログというよりはライフストリーミングに主体を置いたアグリゲーションツールといったものになっています。ブログとしての機能はもちろん持っているのですが、投稿フォームなどはシンプル化され、twitter風のマイクロブログとして短い言葉や動画、画像をすぐに、簡単に投稿できるようにインターフェースは変更されています。
Action Streams（アクション・ストリームズ）のプラグインを採用していて、ユーザの利用している各種サービス（twitter, facebook, flickr, digg, youtubeなどなど）がアグリゲート出来、そのアクションがプロフィールページにライフストリーミングとしてアーカイブすることも出来ます。また、グーグルのFriend Connect（フレンド・コネクト）、Facebook Connect（フェイスブック・コネクト）、そして、OpenIDもサポートしているのでスタートは随分と楽ちんな感じです。

ただ、使ってみていていくつか気になる点があります。

1. メインページにメンバーのライフストリーミングがアーカイブされていくが、異常にアクションが多いユーザのアクションを非表示にしたり出来るんだろうか？メンバーから外すしかないのかな？Facebookでもこのあたりは結構問題になっていたけど、新しいデザインに変わって随分改善された気がします。
2. ユーザ間のコミュニケーション方法が難しい？FollowとFollowerの機能や、コメント機能などを使うことになりそうだが、アクションストリーミングにフィルタリングなどが付いていないので、リンク集的になっていてコミュニケーションが難しい。。。思わず他サービスにジャンプしちゃうしな。
3. 商業利用は出来る？　以下にちょっと書いているけど2年前に発表され、現在はMT4.2にバンドルされているMovable Type Community Solution（MTCS)だけど、プロフィールユーザ数によってコストが変わる料金体系なので、ソーシャルだー試してみよーなんてユーザにプロフィールを作られちゃうとコストが大変なことになっちゃいます。Motionのライセンス体系が良く分からないんだけど、その辺は従量制は厳しいね。

今のところの利用イメージとしては、個人のライフストリーミングブログとしていろんなサービスの活動を一つにまとめるという使い方がお手軽でいい感じでしょうか。あとは、期間限定のプロモーションサイトなどでユーザのアクションストリームを作るというのは面白そうですね。日本で使うならmixiアカウントが使えるといいんだけど。フィルタリングやメンバーとのコミュニケーション方法がブラッシュアップされるとより実用的に大人数でも使えるかも。しかし、毎年1回こういう大きな機能を開発してくれるSixapartはいつも楽しみですね。

ぜひデモを一度さわってみてください。
Motionのデモサイト
こんな記事も面白いですよ。
The Blog HeraldのMotion紹介記事

Suggest Search Feature 検索候補提案機能

今では結構多くのサイトで実装されている検索候補提案機能（硬いな。。）ですが、最近リニューアルしたMOGで検索したところ、お、、惜しいと感じたのでユーザビリティの観点からAppleと比較してみました。


MOGの検索候補自体は結構いい感じなんですよ。検索候補が"Artist" "Album" "Track"それぞれにグルーピングされて分かりやすいんです。
で、何が惜しいかというと。

1. リストが必然的に長くなるのでプルダウンにスライドバーがついちゃうので、Trackがファーストビューで見えないことが多い。
2. 検索窓からカーソルの下でプルダウンリスト内に移動出来ない。
   

1はまあ仕方ないかなという感じだけど、2は結構いただけない。検索時はキーボード使ってますよね。そこからマウスに持ち替えるっていうのが面倒で。たったこれだけなのに随分とユーザビリティーが落ちてる気がします。

ちなみにそこはさすがApple使いやすい。ちゃんとカーソルキーでプルダウン内に移動しますね。


ただ個人的な感想ですが、アイコンやらなんやらデカ過ぎて検索結果というより広告に見えてクリックしたくない・・。僕だけですかね。

ちなみに検索候補提案機能といえば元Googleのアーキテクトなどが作ったCuilですが（？）、最近はめっきり話題にならないような。スタート直後は結構叩かれてましたが、検索結果表示方法などはいい感じなんですがね。

Search feature of Sun Microsystems サンの検索機能

Googleを使った使いやすい検索機能を見つけました。USのSun Microsystems（サン・マイクロシステムズ）のサイトです。商品やサービスを大量を大量に持っている大手メーカーやベンダーなどにはお勧めなスタイルです。フリーキーワードで検索後、フィルターで各ジャンルごとに絞り込みができます。また、キーワードがサービスページにヒットすれば最上段にフォーカスリンクが表示されるなどの心配りもいい感じです。

I've found the nice search features with google search engine. It's a Sun Microsysytems U.S. one. I think it suite for companies which have lots of services or products. You can search topics by free words then you can focus topics by filter.


ちなみに、拡張検索のレイアウトもわかりやすい。
Extention search function is good too.


あと、ここのサイトにはFeedback機能があってその内容も面白いので。


でも、今回一番面白いのは、同じSun microsystemsのSingaporeとJapanのサイトを見てみたところ、同じGoogleを使っているのに表現方法が違うんですよね。
シンガポールはデフォルトのまんまって感じですが、日本はフィルタリングという発想はUSと近いんですが、見やすさと使い勝手で随分差があるような気がします。同じ会社でSunのようにレベルの高いエンジニアがいる会社でこうも違いが出るとは。僕は明らかにUSが使いやすいと思うんですが皆さんはどうでしょう？

It's very interesting that Sun Micro Japan and Sun Micro Singapore use same google search engine, but their features are different from U.S. one. I think U.S. one is best. Japanese one is little similar in U.S. one but U.S. one is quite easy to understand and to use. Singapore one is default style I think. It's interesting that engineers who work same company make same function with same software but they are very different.

Sun microsystems Singapore

Sun Microsystems Japan


仕事では検索はGoogle miniやGoogle custom searhばかり使っているんですが、そのままデフォルトで実装することが多く、今回みたいに同じGoogleでもなるほどと思える検索の設計はぜひ真似 てみたいですね。
情報アーキテクチャの4つの要素のうち1つは検索システムなんですよね。ここをちゃんとやっておけば本体の設計が甘くてもつぶしがきく・・・いかんいかん。ここもちゃんとやらないとね。