2015.11.25
保存版！レスポンシブデザインでできる美しく機能的なギミックをまとめてみた
あなたはただパソコン用のウェブサイトをシングルカラムの縦並びにしただけのレスポンシブデザインを取り入れ、機能性やユーザビリティの低いスマートフォン最適化をしてしまっていませんか？スマートフォン用サイトは、パソコン用サイトとは異なるレイアウト設計やコンテンツ設計が必要となるので、ただ縦並びにしただけでは集客に弱く、また機能性やユーザビリティの低いウェブサイトになってしまいます。
では一体、どのようにすれば「集客に強くユーザビリティや機能性が高いレスポンシブウェブサイト」が実装できるのでしょうか？それは「スマートフォンでの表示にこだわったギミック」を知ることが重要です。ギミックとは仕掛けという意味で、レスポンシブデザインならではのギミックを活用することで本質的なデザインを追求することができるからです。
事実、綿密に設計されたレスポンシブウェブサイトは、ある一定のパターンのギミックが用いられています。そこで今回は「レスポンシブデザインでできる美しく機能的なギミック」をご紹介します！
そもそもレスポンシブデザインとは？
レスポンシブデザインとは、ひとつのHTMLファイルでパソコン・タブレット・スマートフォンに最適化されたウェブサイトを表示させる技法のことです。技術的にはCSS3のメディアクエリという機能を用いて、それぞれのウィンドウサイズによってレイアウトやデザインを変更することで実現します。例えば下記画像をご覧ください(左側がパソコンの表示例で右側がスマートフォンの表示例)。
ひとつのHTMLファイルで上記二つのレイアウトを実現しています。試しに上記ウェブサイトをパソコンで閲覧しブラウザの幅を狭めると、自動的にスマートフォンに最適化されたレイアウトに変わります。レスポンシブデザインでは、横並びの要素を縦並びにすることでスマートフォンでの閲覧に最適化しているのです。
なぜギミックが重要なのか？
それは、スマートフォン用サイトは、パソコン用サイトとは異なるレイアウト設計やコンテンツ設計が必要となるので、ただ縦並びにしただけでは集客に弱く、また機能性やユーザビリティの低いウェブサイトになってしまうからです。ですからただ縦並びにするだけではなく「もう一工夫したギミック」を取り入れることで、より集客に強いウェブサイトに繋がります。例えば良いギミックの例として下記画像をご覧下さい。
ヘッダー右側にはお店の電話番号が記載されていますが、スマートフォンでの閲覧時には電話アイコンに変わります。この電話アイコンはタップすることでお店に直接電話がかけられるようになっています。つまり、ただパソコンでの閲覧時に表示されていた電話番号をそのまま表示するのではなく、スマートフォンでの閲覧時には電話を掛けられるようにすることでユーザビリティが大幅に向上(=電話によるコンバージョン数の増加)に繋がります。
こういった「もう一工夫したギミック」を取り入れることが美しく機能的なレスポンシブウェブサイトに繋がるのです。次にその具体的なギミックをご紹介します！
ギミック一覧
ヘッダー：レイアウト別
ロゴが左側でナビゲーションが右側にある一般的なヘッダーが、スマートフォンでの閲覧時にはロゴが中央(もしくは左側のまま)に移動し、ハンバーガーメニュー(≡←このようなメニュー)と呼ばれるナビゲーションに変化するギミックです。スマートフォンはパソコンに比べて表示領域が狭いため、ナビゲーションはそのまま文字列で表示するのではなく、ハンバーガーメニューにまとめることで表示領域が広がり、またユーザビリティの向上に繋がるからです。
レスポンシブデザインにおける一般的なギミックで、ロゴやナビゲーションの位置が異なっても、このギミックは基本的に変わりません。
初めにご紹介したパターンに似ていますが、スマートフォンでの閲覧時にはヘッダーに背景色を追加するギミックです。画像を全面に使用しているウェブサイトでは、背景色を追加することでヘッダーとコンテンツ部のメリハリがつくからです。パソコンは画面が大きいので背景色がなくてもロゴやナビゲーションがはっきり分かりますが、スマートフォンでは意外と見づらくなってしまうため、画像を全面に使用しているウェブサイトではこのギミックが最適です。
ロゴやナビゲーションが画面下部にある場合、スマートフォンでの閲覧時にはナビゲーションをハンバーガーメニューにし、画面下部ではなく上部に配置するギミックです。スマートフォンは右手の親指で使用する傾向が高く、画面下部にあると押しづらいからです。
ヘッダー：細かい工夫
スマートフォンでの閲覧時にはヘッダー内にFacebookやTwitterなどSNS関連のボタンが設置されるギミックです。スマートフォンはパソコンに比べてSNSの利用傾向が高く、ヘッダー内にSNSボタンを設置するのはとても効果的だからです。SNSでの情報拡散が重要なウェブサイトにはぜひ採用したいギミックです。
スマートフォンでの閲覧時に電話番号を強調するギミックです。スマートフォンの利用シーンから、病院等を探している時は緊急性が高いことが多いので、すぐに電話をかけられる機能性が重要となるからです。病院など緊急性が必要となるウェブサイトにはこういったギミックを採用しましょう。
ヘッダー右側には電話番号が記載されていますが、スマートフォンでの閲覧時には電話マークのアイコンに変化し、タップすることで電話がかけられるようになっています。そうすることでユーザビリティが向上し、電話でのコンバージョンを獲得できるようになるからです。業種関わらず電話でのコンバージョンが重要なウェブサイトにはぜひ採用したいギミックです。
キービジュアル
パソコン用とスマートフォン用を分けずひとつの画像で両デバイスに最適化するのが一般的ですが、中にはキービジュアルをパソコン用とスマートフォン用の二種類を予め用意しており、CSSで片方を非表示にするか、jQuery等を用いて画像を切替えるギミックを採用しているウェブサイトもあります。パソコンとスマートフォンでは表示領域や縦横比が大きく異るため、二種類を予め用意しておくことで、それぞれのデバイスに最適なキービジュアルを表示させることができるようになるからです。
画像の上にキャッチコピーがありますが、スマートフォンでの閲覧時にはキャッチコピーが背景画像の下に移動するギミックです。そうすることでスマートフォンの狭い表示領域でもしっかりと画像を見せることができるからです。キャッチコピーの文字数が多い場合や、画像をしっかり見せたい場合に最適なギミックです。
縦書きのキャッチコピーが、スマートフォンでの閲覧時には横書きになるギミックです。パソコンは表示領域が広いため縦書きキャッチコピーに横に要素を配置することができますが、スマートフォンは表示領域が狭く横並びにコンテンツ配置をすることができないからです。和テイストのウェブサイトにぜひ採用したいギミックです。
キービジュアルの左右中央に表示されているスライド切り替えボタンが、スマートフォンでの閲覧時には非表示になるギミックです。スマートフォンは表示領域が狭いため、タップしやすいサイズのボタンが配置されていると肝心のキービジュルが読みづらくなってしまうからです。
メインコンテンツ
ニュース一覧
日付とタイトルが横並びになっているニュース一覧が、スマートフォンでの閲覧時には縦並びになるギミックです。スマートフォンは表示領域が狭いため、基本的にコンテンツは縦並びのシングルカラムで実装することで、読みやすく使いやすいウェブサイトになるからです。これはニュース一覧だけでなくフォームやフッター等にも活用できるレスポンシブデザインにおける基本的なギミックです。実装しやすいよう上記ウェブサイトのように、パソコン用でも予めシングルカラムで実装されていることが多いです。
左側に小さめの画像と、右側に見出しや抜粋文などを表示しているニュース一覧が、スマートフォンでの閲覧時にはそのままのレイアウトで最適化されるギミックです。あまり画像が重要でない場合、縦並びにすると画像が大きくなりすぎてしまい、コンテンツの優先順位が変わってしまうからです。画像がそこまで重要でない場合はこのレイアウトやギミックが最適です。
画像の下に見出しや日付が表示されているニュース一覧が、スマートフォンでの閲覧時にはそのままのレイアウトで最適化されるギミックです。こちらもコンテンツの優先順位を変えないための手法で、画像はアイキャッチとして目を惹くため(=コンテンツとしての優先順位が高め)の場合にこのレイアウトやギミックが最適です。
左側もしくは右側に画像があり、その反対側にタイトルや抜粋文を表示しているニュース一覧が、スマートフォンでの閲覧時には画像とタイトルが縦並びのレイアウトに変化するギミックです。そうすることでパソコンとスマートフォン双方での閲覧時に、画像を目立たせたコンテンツ設計ができるからです。画像をとにかく目立たせたい場合に最適なレイアウトとギミックです。
表組み
左側に項目名と右側に内容が表示されている表組みが、スマートフォンでの閲覧時には縦並びになるギミックです。レスポンシブデザインにおける基本的なギミックが表組みでも用いられます。
左側に項目名と右側に内容が表示されている表組みが、スマートフォンでの閲覧時にはレイアウトはそのままに項目を必要最小限にして表示するギミックです。会社概要のように項目数が少ない場合は縦並びのギミックが最適ですが、項目数が多い場合は分かりづらくなってしまうからです。表組みにおける項目数が多い場合に最適なレイアウトとギミックです。
左側に項目名と右側に内容が表示されている表組みが、スマートフォンでの閲覧時にはレイアウトはそのままに、そして項目名が固定され内容ははみ出した分横スクロールして表示するギミックです。項目数が多い場合且つ、項目を削ることが出来ない場合に最適なレイアウトとギミックです。
フォーム
左側に項目名と右側に入力フィールドのあるフォームが、スマートフォンでの閲覧時には縦並びのレイアウトになるギミックです。これもまた何度もご紹介しているレスポンシブデザインにおける基本的なギミックを用いた一つです。
ちなみに左側に項目名と右側に入力フィールドというレイアウトをそのままに、スマーフォン用に最適化することもできますが、そうすると入力フィールドが狭まってタップしづらくなりますし、また設定によってはタップすると入力フィールドに自動的にズームするため項目名が見えなくなってしまうこともあるので、フォームは縦並びのレイアウトとこのギミックが最適です。
スマートフォンでの閲覧時には縦並びのレイアウトになりつつ、各項目ごとに背景色が追加されるギミックです。入力項目が多い場合、縦並びのレイアウトだと項目ごとの境目が分かりづらくなり、今何を入力していいのか迷わせてしまうからです。項目数が多いフォームはこのギミックが最適です。
表示されているフォームが、スマートフォンでの閲覧時でも同じレイアウトのまま表示させるギミックです。会員登録画面やログイン画面など、フォームしかコンテンツがないような場合は、こういったギミックを採用することでスマートフォン最適化の工数を大幅に減らすことができるからです。他のコンテンツがある場合は、コンテンツの幅が異なりすぎてビジュアル的にも美しくないので、フォームしかコンテンツがないような場合はこのレイアウトやギミックが最適です。
その他のコンテンツ
中央寄せで表示されている文章が、スマートフォンでの閲覧時には左寄せ且つ、改行タグが消去されているギミックです。スマートフォンは表示領域が狭いため、中央寄せの文章とパソコンでの表示を前提とした改行はとても読みづらいからです。見出し等は文字数が少ないため中央寄せのままで構いませんが、文章は左寄せにし改行タグを消去しましょう。
左側もしくは右側にテキストがあり、反対側に画像のあるコンテンツが、スマートフォンでの閲覧時には縦並びになるギミックです。テキストを上部にするか、下部にするかはコンテンツの優先順位によって異なります。レスポンシブデザインのウェブサイトにおける、コンテンツ表示のまさに基本形です。
画像上にテキストを配置したコンテンツリンクが、スマートフォンでの閲覧時にはレイアウトはそのままに(カラム数は2つに)、テキストの下には半透過された背景色を追加するギミックです。スマートフォンは表示領域が狭いため、そのままのレイアウトを維持しようとするとテキストが見づらくなることがあるからです。豊富な画像で訴求するコンテンツに最適なレイアウトとギミックです。
画像上にテキストを配置したコンテンツリンクが、スマートフォンでの閲覧時にはそのまま縦並びになるギミックです。コンテンツとして画像の優先順位が高い場合に最適なレイアウトとギミックです。
アイコンの下に見出しやテキストのあるレイアウトが、スマートフォンでの閲覧時にはアイコンの横に見出しが移動し、その下にテキストが表示されるギミックです。アイコン部分が画像であれば縦並びでも構いませんが、アイコンはそこまで多くの表示領域を必要とするほど重要なものではないからです。むしろ縮小して見出しの横に持ってくることで、コンテンツの理解促進を図ることができます。
画像の下にタイトルとテキストを表示させている複数のコンテンツが、スマートフォンでの閲覧時には縦並びにはならず、横スクロールにて表示させるギミックです。商品や料理メニュー、または制作実績などコンテンツ数が多めの場合は、縦並びにするとあまりにも縦長になってしまい、欲しい情報だけを取り出しづらくなってしまうからです。
複雑なギミック
画像の上に文言が表示されているリンクが、スマートフォンでの閲覧時には画像の反対側に文言が回りこむギミックです。上記のウェブサイトのように、おしゃれで洗練されたイメージのウェブサイトにぜひ採用したいリンクデザインとギミックです。
左側に縦書きのロゴがあり、スマートフォンでの閲覧時には画面中央に表示されるギミックです。和のテイストを押し出し、高級感や重厚感のあるウェブサイトに採用したいギミックです。画像とロゴのバランスがパソコン版とスマートフォン版共に絶妙ですね。もちろん、ナビゲーションはハンバーガーメニューで上部に表示します。
左側にナビゲーションがあり、右側にはタイル状にコンテンツが配置されているレイアウトが、スマートフォンでの閲覧時には縦並びになるギミックです。技術的なことは上記ウェブサイトをぜひご覧頂ければと思います。まさに「これレスポンシブ？」と思うような複雑なギミックが採用されており、「もはやパターンは無限なのか？」とさえ感じます。
フッター
各カテゴリごとに横並びになっているフッターリンクが、スマートフォンでの閲覧時には縦並びになるギミックです。これもまた何度もご紹介しているレスポンシブデザインにおける基本的なギミックを用いた一つです。
ただ縦並びにするだけでなく、スマートフォンでの閲覧時にはボタン風にデザインを切り替えるギミックです。スマートフォンはタップで操作をするため、ボタン風にすることで押しやすくなりユーザビリティ向上に繋がるからです。もちろん、右側にはリンクマークを設置することでリンクがリンクと分かるようにしましょう。
各カテゴリごとに横並びになっているフッターリンクが、スマートフォンでの閲覧時には非表示になるギミックです。カテゴリやコンテンツが膨大な場合、そのすべてをスマートフォンでも表示させるとごちゃごちゃしてしまい、ユーザビリティを下げることになるからです。またスマートフォンの利用シーンを考えてみても、膨大なリンクをクリックしてまでページ遷移することは考えづらいので、非表示にしましょう。
まとめ
いかがでしたか？いまやスマートフォンに最適化されたウェブサイトを持つことはとても重要ですが、中でもSEO・工数・運用保守の観点からレスポンシブデザインが取り入られることが多くなってきました。しかし、ただパソコン版のウェブサイトをシングルカラムの縦並びにすることだけがレスポンシブデザインではありません。
電話番号はタップするだけで発信できる電話ボタンにしたり、文章は左寄せにして美しく読みやすくしたり、フォームは項目ごとに背景色を追加したり。こういった拘りぬいたギミックが、集客に強いウェブサイトに繋がります。今後も「なるほど！そんなギミックがあったか！」と驚くようなものも出てくるのではないでしょうか。一つ上のレスポンシブデザインを、あなたの武器にしちゃいましょう！
※いくつかの記事内のキャプチャ画像は、同じウェブサイト様より引用させていただいております。同じウェブサイト様より引用しているものにつきましては、二つ目以降のキャプチャ画像の引用元を省略させていただいておりますので予めご了承ください。