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

 
© 2009 OFF THE WALL. All Rights Reserved | Powered by Blogger
Design by psdvibe | Bloggerized By LawnyDesignz