新刊ピックアップ

アダプティブになろう! これからのWebデザイナーの基礎知識とは?

この記事を読むのに必要な時間:およそ 1 分

時代はスマートデバイス対応が欠かせない

iPadの登場以降一気に普及したスレートデバイス,iPhoneのほかAndroid端末が群雄割拠するスマートフォンと,PC以外でのスマートデバイスでのWeb利用が急伸しています。

この流れは,Webデザインの地殻変動ともいうべき状況をもたらしています。⁠WebサイトはPCのブラウザで見るもの」という前提がすっかり崩れてしまったのです。ユーザーエージェントごとにページを用意する手法では対応できなくなり,将来的にどんなデバイスでも破綻せずに見られることを前提に,それをいかにシンプルに実現するかを考えなければならなくなりました。

スマートデバイスでは,さまざまな画面の解像度を想定する以外にも,縦横どちらの方向でも見やすく表示されるように考える必要がある

スマートデバイスでは,さまざまな画面の解像度を想定する以外にも,縦横どちらの方向でも見やすく表示されるように考える必要がある

HMTL5+CSS3対応で互換性あるアダプティブ・ウェブデザインを

Web業界は,言うまでもなくHTML+CSS3という大きな転換点を迎えています。デバイスごとへの最適化表示の対応も,CSS3には「メディアクエリ」⁠Media Queries)という仕様があり,指定した条件で専用のCSSを適用できます。段組も,従来の主流であるdiv区切りによるfloat指定から,CSS3では「マルチカラムレイアウト」により簡単かつフレキシブルな指定が可能になります。

Webレイアウトは額縁に入ったようなフィクスド(fixed)の時代から,デバイスに合わせて流れるようなリキッド(liquid)の時代へと移っています。表示サイズによって情報量やレイアウトを調整するWebデザインの手法は「レスポンシブル(responsible)Webデザイン」あるいは「アダプティブ(adaptive)Webデザイン」と呼ばれます。

Webデザイナーはコミュニケーションデザイナーに

ブラウザの世代交代とともに,HMTL5+CSS3をベースにしたアダプティブWebデザインの流れは加速していくでしょう。Webデザイナーは常に,古い遺産に配慮しつつ新しい手法を取り入れていく両睨みの姿勢が求められます。

さらにはFacebook,Twitterなどのソーシャルメディアとの連携や,デバイスによっては専用アプリとWebサービスを連携させることも考えられます。これからのWebデザイナーは,単なるサイトの見た目だけでなく,利用者とのコミュニケーションを促進する多様な手法を考慮するというグランドデザインの視点が求められるのです。