「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点

2013/05/31公開

《Fashionably Flexible ワークショップレポート》

2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。

■ Andy Clarkeって誰？

世界的に著名であるものの、日本では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。

Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴び、ヨーロッパのみならず欧米、オーストラリアの有名なカンファレンスで講演を数多く行っている。

Andy Clarke氏のデザインテクニックやノウハウを詰め込んだ、CSSデザインのバイブル本と言っても良い著書がある。

それは、2007年に発売された『Trancsending CSS』（邦題:Webデザイン　プロフェッショナルワークフローバイブル）と、2009年 に発売された『Hardboiled Web Design』である。

どちらも良書であり一読をおすすめする。『Trancsending CSS』は日本語訳もされており、広く読まれている。

2013年現在でも十分に役立つ内容が詰め込まれている。このレポートの筆者自身も、この本でAndy Clarke氏を知ることになった。

■ Andy Clarkeの実績

Andy Clarke氏の制作実績は非常に目を見張るものがある。クライアントはイギリス国内にとどまらず、ヨーロッパ全土と米国におよぶ。

イギリス国内では政府の案件をはじめとして、大手テレビ局のSTV、欧州ではISO（国際標準化機構）の案件や、米国ではフィデラル系の銀行のWebサイトリニューアルなど、数多くの大手案件をこなす有能なWebデザイナーである。

・Andy Clarkeのサイト『Stuff and Nonsense』

・Andy Clarkeのスライド（英語バージョン）―Fashionably Flexible

■ ワークショップの概要

有料セミナーにもかかわらず会場一杯の参加者が詰め掛けたことからも、Andy Clarke氏の注目度が窺える

ワークショップへ参加は9割以上が法人で、プロであることはもちろんのこと、経験豊富で大手案件をこなすディレクターやコーダーなどが参加していた。

意識の高い方々で、非常にモチベーションが高く、質問も数多く飛び交っていた。レスポンシブWebデザインについて注目されていること、過渡期であることなどから、企業によっては参加費用8万円という金額にもかかわらず10名以上での参加となった。

ワークショップは全体的にベーシックな内容が中心だったが、ところどころに「さすが」と思わせる素晴らしいテクニックやコンセプトが見られた。ここでは、特長的だった3つのポイントについてフォーカスをして紹介したい。

【1】 ワークフローの進化
【2】 グリッドデザインの間違い
【3】 レスポンシブWebデザインとアダプティブデザインの違い

【1】 ワークフローの進化～モックを事前に作らない理由

レスポンシブWebデザインでは、ワークフローの変化と進化が必要になることが印象的であった。

今までのワークフローでは、最初に画像編集ソフトを利用してデザインを作り、クライアントへ提示することが一般的だった。が、Andy Clarke氏がWebサイトを構築する際には、画像編集ソフトを利用したWebサイトのモックを使わないとのこと。

いわく、「画像編集ソフトを利用したモックはクライアントへ嘘を伝えることになる」と解説する。つまり、画像編集ソフトで作られたモックを提示すれば、ブラウザで表示されるデザインだとクライアントは認識し、間違った推測を与えてしまう。その結果、モックとブラウザで表示したものとの違いが発生し、トラブルが発生してしまう。

そこでAndy Clarke氏は、モックではなく「ブラウザでのデザイン」を提示することを紹介した。これらは、日本と欧州の商慣習の違いもあるのですぐに実践するのは難しいかもしれないが、スマートフォン時代での過渡期だからこそ、変革するタイミングであるとも解説した。

コンペでのデザイン提出をうながされた場合はどうするのか？ の問いに、「実際のデザイン提示はブラウザで見せるため、契約をしてからのみ提示する」とのことだった。コンペの場合は、デザインテイストを提示することはあっても、コンセプトを作り上げ、デザインを作るため容易にデザインを出すことはないと解説した。

では、画像編集ソフトはまったく利用しないのかというとそうではなく、ブラウザでデザインができあがってから最後にディテールを調整する際には必ず利用するという。

デザインパーツのディテールをCSSで表現することは、現在のところできないこともあり、ディテールの制作や最終段階の調整は、画像編集ソフトで細かく行うと言う。

Webサイトを作成する前に、コンテンツの並び方を確認するためのワイヤーフレームを描くが、クライアントにも一緒にこの作業に参加させることも紹介した。これは、クライアントが納品間近で簡単にコンテンツの順番などを変えたりしないようにするためと、クライアントへコンテンツの重要性を共有することが目的だという。

最後の最後にクライアントがコンテンツを変更して痛い思いをした経験がある方には、実践する価値があるだろう。

Andy Clarke氏なりの細かいワークフローで参考になったのは、CSSを書く時、常に端末を自分のそばに置いておき、CSSを反映させた場合の結果をデバイスで確認しながら作成するのが印象的だった。

筆者の場合は完成に近い段階まで仕上げてから端末でチェックをすることが多いのだが、頻繁にチェックすることで、問題に対してすぐに対策を打てるようになる。

できあがってから問題を解決するのではなく、途中でも問題を認識し、解決していく。まさにステップバイステップでの作成をしていると感じた。最後に完成してから問題に直面すると、ソースコードが煩雑になりがちだが、これなら綺麗なコードを保ちながら完成に持っていける。

何より、できあがったソースコードから探すという手間がないことが良い。ちょっとした作業方法の違いで変わってくるのだと痛感した。

【2】 グリッドデザインの間違い～「コラムとガーターにはめ込む」はNG

グリッドデザインというと『960gs』のようなサービスを思い浮かべる人も多いと思うが、Andy Clarke氏によると、それは本来のグリッドデザインではないとのこと。

本来のグリッドデザインとは、「コンテンツに合わせて最適なグリッドを自分で設計すること」と定義した。

■ 960gsのグリッドの図

グリッドシステムには「コラム」と「ガーター」があり、それに沿ってデザインパーツを配置するだけという考え方が多いかもしれないが、そうではない。コンテンツに合わせて都度グリッドを設計するのが正しい手法とのこと。

実際にAndy Clarke氏が愛用しているのは、『Gridset』というツールとのこと。コンテンツに合わせてガーターなども細かく調整すると言う。

Gridsetのサンプル

一見ランダムなグリッドに見えるが、黄色い部分を動かし、グリッドを作成する。グリッドとは均等である必要ではない。

【3】レスポンシブWebデザインとアダプティブデザインの違い

最後にAndy Clarke氏が指摘していたのは、最も基本的な考え方であるレスポンシブWebデザインの定義についてであった。これは、日本では正しく理解されていない節があるようだ。

今回のワークショップの前に、参加者にはhttp://responsive-jp.com/というレスポンシブWebデザインのギャラリーサイトを閲覧してもらい、印象的ないくつかのWebサイトをピックアップして実際のWebサイトを検証してもらった。

Andy Clarke氏がそこで指摘したのは、「中にアダプティブデザインのサイトも混ざっている」ということだった。

本来、レスポンシブWebデザインとは、どのスクリーンサイズでもテキストが閲覧できることが前提である。しかしアダプティブデザインの場合、特定のスクリーンサイズ（ブレーク・ポイント）ではWebサイトが正しく表示され、テキストを読んだりボタンを押すことが可能だが、それ以外ではテキストが見切れたりボタンが押すことが難しいことがある。

ワークショップで実際にAndy Clarke氏が説明したSONYのサイトを見てほしい。

■例１:スクリーンキャプチャー

スクリーンを狭めていくとテキストやボタンが見切れているのが分かる

■例２:スクリーンキャプチャー

スクリーンを狭めていくと余白が大きくなる、このサイズのタブレットやスマートフォンでは、画面が少し小さいかもしれない

レスポンシブWebデザインとは、「メディア・クエリ」「フルードイメージ」「フルードグリッド」を利用すれば実現できると逆説的に考えられるが、それは間違いだということだ。

あくまで、「メディア・クエリ」「フルードイメージ」「フルードグリッド」はその手段であり、要素の一部なのである。

本来のレスポンシブWebデザインのコンセプトとは、どのスクリーンサイズでもテキストが読むことができ、当然ながら“ボタンが押せる”レイアウトが見切れないことだと気付かされた。

まとめ

今回のワークショップで、アダプティブデザインとレスポンシブWebデザインの違いが日本のWeb業界において紹介できたことは何よりだ。そして、このワークショップを通じ、改めてコンセプトを学ぶことの重要性を再認識した。

Andy Clarke氏のワークショップを受講するたびに感じるのだが、 彼の実績や作品から「すごいツール」や「すごいテクニック」を期待するが、良い意味でその期待は毎回裏切られる。

むしろ、基礎的な内容やコンセプトをしっかりと理解することの大切さを感じることが多い。今回のアダプティブデザインとレスポンシブWebデザインの違いについての理解は、特にそう感じる部分であろう。

筆者は年末に海外で開催されるAndy Clarke氏の新しいワークショップを受講することを予定しているが、今から楽しみでしょうがない。次は何に気付かされるのであろうか。

【著者プロフィール】
Web Directions East LLC.　CEO
Webディレクター／ウェブ・ストラテジスト／テクニカルライター
菊池 崇

日本で最も早くから「モバイルファースト」、「レスポンシブWebデザイン」を提唱し、制作をしてきたことで知られる。スマートフォン案件を得意とし、大規模から自社プロジェクトの小さいスマホアプリ、スマホサイト制作をこなす。世界最高峰イベント『Web Directions』の日本を統括。Webの可能性を信じ、常に研究することを好み、米国、豪州、イギリスの海外カンファレンスにも参加しながらWeb技術の研鑽をしている