• 0k
  • 0
ウェブデザイン \ 2015年12月21日

実例あり!かっこいい縦長スクロールサイトの作り方

ホームページへのアクセスはスマートフォンからという人が増えたため、縦に長い1ページだけのホームページを、数年前からよく見かけるようになりました。FacebookTwitterのようなサイトも、モバイル端末に慣れている閲覧者が使いやすいよう、縦長に下へ下へとスクロールする、非常に長いニュースフィードを備えています。

縦長にスクロールするタイプのデザインは、サイト上での情報の読み込み速度のスピードアップと、より多くのコンテンツを効率よく閲覧できるようデザインされているので、ユーザーが知らず知らずの内に最後までスクロールしてしまう効果があります。今回は、縦長スクロールサイトの作り方を、コツや実例も交えて説明したいと思います。簡単3ステップで、あなただけの素敵なサイトが完成しますよ!

縦長スクロールサイト作成方法 ― 3ステップ

ステップ1:テンプレートを選びましょう

縦長スクロールサイトを作成するのは、本当に簡単です!Wixなら、縦長スクロール専用のテンプレートが揃っているからです。テンプレートを元に、画像・テキスト・リンクを編集するだけで、トレンド感のある、あなただけの素敵なウェブサイトがアッという間に完成します。

Wixテンプレート

ステップ2:コンテンツを足していく

サイトを、もっと縦に長くカスタマイズするには、写真やコンテンツをどんどん下に追加していくだけです。ページの長さは、コンテンツに合わせて自動的に調整されます。コンテンツを下にドラッグすると、ページの長さを変更することができます。

ステップ3:アンカーを使う

縦に長いサイトを作成する場合には、是非「アンカーリンク」を使うことをお勧めします。縦長サイトで情報を探す際、訪問者が長いページの一番下まで閲覧して探すのは大変です。「アンカーリンク」を使うと、いちいちスクロールしなくても、クリックひとつで移動することができます。つまり、クリック一つでページの上部に戻ったり、指定の位置に移動することができるので、訪問者がサイトを使いやすくできるのです。アンカーメニューをサイトへ追加する方法については、こちらのページをご覧ください。

アンカーリンク

縦長のウェブデザインを採用すべきサイト

縦長のウェブデザインを多くみかけるといっても、全てのサイトにこちらのデザインが適しているわけではありません。以下の項目にあてはまるかチェックしてみましょう。もし、あてはまるようであれば、縦長のサイトも選択肢に入れてみてください。

  • ホームページへのトラフィックは、主にモバイル機器からの流入が多い。
  • あなたのホームページには、1ページ内に掲載したほうが分かりやすい情報がたくさんある(例えば、オンライン履歴書やオンラインマガジンなど、楽しみながら閲覧してもらうようなコンテンツ)。
  • ホームページのコンテンツを頻繁に更新しており、新しい順にコンテンツを表示している(ブログやレビューサイト、ユーザーによって生成されるコンテンツ)。
  • ホームページに、メディアをあまり使っていない。画像ギャラリーや動画が多いホームページは、読み込みに時間がかかり、訪問者にとって使いにくいホームページになります。

顧客にとって、コンテンツをスクロールしながら見たほうが簡単なのか、またはクリックして別ページに移動したほうが楽なのかを考えてみてください。そうすることで、縦長のスクロールデザインがあなたに最適かどうかが見えてくるはずです。

Wixで作成された縦長スクロールサイト実例

それでは、実際にWixで作成された縦長のホームページをみてみましょう。

Chiles Grill >>

美味しそうなタコスやブリトーの写真が飛び込んでくるのは、原宿にあるメキシコ家庭料理のホームページ。メンバー登録でクーポンがもらえたりと来店を促す仕掛けが上手いですね。各ソーシャルメディアへの誘いで広告効果も抜群。

縦長スクロールサイト実例1

Alpina Honey>>

美しい商品写真、商品を際立たせる背景、読みやすくデザインされた文字にも着目すべきですが、最も注目してほしいのが、アンカーリンクです。それぞれのはちみつの写真の下にリンクを貼り、そこをクリックすると、商品説明に飛ぶ作りとなっており、訪問者に親切なサイトとなっています。

縦長スクロールサイト実例2

Brad Repetz>>

グラフィックデザイナーのポートフォリオらしく、ビジュアルを前面に押し出したデザインとなっています。履歴書をPDFで簡単にダウンロードできるところも◎。

縦長スクロールサイト実例3

早速、サイトをつくってみませんか?縦長スクロールページのデザインを採用したホームページテンプレートを選び、無料で素敵なページを作りましょう!

フレッシュドリンク テンプレート>>
商品をPRしたい際、最適!

フレッシュドリンクのテンプレート

Webデザインポートフォリオ テンプレート>>
ポートフォリオを作成したい方に!

Webデザインテンプレート

音楽スタジオ テンプレート>>
ミュージシャンのサイトにも◎!

音楽スタジオテンプレート

Webデザインスタジオ テンプレート>>
使用例はこちら

Webデザインスタジオテンプレート

さあ、早速Wixでプロ並みのホームページを作成しましょう。

ホームページ作成ならWix

ライター: Wix Team
Wix

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email