この記事は「PowerPoint を使ったプロトタイピング」の続きにあたります。 ページベースの Webサイトを制作するのであれば、多くの方が利用出来るということも含めて PowerPoint や Keynote といったプレゼンテーションアプリが最適だといえます。しかし、Ajax や Flash を利用したページを移動することなくデータにアクセスするサイトや Webアプリケーション、ショッピングサイトのような会員/非会員によって異なるコンテンツやフォームを必要とするサービスでは、ページベースで Webサイトを考えるのは困難です。 ユーザーテストをする際も PowerPoint や Keynote では難しい場合もあるでしょう。共に高度な描写が可能になり見た目の質は高くなりましたが、クリックしたときの動作や、「戻る」「進む」のようなブラウザを介した操作、そしてマウスやキーボードを使った操作までテストすることが出来ません。ページベースでプロトタイプを作るのでインタラクションも平面的になってしまい、テストをしながらプロトタイプを改善させるには少し物足りない場合も出て来るでしょう。 以前、「よりリッチなWebサイトプロトタイピング」で紹介した Axure はひとつの解といえるでしょう。Ajax のようなダイナミックなインタラクションをプロトタイプに付け加えることが出来るだけでなく、サイトマップやフローチャートとプロトタイプと連動させて作ることが出来ます。作成したプロトタイプはブラウザ上で観覧出来るのでユーザーテストも難しくありません。 Axure よりハイエンドなプロトタイピングアプリケーションを探している方は iRise は必見です。最大の特徴はワイヤーフレーム、ユーザーテスト、サイトの評価といった UX デザインに必要なことがすべてひとつのパッケージになっているところでしょう。Axure にはないプロトタイプに使うウィジェットの共有や、リアルタイムでプロトタイプを修正/変更することが可能です。サーバーサイドにプロトタイプやレポートがアップロードされているので、メールをつかった無駄なやりとりをせずに情報共有が可能ですし、ユーザーテストもリモートで行うことが出来ます。iRise の唯一の『弱点』は最も安いプランでも 5,000ドルするところでしょうか（Axure は 600ドル）。 プロトタイプを作るツールを決めるとき、誰に何を作るかに注目すると良いでしょう。Webアプリケーション開発でも、プロトタイプに触れる方が同僚やアプリケーションに関する深い理解がある方であれば PowerPoint でも十分です。また、何度も使えるライブラリを用意出来たり、文書化するときに簡単にデータを書き出し出来るかも重要な点になってくるでしょう。プロトタイプを作るのは一見『手間』のように見えますが、ビジュアルやHTMLのコーディングを終えてから変更するコストを考えると有効な投資といえます。

この記事は「タグの役割を考えた見せ方」の続きにあたります。 とても重要な視点だと思うので紹介します。 rssky.tblr*より ここら辺の事をもう一回徹底的に考え直してみることが、実は「blogの次」に繋がっていくのだと思う。ここにプラスして小川宏高氏のラディカルなまでの正論と、あとやっぱトロット夫妻のもうそれはそれは絵に描いたようなリベラル理想主義の部分をプラスして。 　ヤスヒサさんに欠落しているのは「マインドマッピングツール」としてblogを見る視点、かな。（立ち位置をはっきりさせるためあえて除外してるんだと思うのだけど）　あるいは”個人のマインドマッピング”がサイト、というかコンテンツとして成り立ちうるか、とか。 　ツリー構造のカテゴリーと横断的連接のタグの相関関係を明確に見せる手法とセマンティック検索技術がうまく結びついた瞬間に”次のかたち”はそこに立ち現れるように思える。 実に鋭い意見だと思います。ここ２回ほど続いたエントリーでは関連タグを表示させるとか必要な情報を見せるといったことを中心に書いたこともあり「マインドマップ的」に見られるのは当然だと思います。そして僕自身もそういった部分だけにフォーカスしないように気をつけないといけないなと考えています。今回、カテゴリやタグといったどちらかというとシステマチックな部分がフォーカスしたこともあったかもしれませんが、当然のことながら、それだけだけでは良い体験には繋がらないと思います。 論理的な部分と視覚要素と感覚によって作り出す世界観といった感覚的な部分をいかに組み合わせてサイトを形にしていくのかが最大の難関なのではないかと思っています。ここにエントリーを書いて行く際もその部分に気をつけなければいけないなと改めて感じました。 こうした建設的な指摘をしてくださった rssky さんに感謝。こういうのがあるから Web でやることに意味があると思っています。

この記事は「カテゴリとタグを上手に使い分ける」の続きにあたります。 カテゴリに関して迷っている方は少なくないみたいですね。前回、提案したブログエントリーをタイプ別に分類する提案をしましたが、それに対して様々な意見や感想が出ているので、ここで共有しておこうと思います。 lilacさん(カテゴリは) ふつうにいらないんじゃね？みたいな。明確に必要、という答えが出せないんですよね・・・ 他の方も書いていらっしゃいましたが、機能が提供されているからといって使わなければならないというわけではないと思います。無理にいろいろ使おうとするとかえって複雑化してしまうので、そういった場合は思い切って省くことも重要です。これはデザインするときには重要な考え方のひとつでしょう。 今回のようにカテゴリをタイプと見なして使うのは自分のサイトにはフィットしているように思えたから採用しましたが、ブログによってはタグだけで管理したほうが治まりが良いのもあるような気がします。 タグの扱い方いろいろ 前回のエントリーではカテゴリにフォーカスした話題でしたが、タグはどうでしょう。役割が明確になってきたので、コンテンツに関わるキーワードを記入していけば良いわけですが、多くなって来るとどうページに表示させて良いか迷うところです。Tag Cloud の見せ方はいろいろあり、中には参考になるのも幾つかあります。情報を視覚的に見せるという意味ではタグ専用のページを設けて Tag Cloud にするのは有効な手段だと思います。しかし、これをサイドバーに掲載したとしても読み難いですし、多くなって来たときの問題解決にはならないでしょう。 そもそも Tag Cloud のようにしてすべて（もしくはほとんどの）タグをすべてのページに掲載したほうが良いのかという疑問が残ります。Webサイトにおける基本３要素の中のひとつである『体験』を向上させるために、いかにメインコンテンツと関係のある情報を明示するかという課題があります。つまり、すべてのタグを掲載するのではなく、コンテンツの関連タグやサイトで人気のタグ又はお勧めのタグを紹介したほうが良いわけです。 greenhug のトップページには「greenhug は◯◯について書いています」という文章があります。この部分は greenhug で取り上げている記事のキーワードのトップ5が自動生成されています。よく取り上げているキーワードは greenhug の内容を反映しているものでしょうし、どのようなサイトなのかを伝える際には有効な手段だと思います。こうしたページの目的に合ったものをピックアップしてタグを掲載する方法もあります。 カテゴリとタグの役割が明確になったのは良いことですが、だからこそ単にリスト表示で OK にはいかなくなってくるわけです。 hilokiさん 記事の振り返りや学ぶためにまとめて見たいときには、同一テーマの記事として記事へのリンクがリスト化されているのが好ましいのではないか。 コメントで指摘されていますが、「Follow Up」はタイプとは言い難いのではないかというところ。確かに他に比べると少し分かり難いタイプといえますし、単体で存在していないエントリーという意味で特殊な存在といえます。個人的にこれはタイプと見なしているからこそ使っていますが、扱いには気をつけないといけないなと思いました。 今のところ「Follow Up」になっている記事は「前編」「後編」といった具合に２つのパートに分かれてるだけですが、それ以上続く場合も出て来るでしょうし、ミニシリーズをまとめて読みたいというケースも出て来るでしょう。こうした課題を解決するためにも関連タグのみを掲載するのはひとつの解決策になります。また、ミニシリーズ用にひとつのタグを用意するのも手段でしょうね。 WordPress 以外のオプションで考えると、Drupal にある Book という機能が魅力的です。Web マガジンを作るのに最適な機能が出そろっている CMS で、Book機能はミニシリーズを目次のようにまとめることが出来ます。これだと余計にタグを増やすこともないから良いですね。 前回書いたタイプ別にすることによって発生する課題の中に「タイプに応じて異なるレイアウト (情報配置) の提供も考慮するべき」と書きましたが、これはタグの見せ方にも同様のことがいえるでしょう。例えば「Links」タイプのように、エントリーに明確なテーマがない場合は、もしかすると Tag Cloud のようなものを掲載して、他のページも見てもらうように促したほうが良いのかもしれません。タイプとタグの関連性を見極めることでタグの見せ方のヒントも見えて来るかもしれませんね。

この記事は「サイトの方向性を考える (前編)」の続きにあたります。 これからのWebサイトを構築するときにおいて、サイト訪問者の「インタラクション」「体験」「関係」を無視して作ることが出来なくなってきています。サイトの目的や性質を考えてデザインするのではなく、サイトの目的や性質を反映する「インタラクション」「体験」「関係」を考えてデザインするだけでも完成したものは従来と違ったものになるでしょう。しかし、これら3要素を考えて構築作業を開始すればいいといえば、そうでもありません。 例えば、３要素を補う技術というものは既にたくさん出回っており、Web 2.0 と呼ばれるサービスがそのひとつといえます。サービスが提供するウィジェットや API を利用して３要素にあたる部分を補うことは出来ますが、ただ導入しただけではバランスの悪いものであったりしまし、それぞれの要素に負の影響を及ぼすことも考えられます。そこでコアとなるこれら３要素を繋ぎ合わせる重要な『部品』が必要になってきます。 視覚要素と感覚によって作り出す世界観 視覚要素から言語が生まれる 「インタラクション」「体験」「関係」の3要素を繋ぎ合わせるのは、視覚要素の役割といえるかもしれません。つまりビジュアルのことですね。統一した視覚要素があることで、サイトの全体の体験がひとつのまとまった世界として成り立ちます。逆に統一された視覚要素がないと、パッチワークのようなサイトになってしまいます。 しかし、ただ単に『かっこいい』見た目を作れば良いわけではないです。目は五感の中で最も刺激を受ける感覚です。触感を作り出せない Web だと余計視覚要素の存在は重要になってくるでしょう。刺激が強い部分だからこそ注意深く扱う必要があります。「インタラクション」「体験」「関係」の3要素にはどういったコンセプトがあるでしょうか。サイトの目的にはどういったメッセージが隠れているでしょうか。それらを汲み取った『言語』を見つけ出し、ビジュアルに反映しなくてはいけません。そのビジュアルを見つけ出すことではじめて３つの要素が繋ぎあわさると思います。 自分が作っているサイトにはどういった『言語』があると思いますか。それはビジュアルで表すとどういったものだと思いますか。 説明がつかないものを作り出す ３要素を繋ぎ合わせるのは視覚要素の役目ですが、それぞれの要素を強調したり、調和させるのは感情・感覚が重要になってきます。そして視覚要素と感覚が合わさることではじめてサイトとしての世界観が生まれると思います。しかし、ここで課題になってくるのが感覚や感情といった具体的なハウツーがないものをどうやって作り出すかという部分だと思います。 ひとつ考えられるのは、いかに3要素を作り込めるかにかかっているかもしれません。インタラクションデザインのセミナーでも話しましたが、よりよいインタラクションを作るにはビジュアル以外の作り込みが重要になってきます。もしかするとビジュアルが短期的なインパクトを与えるもので、感覚や感情が長期的なインパクトをもつものといえるかもしれません。３要素のどういった部分を作り込んで感情や感覚を作り出すのか。ビジュアルからどういった感情や感覚をもってもらうのかという部分も重要でしょうね。 これらの要素や部品をどのように組み合わせてひとつの世界として表現出来るのかが Webデザインなのかもしれません。 これから本番ですね Web という媒体は他と違うところは幾つかありますが、特に違うのが他の媒体に比べてより近い位置に利用者がいることです。つまり、顔がみえる相手と直接的・間接的に対話をすることが出来るわけです。ページビューをはじめとした数値データは参考にはなりますし、チーム内での意識共有したり説得材料として有効な資料ですが、せっかく Web という媒体を使ったデザインなわけですから、利用者を参加してもらわないともったいない。 だからこのプロセスがどうなるのか楽しみだったりもしますね。

この記事は「オープン Web デザインを始めます」の続きにあたります。 コメント、Twitter、ソーシャルブックマークなどを通して幾つかメッセージをいただきました。どういうものを目指しているのかを以前の記事で説明されていない部分があったと思いますので、コメントに応えながら説明していきたいと思います。 これはオープンソースということ？ 「オープン Web デザイン」というフレーズを聞いて、オープンソースを連想された方は少なくないと思います。そう考えるとソースを公開してみんなで作るという感じになりそうな予感がしますね。 DocSeriさんのコメントWikiのような、何らかの無認証編集可能なシステムを利用して自由にCSSを編集してもらって切り替え表示させるというのはどうか。 こうしたオープンソース的なマークアップは結構おもしろそうです。Wikiではないもので、こういったことが可能なシステムってあるのでしょうか？WordPress でも権限を工夫すればいけるかもしれませんが・・・。実際、僕より CSS や HTML に長けている方は山ほどいますし、そういった方がマークアップしたほうがサイトの質も上がりそうです。これはこれで考えておきたいトピックです。 僕が考える「オープン Web デザイン」というのは、どうつくるかではなく、どう使われるかを考えることをオープンな形でやってみたらどうなるだろうという模索です。デザイナーによる提案や、Webや書籍に掲載されているセオリーやメソッドでは実現出来ないものは多いです。そこで少人数で考えるよりこのサイトにアクセスしている様々な分野の専門家に問いかけたほうがリアルで直接的なものになるような気がします。 ここでいう『専門家』は別に特別な資格をもっている人たちのみを指しているわけではありません。Webを利用し、このサイトにアクセスしているというこの事実だけでも十分専門家だと思います。ひとつのデザインでも様々な意見が出て来たり感じるものも異なります。それがどういったものかが知りたいです。たぶんそれは読んでいるあなたも同じでしょう。 2カラムと3カラムレイアウトのどちらが良いですかというのを投票して決める・・・といったプロセスではなく、何が必要とされ何が質を高めるといったところを話せれば良いなと感じています。 プロトタイプのような Web サイトを中心にして、なるべく開いた形で対話をしながら模索して行くのが、僕がいう「オープン Web デザイン」です。 このプロセスのアウトプットは何？ 正直なところ目に見える質の高いアウトプットが出るのかが心配なところもあります。もしかすると「オープン Web デザイン」は無理だと結論するかもしれませんし、自分の運用の仕方によってそうなってしまうこともあるでしょう。 ただ、理想を言うのであれば、この Web サイトがプロセスを通して新しいものへ変化していって欲しいですし、仕事にも使えそうなケーススタディにしたいと考えています。個人的に今の Webデザインプロセスや重点が置かれているところに疑問を感じているので、それに対する解のひとつがこれになればなと。 lilacさんのコメントアウトプットとしてはテーマ、という形になるのでしょうか？ WordPress には「テーマ」と呼ばれるデザインテンプレートがあり、複数のテーマの切り替えも簡単に行うことが出来ます。実際の作業はオリジナルのテーマの作成、カスタマイズになるわけですが、作業に関する解説が入るのは後の話になりそうです。クオリティが高くないものをとりあえず作ってみて、どうなるかを検証するといったことはあると思います。プロセスの前半は主に作業に入る前に何を考えて取り組んでいるのかを紹介したり提案するといったところが中心になると思います。 ただ単にあなたに意見を聞いて「ありがとうございました」では、こちらとして申し訳ないですし、あなたの仕事の参考資料にしてもらいたいという思いがあります。当然、Webには情報を残して行きますが、最終的には PDF の資料にして、それぞれが使えるような状態にしたいとは思っています。もちろん、随分先の話になりそうですが。 どうなるか分からないところが多いですが、よろしくお願いします。 PS: openwebdesignは進めて行きますが、今まで書いていたような『いつもの』記事も書いていきますのでご安心を。