CSSだけでできる？の判断スキル向上など、失敗から得た5つの気づき

今回、このやりかたは成功だったように思えます。というのも、「HTML5で作成したHTMLコードが、（div中心のマークアップに比べて）変更に強い」ことがぼくらの中で確かめられたからです。

ぼくらは制作途中で「これまでの作業を捨て、モバイルファーストに切り替える」という大きな方向転換をしましたが、その場合もHTMLにはそれほど手を入れずに済みました。モバイル向けサイトができたあと、PC向けのスタイリングを行っていく過程では、ほとんどHTMLを修正していません。さらに、ぼくらは現在サイト制作をゼロからやり直していますが、「HTMLコードはほぼそのままで使いまわせる」という確信もあります。

作成されたHTMLを見返すと、文書構造を表す要素とスタイリングのためのdiv要素が使い分けられており、「文書構造を表すため、気軽に変更してはならない部分」と「気軽に修正して良い部分」とが明確に分かれています。このことも、マークアップの「変化に対する耐性」を向上させています。

制作方針やデザインが変わろうとも、コンテンツや文書構造は変わらない。だから、HTMLはほとんど変える必要がない。こうした「構造（HTMLマークアップ）と見た目（CSSスタイリング）の分離」はずっと昔から言われており、自分もそれなりに意識はしていたつもりですが、今にして思えば、やはり以前は見た目に引きずられたマークアップをしていたな、と反省しています。これはやはり、文書構造を明確に表す要素が存在しなかったことも要因の一つだと言えるでしょう。

また、セマンティックなマークアップはdiv中心のマークアップに比べて頭を使います。以前は全てdivで良かったのに、「ここはsectionが適切だろうか、navが適切だろうか」といった判断を求められるようになったからです。こうしたことに頭を悩ませることで、文書構造に対する一層深い理解が促進されます。それはひいては、文書にとって最も自然な文書構造や、検索エンジンにとっても理解しやすいWebページの作成を促進することでしょう。

とは言え、HTML5のセクション要素を正しく扱うのは、それぞれの要素に関する深い理解が必要で、そこがネックではあります。例えば、現在コードを見返してみると、以下のようなミスが見受けられます。

• が適切かもしれない箇所に、セクション要素を使用している。セクション要素を使うべきか迷ったら、使わない方が得策（セクション要素は文書のアウトラインに影響をあたえるため）
• 見出しを持たないセクションがある
• 見出し要素（h1-h6）がセクション要素と共に用いられていない

こうしたマークアップは「誤り」ではないものの、推奨されるものではありません。望ましいマークアップを徹底させるには、細かいレビュー作業が不可欠だと感じています。

4. 「それ、CSSだけでできる？」の判断スキルを磨こう

今回、見積時間を大幅に超過してしまい、最終的な失敗の原因を大きく形作ったのが、最初に行っていたPCサイト向けのスタイリングでした。どのようなデザインだったか、ここに再掲します。

図6：PCサイト向けデザイン（再掲）

見てお分かりの通り、「菱形」がモチーフです。この菱形が、ユーザ操作に合わせてダイナミックに動作する、非常にインタラクティブなサイトを目指していました。ブラウザのスクリーンサイズに合わせて菱形の大きさも変わり、常にフルスクリーン表示されるようにします。コンテンツは、菱形の中央部分で、常に菱形の辺と接点を持つような、最適なレイアウトが行われるようにします。そしてぼくらは、この「菱形」と「コンテンツ」のレイアウトをCSSのみで行えるのではないかと考えて、そちらに時間をかなり使ってしまいました（と言うより、時間を使った＝残業していたのはデザイナさんです。本当にごめんなさい・・・）。

最近では、複雑なデザインのWebサイトをいくらでも見かけることができますから、今回のPC向けデザインも実現は可能だったと思います。しかし、あらゆるデザインをCSSのみで実現できるかと言えば、現在も、将来的にも難しいでしょう。今から考えれば、JavaScriptを併用する必要性を早くから感じ取り、プログラミング担当だったぼくがレイアウト作業に共に当たるべきでした。

CSS3は素晴らしい技術です。画像を使う機会を格段に減らせるので、Webサイトのダウンロードサイズは減るし、レンダリングもスムーズです。CSS AnimationやTransitionのおかげで、アニメーションのためのJavaScriptコードも大幅に減らせます。

一方で、CSS3でできることが増えたおかげで、かえってデザインを実現する方法の選択が難しくなってしまったという感覚があります。自分たちが目指すデザインは、CSS、画像、JavaScriptをどう組み合わせれば、最も効率良く実現できるのか。また、CSS3をサポートしないブラウザのことも考慮に入れると、最適解はまた変化します。こうした実装上の判断力を磨くには、経験を積み、知識を蓄えるしか方法はなさそうです。

5. どんな仕事であっても、顧客にフォーカスした目的を掲げよう

最後はいきなり毛色の違う「仕事」に対するスタンスの話です。今回の失敗は、様々な技術要素を盛り込んだり、期間内に作業を終わらせることが優先になってしまい、当初掲げた高い目標を忘れてしまっていたことが最大の原因です。

しかし、その目標とはどんなものだったでしょうか？あらためてここに掲載してみます。

1. 見て0.5秒でかっこいいと思えるサイトにすること
2. 最新技術を活用して、事例としても使えるものにすること

どちらも悪くない目標だとは思いますが、今のぼくから見るとやや不満を感じます。というのは、どちらも制作者にとっての「ひとりよがりな」目標に思えるからです。だからこそ、いざ制作がピンチになった時に、「どうせ自分たちで勝手に決めた目標だから」という甘えが生じ、妥協してしまったのではないかと思えるのです。

どんな仕事にも「目的」があります。そしてその目的は、より大きな目的の一部である、という状況が一般的です。

例えば、「画像の代わりにCSS3でスタイリングを行う」という目標があるとします。それは、「画像ダウンロードを発生させないようにすることで、画面の読み込みを速くする」という、より大きな目的の一部かもしれません。そして、なぜ画面の読み込みを速くするかと言えば「自社サイトにアクセスしたユーザのユーザ体験を向上させる」ためです。それは「自社に対する印象を向上させるため」という目的の一部であり、それはさらに「好印象により、多くの信頼感を抱いてもらい、ブランディングにつなげる」という目的の一部かもしれません。

そして、こうした目的の連鎖の最後には「顧客」がいます。ひとりよがりな目標に対しては、甘えが生じるかもしれませんが、顧客は甘えを許してくれません。顧客を適切に設定して、顧客に提供するものをきちんと見据えること。それが、妥協を許さず、コスト意識も高い仕事を実現するための最低条件だと、あらためて気づかされました。

ぼくらが今後制作していく、シーエー・モバイルの企業サイトにおける「顧客」は誰でしょうか？もちろん、HPに訪れてくれる方々です。そうした方々に、HPを通じてどんな便益を提供できるのか。それを忘れることなく、胸を張って世に出せるようなWebサイトを、今後のリニューアルで作っていきたいと考えています。

皆さま、ぼくらがサイトのリニューアルを終了した暁には、一度でも訪問してやっていただければ幸いです。