Webデザイナーがコードを書くべきか、書かないべきか？ これはたいへん物議をかもす話題です。一人分支払額が減るため、クライアントはコードが書けるWebデザイナーを好みます（他にも理由はあると思いますが）。一方でデザイン優先で考える人はコードについて、創造性を抑制する技術的な足かせになるといいます。更に議論をややこしくするのは、私達を取り巻く情報環境は常に複雑化しているということです。しかしながら、この議論のいくつかを、進化を続けていくデジタルの展望という文脈で見ていくと、コードを書きながら作業したほうがいいケースというのも見いだせるのです。
数年前、Andrew MaierがWebサイトのデザインや開発にプロトタイプを用いることについて記事を書きました。私自身がちょうどプロトタイピングを行なっており、それに関連して、その記事に対する以下のコメントが目を引きました。
プログラミングやマークアップ作業を含むプロトタイプ作りのことを考えるとぞっとする。そうした場合、視覚的かつ機能的な本当の意味でデザインされたサイトではなく、開発者目線のサイトにしかならないからだ。
このコメントが私の目に留まったのは、このコメントから三年後にあたる今、よく聞くようになった議論だったからです。これには大きな理由があります。複合的なコンテンツやレスポンシブなウェブサイトなどの、より複雑な情報設計やコンテンツ戦略が必要になってきている背景から、コードで作られたプロトタイプをデザイン過程に入れることが今まで以上に意味を持つようになったのです。出てきたアウトプットを基に対話をすることで、より明確でしっかりとした基礎を構築することができるのです。
コーディングをしたがらないWebデザイナー
コードとの関わりについてどう思うかとアンケートを取ると、多くのデザイナーは"It's complicated（＝それは複雑である；Facebookの交際ステータスと掛けた）"と書かれたチェックボックスを探すでしょう。私たちはすでにプロトタイピングに前向きではありますが（まだの人はこちらを御覧ください：Todd Zaki Warfel、Jeff Gothelf、Stephen Hay）、エンジニアのやり方やその考え方によってUXが損なわれてしまうのではないかと未だに恐れています。
この心配には根拠がないわけではありません。2004年、デザインと技術について書かれたThe Inmates Are Running the Asylum（囚人は閉鎖病棟から逃走する）の中で、著者のAlan Cooperは「エンジニアが何かを創造するとき、彼らは合理的で可能性の高い手順の繰り返しの中から解決法を見つけ出す。そのために彼らの解決法はいつも、古い解決法の派生にすぎないものになってしまう。それでは不十分なのだ」と述べています。Cooperはさらに、インタラクションデザイナーは「できないこと」について、常に疑惑を持ち続けることで、この派生ばかりの解決のループを抜け出すことのできる数少ない立場だと言及ています。
Cooperの本を読んでいるにせよ、いないにせよ、デザイナーたちはこうした考え方に同意し、それを 「私がデザインをし、あなたが作る」という仕事の流れのことだと解釈しているようです。確かにこれは、Cooperが期待する結果をもたらしています。即ち、デザイナーと開発者が、アイデアと画期的な解決方法とを合成するために、お互いに常に刺激し合い、彼ら単体では作れなかったようなアイデアや解決方法を生み出しているのです。
HTMLプロトタイピングの重要性
レスポンシブや、アダプティブデザインなどに代表される順応性の高い柔軟なコンテンツ作りの需要が高まったことで、デザイナーが重い腰を上げてコーディングに取り掛からければならない新たな理由ができました。核になるHTMLはコンテンツを包み込む階層ですから、デザイナーがこのレベルで作業をすることで、コンテンツとその構造上の意味合いについてより本質的に考えることができるようになります。マークアップがコンテンツの評価や、ユーザー調査、分類作業を置き換えるような作業ではないことを考慮すると、これはデザイン過程のより重要な部分として、機能するようになるでしょう。
情報アーキテクトのDan Klyinは、HTMLでプロトタイプを作ることは情報アーキテクチャーの手順を発見・吟味する助けとなるとし、このことを、コンテンツの「コレオグラフィ（コンテンツ内のデータや機能の順序の整理）」または「適切な展開」と名付け、分類学とインタラクションデザインの関連性は一般にプロトタイプで表現されるべきだと主張しました。コンテンツの基礎的なコレオグラフィ構造に早い段階で取り組むことで、私たちは本質から外れたり、本来の意図を見失ってしまったりせずに済むことが保証されます。さらに、プロトタイプ自体に簡単なHTML要素を適用するときにでさえ、このプロトタイピングの利点は浮上します。ナビゲーションやヘッダー、ユーザーをリンクに誘う短い文章、サイドバー、段落要素を配置し、線型で意味づけられたドキュメントを作ることで、これらの要素同士が文脈的にいかにお互い関係しあっているかを、嫌でも本質的に考えることができるようになります。
では、同じドキュメントをタブレット端末や携帯端末で見てみましょう。同じ意味をなしていますか？ 同じコレオグラフィを基準にしていますか？ （するべきですか？）コンテンツを要約する必要があったり、ユーザーをリンクに誘う短い文章を違った文脈で別な場所に配置する必要性に迫られることに気づくかもしれません。あるいは、携帯端末におけるナビゲーションのパターンはデスクトップでのUXからすると極めてシンプルなものにすべきだと気づくかもしれません。こういったインサイトによって、私達の現在のコンテンツモデルが新しいコンテキストにどう適応すべきか、否が応でも考えさせられます。（コンテンツ作りについて、より深い考察はSara Wachter-BoettcherのContent Everywhereをご覧ください）
ページという概念から抜け出す
『Content Strategy for Mobile』という素晴らしい本で、著者のKaren McGraneは、コンテンツについて「ページ」という意味で考えることを止め、「パッケージ」という意味で考えるように勧めています。コンテンツのパッケージは、大小のヘッドラインやユーザーをリンクに誘う短い文章、本文、引用などを含んでいるかもしれません。早い段階でHTMLによるプロトタイプ作りをすることは、どの要素が必要か判断し、各要素を文脈を超えて結びつけ、まとまりのあるUXについて考える手助けとなります。
多くの素晴らしい、商用に使えるプロトタイプづくりのツールが、ユーザーとの意思疎通やデザインに重きをおいたものであるのに対して、早期にHTMLでプロトタイプ作りをすることは、情報アーキテクチャーをプロトタイプ作りに盛り込むことと、コンセプト作りと分類作業の際に設計した仮説を検証することを可能にします。と同時に、ページという概念から抜け出す枠組みを私たちに与えてくれます。
DrupalConで5月に行われた基調演説で、Karen McGraneはページという比喩の歴史について説明しました。このどこにでも見られる比喩は、驚いたことに印刷機メーカーのXeroxから来たものです。もちろん彼らはデジタルの時代におけるコンテンツをページという概念上で表現できるものと考えたのです。ページは100年以上にわたって私たちのビジネスの礎となっています。コンテンツを必要に応じていつどのように引き出すかという点で考えると、私たちはモバイル環境下において、その要求に見合った、より反応が迅速で情報環境に適した方法を創造するために、すでに大きな一歩を踏み出しています。
プロトタイピングを始めよう
では、コードでデザインするためにどこから始めれば良いでしょうか？ Jeff GothelfとStephen Hayはどちらもスケッチすることの重要性を強調しています。私もここでそれを反復しましょう。コード化することが最終目標であるにせよ、マークアップ言語に取り掛かる前にあなたのアイデアの大雑把なスケッチを描いておくことで、すでにデータとして保存してあるからという理由だけで、大したことのないアイデアに固執するのを避けることができます。
ペンと紙、あるいはホワイトボードを使ってあなたの仮説を描き出し、そのあとで、それに適したマークアップに取り掛かりましょう。そのやり方はコンテンツに合っていますか？ 携帯端末やタブレットでも見てみましょう。改善し、磨きをかけていきましょう。同じ概念を異なったコンテキストで表現するのに、コンテンツをどのように適合していけばよいか検討しましょう。
HTMLやCSSの基本的な要素の意味は理解しておかなければなりません。幸い、そんなに複雑怪奇なものではありませんし、やり方はインターネット上にいくらでも載っています。HTMLを単独で使用することで、意味合い的に正しい構造を築くことができます。CSS（とメディアクエリー）を使うことで、コンテンツを視覚的な階層で形作り、これを異なる端末に適したものに調整することができます。
もし、HTMLやCSSが初めてなら、少し時間を取って勉強してみてください。そして、作れなさそうなものは、まずそう見せかけるように作ってみましょう。完全に機能するAJAXや、インサイトを得るためのフォーム検証を記述する必要はありません。Stephen Hayは早期のプロトタイプ過程をクライアントに見せるために、スクリーンショットを撮って印刷することを薦めています。これによって、まだボタンが機能していないことだとか、またリンクが目的の場所に繋がれていないことにクライアントが惑わされずに済み、真に伝えたかったアイデアだけを見せることができます。
最後に、あなたの制作プロセス自体を、時間とともに成長させていきましょう。やがて成熟していくものです。私たちはもはや、標準に迎合した、クロスブラウザーのフロントエンドの英雄になりたいわけではありません。HTMLによるプロトタイピングは、ちょっとした知識と実践と経験によって、コンテンツ作りや情報アーキテクチャー作りのための有用なツールとなるのです。
