デバイスの多様化に対応するレスポンシブデザイン

デザインのトレンドは環境やユーザーのニーズに応じて変わるものでここ10年の中でもWebデザインは大きく変化しています。
スマホやタブレットの普及に伴いwebサイトにアクセスするデバイスは多様化したためすべてのデバイスで見やすく操作しやすいレスポンシブWebデザインが主流になりました。

ここ2～3年のデザイントレンドの特徴を見てみましょう。

さらに操作性を考えたものがデザイントレンド

スマートフォンが普及しはじめた頃、多くのWebサイトでは、iPhoneのホーム画面のようにアイコンを縦横に配置したものがデザイントレンドでした。
これはユーザーが抵抗なくサイトを利用できるようにと考えられたものです。

しかしスマートフォンが十分に普及した現在ではこのレイアウトは減っており、それぞれのサイトに適したレイアウトへ変化しています。
また、アイコンを並べるデザインが減っているのは左手でも右手でも片手で操作しやすいように画面の横幅一杯までリンクエリアを広げたデザインが増えたことにも関係しています。

さらに操作性を考えて2～3年前に比べるとパーツが大きくなっています。
その他、現在の特徴的なデザイントレンドには以下のようなものがあります。

ワンページ

縦長の1つのページにコンテンツの概要を集めることにより、ユーザーはスピーディーにサイトの全体像を把握できるというメリットがあります。

パララックス

ワンページのなかでも、画面をスクロールして背景の画像を動かしたりアニメーションを使うパララックスはFlashに変わる表現として人気上昇中です。

フルスクリーン写真・動画

高解像度で効果的な写真や動画を横幅一杯にフルスクリーン表示させるデザインは、その高いデザイン性と迫力、訴求力の強さでデザイントレンドになっています。

スライダー、スライドメニュー

スライダーは以前からよく見かけますが、最近はレスポンシブとアニメーションに対応したものが増えています。また、スライドメニューの人気が上がっています。

固定ヘッダー

背景の邪魔をしない半透明のヘッダーやスクロールするとフェードする物、ヘッダーの中身のサイズを変えてコンパクトになるものなどはよく使われています。

チェックポイント1・視覚面でスマートフォンに対応させる

スマホサイトとPCサイトの違いとしてまず挙げられるのが、画面の大きさです。
PCと違って小さな画面に情報を表示させるわけですから、小さな文字が並んでいるよりも簡潔で分かりやすい表示の方が見やすいことは言うまでもありません。
スマホの画面サイズも統一されたものではなく、機種によって様々です。
サイト制作の際は複数の機種でどのように表示されるのか確認することが求められます。
IEやファイヤーフォックスなど複数のブラウザでの確認もお忘れなく。
PC用サイトだと見やすいサイドバーも、縦長の画面にはそぐわないためお勧めできません。

チェックポイント2・操作面でスマートフォンに対応させる

マウスを使うPCに対して、スマホはタッチで操作します。
そのため、リンクさせている文字の行の幅が狭かったりアイコンが小さかったりすると、分かりにくい上に誤ってタッチしてストレスを与えるという事態を招いてしまいます。
また、PCではカーソルを合わせると色が変わったりメニューが表示されたりするデザインがありますが、スマホはタッチ操作のため難しいでしょう。

チェックポイント3・HTMLやメタデータを見直す

スマホで検索した時に、上位表示されるかどうかはメタデータが大きく影響します。
タイトルも検索されやすいタイトルのほうが、多くの人の目に触れる確率は上がります。
また、スマホサイトに正しいCSSやHTMLが使用されているかどうかもチェックポイントのひとつ。
誤った記述だと、文字化けやリンク切れ、レイアウトの崩壊などを起こす危険があります。

チェックポイント4・セキュリティ対策

セキュリティ対策はサイトを見ている側の問題だけではありません。
スマホサイトの乗っ取りやなりすましだけでなく、情報漏洩の危険性も考慮する必要があります。
スマホサイトを作成したらまず、脆弱性診断を行いましょう。