WEBページのレイアウトやデザインについて考える

新しめのITガジェット好きだけど、古くてノスタルジックなモノも大好きな、全く筋の通っていない、ユゲタです。 良いと思うものに、「新しい」と「古い」はあまり関係なく、良いモノは良い！と思えばいいじゃない。 そして、何故良いと思えるかというと、そのモノにちゃんとしたストーリーがあれば、人はモノに対して感情をいだきやすくなるそうです。 これまで売れなかった商品が、ネーミングを変えるだけでバカ売れするというようなのも同じ理屈なんでしょうね。 よく聞く話で例えれば、「フレッシュライフ」という、抗菌靴下を「通勤快速」としただけで、飛ぶように売れるようになったというのは、商標知財セミナーで毎回聞く話で有名です。 そして、今回は、WEBデザインについての新しいと古いものについて考えてみたいと思います。

WEBデザインの歴史について

WEBデザインひとまとめ

1. ダイナミックデザイン 2. Flashデザイン 3. リキッドレイアウト 4. レスポンシブデザイン 5. リッチデザイン 6. マテリアルデザイン 7. スキュアモーフィックデザイン 8. フラットデザイン 9. フルードインターフェイス

1. ダイナミックデザイン

htmlがIE全盛期だった頃、javascriptを組み込んで単なる文字だけのページから、ダイナミックHTMLという言い方で、動く見栄えの良いホームページが作られ始めます。 wikipedia : ダイナミックHTML 文字がアニメーションして動くので、斬新な見た目はありましたが、ページの内容が分かりづらかったり、リンク場所が分からなかったりして、個人のデザイナーポートフォリオ用としてしか使えないデザインとも言われていたようです。

2. Flashデザイン

javascriptに限界を感じたwebデザイナーが、ツールだけでアニメーションからデザイン全体を構成できるFlashプレイヤーを使ったページが、企業も含めて流行しました。 まるで普通のアプリケーションを使った感じで進行できるデザインに、javascriptのようなガッツリプログラミングをしなくても、高品位な見た目が確保できるFlashに一時期人気が集中しました。 しかし欠点としては、CPU処理が激しく、ページ（webサイト）が重くなったり、Flashプレイヤーのインストールがされていないとサイトが表示されなかったり、バージョンが違うと誤作動をするなど、不満の声も多く上がってきて、 今では使われていない決定的な原因として、Apple社がFlashを毛嫌いして、safariブラウザ（iphoneのwebブラウザ）から一切除外したという事をきっかけに、 flashアプリの脆弱性などが散々報告された結果、今ではオワコンツールとなってしまったようです。

3. リキッドレイアウト

WEBページの横幅を一定にして、それをセンタリング表示するように表示します。 PCブラウザで見ることを想定したレイアウトなので、スマートフォンでは使えないのですが、レスポンシブデザインとの併用で使用することは可能です。 このレイアウト手法のメリットは、画面サイズが固定化されるので、内部のデザイン崩れを発生させにくくすることができます。

4. レスポンシブデザイン

スマートフォンが出てきて、PCブラウザよりもスマートフォンブラウザの方が閲覧数が多くなってきたことから、こうした小さい画面でもPC画面と同じ情報を、見栄え良く見えるようにできるために考案されたレイアウトデザインです。 cssのメディアクエリーで画面サイズを指定して、任意サイズ以上の場合と以下の場合でcss記述を区分けする事で、全く別のデザインを同一ページで実現することが可能になりました。 cssのメディアクエリはcss2のバージョンでもありましたが、サイズ判定ができるようになったのはcss3からです。 そのため、古いブラウザでは、適用できません。

5. リッチデザイン

iphoneの初代機であるiphone3Gの時代には、スマートフォンは少しリアルなアイコンに影を付けて浮いた感じにして、ボタンクリックなどのアクション表現をしたり、画面に画像を使用したデザインにする傾向がありました。 それまでのインターネットの見栄えより少しだけリッチ（高価）に見えるため、リッチデザインと呼ばれていたようです。 ちなみに、マテリアルデザインとスキュアモーフィックデザインを含めてリッチデザインと言うことが多いようです。

6. マテリアルデザイン

webページの画面背景などに質感を持たせた素材を配置して、コルクボードや、リアルなタイル写真、紙質、などを表現したデザイン方法でサイト自体の特性をマテリアルで表現する方法です。 素材に寄ってページの特性がわかりやすいのですが、意味のない雲の画像や訳のわからないアート画像などを設置するわかりにくいマテリアルデザインもあって、一長一短な面もあるようです。

7. スキュアモーフィックデザイン

ipadなどのアプリで、実際の機器の写真をそのまま表示して、アプリとして利用できるようにするデザイン方法で、楽器や機器などをリアルに使っている感覚になる事ができる方式です。 でも、ユーザビリティ的に弱いという指摘なども多くされていて、フラットデザインにシフトするWEBサービスが増えている傾向があるようです。

8. フラットデザイン

マイクロソフトがwindow8あたりから提唱してきたデザイン方式で、画面が非常にシンプルでカラーリングとシンプルなアイコンのみで構成できるため、 構築工数の軽減と、ユーザビリティがよくなるという点で、スマートフォンでの定番になっています。 マテリアルデザインなどと相反している点としては、高解像度のPCで見る場合はマテリアルデザインでいいのですが、小さい画面のスマートフォンでは、こうしたシンプルな表示がいいんでしょうね。

9. フルードデザイン

apple社が提唱しているデザイン方法で、横幅をスマートフォンの端末サイズで固定化し、縦長に連なっているような表示方法です。 twitterやfacebookのタイムラインなどの表示で有効ですが、通常のホームページの情報を縦長で表現する場合、このデザイン方法では重要な箇所が画面の下に来た場合に読まれなくなることがあるため、画面上位に、見出しとページリンクを付けた上で行うことが一般的になっているようです。

まとめ

デザイン方式は、もっと他にもいっぱい存在しますが、サイト構築をする場合にどのデザイン方式にするかを選択して、そのサイトでの統一感を出すことになりますが、 ページの特性によって、レイアウト方式を切り替えるというのは、アリという事がわかります。 トップページをフラットデザインにして、実際の機能ページではスキュアモーフィックデザインにするというのは、決して悪い使い方ではないと思いましたね。 デザイン方式には、新しいものも古いものもありますが、結果的に重要視するべきポイントは、ユーザーの使い勝手の良さに尽きます。 どうしても新しいものにこだわりたいという人の気持もわかりますが、古くて便利で使いやすい方式を捨てるのはあまりにももったいない話です。