Webソフトウエアのデザイン

ほかのサイトを研究する

　今回は、Webサイトのデザインをすることに対して、Webソフトウエアのデザインと開発することについて紹介します。過去約5年にわたり、ソフトウエアの提供をオンラインへ移行するという傾向が強くなってきました。これらのサービス範囲は、Eメールから、ブログや、写真の保存、管理にまで及びます。これらのWebアプリケーションと典型的なWebサイトとの主な違いの1つは、アプリケーションとユーザー間のインタラクションの種類が豊富であることです。

　iKnow!（http://www.iknow.co.jp/）のWebアプリケーションは、いくつかの一般的なWebサービスと、より特有のWebアプリケーションを組み合わせて作っています。私たちはサービスをデザインする時、いくつかのほかのサイトでのサービスへの取り組み方を見て、どんな改善ができるかを考え、そこから、より私たちのアプリケーションに見合うものに仕上げてきました。iKnow!のコアは、SNS（ソーシャル・ネットワーキング・サービス）を精巧な学習アプリケーションを軸にして実装されているために、Facebook（http://ja.facebook.com/）やmixi（http://mixi.jp/）など、ほかのSNSと多くの共通点があります。

　私たちはこれらのアプリケーションがメッセージング、ブログ、イメージギャラリー、通知、ステータス管理などのサービスをどのように扱っているかを検証しました。これらは、一般的なサービスです。それからiKnow!アプリケーション特有のサービスである、個人に合わせた学習計画や、マイリストを使った学習コンテンツの作成などを実装しました。

　メッセージングサービスは、個人ごとにメッセージを整理するFacebookのような対話形式を好みました。マイページ上の通知や、新しいアクティビティは、アクティビティの通知をカテゴリーエリアで整理をするmixiが提供するようなアプローチを選びました。

UI・UXワイヤーフレーム

　Webアプリケーションをデザインする時に、使うべきツールの1つは、クリックすることができるワイヤーフレームです。ワイヤーフレームは、ダイヤグラムの中で、迅速にユーザーインターフェースを作成します。ワイヤーフレームの良い点は、色やメッセージのようなデザイン的懸念を脇に置いて、配置と階層だけを考えさせてくれるということです。

　よくあることですが、ユーザーインターフェースとレイアウトと同時に色とデザインを見ると、色とデザインに対する感情的な反応により、判断が鈍ります。このワイヤーフレームにより、それぞれの関連する素材のサイズや位置のような低いレベルの問題に焦点を当てることができます。

　タスクを完了させることを要求するインタラクションの流れをデザインする時は、ワイヤーフレームをもう一歩先に進んだ使い方、つまりクリック可能にすることが役に立ちます。これを達成するには、複数の方法があります。もし、XHTMLやCSSを巧みに使えるのであれば、ノートパッドや、Webブラウザを使うくらい簡単に作ることができます。

　もう1つの方法は、手書きの図をスキャンしたり、Photoshopやそのほかのイメージ作成ソフトウエアからエクスポートして、イメージマップを使って、それらをクリック可能にします。

　このクリック可能なワイヤーフレームは、機能を実装するまで明確にならない多くの問題を査定することができます。iKnow!の（UGC：マイリストのメイン機能）であるリストビルダーのインターフェースに、各ユーザーの目的に合わせた学習リストを作成する時に使われるインタラクションの流れを理解するために、クリック可能なワイヤーフレームを使いました。

　ユーザーにとって、最も大切なタスクは、マイリストの作成です。それは、アイテム（用語）検索をしてマイリストに追加をしていくことです。ユーザーの次のタスクは、アイテムにひも付ける例文の管理です。当初のクリック可能なワイヤーフレームは、いくつかの問題点を明らかにしたので、ライトボックスをこのインターフェースに使うことにしました。