Monday, September 7, 2009

物件検索のおすすめサイト

久しぶりのブログ更新。
仕事で中古車サイトの設計をサポートすることになりいろいろ調べていたんですが、その検索機能の勉強ついでにと不動産のサイトを見ていたところ、Home's賃貸のサイトがとても良く出来てるのを発見。リニューアルして1年ぐらい経つようですが、以前のバージョンから格段に使いやすくなっています。

HOME'S 賃貸 http://rent.homes.co.jp/

基本的な要素は他の賃貸サイトと大きく変わるところはありませんが、僕が”うむ、便利”と思ったポイントは大きく2つ。
1、リアルタイム検索 ー 条件に合わせリアルタイムで検索結果が絞り込まれていきます。
2、ログイン不要 ー ログイン不要で検索条件やお気に入りの保存が可能です。

ここから検索スタート。

こんな感じでリアルタイムで検索結果が絞り込まれます。


マイ条件や、クリップなどがログイン無しで使えるのは便利ですねぇ。


サイトとしてとっても使いやすいので一度お試しを。
さて、なんかいい一軒家の物件はありませんかねぇ。。。

Sunday, June 21, 2009

What a attractive Palm pre is !! Palm preって魅力的!!

先日発売されたPalm preだけど、見れば見るほど魅力が増していってほしいなぁと思う今日この頃。初めは全く興味なかったんですけどね。

Palm preの魅力はなんといってもこの2つ。

  • マルチタスク おなじみタスクを同時にこなせる機能
  • Palm Synergy Facebook、Gmail、AIMなど、毛色の異なるサイトにスムーズに同時アクセスし、そこからコンタクトリストを、ダブることなく自動でリスト表示してくれたり、メールも、IMも、SMSも、すべて同じウィンドウで見やすく並べてくれる機能
おまけであと3つ。
  • iTunesとの同期(DRMフリーに限るみたい)
  • wireless charger(ちょー便利ですねー。家の中に3つぐらいほしい。でもSyncはしてくれないんだよねぇ。)
  • Flash対応(今はまだですが、もうすぐ出来るみたい)

詳しい機能はGizmodeのレビュー記事をどーぞ。

僕が使っているのはipod touchですが、UIとUXではこれを超えるものはでないかなと正直思っていましたが、後発だけあってやることやってきましたね。iphoneは確かにすばらしい端末だけど、実際にビジネスレベルで利用してみるとかなり使い勝手が悪いことに気づきます。それはやっぱりマルチタスクが実現出来ていないことが原因です。


プライベートユースでは、比較的単一のアプリケーション利用だけで済むことが多いのですが、ビジネスユースになると、アプリケーション、ブラウザベースに限らず、複数のアプリケーション間を短時間で移動して作業を行うことがほとんどだからです。

この点でiphoneとPalm preはUCDのベースであるペルソナの設計において、そのペルソナに差があることが分かります。
iphoneは一部マルチタスクな機能も持っていますが、そのマルチタスクベースは音楽を聴きながら何かをするというレベルでの設定です。音楽の場合は、一度設定してしまえばそんなに頻繁に切り替えることもありません。そういう面からペルソナは10代や20代前半を含むプライベートの充実を目的とするペルソナなんじゃないでしょうか?

一方でPalm preは20代中盤から30代のビジネスマンで、Social networkをプライベートとビジネスに活用しながら多忙な日常を効率的に楽しんでいるというペルソナを想像してしまいます。確かに先に出したiphoneにハード的な制約が多かったことは確かだと思いますが、ちょうど同時期にリリースした最新のiphoneでもそのあたりの強化がなされていなかったことは面白いポイントだと思います。逆にPalm preはそこだけは譲れないと強化したポイントだったんでしょうけど。

この両者の関係は、僕が感じてるMacとWindowsの関係に近いかも。僕は今プライベートでMacを使ってますが、これまではWindows派でした。まあ今ほどWebアプリケーションが使える環境でなかったので、ローカルアプリケーションの互換性がその理由でしたけど、今Macを使っていて思うのはマルチタスクをとっても有効に使えてると言うことです。Windowsももちろんマルチタスクですが、OSXのExposeとSpacesを使うと、もうWindowsには戻れないですねぇ。13インチのMacbookを使っていますが、以前使っていたWindowsのラップトップの時と仕事のスピード、活用度合いがまるで違います。同じタスクをこなしてもWindowsなら17インチは欲しくなる。この違いがiphoneとPalm preでも言えるんじゃないかな。



iphoneを買う気でいたんですけど、それもうあきらめてipod touchで我慢するかなって感じになってます。既に。
あーシンガポールでも発売してるのかな?でもこっちで買うと日本で使えないしなぁ。なんとも悩ましい限りです。でもiphoneもOSXベースなはずだから、ExposeやSpacesが使えるようになればいいのになぁ。

Wednesday, June 17, 2009

Let's try to use a web services as many as you can !! : 出来る限りたくさんのWebサービス、ツールを使ってみることのススメ

最近長いblogが多いので、今日は短めで。

Webディレクターのスキルって何が大事だろう?未経験者からWebディレクターになった場合、どんなトレーニングをすればいいだろうなんてことを、会社のADの子達のことを思い浮かべながら考えてみたりするわけですが、まず簡単なところから楽しく始めようということで、新しいサービスやツールを使いまくることをオススメします。

これは結構僕なりに理由がしっかりしていて、以下のようなメリットがあると考えています。

  • 新しいサービスを体験出来る→商談の話題や提案時のアイデアに繋がる
  • たくさんのUIに触れて学ぶ
  • いいサービスやツールに出会える→仕事の効率がアップする
  • たくさん、いろいろ使う→ツールに早く慣れる→仕事が早くなる
  • 使ってみる→操作方法やサービス内容を早く理解しようとする→サービスや機能を予測しながら使う→IAやUI設計のトレーニングになる

ちなみに、僕は今このブログを含め3つブログを持ってます。ソーシャルネットワークを含めて、一応ここ数ヶ月間継続的に更新しているものでこのぐらいあります。
  • blogger
  • WordpressMU
  • アメブロ
  • Facebook
  • mixi
  • Lang-8
  • smar.fm
  • twitter
  • smart.fm
  • flickr
  • Secondlife
これにツール系を足すとすごい数になると思います。あとは、仕事でCMSのオープンソースを使ったりしているので、drupal, Joomla!, concreat5, Movabletype, MT motion, Wordpress, Wordpress Prologue, Buddypress....思いついたのはこのぐらいですが、まあ一通りユーザーレベルでの操作は体験済みです。
月に少なくとも5つぐらいは新しいサービスやツールを試してると思います。もちろん数回使って終わりというものがほとんどですが、それでもいろいろ発見や驚きがありますよ。そういったサービスの紹介ブログ(百式など)を読むだけじゃなく、ぜひ使ってみては。知らず知らずのうちにWebディレクターとしてのスキルがアップしてるかもしれませんよ。

あ、補足としてですがそんなに使ってもアカウントが覚えられません。。っていう問題はLast passを使うことで解消してます。アカウントのオンライン管理ツールで、Firefoxなどにアドオンすると、オートフィルインやオートログインしてくれます。セキュア面で不安を感じる人もいるかと思いますが、僕は銀行の情報は漏れると困りますが、個人情報やカード情報ぐらいなら漏れてもいいやって割り切っている方なので。

Case study : ブランディングの失敗?人材会社のサイトを考えてみる

数ヶ月前だったでしょうか。人材派遣・人材紹介会社のエイクエント(AQUENT)がサイトをリニューアルしました。エイクエントはクリエイティブとマーケティング、コミュニケーションの人材を専門に扱う派遣・紹介会社(以後、人材会社)ですが、その思い切ったWebサイトのリニューアルっぷりに感心(というか呆れた?)したので、ちょっと書いてみることにしました。


実は僕は4年ほど前にエイクエントに勤めていました。エージェントとして3年間勤めたのですが、僕が入ったときはまだ東京オフィスにはエージェントは5人くらいしかいなかったと思いますが、辞めるときには30人を超えていたと思います。そのぐらい会社規模も変わっているのですが、Webサイトについては2年ほど前に改修し、昨年あたりに更にリニューアル、で、今回の大幅リニューアルという経緯を経ているはずです。(あくまで記憶の限りですが)

では、今回のサイトリニューアルのどこが思い切っているかというと、Web手法でのアプローチよりも、広告的なアプローチを強く取りいれた印象を受けるからです。今回のリニューアルしたサイトを見る限り、グローバルでのブランディングとストラテジックのリストラクチャリングに伴うサイトリニューアルであるようです。サイトを開くと全面にエージェントの顔がアップで表示され、ナビゲーションは必要最低限に配置されています。
他の人材紹介サイトを見ていただくと分かりますが、基本的に求職系のサイトと同様に案件の検索機能がメインにあり、案件をコンテンツの中心としてコンバージョン(登録)を目指すというのが一般的な求人サイトの作りです。しかし、エイクエントのサイトでは、メインルートを辿ってみた印象では、どうやらエージェントをサービスのメインとし、求職者は仕事ではなくエージェントを検索し、そこからその担当案件を見るような作りになっています。といっても初めは案件まで辿り着けませんでしたが。

僕はかねてからマス(リクルートやテンプスタッフ、インテリジェンスなど)においては、案件ボリュームがその会社の質に繋がる側面が強いと感じていますが、ニッチである中小の人材会社はエージェント(コンサルタント)がその会社の顔であり、ブランドであると考えていますので狙い自体が外れている訳ではありません。
ただ、残念なのはこのサイトを設計したのはブランディング会社かコンサル会社、代理店が中心であり、WebマーケティングやWebサイト構築を専門とした人の意見が反映されていないのではないかと感じるところです。

このサイトの問題を以下の3つの視点で考えます。

  1. Webにおけるブランディング戦略
  2. ユーザーエクスペリエンス
  3. 検索機能設計

1,Webにおけるブランディング戦略
まず1つ目のWebにおけるブランディングと戦略について。
Webサイトにおけるブランディングでは、そのサイトの種類によって方法が大きく異なってきます。まず企業サイトとしては以下の4つのタイプが一般的です。

  • Eコマースタイプ
  • コンテンツ/広告タイプ
  • リードジェネレーションタイプ
  • カスタマーサービス

では、この中で人材会社のサイトに適したタイプはどれでしょう?
ちょっと人材会社について簡単に分析してみます。一般的に人材会社は二種類のクライアントを持つと言われています。人材を求める企業と、仕事を求める求職者です。ただ、多くの人材会社が企業からの求人案件獲得に人的リソースで営業活動を行っており、求職者獲得にWebを利用しているケースがほとんどです。Webでは求職者を獲得すること、つまり登録が最終的なコンバージョンとなります。(この場合の登録は面談のためのWeb上での登録です。実際には、ここから面談に来て実際に登録してくれたかが最終的なコンバージョンになります)

ということは、人材会社のサイトはリードジェネレーションタイプが一般的であると言えると思います。
ただ、エイクエントのサイトで行われているのはコンテンツ/広告タイプのブランディング手法のようです。ここにミスマッチが生じています。つまり、リードジェネレーションタイプのWeb上でのブランディングは、インパクトのある写真やユニークな手法を取り入れることでは無いと言うことです。

では、リードジェネレーションタイプのサイトにおけるブランディングとはどういったものでしょう?
それは何よりコンテンツの質です。この場合の質には量、新鮮さ、信頼性、頻度などが上げられます。また、人材会社であればそこに機密保持性(セキュア)を印象づけることもブランディングに繋がると思います。

例えば、同じエージェント(こっちはコンサルタントですね)にフォーカスを当てたサイトでも、クライスアンドカンパニーのサイトは作りが大きく異なります。彼らのサイトでは、まずコンサルタントの資格、姿勢、得意分野、経歴などを紹介しています。また、紹介実績として転職者の転職前の職歴と転職後の職歴を掲載していることも面白いポイントですね。また、各コンサルタントが「ヘッドハンターの目」というコラムを持っており、結構なボリュームで読み応えのある記事になっています。ちょっと残念なのはコンサルタントから案件へ辿り着けないところでしょうか。お、この人ならお任せできそうとなっても、案件検索は別のルートから移動し、案件詳細ページにはコンサルタントの名前がありませんので。




一方でエイクエントのサイトでは、エージェントの専門領域とコメント、お客様の声が掲載されています。仕事関係のネットワークとしてソーシャルネットワークへのリンクがあるのはユニークなところですが、その中での活動がコンテンツやアクションストリームなど見える形になっていないので残念ですね。


さて、両者を比較した時にどちらのエージェント、コンサルタントに相談してみようかなと感じるでしょうか?確かにエイクエントのサイトはビジュアル的にかっこいいですが、それがコンテンツの質に結びついていないと感じてしまいます。また、クライスアンドカンパニーのコンテンツはSEOとしても効果が高いでしょう。
ただ、これが広告であればどうでしょうか。エイクエントのインパクトは成功していると言えるかもしれません。人材会社でこんなクールな広告出してるところはありませんし、素敵な仕事を紹介してくれそうですから。

2,ユーザーエクスペリエンス
これは、UIにも大きく関わってくる箇所ですが、このサイトには利用者であるユーザーの視点が欠けていると感じます。言い方は悪いですが、フローやUIが会社都合の押しつけという印象を持ってしまいます。多くの人が目的を達することが出来ずに離脱しているんじゃないでしょうか?
人材会社のサイトは、仕事情報の検索というツールとしての役割・機能が重要です。ユーザーはまず仕事を検索し、興味のある仕事が掲載されていれば会社に興味を持つという行動が予想出来ます。しかし、エイクエントのサイトではあらかじめ会社側が強制しているエージェントから案件へという流れ以外でのルートがありません。(もしかしてあるのかな?あったら教えてくださいね)
エージェントを通じて案件を知るというシナリオ自体は良いと思いますが、ユーザーが求める行動に対する配慮も必要です。本のように初めから読んでくださいという一方向の流れでは無く、ユーザーの目的や、検索によってあらゆるところにランディングするケースなどを想定し、複数のシナリオからプライオリティづけをした上での設計が必要でしょう。そこで二番目以降のシナリオを削除するというのも大胆な発想としては面白いですが、選択肢が1つではビジネスチャンスをロスする確率の方が高いと思います。もし、一方的にユーザーを誘導するのであれば、HOMEページにLPO対策を施すなどすれば随分と離脱率を下げられる可能性はありますが。

ちなみに、既に登録している人、複数回サイトを訪れている人にはエージェント経由での案件への誘導は効果的な面もあります。これは僕の経験上の意見ですが、僕は人材会社を会社単位で評価しないようにしています。もちろん平均的にいい会社はありますが、概ね担当するエージェントに依存するからです。昔勤めていた人材派遣会社はそりゃーひどい評判でしたが、うちの支店の営業やコーティネーターの中にはホントに優秀でスタッフ想いの人がいて、実際にスタッフからもとても評判が良かったです。なので、そういう人の質をアピールしていくにもエージェント経由のルートを上手く活用することは有効だと思います。

ただ、皮肉なことに人材会社は人の入れ替わりが激しいので、人をアピールしていくのであれば、その人達をどう長期的に会社に勤めてもらうかというWeb戦略だけでなく、事業戦略、人事戦略に関わる問題もあったりしますけどね。

3,検索機能設計
前章でも書きましたが、ユーザーにとって人材会社のサイトの中で案件検索の機能はとっても大事です。検索機能はツールですので、ここではユーザー中心設計を踏まえたUI設計がなされていることが望ましいです。まあ、人材会社の検索機能は結構標準化されていますから、それに準拠するというのが失敗しない方法としてありますし。
残念ながら、エイクエントの検索で僕は自分の思った検索結果を一件も得ることが出来ませんでした。というか、何を入力していいか分からない状態のものが結構ありました。IA的にはちょっとオススメは出来ませんが、どんなひどいサイトでも検索機能がしっかりしていればユーザーは目的を果たせるもんです。意外と。まあそれだけ検索が一般化しているということと、求める検索結果を表示することが難しいと言うことでもありますが。


エイクエントのエージェント検索画面

リクルートエージェントの案件検索画面


さて、もともと人材会社にいたため、それをテーマに設計を考えたりしていたので随分と厳しい意見になってしまいましたが、今でもエイクエントという会社をとっても愛しているので、その愛情の裏返しと思っていただけるといいなと。。。

Monday, June 15, 2009

Agile development for CMS : CMS化におけるアジャイル開発というアプローチ

最近、自分なりのWebディレクションについての視点をまとめているので興味のある方は長い文章ですが是非一度読んで意見をいただけると嬉しいです。

アジャイル開発とは?


アジャイル開発とはソフトウェア開発手法の一つです。手法として紹介されてから結構経ちますが、最近のWebトレンドであるオープンソースやSaasで実践され、あらためてアジャイル開発に注目が集まっていますが、今回はそういったアプリケーション開発ではなく、一般的な情報閲覧型のWebにもアジャイル開発の考えを取り入れるメリットを考えます。

アジャイル開発は、ウォーターフォールモデルという開発手法と比較されることが多く、現在でもウォーターフォールモデルは多くのプロジェクトで採用されていますし、僕の働いている会社でもWebサイトの開発は基本的にウォーターフォールモデルです。

では、両者の違いを見てみましょう。
まずはウォーターフォールモデルから。(以下は、ZDNet Japanのウルシステムズ一橋さんの記事からの引用です)
-----
ウォーターフォールモデルでは、「要求」「分析」「設計」「実装」「テスト」「運用」といった形にシステムの開発工程を分割し、各工程では後工程の作業のインプットとなる成果物を作成します。成果物は、仕様書や設計書などのドキュメント類で、基準や定義が定められており、各工程の中で時間をかけて厳格に検証され承認されたもののみが用いられます。原則的に各工程の順序を飛び越えて先に進んだり、一度終了した工程に戻るということを許しません。このように開発モデルを滝の水が上から下に落ちることにたとえてウォーターフォールモデルと呼んでいます。

それに対し、アジャイル開発とはどういった開発手法でしょうか。
アジャイル開発では、開発プロジェクトを短期間(1〜6週間)に区切り、この間に上記の「要求」から「運用」までの開発工程を一通り行って、部分的に機能を完成させます。そして、この「短く区切られた期間で動くアプリケーションを開発する」という作業を繰り返すことで段階的にシステム全体を仕上げていきます。

ウォーターフォールモデルは、古くから使われている開発手法ですが、アジャイル開発が登場した背景を見ることで両者のメリットやデメリットが明確になってきます。ウォーターフォールモデルは、スケジュールの立案や進捗管理が直線的に進むためプロジェクト管理が容易であり、段階的な詳細化のため、各工程の工数見積もりや資源の配分が行いやすいことがあります。
ただ、工程に後戻りが許されないため、厳格な分析や設計が必要となり、各工程が長く、ユーザーがシステムの実物を見れるようになるのは最終段階に近い状態です。そのため仮説に基づく設計では洗い出せない要求がその段階で発覚することが多々あります。また、もう一つの問題は現在のビジネスの変化のスピードです。設計段階で完全な仕様が出来ていたとしても、開発期間が数ヶ月に及ぶプロジェクトでは、最終成果物としてのシステムに新たな要件が発生している可能性が十分あります。しかし、ウォーターフォールモデルでは仕様の変更は原則として行うことが厳しく、もし行った場合、改めて上流工程に戻らなくてはいけません。

それに対し、アジャイル開発は短い工程を繰り返し、都度成果物をアウトプットしユーザーがそれを確認することが出来るため、
ユーザーがシステムを体験し、そこで出た要望や変更を次工程で実装していくことが可能になります。また、アジャイル開発ではプロジェクト成功のために価値が少ないドキュメント作成を極限まで省き、ユーザーには文章ではなく動くソフトウェアで確認することを前提としています。また、仕様の変更はビジネス環境の変化に応じて当然発生するものと捉えているためユーザーの満足度の高いシステムを作り上げることが可能です。



ただし、アジャイル開発では事前での工数見積もりが難しく、工数がふくらんだ場合の負担の調整などをどのように契約に盛り込んでいくかといった問題があります。また、開発に伴いプロジェクトのスコープが変化していくため、プロジェクトマネージャーはビジネスゴールを明確にとらえた上でプロジェクト全体の設計管理を行う必要があるため、求められる管理能力はウォーターフォールモデルよりも数段高いレベルが必要でしょう。また、開発メンバーにおいても各工程毎に固定的な役割を行うのではなく、一人が多くの役割を担うことで短期間にユーザーの要望に応えたソフトウェアを提供するため、役割毎に担当者が別れてしまうことによって生じる伝達のための文章化などの負荷やロスを避ける必要があります。


なぜ今アジャイル開発なのか?

では、なぜ今アジャイル開発をWeb開発に取り入れるのでしょうか。
まず、Web開発といっても企業サイトや情報サイトといったWebサイトと、アプリケーション型のサービス型Webサイトに分かれますが、アプリケーション型のサービス提供Webサイトのアジャイル開発の有効性については、既にThink ITでSonicGardenの倉貫さんが言及されているので、今回はCMS化を前提とした前者を対象に話を進めていきたいと思います。

情報閲覧型Webサイトの開発における期間はここ数年で著しく伸びています。これは単純にサイトのボリュームが増加しているということが最も大きな要因ですが、Webに求められるビジネス上の目的が増えたため複雑化していることも原因でしょう。これまでのサイト規模であれば、1ヶ月から3ヶ月前後での構築レベルのものが多かったため、定期的なリニューアルなども柔軟に行うことが可能でしたが、数千、数万ページを抱えるサイトで、かつ構造設計を伴うリニューアルは一度の作業負荷が高いため少なくとも3年〜5年は利用出来るものを想定しなくてはいけません。

しかしながら、実際にその規模のサイトは運用に関わる人数が多く、リニューアルにあたり運用者の要件をとりまとめることが非常に難しくなります。また、現在のビジネスのスピードを考えると、期間が長くなればなるほど設計時に含まれていなかった要件が運用時に発生しているということが考えられます。これは、どれだけ事前にリサーチやコンサルティングに時間をかけても、解消されるものではありませんし、そのフェーズに時間をかけすぎると、設計時と運用時とのギャップが更に広がるという結果を引き起こしかねません。また調査や設計段階で多くの時間をドキュメント化に費やすこともプロジェクトの期間とコストの増加に繋がるため、必要以上のドキュメント化はなるべく省略化していくべきではないでしょうか。

それよりも出来るだけ早く実際の運用に乗せてみて、その中で出てくる課題や新たな要求に対応していく方が精度も高く、ユーザーの満足度が高いサイトが出来上がるのではないでしょうか。
私がこのように考えるのは、Webサイトは新規、リニューアル共に公開段階では未完成であるという前提があるからです。雑誌媒体などと異なり、Webは運用によって成長していくものですし、アクセス解析などによる数値化された目標に対し、常にビジネス成果を求められ、またそのための対応を求められるものだからです。

そのため、初期の設計段階で膨大な時間とコストをかけて公開をゴールとするのではなく、初期費用を抑え、その分をアジャイル開発の反復作業に振り分けることで、公開後に実際の運用を行った上での修正、チューニングを行うことが出来、結果的に満足度の高いサイトが構築出来ると考えます。
また、プロジェクトのゴールを公開とした場合、その後の予算取りが非常に難しく、結果としてなかなか不満点が改善出来ないなどという問題もよく見受けられることからもアジャイル開発を前提としたプロジェクト設計はおすすめ出来ます。

CMS化でのアジャイル開発のフロー

まずこのアジャイル開発を行うにあたり前提としてサイトのCMS化が必要となります。CMS化には様々なメリットがありますが、ここではWebサイトを高い頻度で最適化させることが出来るという考え方が出来ると思います。
これまでのHTMLで作成していたWebサイトは、デジタルながら実はアナログの本と変わらないレベルの構成変更しか出来ませんでした。つまり、情報の組み替えや、再構成を行う場合の柔軟性が低く、情報単位でなく、ページ単位での継ぎ接ぎレベルでしか対応が出来ませんでした。そのため大手企業などのサイトを見てみると、表面上はあたらしいサイトですが、深部に行くにつれ過去のページのままといった継ぎ接ぎサイトが出来上がります。

それに対し、CMS化を一度行うことで情報をDBに各要素単位で格納出来るため、ページという概念ではなく、要素単位での組み替えが可能になります。それにより、スタイル変更によるレイアウトの変更はもちろん、ナビゲーション設計変更や、ディレクトリ構造、コンテンツブロック、カテゴリーなどのグルーピングといった情報構成の変更も可能です。CMS化はアジャイル開発を行うための必須条件と言えるでしょう。

ただし、CMSによっては上記の様な改編が難しいものもあります。そのため、現状サイトをCMS化する場合、アジャイルに適したCMSを選ぶことと、コンテンツの要素定義をアジャイルを前提とした設計をすることが大切です。CMSの選定においては、テンプレートだけでなくモジュール単位での定義が可能なもの、サイトの階層構造を変更出来るもの、スタイル(テーマ)の一括適用が可能なものがベターでしょう。CMSの選定を誤るとCMSの変更はとても大変な作業となってしまうため、ここは慎重に信頼出来るパートナーを選びプロジェクト内容を共有した上でCMSを決定しましょう。

コンテンツの要素定義においては、各コンテンツ毎の要素定義を複雑に差別化せず、可能な範囲で共通化していくことと、メインコンテンツであるテキストを分割したレコードで持たないことがあげられます。
また、デザインにおいても画像に文字を記載するようなグラフィックパーツを減らすことでより柔軟な変更が可能となります。

Webサイトのアジャイル開発におけるメリットは、公開側サイトだけを対象としたものではありません。CMS化においては運用者の業務フロー改善が大きな目的の一つですので、その部分を改善することもアジャイル開発を取り入れる目的の一つです。
通常のCMS化を伴うサイト開発(リニューアル)は、3ヶ月から6ヶ月程度のプロジェクトを1つの単位として契約締結を行い、プロジェクトは成果物としてサイトをデータ納品し、公開した地点でプロジェクト終了となります。
しかしながら、CMS化を行うにあたり事前のヒアリングやリサーチを元にした業務フロー設計を行っていたとしても、実際の運用を行っていくにあたり不具合や、変更が必要になってくる箇所が必ず発生してきます。そういった前提をあらかじめプロジェクトに組み込んでおき、反復開発を経ることで改善することを計画しておくことが大切です。

アジャイル開発におけるWebディレクターの注意点

さて、ではアジャイル開発を行うにあたりWebディレクターはどのような点に注意すべきでしょう?

まず、通常のウォーターフォールモデルと異なり、改編を前提としたプロジェクトであるためプロジェクトのスコープ定義、ゴール設定、見積もりが難しくなります。この点はアプリケーション開発におけるアジャイル開発と同じ課題です。とはいえ、情報閲覧型のWebサイトのCMS化におけるアジャイル開発ではアプリケーション開発に比べ、都度の工程での成果物が最終形に近いことや、CMS開発の場合は作業対象が明確化しやすいことなどから失敗しにくいアジャイル開発と言えるかもしれません。

具体的には、全体の作業ボリュームから一次フローの期間を明確化します。この段階で一通り公開可能なレベルのサイトまで持っていく必要があります。その後の反復作業の期間設定ですが、少なくとも二次フローまでを想定し、公開後1ヶ月を運用、1週間で追加、改修の要件定義、その後の改修作業に1ヶ月程度というのが理想でしょう。
二次フローの作業範囲としては、初期に設定するテンプレート数の1割〜2割、もしくは作業期間として1ヶ月以内を対応可能範囲として設定し、その中で可能な修正範囲にスコープを絞ります。
それ以上に改修要望が出たとしても作業範囲が伸びれば要望も増えるだけと考え、一度の改修ボリュームを増やすのではなく、反復回数を増やし最適化を行っていく方が良いという認識を事前の説明でクライアントとしっかり共有することが大切です。
まずは二回で一区切りとし、3回目以降の改修要望があればそれ以降は改修プロジェクトとして組むか、複数回をアジャイルとして設定してプロジェクト化しても良いでしょう。

なお、アジャイル開発は決して要件定義を曖昧なまま作業を進めるということでは無いことを理解しておいてください。初期の要件定義で100%のものを作ろうとするのではなく、初期の設計地点では想定出来ない部分があるということを認識した上で設計を行うということで、反復作業によりその不明箇所を洗い出し埋めていくことを前提としているのです。
ドキュメント化においても必要なものについては確実に作成しアップデートしていくべきですが、機能などを持たない通常のページにおいては、実データでの修正、確認を行うことで作業を簡易化出来ます。ただし、サイトデータは常にリビジョン管理し、各フェーズ毎の作業状態は把握するようにしておきましょう。

また、ゴール設定においては自社の専門性をよく理解した上で設定を行いましょう。アクセス解析やSEOに強い会社であればそれらの数値をゴール設定とするのも良いですが、開発がメインの会社であればユーザビリティやフロー改善をゴールとし、クライアントからのレビュー時にはそれらをヒアリング出来るシートなどを用意しましょう。でないと、運用段階でのレビュー時にクライアントの確認範囲が広がりすぎてしまい適切なレビューが得られない可能性があります。

さて、みなさんはCMS化におけるアジャイル開発をどう思いましたか?それって別に開発は開発としてプロジェクトを組み、後は改修プロジェクトを組んでいけばいいんじゃないの?という声も聞こえそうですが、事前に反復作業までをプロジェクト化することではじめて期間やコストの削減も実現出来ると考えていますし、クライアントとの良好なコミュニケーションを維持しながら満足度をアップさせられると考えています。
実際、私のこれまでの経験の中でクライアントがサイト構築やリニューアル直後から不満を抱き、それをなかなか改善出来ずにようやくリニューアルの機会を得たというパターンを耳にすることが少なくありません。
現状のWebサイトの重要性を考えると、そういった期間が延びると運用負荷によるコスト増や、多くのビジネスの機会損失を引き起こしてしまいます。そして結果的に次のリニューアルにおいて大幅な変更を施す大手術を実施しなくてはならなくなります。そうならないためにも、Webサイトの構築方法と開発会社との付き合い方を変えていくべきでは無いでしょうか。

Sunday, June 7, 2009

Google Search Engine Optimization Starter Guide : Googleサーチエンジン最適化スターターガイド

先日、Googleが昨年発表したSearch Engine Optimization Starter Guideを日本語訳したものを
発表しました。既に日本語訳されたものがWeb上には出回っていたので目にした方も多いと思いますが、本家が丁寧に事例を交えて作成したものだけあって、SEOおよびアクセシビリティの観点からもとても役に立つ資料になっています。

普段CMSでの構築などを行っていると、どうしてもファイル名やURLへの注意がおろそかになりがちなので、改めて気をつけなきゃいけないなと思うポイントが多かったです。

Googleサーチエンジン最適化スターターガイド

Thursday, June 4, 2009

ディレクター視点で見たオープンソースCMS利用の心得

クライアントから見たオープンソースCMSとは?

最近僕の会社でもオープンソースCMSを使ったプロジェクトを手がけています。普段はパッケージソフトを使うことが多いのですが、これまで手がけた案件では、クライアントの要望でぜひオープンソースを使いたいというニーズから利用しているケースが多くなっています。実際に中規模のものでは機能的にパッケージソフトのレベルと同等か、それ以上のものもあります。

では、どういうケースでクライアントからオープンソースの要望が出るのでしょうか?
  • 開発費用を抑えたい(ログイン機能やフォーラム機能などの実装)
  • 運用費用を抑えたい(ソフトウェアのライセンスコストを抑えたい)
  • 英語環境で利用したい(多言語対応したい)
  • 自社で今後カスタマイズしていきたい
費用を抑えたいというご要望が最も多いのが確かですが、費用も大きく2つに分けて開発費、運用費の2つありますが、開発費についてはケースバイケースですが、カスタマイズをあまり考えず機能を実装するということを優先すればエクステンションを無料で利用出来るオープンソースの方がコストを落とせると言えます。また、今回は運用費としていますがライセンスコストはまさに0円ですから、分かりやすくコストを落とせるポイントです。
これらはまさにオープンソースのメリットとも言えますが、開発を行う場合にはここが落とし穴となってプロジェクトが難航するケースもあります。それについては後ほど。

次に最近のケースとして多いのは、海外クライアントから英語環境で利用したいという要望です。
パッケージソフトは大規模なものは複数の言語対応がなされていますが、中規模、小規模のものは日本語のUIのみというものも少なくありません。オープンソースは基本的に海外で開発されたソフトが多いため、英語を含めた複数の言語のインターフェースを持っていることがメリットです。また、構築したサイトにおいてもマルチリンガルマネージャーなどがエクステンションなどで利用可能で、各国の言語ファイルが既に用意されているため、グローバル対応サイトの構築が容易であることがメリットではないでしょうか。

選定段階における注意点:クライアントへの説明責任と理解を得る大切さ

次に実際のプロジェクトとしてオープンソースを利用するケースを考え、ディレクターとして注意すべき点について触れたいとおもいます。
今後は開発側の提案として費用や期間、機能面などからオープンソースを提案していくことも増えていくと考えられます。実際に、ログイン機能やコミュニケーション機能などを持ったサイトの構築や、多言語言語展開するサイトではオープンソースCMSを使うことで期間、費用、開発難易度などが押さえられるケースも多いと思います。

では、オープンソースを利用する場合ディレクターはどのような点をパッケージ利用時と違い注意すべきでしょう?

まず、選定段階における注意点です。
僕は大きく2つ、クライアントへの説明責任とクライアントの理解を得ることだと考えています。

メーカーやベンダーから情報を得られるパッケージソフトですらクライアントはどのパッケージにするかをかなり悩まれます。オープンソースはまだまだ情報が不足している状態ですし、特に海外ソフトは日本での事例が少ないということもあり、パッケージソフト以上にクライアントは情報を得ることが難しくなります。
確かにライセンスコストがかからないというメリットはありますが、ビジネスで利用するサイトの構築においてクライアントが納得出来る信頼性があるかどうかをしっかり説明する必要があるでしょう。その中でも、以下のポイントは押さえておきたいところです。

  • アップデートへの対応:オープンソースは頻繁にアップデートされるためその対応をどうするのか(これはベースのソフトとエクステンション両方に発生します)
  • バージョンアップ、拡張機能対応:開発タイミングで既に次のバージョンが予定されていたり、拡張機能の導入を今後検討している場合、その対応をどうするか
  • サポート契約:メーカーサポートが無いため、期間や内容など保証をどう設定するか

開発側としてもオープンソースはタダでお得ですよというのは確かに売りに繋がるポイントですが、逆にサポートが自社責任になるという点もしっかり理解しておくべきでしょう。

また、理解を得るというポイントは、クライアントにオープンソースを利用するという意味をしっかり認識してもらうということです。上記の通り、オープンソースを使うことはメリットもある反面デメリットも生じます。クライアントはパッケージソフトを使っている時と同じ保証を求め、そのデメリットを開発側だけで吸収してしまうような関係性になってしまうと、リスクばかりが増し、もはやオープンソースを使うメリットが無くなってしまう可能性もあります。

ですので、オープンソースとしてこういったメリットが安価に得られることの代償に、こういった部分はパッケージと異なります、こういった使い方をしていきましょうということをしっかり事前に共有し理解いただく関係性の構築が大切です。そのあたりは次の開発段階における注意点でも触れていきます。

設計、開発段階における注意点

さて、では実際に開発に入ったときの注意点を見ていきましょう。

  • Scope定義
  • 機能設計とワークフロー設計
  • エンジニアのコミュニケーションスキル

自社で既に使い慣れているオープンソースであれば良いのですが、新しいソフトや新しいエクステンションの利用にあたっては様々な注意点が必要です。


Scopeの設定
パッケージと違いオープンソースはエクステンションと呼ばれる追加プログラムでどんどん拡張が可能ですし、そもそもベースのプログラムすらオープンソースですから変更が可能です。かといってプロジェクト設計時になんでも出来ますよでは、開発期間、コストともにかなりふくらんでしまい、結果的にスクラッチレベルのコストがかかってしまうなんてことも起こりえません。オープンソースを使っているにはそれなりに前提条件に制約があるはずです。要件定義の段階からその前提条件をしっかりと押さえたコミュニケーションを心がけScope設定していきましょう。


機能設計とワークフロー設計
オープンソースはパッケージソフトと違いエクステンション(プラグイン)などの拡張機能が豊富です。Joomla!やWorPress, Drupalなどはコミュニティがとても賑わっており、エクステンションの数もかなり膨大です。これがオープンソースを利用するメリットでもありますが、その反面どれが信用出来るものなのかという選定がとても難しくなってきます。実際に構築しようとすると各エクステンションの制限や、連携問題、クセなどが分かってきてなかなか上手くマージ出来ないという問題も出てきます。UIにおいてもエクステンション毎にメニューの場所や使い方が異なるものもあるため、機能設計とワークフロー設計はある程度期間をとり、一つの機能に複数候補のエクステンションを用意しながら機能を検討し、設計段階である程度柔軟性と選択肢を持った設計をクライアントと共有し進めていくことをオススメします。

ただ、僕はオープンソースだからこそ、モジュールの組み合わせを楽しむという姿勢を持ち、機能を取捨選択することが大事になってくると思います。つまり、エクステンションレベルでのカスタマイズは極力行わず基本的にデフォルト機能のまま利用し、それらをどのように組み合わせ使いやすい環境を構築するかに注力すべきだと思っています。このあたりの姿勢についてもクライアントと共有出来ていればとてもスムーズな開発が可能でしょう。


エンジニアのコミュニケーションスキル

先に述べたように、オープンソースでは情報が得づらく、実際に構築してみないと分からない点も多くあります。それらに対応していくにはエンジニアが如何にそれらのノウハウを取得していくかがポイントとなってきます。最近は随分と本などでも紹介されていますが、基本的にはWeb上のコミュニティやblogから情報を得ていくという方法が主流となります。しかしながら、海外製のソフトであれば、そのほとんどが英語になってきますし、開発者に直接問い合わせるといった方法も必要になってきます。これはエンジニアの探求心とコミュニケーションスキルが問われるポイントでもあります。また、ディレクターとのコミュニケーションにおいても、ある程度自ら提案していき実現方法を提案していかないと、多くの情報と選択肢に埋もれてしまうことにもなってしまいますのでご注意を。

最後に
さて、オープンソースCMS利用にあたっての心得について書いてきましたが、すこしでもディレクターの皆さんの参考になりましたでしょうか?具体的な各ソフトの機能や特徴については、ちょっと記事が古めですがWeb担当者フォーラムさんにいい記事がありますのでそちらをご覧ください。

企業で使えるオープンソースCMS一挙12種類解説

オープンソースCMSは世界でも開発が盛んですし、日本でも島根県CMSなどが登場するなど主流になってくるでしょう。また最近ではほとんどの作業をフロントエンドから行えたり、Ajaxを取り入れて感覚的な操作を実現するなど面白いソフトが沢山出てきている楽しみな分野でもあります。UsabilityやUIの視点からもWebサービスと同様に注目しておくべきではないでしょうか。オープンソースCMSのほとんどが、オンラインデモが利用出来、実際に管理画面などを見て触れられるものが多いのもメリットです。Open Source CMS Awardなどをチェックしてみると、受賞は出来なかったものの面白いものが沢山ありますよ。

Open Source CMS Award

Sunday, May 31, 2009

Google Task manager on Calender & Gmail

Gmailに実装されていたTask管理がやっとGoogleカレンダーにも実装されましたね。いつも通りまずは英語版からですので、日本語環境の方はまだ見えないかもしれませんが、Settingから言語を英語にすると左上にTaskというメニューが表示されます。


GmailのTaskは実装されたときから使おうと試みていたのですが、僕のGmailの使い方がもともとタスク管理型の使い方で、見たもの、不要なものはどんどんアーカイブして、Inboxには対応が必要なものだけが残るという使い方をしているので、Taskと利用方法が被ってしまいなかなか上手く使えてませんでした。あえて使っていたのは、対応までが結構長期に渡るもの(数ヶ月)だったり、アーカイブするけど、ちょっとリマインドとして残しておきたいものなどをTaskリストにアップしていました。そうすると、メールと紐づけられるのでメールを検索する手間が省けますし。



ただ、今回のようにカレンダーのタスクとメールが共有出来、紐づけられるとなると、タスクリストとして利便性がかなり上がってきそうです。
  • メールのUIからタスクをカレンダーに登録出来る
  • タスクリストをリストビューとカレンダービューで確認出来る
  • タスクとメールが紐づけられるため、タスクやカレンダーに詳細の記載が不要
  • イベントとタスクを別々に管理出来る
タスク管理には、これまでRemenber the milkなどとってもいいツールだなと思いながらもなかなか継続出来ませんでした。というのも、別ページを立ち上げるというのがどうしても面倒ですよね。 なのでGmailのタスクが出たときには期待大だったのですが、う〜ん微妙という感じだったので今回のカレンダーとの連携は嬉しいですね。あとは、タスクを時間指定出来たり、メールやPOPUPなどによるアラート機能が加わればより使えそうです。

Saturday, May 23, 2009

Cmmon Craft - Our products is Explanation



情報のデザインの仕方って様々ですが、Common Craftの説明ムービーはとっても好きです。出来れば自分が手がけたサイトの利用説明ムービーなんかを作ってもらいたいなぁなんて思うわけですが、wikiやTwitterのような一般化したものならともかく、日本のオリジナルサービスを作った場合、Common Craftの人達にそのサービスを理解してもらうように説明するのが大変なんじゃない?って同僚に突っ込まれました。。。確かにそうかも。英語しか通じないよね。

Common Craft

Thursday, May 14, 2009

Screen menu - Yahoo image search

Yahoo(US)の画像検索機能がちょっと前に変わり、検索結果をクリックした時の画面の画像が表示されているフレームが画面の半分を占めるぐらいに大きくなり画像が見やすくなりました。また、その画面上にその他の検索結果が複数表示されるので、検索結果ページに戻ることなく検索することも出来ます。Googleのimage検索はよく使いますが、画像が小さくて見づらいことや、毎回検索結果に戻って次の画像を選ぶという手間があるので上手く改善されているなという印象です。


ただ、今回注目したのはそちらではなく(まあ、ちょっと関係ありますが)、Yahooの画像検索のオプション検索機能の表示方法です。他のサイトでも増えてきていますが、最近の傾向として、その時に必要な機能を大きなスペースをアニメーションで展開して表示するというのが流行のようです。

僕自身はこのメニュー展開が個人的にとても好きです。これまでであれば、ドロップダウンメニューを使用したり、メニュー項目が多いと別ページへ遷移するというパターンでしたが、Ajaxなどが多用されるようになり、メニューの開閉がアニメーションし、必要な機能がその場で大きく表示されることで、ページ遷移が無く自分の位置を見失うことがありませんし、かつてのドロップダウンのようにちょっとマウスがずれるとメニューが消えたり、違うページに移動したりなんていう心配も無くなりました。以前書いたメガドロップダウンとユーザビリティ上の効果は同じようです。Yahoo(US)とGoogleのフィルタリング機能を使ってみるとYahooの方が使いやすいなと感じます。

また、大きく展開することで以下のようなメリットが考えられます。

  1. メニュー項目が一覧出来、比較して選択出来る
  2. ドロップダウン選択(google)からチェックボタン選択(Yahoo)へ変わることで、オプションが複数選択可能になる
  3. 文字入力が可能になる(Yahooの画像サイズ入力参照)




ただ、この展開メニューを利用するにあたり、メニューを展開させるきっかけとなるボタンやリンクをどう表現するかに注意が必要そうです。フィルターメニューのMore filtersというテキストリンクは分かりやすいのですが、Yahoo(US)の検索窓下の矢印がついたボタンはいい表現だと思うのですが、機能を知らない一般のユーザーが気づきそうにありません。まあ通常は検索窓へテキスト入力した際に展開する部分ですから、あまり目立っても駄目ですし、随分考えた結果なんだろうなという感じはします。

これまでの展開メニューで使われてきた右向きの三角が下向きになる(→が↓)ような標準化が出てくるでしょうか。僕はこのメニューの展開方法がスクリーン(プロジェクターなどを映すやつ)に似ているので、取っ手の様なボタン?が良さそうですが、それだとYahooと同じ感じですね。ぜひ次つくるサイトで使ってみたいなぁ。

Monday, May 11, 2009

Bar type menu

最近ソーシャルサービスで見られるようになったのがBarタイプのナビゲーションです。これまでのヘッダ位置のグローバルナビゲーションなどとの違いは明らかで、既存サイトへの付加機能としているため、既存サイトのデザインに影響することなく表示出来る方法として採用されています。

最近話題のサービスでBarメニューを採用しているのが、Google friend connect(GFC)のSoclial barと、Digg barです。
Digg barはURLの短縮やらでいろいろ問題になっていましたが、機能を実用的に上手くまとめた印象を持っています。面白いのはGoogle Friend Connectの変遷です。はじめに出たときはカラムに設置するタイプでしたが、よりソーシャルツールとしてサイトコンテンツとユーザを結びつけるためBarタイプへと進化しました。


ただ、これらのメニューはあくまで現サイトへの後付けの機能となるため、UIおよびUsabilityに問題が生じてしまうのも否めません。
まずはサイトとデザインが一体化しづらいため、ページの機能として操作するということに違和感があります。Diggの場合は、どちらかというとYahooツールバーやGoogleツールバーといったブラウザ機能に近い使い方だったりしますし、デザイン的にもサイト側というよりブラウザ側に属するようにみえるので比較的違和感がありませんが、GFCはサイトコンテンツに関連が強いにもかかわらず、デザイン的にも機能的にも違和感を感じてしまいます。
特にUsability的には、GFCはドロップダウン時にドロップダウンメニュー以外をクリックしても、ドロップダウンが閉じないなど、操作していても違和感があります。



今でもブラウザのプラグインや標準パッケージ的にYahooバーなどが追加されているものがあり、また、タブが主流になったことでブラウザのメニューエリア自体が かなり高さが増している状態なので、こういった機能でどんどんサイトの頭が重くなっていくのはちょっと考え物ですね。(GFCはフッタにもつけられますが)そういう意味で はGFCはヘッダがタブしかないClomeとの相性を考えて作られたのかもしれませんね。

ただ、これらのサービスが増えるに従い付加型でないサービスにもBarタイプのナビゲーションが使われ始めているようです。以前にも紹介したWordpressのBuddy pressがそうですね。今後もこのスタイルのナビゲーションは増えそうです。
ただ、どうせならMicrosoftのOfficeで採用されているリボン型メニューのいい点を取り入れてもっと幅を広げてしまいサイト内メニューを全て取り込むぐらいでもいいかもしれませんね。

Digg barの詳しい情報はこちらを参照ください。
ITメディア:Digg、参照URLを短縮できる「DiggBar」を公開

Google Friend Connectの参考サイトはこちらをどうぞ。
http://www.ossamples.com/freestyle/
http://www.ossamples.com/socialmussie/music.htm

Thursday, April 30, 2009

Good CSS Format gurdian.co.uk

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

gurdian.co.uk

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

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

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

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

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

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

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

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

Sunday, April 26, 2009

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?

Saturday, April 25, 2009

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

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

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

この記事の中でやっぱり驚きだったのは、「先輩社員の声」を見ている学生が少ないということ。僕の感覚ではこのコンテンツなんかは学生受けが良さそうだとすっかり思いこんでいたし、自分の就職活動時は、Webじゃないですがパンフレットの若手社員インタビューみたいなのをずいぶんと見た記憶があったので。しかもテストを行った学生のインタビューの内容が面白い。(以下引用です)
  • (今回のテストに関わらず)こういうコンテンツはほとんど見ない。「やらせ」のような気もするし……。セミナーに行けば、雰囲気で伝わる。
  • こういうことは、セミナーに行って肌で感じたい。むしろセミナーには、(先輩社員の声など知らずに)まっさらな状態で行きたい。
  • 大体が「なぜこの会社に入ったか」というような話になっているが、聞きたいのは、その人が入社してどんな経緯で現在の仕事をしているのかということ(例:最初は何の仕事をして、次にどこに異動して、何年目にリーダーになって、など)。
3つ目の意見は随分と冷静に見ているなという感じだけど、1つ目、2つ目は今どきっぽいなぁと(苦笑)。確かに最近の新卒コンテンツは良く出来過ぎていて、広告っぽく見えてしまうところも多いし。ただ、今回のイーエージェンシーさんの調査では5人の被験者だということと、おそらく都会の学生(?)が対象っぽいのでちょっとすれてたのかも(すいません、勝手な憶測で)しれないので、地方の学生へ対象を広げるとまた結果も変わりそうです。

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

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

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

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

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


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

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

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

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

Friday, April 24, 2009

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じゃないのか?

Thursday, April 23, 2009

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


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

Product Planner

Tuesday, April 21, 2009

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

Monday, April 20, 2009

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紹介記事

Sunday, April 19, 2009

Suggest Search Feature  検索候補提案機能

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


MOGの検索候補自体は結構いい感じなんですよ。検索候補が"Artist" "Album" "Track"それぞれにグルーピングされて分かりやすいんです。
で、何が惜しいかというと。
  1. リストが必然的に長くなるのでプルダウンにスライドバーがついちゃうので、Trackがファーストビューで見えないことが多い。
  2. 検索窓からカーソルの下でプルダウンリスト内に移動出来ない。
1はまあ仕方ないかなという感じだけど、2は結構いただけない。検索時はキーボード使ってますよね。そこからマウスに持ち替えるっていうのが面倒で。たったこれだけなのに随分とユーザビリティーが落ちてる気がします。

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


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

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

Saturday, April 18, 2009

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つは検索システムなんですよね。ここをちゃんとやっておけば本体の設計が甘くてもつぶしがきく・・・いかんいかん。ここもちゃんとやらないとね。
 
© 2009 OFF THE WALL. All Rights Reserved | Powered by Blogger
Design by psdvibe | Bloggerized By LawnyDesignz