コンテンツからはじまる新しいWebワークフロー

4月27日にCSS Nite in AOMORI Vol.7 が開催されました。毎年、来青させていただいていますが、CSS Nite として参加するのは今回で 2 回目になります。今回は コンテンツからはじまる新しい Web ワークフロー と名付けて、コンテンツの設計をしっかりしないと、モバイルをはじめとした他デバイスに向けて Web サイト制作をしても意味ないよというメッセージを込めた講演を行いました。そして、コンテンツを基軸にして画面構成やビジュアルデザインを組み立てていく新しいワークフローの提案も行いました。

今までこのサイトでも何度かプロトタイプとコンテンツの話をしてきました。一見、まったく違う分野の話をしているように見えますが、この 2 つは密接な関係をもつ重要なキーワードです。それがなぜ繋がっているのかを解説するにも絶好の機会でした。しかし、40 分という短い講義の中では説明しきれなかったことが多々あるので、補足情報も含めて紹介していきます。

ツールやテクニックの変化では足りない

この講演で静止画のようなデザインカンプはコミュニケーションの負荷が高過ぎるという話をした 1 週間後にFireworks の開発中止ニュースが報じられました。これは、アドビ社が Fireworks を諦めたのではなく、Fireworks のような存在を今の Web ワークフローに適応させるには、別の形がふさわしいと判断した結果だと思います。こうした変化はグラフィックソフト関連だけではありません。

特にここ 1, 2 年のフロントエンド周りの動きは活発です。Sass で記述したり、モジュール形式で管理 しようというのは、その動きのほんの一部に過ぎません。Bootstrap のような汎用性の高い高機能 HTML/CSS フレームワークを使うのも手段ですが、Bower を経由して好きな部品を落として使うといった方法でも、素早くサイトを作れるようになりました。

いきなり黒い画面での開発はできないという方は Mixture のようなツールから始めてみるのも手段です。

今まで以上に早く効率的に設計していくためのツールは出そろってきました。
見た目そのままを再現できる保証もなく、結局コードで作らなければならないことを考えると、静止画カンプは非効率ですし、クライアントに間違った印象を与えます。HTML で早く作れることを体感してしまうと、カンプへの違和感はさらに増していきます。そこで、ブラウザ上でいきなりデザインしたほうが良いという声も高まってきました。ビジュアル要素の多くは CSS3 で補えますし、必要に応じてグラフィックを作るというアプローチです。

しかし、こうしたマークアップを基軸にしたデザインプロセスには 3 つの課題があります。

• マークアップをしている方がディレクターかプロジェクト管理していれば成り立つ
• ビジュアルは後回しになり、ビジュアルによるデザインの効果を適応させにくくなる
• 今までの作業工程から大きく変わるので、変化へのコストをどう担保するか見え難い

私自身、早期から HTML を作り始める人のひとりなので、ツールやテクニック自体に異論があるわけではありません。しかし、ワークフローの変化がなければ成立しませんし、今まで仕事をしていた人たちに対して「こう変わればこのようなメリットが生じる」という部分が十分に説明されていないまま、「こんな素晴らしいツールがあるから使いましょう」「これが未来だから皆さんがんばりましょう」では変化のための決定打にならないと思います。

コンテンツがあるからデザインできる

そこで、HTML から画面設計が始められる開発プロセスを実現するにはどうするかを考える必要があります。私の中では以下の 3 点を解決することで新しい Web ワークフローが見えてくると考えています。

プロセスにおける役割を明確にする

HTMLからはじめるインブラウザ・デザインも万能ではありません。強みはどこにあるのかを明確にすると同時に、弱みを補うのは何が良いのかも検討したいところ。 インブラウザ・デザインの強みである画面遷移の設計、使い勝手、マルチデバイスでの状態の検証に特化しても良いでしょう。

技術制約なしで考えられるデザインは別途先に進める

レイアウトやインタラクションは難しいですが、それ以外のデザイン要素は、いきなり HTML で始めるより、デザイナーが完全にコントロールできる環境でつくったほうが効果的という場合があります。ビジュアルが変わるだけで使いやすくなったと感じる場合もあるわけですから、無視できません。

コンテンツがなければ成立しないことを説得・整備をはじめる

意味のあるマークアップ。装飾ではなく引き立てるビジュアルを作ることになると、コンテンツの存在が必須になります。しかし、現実はマルチデバイス対応がされていないですし、既に良いコンテンツはあると思い込んで作りはじめていることがあります。コンテンツの見直し、再設計を行うことではじめてデザインできるはずです。

誰がどのようなスキルを持っているかは組織によって異なりますが、従来のようにデザインとマークアップは別々で行う作業ではなく、より密接な関係になっていきます。

コンテンツから始めることが出来ないのであれば、従来のような静止画カンプを作ろうが、インブラウザ・デザインで作ろうが結果は同じだと思います。

例えば「使っているCMS Premium Themes」と検索してみてください。

5,000 円前後でカスタマイズ製が高く、魅力的なデザインが数百・数千すぐに出てきます。その中の多くは、この記事を読んでいる皆さんでも見たことがないものがほとんどだと思います。デザイン要素も自由に変えることができるだけでなく、パッと見の良いスマートフォンサイトにも変換してくれます。見た目を優先して、コンテンツを後回し。そして、今流行しているデバイスに対応するだけであれば、これで十分なわけです。

どんどん作ることが効率化されていく中、Web プロフェッショナルに発注するという意味を、問い直さなければいけない時期にきています。ただ早く安く作るところには答えはないですし、今流行しているツールの真意も早く安くという部分以外にあると思います。

今までの『常識』に捕われたまま、ツールやテクニックを変えても、良い結果は生まれません。根本的なワークフローの見直しは必須ですし、そこを変えるこで今流行しているツールやテクニックがさらに活かせるようになるはずです。