仕事の手法が変わってしまった

はじめは今までと同じように、カンプを作ってからコーディング、というやり方でした。
しかし、そのやり方だとトラブルが多いんです、なぜか。
ブレイクポイントとかで揉めたりすることが多いです。

早い話が、いままでの制作のやり方は、レスポンシブWebデザインでは無理だということです。

allWebクリエイター塾の菊池 聡さんは、「レスポンシブWebデザインでは、いままでの仕事のやり方は通用しない。いずれはブラウザでデザインする時代がくる」と、某セミナーで言っていました。

実際、最近は、ブラウザでデザインする、いわゆる「インブラウザ・デザイン」で制作することが多くなってきています。最近は、ほぼ7割くらいです。
最近、久しぶりにFireworksでカンプを作りましたが、「以外とPhotoshopやFireworksでカンプを作るのが面倒だな」と感じました（ちょっといらついていたような気がするのは気のせいでしょうか？）。

端末が増えすぎた、画面サイズもわけわからない

端末も、特にAndroid端末が爆発的に増えています。この1年で、日本だけでも100機種以上の新製品が発表されています。これはもはや検証が不可能なレベルです。

そして、モバイルとタブレット・デスクトップという垣根も意味がないものになってきています。

制作の考え方も、モバイルとタブレット・デスクトップという考え方でやっていました。
しかし、最近Androidのタブレットがどんどん大画面化してきています。「Acer Iconia Tab A700」は、1920ピクセル×1200ピクセル、「REGZA Tablet AT830」は、1600ピクセル×900ピクセルの画面サイズがあります。下手なノートパソコンよりも解像度が高くなってきています。

この前、ヨドバシカメラでちょっと実機をみてきましたが、「Acer Iconia Tab A700」では、「Google検索結果」ページは右半分がみごとにスカスカでした。

もはや、レスポンシブWebデザインの案件では、幅1600ピクセル位までの画面サイズを制作時に考慮してもいいと思います。

タッチUIを前提にした、Windows8が出てくる頃ですし、そろそろタッチUI前提のデザインに移行してもいいのではないでしょうか？

タイポグラフィについて

iPhone/iPad/Retina MacBook Proなど、解像度が高いディスプレイが出てきています。
レスポンシブWebデザインでは、そういう高解像度のディスプレイにも、普通のディスプレイにも対応しなければ行けません。当然ながら画面サイズもデバイスによってそれぞれ異なります。

しかし、解像度が高いディスプレイでWeb用の画像を配置すると、画像がぼやけて見えます。
また、画像を拡大縮小すると、当然ながら画像もきれいに見えるとかぎりません。

写真やイラストはそれでもまだいいのですが、テキストをきれいに見せるための「テキスト画像」は拡大縮小すると、とても見られるレベルではないです。

そのために、Webフォントが出てきています。ただ、日本語のフォントを提供しているサービスは、ほぼすべてが有料サービスです。ただ、日本語フォントを使う場合は、予算の問題があるので注意が必要です。
見た目にこだわることが成果につながるサイトの場合、有料サービスを使ってもいいのではないでしょうか？

実際、私が担当する案件では、ほぼすべての案件で「画像テキスト」は使っていません。テキストを縮小すると汚くなる、にじんでしまうことが多いからです。
残念なことに、明朝体だと読めないレベルになることが多いです。

Internet Explorerについて

私の最近のお仕事は、スタートアップ系などに関わることが多いためか、Internet Explorerの古いバージョンに対応する案件が減ってきています。

また、レスポンシブWebデザインの案件でInternet Explorer 6/7対応の案件はほとんどなくなりました。去年あたりは、Internet Explorer 6/7に対応してほしいという話はあったのですが。

また、Internet Explorer 8では、スマートフォンのスタイルも作っていません。理由については、超極秘テクニックに対応したりする、などのためです）

実際、Internet Explorer 8が搭載されたスマートフォンはありません。無理して作る必要はありません。

また、CSS3をフル活用しているため、CSS3 PIEなどのライブラリも使っていません。Internet Explorer 6/7/8をはじめとした古いブラウザでは、角丸などの見た目より、コンテンツを閲覧できることを重視しています。

ピクセルの終焉は近い？

最近は、レスポンシブWebデザインの案件のときには、ピクセルを使わなくなりました。（フォールバックとしては使っています。）。

W3Cでも、新しい単位の話が出てきていますので、できるだけ、「ピクセル」という単位に頼らないようにしています。制作でも、考え方でも。

現在使っているプラグインも、基本、Media Queriesでカスタムできるもの、のみを使っています。（そこらへんは謎にしておきます。）

（しかし、ピクセルという単位を使わなくなったら、「ピクセル」という名前の入った会社さんはどういう名前にするのか気になります。。。）

みんな、レスポンシブWebデザインを甘く見過ぎ

ここのところ、よく聞く話ですが、レスポンシブWebデザインの案件で、いわゆる「炎上」している案件がおおいとのこと。
話を聞いてみると、「レスポンシブWebデザインなのに工数がPCサイトのみの案件と同じ」「レスポンシブなのに制作費がPCサイトのみの案件と同じ」。「そもそもレスポンシブWebデザインがわからないのに案件やってる」などです。

今日、最近半常駐で通っている会社に、別の会社から打診されたのもそんな感じ。みんな、レスポンシブデザインをやったことがないというのに、リスクとか分からなくて大丈夫ですか？、と思います。

レスポンシブWebデザインの案件をやったことない制作会社さん。レスポンシブWebデザインを甘く見過ぎると火傷しますよ。

まとめ

1年間、レスポンシブWebデザインのウェブサイト案件を制作してきたのですが、レスポンシブWebデザインは、ちょっと調べりゃすぐできるようなものではないと思います。
実際、この1年間のレスポンシブWebデザインの技術の進化は、ものすごいものがあります。

そんなわけでレスポンシブWebデザインのウェブサイト案件、やったことのない制作会社さん、炎上したくない制作会社さん。ディレクションだけでも入れますのでお仕事お待ちしております（笑）。

追記

ミツエーリンクスの木達さんが、Philip Zastrow氏の書かれた「The Broken Design Process」を翻訳しています。こちらもぜひ、お読みになられることをおすすめします。