瞬間と永遠.com 自分を探し自分を知るブログ@愛知県豊田市・名古屋市 > つたえる > Webサイト制作フローに、a-blog cms とプロトタイプを取り入れ、クライアントのUXを高めよう!

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をインストールした地点から触ることができるのが、このフローのメリットです。

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

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

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

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


--

※この記事を書いた人、ミズノケイスケに興味を持っていただけましたら、リンクツリーをどうぞ。

この記事に関連する記事

コメント

投稿
名前
 
メールアドレス
 
URL
 
タイトル
コメント
パスワード
Cookieに保存

瞬間と永遠.com 自分を探し自分を知るブログ@愛知県豊田市・名古屋市 > つたえる > Webサイト制作フローに、a-blog cms とプロトタイプを取り入れ、クライアントのUXを高めよう!

RSS 購読
リンク
  • track feed 瞬間と永遠.com

↑PAGE TOP