CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ（4）『レスポンシブWebデザイン実践編』こもり まさあきさん

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、こもり まさあきさんの『レスポンシブWebデザイン実践編』セッションのスライドなどを公開します。

• スライド

CSS Nite LP, Disk 27に参加された皆様、10セッションの長丁場お疲れ様でした。
4番目のセッションを担当したこもりです。

今回は「レスポンシブWebデザイン実践編」ということで、実際の制作時の困った、レスポンシブだとこうなるから…という誤解をどうにか解けないかということで、設計時の考え方や全体的なワークフローには一切触れずに実装のみに話を絞りました。

「Content Choreography」の部分は、さまざまなデバイスで情報を適切に伝えるためにアクセシビリティのことも踏まえながら、コンテンツの順番や配置位置を設計段階で考えるといったことですが、現在のWeb制作ワークフローにおいては「企画、情報設計」「ヴィジュアルデザイン」「コードの実装」といったパートが分離していて、実装サイドが無理矢理どうにかしなければならない状況が多々あると考えています。

そういう無理な設計や注文を実装サイドでどうにかしたいときに、最悪「Flex Box Layout Module」を使うという方法もあるよ、ということで覚えておいていただければ。伊原さんのセッションであったようにスクリーンリーダーの利用の際に情報構造と表示内容に相違が出る、という問題はありますので、使いすぎというよりはむしろ使わないでも済むような方向で前段の設計をちゃんとしておいた方が良いでしょう。

レスポンシブに限った話ではないですが、セッション全体に流れていたように「無理をしない」というのが一番の解決策です。これまではデスクトップオンリーで済んだものが、端末毎の実装差異、バグを山ほどもった端末が今後次から次に発売されていくでしょう。

こもり自身、旧来の携帯電話向けのコンテンツ制作・運営などをやっていた経験もあり、端末がドンドン発売されるような状況での制作や運用対応の大変さは身をもって実感しています。参考までにお伝えしておくと、1日にFacebookにアクセスするデバイスは「7,000」種類といわれています。

これは世界レベルの話ですが、日本でも今後端末の発売は相次ぐでしょうし、機種変は進まないと思って良いのではないか？、さらにある日突然スマートフォン以外のデバイスが出てきて、携帯電話が突然消えてしまったような今の状況に近しいことになるかもしれません。

そういった部分はもちろん、サイトの性質、利用者のコンテキストを考慮しながら、どういった方法で実装するのが良いか、いま一度実装サイド以外のクライアントも含めたメンバーと考えていただれけばと思います。

以上、長くなりましたが、本セッションの一部でも皆様の今後の制作に役立てたら幸いです。

こもり

--

最後に「あのお化けアイコンは何だ？」という声をいただいてたのでご紹介まで。

• Ghostlab

Adobeの「Edge Inspect」と同様の機能をもったコンテンツの確認ツールです。これの特徴は「自分自身がローカルのProxyになってサーバを起動する」「特別なソフトや拡張機能、端末側のアプリのインストールが不要」「同一ネットワークにある端末から直接アクセスできる」「任意のディレクトリや外部のURLをホストすることができる」といったものです。もちろん、すべてが同期するので、面倒なフォームの入力もPC側からおこなうことができます。