フルスクリーンWebデザイン：押さえておくべき５つの必須ポイント
サイト訪問者を一瞬で魅了する方法に興味がありますか？
ホームページの魅力をアップさせる方法の一つに、フルスクリーンWebデザインがあります。背景画像をスクリーンいっぱいに表示。他には類を見ない視覚的なインパクトで、閲覧者に強く訴えかけることができるため、多くのホームページで使われています。
ですが、ただ写真をアップロードすれば済むというわけではありません。基本を押さえていなければ、逆効果にさえなってしまう可能性も。フルスクリーン背景を効果的に利用し、閲覧者を魅了させる方法を、今回はご紹介していきます。
高画質の画像を使う
サイトの背景に使う画像は、高画質のものを使うようにしましょう。スクリーン上できれいに表示するのに十分な大きさで、かつ読み込みに時間がかかり過ぎない程度の大きさのファイルを使用することがポイントです。
目安として、解像度72 dpi （1インチあたりのドット ）あれば十分ですが、96 dpiを試してみてもいいかもしれません。Wixがオススメする背景画像サイズは、3,000 × 3,000以上のファイルです。
コントラストを利用
どんなに素晴らしい背景画像であっても、肝心な情報が埋もれてしまっては本末転倒。つまり、背景はあくまで背景であって、閲覧者に必要な情報がきちんと表示されることが肝心です。
テキストやボタンなど重要なコンテンツを分かりやすくするコツは、背景とコントラストをつけた色を使用することです。そうすれば背景に溶け込んでしまいテキストやボタンが見えなくなってしまう、といったことを避けることができます。
バランスが大事
フルスクリーン背景は一般的に、多様な情報が含まれています。たとえば写真の中に、人物、街の景観、商品が写っており、その他のコンテンツと隣合わせとなっています。その他コンテンツとは、ナビゲーションメニュー、テキスト、アプリ、ソーシャルメディアのリンクなど。
これらがバランスよく、調和が取れているようにホームページを構成しなければなりません。解決策としては、最初に背景画像をアップロードし、次にバランスを見ながら、メニューや、テキスト、ボタンなどを追加していくことです。
シェイプを利用
背景とコンテンツのバランスを取るために使うテクニックとして、四角などのシェイプやバナーを利用することもできます。そうすることで、背景とコンテンツの間に、追加の層をつくることができます。
テキストを挿入したいけれど、ごちゃごちゃして背景とのバランスが悪いという場合、まずシェイプを挿入します。次にシェイプ内の色を決め、最後にテキストを追加します。こうすれば、シェイプが背景との区切りになり、すっきりとしたデザインを保ちつつ、整然としたイメージを与えることができます。
ディスプレイの多様性を考慮
サイト訪問者はさまざまなデバイスやブラウザを使い、ホームページを閲覧しています。ですから、できるだけ多くの機器や画面サイズに対応可能なフルスクリーンWebサイトを作成しましょう。Webブラウザでは、Google Chrome、Firefox、Internet Explorerなどの主要ブラウザで、サイトがきちんと表示されるかを確認しましょう。
モバイル機器スクリーンでの表示を確認するために、携帯電話やタブレットなどのモバイル機器を用意します。また、大画面のデスクトップモニターがあれば、そこでも表示をチェック。あらゆるサイズの画面で、あなたのフルスクリーンWebサイトがきれいに表示されているか、確認しましょう。
フルスクリーンデザインを取り入れ、もっと魅力的なサイトを作成しましょう！
ライター： Wix Team
