機械化によってはじまる未来のデザインプロセス

WCAN の講演の様子

毎年恒例の年末イベントは、東京は CSS Nite Shift ですが、名古屋の WCAN も毎冬講演しています。今年は「モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン」と題して今後の Web デザインワークフローのヒント紹介しました。チャーリー・チャップリンの名作「モダン・タイムス」をモチーフに講演のシナリオを構築。効率化・機械化が進む、今の Web デザインの世界で、いかにデザインの仕事をしていくのかを 4 つのキーワードに合わせて話をしました。

  • Content(コンテンツ)
  • Code(コード)
  • Communication(コミュニケーション)
  • Creative(クリエイティブ)

機械 vs. 人間の先にあるもの

様々な WordPress デザイン

上記のデザインを見てください。実はこれ、すべて WordPress のテンプレートです。見たことがないオリジナルのデザインと感じた方もいると思います。当然、画面の一部の見た目や内容を変えるといったカスタマイズが可能ですし、マルチデバイスにも対応しています。10,000 円以下で、こうした一見オリジナルで洗練されたサイトを作ることができます。もちろん、これは WordPress だけのことではありません。 Drupal や Joomla のような他のオープンソース CMS でも多彩なテンプレートを手頃な値段、もしくは無料で手に入れることができます。

情報発信であれば、わざわざ Web サイトを作る必要がなくなりました。Tumblr を活用しはじめた企業も国内外で増えてきましたし、商材販売からギャラリーまで様々なニーズに合わせたサービスがあります。制作者が「今年は○○が流行するかもしれないから、そろそろ学習したほうが良いかも」と検討している間に自動化ツールやサービスがいち早く導入し、低価格又は無料で人々に提供しています。

Web 上に自分の『場所』をつくって情報発信をすることは特別なことではなくなりましたし、一般利用者からすればオリジナルに見えるビジュアルもたくさんあります。ただ作って公開するだけであれば、機械のスピードと価格に勝つことはないでしょう。制作者のための道具も増えてきますが、それ以上のスピードで効率化・自動化が進みます。

機械の一部のような仕事であれば先は明るくありません。しかし、人間にしかできないことを見出すことで、機械と競合しない、協調した形で価値を育むことができると考えています。

カンプは機械化されたプロセス

SassSassLessのようなプリプロセッサー言語も、カンプのコーディングの効率化としてではなく、いちはやく HTML を構築して変更がしやすい環境を作るための道具と考えると、より便利に使えます。

今まで Web サイト制作で当たり前といわれていたカンプと呼ばれる画面スクリーンショット。クライアントに見た目をいち早く伝えることができますが、コミュニケーションのギャップを生み出す可能性があります。操作が複雑になってきただけでなく、画面サイズや観覧環境が多彩になった今では、静止画が先に見せることのリスクが高まってきています。カンプのデメリットはコミュニケーションのギャップを生み出すだけでなく、機械との競争を助長するところにあります。

カタログのように「とりあえず出して」のようなオーダーと、テンプレートサイトに並んでいるギャラリーと何が違うのでしょうか。作ってみないと分からない課題を後回しにして、完成したかのような絵を見せるのと、デモページを通してサイトを操作して試すことができるテンプレートサイトとどちらが便利でしょうか。見た目を描いて出すだけであれば、機械化されたテンプレートのほうが遥かに早いし多彩です。

クライアントのための独自の解を作るのであれば、絵から始めること以外も可能なはずです。Web サイトがビジネスの一部として機能するのであれば、操作感や導線の設計、運営体制の整備といったところが『絵』より優先されるべきです。それでも絵を優先したいのであれば、もしかすると数千・数万あるテンプレートを選んだ方が、皆にとって幸せかもしれません。

PrototypesPrototypesのようなツールをつかってカンプを動かしてみることから始めるのも手段。

絵以外から始めるとい手法として、以前からプロトタイプを挙げていますが、HTML でいきなり作ることだけがプロトタイプというわけではありません。コミュニケーションの目的に応じてアウトプットするプロトタイプも異なります。手法に固辞することなく、目的に合わせて道具を使い分けることでプロトタイプを作ることのの敷居が下がるでしょう。

絵から始めるコミュニケーションを少しずつ変えていくことで、機械化ではない人としてのデザインの解を利用者やクライアントに提供できるのではと考えています。

画面デザインから雰囲気のデザインへ

懇親会でグラフィックデザイナーから Web デザインへ転身した方と話をしました。 Web におけるデザインのあり方に疑問を感じており、私の講義がヒントになったと言っていただけました。グラフィックデザインは、心地の良いビジュアルを作ることだけではなく、形になっていないモノゴトを視覚化する仕事だと思います。そうした仕事を長くしていた方にとって、テンプレート化・機械化に向かっている Web デザインに違和感があるのだと思います。

講演の後半で話をした利用者・クライアントとコミュニケーションをするための『雰囲気』の構築。テンプレートだけでは引き出すことが出来ないクリエイティブによるアウトプットは、グラフィックデザイナーの得意分野だと思います。 Web には 独自の制約がありますが 、Web だけが制約がある媒体ではありません。Web らしいデザインのコツを掴めば、グラフィックデザイナーにも Web やアプリのデザインプロセスに関わることはできるでしょう。

今年は従来の Web サイト制作プロセスが壊れた年でした。それもあって、海外では様々な制作プロセスに関する成功例、失敗談が公開されました。決定版とも呼べるプロセスがないからこそ、新しいことに挑戦する絶好のチャンスだと思います。カンプからコーディングという長く続けていたワークフローから離れることは、最初は勇気とコストがかかることかもしれません。しかし、少しずつ変えていくことで、今以上にクリエイティブなデザインの現場になると思います。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。