Webサイト制作フローに、a-blog cms とプロトタイプを取り入れ、クライアントのUXを高めよう！

a-blog cms Advent Calendar 2013の12/14を担当いたします、ミズノケイスケと申しますm(._.)m

Web制作に、a-blog cms（またはその他のCMS）とプロトタイプの考え方を取り入れよう、というのはすでに珍しくない話かと思いますが、知らない方もいると思ったので書いてみます。特にWebディレクターさん、小規模・少人数でサイト制作をしているかた！この手法は取り入れなければ損ですよ〜。

タイトル釣りでスミマセンのお詫び

「クライアントのUXを高めよう！」なんて書いちゃいました。「UX」を間違って使った例ですが、ちょっと「釣り」というか、確信犯（これも厳密には誤用ですが）なタイトルです（汗）つまり、Webサイト制作に「プロトタイプ」を導入すると、効率だけでなく「クライアントに対して価値ある体験」を提供できる。ということが言いたいのでした。

さらに、「直感的」とか「わかりやすい」という「一時的UX」（誤用）だけでなく、Webサイトの成果にもつながり、今後のクライアントの関係もよくなるという「累積的UX」（誤用）も提供できるというメリットがあります。はい。

思えば3年前、ピカピカのWebディレクション1年生

2010年の8月末だから、3年も前だ！マークアップエンジニアをしていた僕は、このころ初ディレクションを経験しました。そしてその時、こんなエントリーを書いています。

HCD × a-blog cms で、コンテンツから作るウェブサイトを考えてみた | 頭ん中 | 瞬間と永遠.com

実践も検証もしていない分けですから、今からすれば粗削りなところだらけですが、基本的な思想はそのまま、ああ、脈々と受け継がれているんだなあ〜、と感じました。

現在のミズノのフロー

さて本題です。「a-blog cms × プロトタイプ」を具体的にどう実践しているか？

ここで、リスト番号をつけて「1、2、3、4・・・・」と書こうとして、あれ・・？どういう順番でやっているんだっけ？？

そうなんです！順番通り（それこそウォーターフォール）になっていないからこそのプロトタイプなのですね！（と、自分で納得。。）いわゆる「陶芸的」「こね上げて作り上げる」この表現をここのところ使うのですが、行ったり来たり、こねては削り、時に壊し。を繰り返して作っているようです。

これでは抽象的すぎるので、リスト番号をつけることにチャレンジしてみます。。

1. ヒアリングにより、コンセプト的なこととか要件定義的なことをまとめる。（まとめる→営業担当に確認→クライアントに確認→修正・・・）
2. サイトの企画的なこと。情報設計やサイトマップ作成。ペーパープロトタイプ作成。必要な機能に想いを巡らす。（ここでも小出しにして評価をもらう）
3. a-blog cms をインストールし、既存のテーマでサイト作成。情報を整理しカテゴリやエントリー追加→原稿をざっくり入れていく。
4. a-blog cms の機能的な部分をカスタマイズ。（HTMLをいじってモジュールやカスタムフィールドなどを追加）
5. 機能やコンテンツ的にOKが出たプロトタイプを元に、ワイヤーフレーム作成→ビジュアルデザイン。
6. プロトタイプをCSSで装飾して完成！

おおざっぱにまとめれば、上記のようになっているはずです。

その他、ポイントは以下のもの。

• 行程は行ったり来たりを繰り返す（必ずしも一方通行ではない）
• クライアントへは小出しに見ていただき評価をもらう（できればターゲットユーザーの評価も欲しいなあ）

評判の程は？

クライアントの声や、所感を書いてみます。

「イメージしやすい、わかりやすい」という声もあれば、「イメージがまったく沸かない」という方もいる。クライアントの性質によるものと思われます。（論理派 or 感覚派など）

そうそう忘れるところでした、表題に「クライアントのUX」（誤用）と書いたように、「楽しい！」と言っていただけることが多いです。その理由としては「参加できる」点にあるのではないでしょうか？CMSをインストールした地点から触ることができるのが、このフローのメリットです。

ビジュアルとコンテンツを切り離すことができる。最初は「かっこいいデザインにしたい！」と言っている方でも、装飾のないプロトタイプで進めることにより、「ああ、大事なのは見た目じゃなくて内容なんだ」って、思っていただける。（場合もある^^;）

その他、皆さんの参考エントリー

プロトタイプ関連のエントリーを集めたので、ご参考にしてください。

• ABC Wowds 2013 / Webデザイナーのためのフレームワーク a-blog cms 入門　※スライドの46ページから
• CSS Nite in OSAKA, Vol.38「CMSをプロトタイプとして使う、ワークフローのすすめ」 - SSSSLIDE
• 長谷川恭久さんの「プロトタイピングから始めよう」ワークショップに参加しました | イベント | ひびの備忘録
• 紙プロトタイピングから始まる問題解決への議論 : could

以上、ぜひお試し下さい(､`)ﾉ

---