はじめまして! IMJのコヤナギです。

今回は、わたしが参加している取り組みの1つ、ウェブサイト制作フロー改善プロジェクト “marble” についてご紹介したいと思います。

後戻り禁止! ウォーターフォール型フローの限界

わたしたちの現場では、数千ページ規模のウェブサイトをデザインするお仕事をいただく機会が多くあります。

大型のウェブサイトを扱う場合、ちょっとした手戻りよって生じた影響範囲が、プロジェクト成否に関わる大きさになる事があります。そのため、プロセスの節目節目を丁寧にクライアントと確認していき、FIX(確定)してから次の工程へ進む ウォーターフォール型の制作フローが主流でした。

  1. はじめに、Webディレクターが、パワーポイントやエクセルなどのツールでワイヤーフレームを作成します。
  2. ワイヤーフレームが確定すると、次はデザイナーが登場し、Photoshopなどを使ってデザインカンプを起こします。
  3. デザインが確定すると、マークアップエンジニアがそれを構造分解し、HTMLのひな型を作成します。
  4. HTMLのひな形が確定したら、数千ページ分のコンテンツを流し込んでいき、HTMLページの完成です。

この制作フローの歴史は長く、実績も多いのですが、なかなか昨今のウェブデザイン事情とマッチしないポイントが増えてきたようです。

よくあるトラブルには、例えば次のようなケースがあります。

  • クライアント担当者はワイヤーフレームの段階で社長に説明したいのだが、「これではわかりにくいよー!」と言ってなかなか見てくれない。実際に出来上がったHTMLで初めて見た社長からNGをもらった。
    はじめからやりなおし!
  • レスポンシブデザインのワイヤーフレームをパワーポイントで設計したが、実際に実装しようとしてみると不整合がおきてできなかった。
    はじめからやりなおし!
  • 完成したHTMLでユーザーテストしてみたら、意図したとおりに伝わるデザインになっていなかった。
    はじめからやりなおし!

原則として工程の後戻りをしないウォーターフォール型フローでは、なかなか避けるのが難しい問題です。

この問題を解決しようという取り組みが、ウェブサイト制作フロー改善プロジェクト “marble” です。

インブラウザデザインを実践する

解決策の1つのアプローチとして、インブラウザデザインがあります。

インブラウザデザインとは、ブラウザの中で直接デザイン作業を行う手法のことです。従来のように、ワイヤーフレームやデザインカンプのような中間成果物を経ず、直接コーディングを通してデザインします。

いきなりホンモノのHTMLでデザインするので、レスポンシブデザインのような、デバイスの状態によって表示が変化するようなデザインも不整合を起こさず進めることができます。プロジェクトの序盤から、実際に近い形でブラウザやスマートフォンの実機で操作できるので、クライアント担当者も上司に見てもらいやすくなるでしょう。制作途中のどの段階でも、ユーザーテストを実施することもできそうです。

とっても画期的ですね!

たちはだかる “分業化” の壁

しかし、インブラウザデザインには問題もあります。

1人で情報設計ができて、ビジュアルデザインもできて、かつコーディングもできる人でなければ成立しないのです。

昨今、ウェブデザインのノウハウはとても複雑です。10年前のウェブとは大きく組成が変わりました。

スキルは細分化され、どんどん分業が進んでいきました。 現在では、ウェブデザインの一部始終をすべてカバーできる人は、プロフェッショナルの中にさえほとんどいません。 フルスタック人材(なんでもこなせる万能人材)至上主義のような向きもありますが、実際はそのような人は極めて希少で、特殊ケースです。

このように、スキルが細分化されている条件下で、はたしてインブラウザデザインは実践できるのでしょうか?

ウェブデザインのためのツールを使えばよいのでは?

一次アウトプットとなるワイヤーフレームの制作には、パワーポイントやエクセルのようなツールが使われています。

  • この、パワーポイントというUIが、現在のウェブデザインの変化に適応できていないのではないか。
  • このUIを置き換えられたなら、ウェブデザインの新しいスタイルが見いだせるのではないか。
  • 直接ブラウザ上でデザインすることだってできるのではないか。

パワーポイントをディスっているわけではありません。そもそもパワーポイントは、プレゼンテーションツールなのです。ウェブデザインツールではないのです。 プレゼンテーションツールでウェブデザインをしていることにムリがあったのです。

であれば、パワーポイントの代わりとなる、ウェブデザインのために設計されたツールを使えば、新しい制作フローが見えてくるのではないか?と、考えました。

早速、CMSやプロトタイピング系のツールを中心に、さまざまなツールを試してみました。

ですが、簡単だけど機能が不十分だったり、逆に高機能すぎて使いづらかったり、なかなか手になじむツールが見つかりません。数十ページのサイトを作るには便利だけど、数千ページを作るにはなかなかツラそうだ、ということも重要なポイントでした。数千ページのサイトを扱えることは、必須要件です。

結局、「帯に短し襷に長し」私たちの仕事にちょうどいいツールは見つけられませんでした。
探しても見つからない…それなら、自分たちで作ってしまえばいいじゃないか!

ということで、私たちは、私たちの仕事に“ぴったりマッチ”する、私たちのためのツールを開発し、実際の制作フローに活かすプロジェクト“marble”をスタートしたのでした。

まとめ

  • 大型ウェブサイトの制作に、ウォーターフォール型の制作フローはマッチしなくなってきた。
  • アプローチの1つとして、インブラウザデザインがあるが、分業体制でスキルが細分化されていると導入するのが難しい。
  • ワイヤーフレーム制作のツールのUIデザインを改善したら、インブラウザデザインは実践できるのではないか?
  • ちょうどいいツールが見つからない! 自らの手で開発することを決意。

この取り組みはまだ始まったばかり。はたしてうまく行くのでしょうか?

この続きは……また別の機会に!