実例あり！かっこいい縦長スクロールサイトの作り方
ホームページへのアクセスはスマートフォンからという人が増えたため、縦に長い1ページだけのホームページを、数年前からよく見かけるようになりました。FacebookやTwitterのようなサイトも、モバイル端末に慣れている閲覧者が使いやすいよう、縦長に下へ下へとスクロールする、非常に長いニュースフィードを備えています。
縦長にスクロールするタイプのデザインは、サイト上での情報の読み込み速度のスピードアップと、より多くのコンテンツを効率よく閲覧できるようデザインされているので、ユーザーが知らず知らずの内に最後までスクロールしてしまう効果があります。今回は、縦長スクロールサイトの作り方を、コツや実例も交えて説明したいと思います。簡単3ステップで、あなただけの素敵なサイトが完成しますよ！
縦長スクロールサイト作成方法
01. テンプレートを選びましょう
縦長スクロールサイトを作成するのは、本当に簡単です！Wixなら、縦長スクロール専用のテンプレートが揃っているからです。テンプレートを元に、画像・テキスト・リンクを編集するだけで、トレンド感のある、あなただけの素敵なウェブサイトがアッという間に完成します。
02. コンテンツを足していく
サイトを、もっと縦に長くカスタマイズするには、写真やコンテンツをどんどん下に追加していくだけです。ページの長さは、コンテンツに合わせて自動的に調整されます。コンテンツを下にドラッグすると、ページの長さを変更することができます。
03. アンカーを使う
縦に長いサイトを作成する場合には、是非「アンカーリンク」を使うことをお勧めします。縦長サイトで情報を探す際、訪問者が長いページの一番下まで閲覧して探すのは大変です。「アンカーリンク」を使うと、いちいちスクロールしなくても、クリックひとつで移動することができます。つまり、クリック一つでページの上部に戻ったり、指定の位置に移動することができるので、訪問者がサイトを使いやすくできるのです。アンカーメニューをサイトへ追加する方法については、こちらのページをご覧ください。
縦長のウェブデザインを採用すべきサイト
縦長のウェブデザインを多くみかけるといっても、全てのサイトにこちらのデザインが適しているわけではありません。以下の項目にあてはまるかチェックしてみましょう。もし、あてはまるようであれば、縦長のサイトも選択肢に入れてみてください。
ホームページへのトラフィックは、主にモバイル機器からの流入が多い。
あなたのホームページには、１ページ内に掲載したほうが分かりやすい情報がたくさんある（例えば、オンライン履歴書やオンラインマガジンなど、楽しみながら閲覧してもらうようなコンテンツ）。
ホームページのコンテンツを頻繁に更新しており、新しい順にコンテンツを表示している（ブログやレビューサイト、ユーザーによって生成されるコンテンツ）。
ホームページに、メディアをあまり使っていない。画像ギャラリーや動画が多いホームページは、読み込みに時間がかかり、訪問者にとって使いにくいホームページになります。
顧客にとって、コンテンツをスクロールしながら見たほうが簡単なのか、またはクリックして別ページに移動したほうが楽なのかを考えてみてください。そうすることで、縦長のスクロールデザインがあなたに最適かどうかが見えてくるはずです。
Wixで作成された縦長スクロールサイト実例
それでは、実際にWixで作成された縦長のホームページをみてみましょう。
美味しそうなタコスやブリトーの写真が飛び込んでくるのは、原宿にあるメキシコ家庭料理のホームページ。メンバー登録でクーポンがもらえたりと来店を促す仕掛けが上手いですね。各ソーシャルメディアへの誘いで広告効果も抜群。
美しい商品写真、商品を際立たせる背景、読みやすくデザインされた文字にも着目すべきですが、最も注目してほしいのが、アンカーリンクです。それぞれのはちみつの写真の下にリンクを貼り、そこをクリックすると、商品説明に飛ぶ作りとなっており、訪問者に親切なサイトとなっています。
グラフィックデザイナーのポートフォリオらしく、ビジュアルを前面に押し出したデザインとなっています。履歴書をPDFで簡単にダウンロードできるところも◎。
早速、サイトをつくってみませんか？縦長スクロールページのデザインを採用したホームページテンプレートを選び、無料で素敵なページを作りましょう！
フレッシュドリンク テンプレート>> 商品をPRしたい際、最適！
Webデザインポートフォリオ テンプレート>> ポートフォリオを作成したい方に！
音楽スタジオ テンプレート>> ミュージシャンのサイトにも◎！
さあ、早速Wixでプロ並みのホームページを作成しましょう。
ライター： Wix Team
