これは特にウォーターフォールモデルで開発する際に、いつでもデザインを考えられるようにしようというもの。「要件定義」「設計」「実装」「テスト」のいずれかの段階で、1度考えるだけでは足りず、2度、3度考えるだけでもまだ足りない。

「いつ、どの段階においても、デザインを考える余地を作らなければならない」と上野氏はいう。

一方、1ページに情報をまとめ、ページ内リンクで誘導した場合の行動は図2のようになりました。データを一度に読み込んでいるので毎回ロードするストレスが無く、全てのコンテンツに目を通す確率が上がりました。

携帯サイト閲覧中のユーザーは、リンク先が別ページであるか同ページであるかは気に留めていません。よって、長いページでユーザーをナビゲートするには、ページ内リンクが有用です。

また、これは都市圏限定ですが、1ページの情報が多いことについて、「地下鉄に乗っているときでも、駅で読み込んでおけば、駅と駅の間でたくさん読める」と、ロード間隔の長さをメリットを挙げるユーザーもいます。

サイト(またはカテゴリ)で伝えたい情報やユーザーを導きたいゴールによって、ページを分割するか1ページにまとめるかの判断は異なりますが、ターゲットユーザーが「携帯=PCの代替」ユーザーであれば、今回ご紹介した特徴、「ロードのストレスが高い」「ページ内リンクでも気にしない」は考慮に入れておくと良いでしょう。

７つのナビゲーション
一般的なウェブサイト内のナビゲーションを７つに類型化しました。
これらのナビゲーションの役目をそれぞれ定義することで、サイトの中で一貫性があるナビゲーションルールを定義することができます。
この内容は2006年のIAサミット、2002年のヒューマンインターフェイス学会で紹介されました。

サイトを作ったら試してみたいのがFive Second Testだ。

このサイトではあなたが作ったサイトのスクリーンショットをアップするだけで、簡単なUIに関するテストを作ることができる。

テストを受ける人はアップされた画像を5秒間だけ見せられて、そのあとに何を覚えていたかを書かされる、という仕組みだ。

このテストを実施することで、あなたのデザインで何が印象に残るか、もしくは残らないかを知ることができるのだ。

自分が意図したとおりにユーザーに情報が伝わっているか、きちんと確かめるのは大事だ。こうしたテストはお手軽でいいかもしれないですな。

jQueryでかっこいいUIを実装したい。

そんなときにおすすめなのが、『10 useful jQuery plugins』。jQueryの便利なプラグイン10選だ。

以下にご紹介。

・jQuery UI
Webアプリをデスクトップアプリのように動作させる。タブメニューやスプリットペイン、ドラッグできるフォトマネジャーなど

・Mark-It-Up
テキストエリアをマークアップエディタに変えてくれる

・jQuery cookie plugin
クッキーを簡単にセット、削除できる

・lightbox for jQuery
jQuery用のlightbox

・jQuery Corner Plugin
jQueryで角丸を作成

・jTip
クールなツールチッププラグイン

・LavaLamp
CSSメニューにスムーズなスライドエフェクトを追加

・Superfish
jQueryのアニメーションを使ったアクセシビリティの高いメニュー

・jQuery easing plugin
jQueryによるアニメーションのイージング

・jCarousel
jQueryによるcarousel（スライドする画像ギャラリー）

それぞれデモがついていてわかりやすい。

デモは↓から。

» 10 useful jQuery plugins

jQueryの便利なプラグイン、チェックしてぜひ使ってみてはいかがだろうか

これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。

Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。

ドラッグアンドドロップでモックアップを作成できる

そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。

今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。

個人的にはモックアップの作成にBalsamiq Mockupsを使っている。これは手書き風のポップな画面を作るのにはぴったりだ。そしてPencilはちょっと正確な画面を作るのに適している。何よりオープンソースであり、無償だ（Balsamiq Mockupsは有償）。

iPhone の特質を最大限に引き出すデザイン

iPhone は、これまでのPCや携帯電話とは違う全く新しいユーザーエクスペリエンスをユーザーに与えます。この新しいプラットフォームに最適化されたユーザーインターフェースを構築するには、機能要件の大胆な再定義や、画面構成要素の慎重な取捨選択が必要です。ソシオメディアは、タッチパネル向けアプリケーション、モバイル向けアプリケーション、RIA（Flex, Curl…）など様々なプラットフォーム向けに画面仕様策定やユーザーインターフェース設計を行ってきました。そこで蓄積されたノウハウをもとに、iPhone の使いやすさと斬新さを最大限に活かしたデザインを提案します。

「デザイン原則」を適用しハイクオリティなユーザーインターフェースをデザイン

ソシオメディアでは、2001年の創業以来260を超えるインターネットサービス、業務アプリケーション、企業ウェブサイト、その他各種インタラクティブメディアのユーザビリティ評価改善コンサルティングおよびユーザーインターフェース設計を行ってきました。その実績から、ユーザーインターフェースの基礎的な設計指針である「デザイン原則」を独自に策定しています。このデザイン原則を適用することで、論理的で利便性の高いハイクオリティなユーザーインターフェースを実現できます。

「デザインパターン」を適用し効率的にデザイン

ソシオメディアでは、ユーザーインターフェース設計の様々なベストプラクティスを「デザインパターン」として集約しています。例えば iPhone 向けには、「小さなスクリーンに最適なレイアウト」「モバイル利用に最適な機能制限」「タッチ操作に最適なボタンデザイン」といったパターンを研究しています（未公開）。これらのデザインパターンを適用することにより、設計効率と利用効率の両者を最大化することが可能です。

対象システム
Apple iPhone/ iPod Touch 向け各種アプリケーション

サービスご利用例
新規に iPhone 向けウェブアプリケーションを開発する際のUI設計
既存PC向けウェブアプリケーションを iPhone に対応させる際のUI設計
iPhone ネイティブアプリケーションのUI設計
既存ウェブサイトの iPhone 対応
上記すべてにおけるデザインコンサルティングおよびUI要件策定

参考資料
＠IT 記事「iPhone向けWebアプリを作ろう」（執筆：ソシオメディア 上野）
アップル - iPhone

式会社セカンドファクトリーのエクスペリエンス・デザイナー、井原亮二さん。明治大学理工学部電気工学科出身で「とにかく電化製品が好き」という彼は、派遣スタッフとして電機メーカーのデザイナーを5年間経験したのち、29歳のときにセカンドファクトリーに入社する。アプリケーション開発で注目を浴びる「エクスペリエンス・デザイナー」とは……？　自分の目指す方向につねに前向きな井原さんに、今までの軌跡や現在の仕事についてお伺いしました。