この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスのためのHTML5+CSS3によるレスポンシブ×フラットデザイン 第一回目 はじめに

というわけでHTML5+CSS3によるレスポンシブ×フラットデザイン講座を始めます。
ワードプレスのためのとありますが、ワードプレスのテンプレートを作る前に、プレーンなものを作るので普通のウェブサイトから、ショッピングサイトのテンプレートとしても使えると思います。

で、今さらなんでウェブデザイン? と思うかもしれませんが、理由としては新OSのWindows8とiPhoneのOSであるiOS7とモバイルユーザーの拡大にあります。塾長のサイトもアクセスを解析すると、今や半数近くがスマホやタブレットといったモバイルユーザーでの閲覧となっています。

モバイル対応したサイトとそうでないサイトとではどう違うのか? と思われるかもしれませんが、ユーザー環境が5割を超えるとさすがにPC向けに作られたサイトをモバイルユーザーにも使わせるというのは問題があります。
これまでPCの場合は比較的広い画面とマウス操作による操作でしたが、モバイル環境では画面が限られているのでスクロールすることが前提であり、そのスクロールに対する心的負担もPCよりは軽いことが分かっています。

PCの場合はファーストビューで画面内に大事な要素を盛り込めとはよく言われていましたよね。そうしないとユーザーは要素に気が付かず、またスクロールもしてくれない、というのが理由でした。
ところがモバイルユーザーの場合はPCと違い入力に対するストレスはあっても、スクロールに対するストレスはPCの比ではないのです。

つまり、PC版とモバイル版とでは根本的にUI(ユーザーインターフェース)に違いがあり、ユーザーアクションのためのウェブデザインにも大きな違いがあるということです。なのでモバイルユーザーが今後もっと増えてくると(特にシニア層はPCは使えないけれどタブレットなら使えるという人が増えています)さすがにそろそろPC版だけでなくモバイル対応をしなければならない、ということが出てくるかと思います。

スクロールが操作の中心となるとデザインが大きく変わります。
そこで、Windows8やiOS7で採用されているフラットデザインの登場です。
従来のスモーキュフィズム的(現実にあるものを仮想に持ち込む)な考えが古くなりつつあります。
例えば、ボタンはボタンと分かるように立体にしてボタンらしいメタファーを含んでいることが好ましいとされてきました。しかし、フラットデザインではボタンをゴテゴテと装飾することよりも、指でボタンを押しやすくするためにボタン自体はシンプルにして、余白を設けることで、それがボタンであることを認知させ、アクションを誘導しています。

ボタンに画像を使うという考えも見直されています。拡大・縮小しても画質が乱れないようにするためにCSSで作ることが推奨されています。ボタンの文字も画像からテキストへ、テキストからウェブフォントへと変化しています。
これまでのウェブデザインとはかなり変わってきています。ここがポイントです。

関連記事