• 154k
  • 15
ウェブデザイン \ 2018年10月10日

素敵なシングルページWebサイトの作り方

最新トレンド。トレンドはどの分野にも存在します。ウェブデザインの世界では、機能性に優れたシングルページのサイトがトレンド傾向です。シングルページサイトとは、全てのコンテンツが1ページに集約され、スクロールで全てが完結するサイトです。ページ間を遷移して閲覧する従来のデザインスタイルではなく、メニュー項目はシングルページ上の各セクションへリンクされています。

Webサイト作成において、多くのウェブデザイナーがこのトレンドとなっているシングルページサイトを手掛ける傾向がますます強くなっています。その理由は、シンプルで明確、そして印象的なデザインを提供できることが挙げられます。今回は、あなたのビジネスに活用できるシングルページのメリットと作成方法をご説明します。

1.どのタイプがあなたのビジネス向けか判断する

デザインスタイルは、1ページで簡潔するシングルページとコンテンツごとページ遷移する従来のサイトの2つに別れます。あなたのビジネス分野やあなたがウェブサイトに求める優先事項がどのようなものかによって、どちらのスタイルが適切なのかが異なります。まずは、2つのスタイルを比較してみましょう。

シングルページWebサイトは、ミニマムデザインかつ一体感のある優れたデザイン性を備えています。そして通常、テキスト量が少なく、画像数が多く使用されます。ロングスクロールのデザインスタイルにすることにより、あなたがサイト訪問者に見てほしいコンテンツ順に配置でき、ストーリー性を持たせながら、クリエイティブなコンテンツを作成ができます。複数のページを行き来きするといったユーザーの負担が減り、スクロールするだけで情報を得ることができるレイアウトのためスマートフォンやタブレットに適した構成です。また、シングルページサイトは、従来のサイトに比べてサイト維持が簡単で、少ないリソースで済みます。ここまで読み進めたあなたは、既にシングルページサイトの作成を検討しているかもしれません。
しかし、「私のビジネスに本当に適しているのか?」と再度自問しましょう。クリエイティブで新しいビジネスから伝統があるビジネスまで、このフォーマットは驚くほどの可能性を秘めています。ランディングページ、フリーランスサイト、フォトサイト、ブライダルサイト、その他イベント関連サイトなどの短いコンテンツ形式のある場合は、検討する価値があるでしょう。

従来のウェブサイトは、大抵の人が「ウェブサイト」を想像すると思い浮かぶサイトです。つまり、コンタクトページ、商品ページ、FAQページなど、トップページから各コンテンツへ遷移するサイトです。基本的に、この従来のサイトフォーマットを選択する主な理由は、様々な製品やサービスを提供しているために複数のページを必要とし、多くのコンテンツを抱える場合です。これは、各コンテンツを各ウェブページで整理することができ、詳細が示された長いコンテンツを提供できるためです。もしあなたがブログを開設しているのであれば、このフォーマットを使用することでユーザーがあなたの記事を容易に閲覧できるでしょう。

2.あなたのコンテンツの計画を立てる

シングルページサイトが適切なフォーマットだと判断したあなたは、ここから魅力的なシングルページサイトの作成方法を学んでいきます。まず、すべてのコンテンツを戦略的にレイアウトする必要があります。
シングルページサイトを作成することは、サイト訪問者があなたのコンテンツを目にする順序をコントロールできるメリットがあります。そのため、論理的かつ直感的である必要があります。サイト訪問者があなたのサイトを閲覧する際の、階層から考えてみましょう。
まず最初に、あなたが冒頭で伝えたいメッセージがあなたのサイト訪問者を魅了する必要があります。つまり、サイト訪問者があなたのウェブサイトをスクロールする前に目にする部分です。全てのウェブサイトにはあなたのビジネスについての「About」ページと「連絡先情報」が必要となります。あなたがどのような情報を提供したいのか、また提供する必要があるのか​​によって、行動喚起となるCTAやサービス紹介、社員紹介、商品紹介、お客様の声、よくある質問、フォトギャラリーなどを追加しましょう。優先順序を決めることは非常に重要なプロセスとなります。また、シンプルで明瞭であればあるほど優れたデザイン性となるので不必要な情報は削除しましょう。

3.サイトテンプレートを選択する

コンテンツの計画を練ったところで、次は、アンカーメニュー、ストリップやカラム、ソーシャルメディアバーなどの要素が含まれたサイトテンプレートが必要となります。Wixのデザイナーによる数百種類もの豊富でカスタマイズ可能なサイトテンプレートをご用意しています。これらのテンプレートの素晴らしい点は、あなたのお好みでヘッダーからフッターまで完全にカスタマイズできることです。あなたの無限の創造性を発揮できるときです!

4.あなたのコンテンツをセクションに分割する

今度は、ストリップを使ってあなたの準備したコンテンツをサイト上にディスプレイしましょう。サイトにストリップを追加するには:

1. Wixエディタを開く
2. メインメニューから「追加」をクリック
3.「ストリップ」を選択

ここでは、あらかじめデザインされたカスタマイズ可能なオプションを選択できます。各ストリップには、テキスト、動画、画像、お問合わせフォーム、お客様の声などを追加できます。あなたの必要な数だけストリップを追加したら、コンテンツを表示する順序に並べましょう。一般的に、「About」セクションから始まり、あなたの「連絡先」セクションで終わります。

5.パララックス効果を追加する

目を引くデザイントレンドとしてもう1つ着目すべきウェブサイトデザインは、パララックス・スクロールです。パララックス・スクロールを使用すると、3Dのような奥行きや遠近感を与える効果があります。ユーザーがサイトをスクロールする際に、レイヤーとなった背景を別々の速度で動かし、後ろの画面を、前の画面よりゆっくり動いているように感じさせて、立体感を与えることで、サイトにダイナミックな印象を与えることができます。パララックス効果を追加するには、エディタからストリップ、フェードやズームイン等のアニメーションを選択しましょう。この効果により、ユーザーがサイト下部までスクロールしてくれる可能性を高めます。

6.アンカー機能で各セクションにリンクする

あなたが使い慣れているサイトメニューは、シングルページサイトでは少し異なります。シングルページサイトのメニューは、メニュー項目を選択した際にページ遷移するのではなく、トップページ上の各セクションへリンクされています。各セクションへリンクさせるには、まず、アンカーを設定する必要があります。このアンカーの設定には、優れたサイト構成にするために3つの欠かせない手順があります。

> アンカーを追加。シングルページサイト上で、ユーザーが特定のセクションへ移動することができます。多くのテンプレートには既にアンカーが組み込まれていますが、名前の変更、移動、削除をいつでも行えます。

> サイトメニューをアンカー機能でリンク。メニューから特定のセクションへ移動できます。これにより、ユーザーはメニューからページ上の特定のセクションへ移動することができます。各アンカーで設定するタイトル名がメニュー項目へ表示されるため、明確なナビゲーションをするために大事な役割を果たします。

> メニュー項目の順序を作成。メニュー項目とリンク先は、簡単なスクロールと使いやすいナビゲーションのために一致している必要があります。例えば水平メニューの場合、メニュー項目の最初は「About」、そしてページの最初のセクションを「About」と位置付けます。

シングルページサイトは通常ロングスクロールとなるため、フリーズした時の為にメニューを常に表示する設定にすると良いでしょう。また、フローティングアンカーメニューの作成やメニューがヘッダーにある場合はメニュー位置の固定も良い方法でしょう。

アンカー機能

7.サイト上のスクロールを容易にする

ロングスクロール形式のシングルページサイトは、ユーザーがスクロールして最後まで閲覧するので、「トップへ戻る」ボタンを設置し、サイト下部から上部まで戻ることのできるスムーズなナビゲーションを提供しましょう。

8.優れたCTAを設置する

全てのコンテンツが1ページ内に表示されるため、CTA(行動喚起)でメルマガ登録や見積依頼などユーザーの関心を引くことも大切です。CTAを設置する際は、あなたがユーザーに取ってもらいたい行動を促す短いフレーズにし、優先度の高いセクションへ誘導する素晴らしい機会を作りましょう。
これを行うには、手順6での「アンカー」のようにエディタからCTAボタン追加後、あなたの希望するリンク先へユーザーが移動できるよう接続します。例えば、CTAが「お問合せ」と表示されている場合、「お問合せ」セクションへリンクすることができます。

9.フッターへ重要事項を含める

フッターは、ウェブサイト上の一番下にある領域です。ほとんどの人は、連絡先などの重要な情報を探しているときに、フッターへ移動します。そのため、連絡先情報、SNSアカウント、営業時間、プライバシーポリシー、利用規約など全て最新の情報に保つことが必要になります。また、あなたが実店舗をお持ちの場合は、フッターにマップを追加することもできます。

フッター

10.SNSアカウントを追加する

オンラインプレゼンスのあらゆる側面をシームレスに結びつけることが重要です。その方法の1つに、あなたのFacebook、Instagramなどのソーシャルメディアをあなたのウェブサイトへリンク付ることが挙げられます。そうすることで、あなたのサイトへトラフィック流入の見込増加に繋がるためです。

> サイトへソーシャルバーを追加。あなたがビジネスで利用するSNSアカウントのアイコンを設置することで、ユーザーがあなたのSNSへアクセスできます。 Wixで提供しているソーシャルバーを利用すると、いくつかのデザインオプションから選択できます。よって、あなたがすべきことは、ソーシャルバーのデザインを選択し、あなたのSNSアカウントを接続させるだけです!ユーザーがサイト内をスクロールする際、ページ上にSNSアイコンが常に表示されるようエディタから「固定された画面」をクリックすると好きな位置に固定できます。

> Instagramフィードを追加。 InstagramフィードをWebサイトに組み込み、あなたのサイトを一層引き立てましょう。ユーザーへあなたのビジネス関連の最新の写真を提供できる良い機会です。

ソーシャルメディアバー

11.SEOに着目

SEO( 検索エンジン最適化 )は、どのようなWebサイトにとっても重要な要素となります。自分のサイトが世界中のウェブで多くの人が目にすることを望む場合は特にです。特定のキーワードの検索結果によりサイトが上位表示されるよう最適化を行うことにより、より多くのトラフィック流入や潜在顧客をあなたのサイトへの取り込むことが期待できます。

また、適切なキーワードの追加もお忘れなく。Wixで作成したサイトをお持ちの方は、簡単に作業できます!あなたのサイト用にパーソナライズされたチェックリストを作成してくれるWix SEO Wizが、あなたのパーソナルアシスタントになります。こちらの記事も併せてご覧ください。

12.モバイルフレンドリーにする

デスクトップではなくスマートフォンでインターネットを閲覧することは、今日では標準となっています。これは、Webサイトのモバイル版が検索エンジンでのランク付け要素として判断材料となっている1つの理由です。(Googleモバイルファーストインデックスを参照)。あなたのサイトとどのような関係があるのでしょうか?簡単に言えば、デスクトップ版サイトと同様に、モバイル版サイトも機能的にする必要があるということです。画面の見やすさとスムーズなナビゲーションが重要であることを考慮すると、あなたは既にシングルページサイトの作成を選択していることから、正しい方向に向かっていると言えるでしょう。また、あなたがWixでサイトを作成しているのであれば、どのようなデバイスにも自動で適用する機能が備わっています。Wixエディタで、モバイル版サイトへ切り替え、あなたのモバイル版サイトをプレビューしてみましょう。

モバイル版サイトの閲覧をさらに容易にするため、クイックアクションバーを追加する方法があります。ソーシャルバーはモバイル版サイトには表示されないため、連絡先情報などの必要な情報を検索するためにユーザーを誘導する優れた選択肢となります。

シングルページサイトの例

シングルページサイトが一体どのような見栄えになるのか疑問に思っているあなたへ!これから3名のWixユーザーが作成したサイトをご紹介します。あなたがサイト作成をする際に彼らの創造性に溢れたデザインがインスピレーションとなるでしょう。

Brave Women’s Conference

Brave Women’s Conference

Mutiny Creative Agency

Mutiny Creative Agency

Lena Steinküler

Lena Steinküler

モダンなデザインを巧みに使いあなたのWixホームページを今すぐ作成しましょう!

ライター: Wix Team

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

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

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

メールは既に存在します

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

Wixブログを購読 \ 

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

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

メールは既に存在します

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