シングルページウェブサイトを完璧にデザインする方法

    シングルページウェブサイトを完璧にデザインする方法

    ジンドゥーのユーザーには冒険心のある人たちが多くいると思います。ウェブデザインの流行に敏感な者として、シングルページウェブサイトにもおそらく精通しているでしょう。それゆえ、なぜこの新顔にみんな夢中になっているのかも、わかっているはずです。

     

    シングルページウェブサイトは素早く・簡潔に文章を読め、直感的にスクロールができ、モバイルで使いやすく、しかもデザインがかっこいい。多すぎるコンテンツにユーザーが疲れてしまっている場合、シングルページウェブサイトのシンプルさが愛されるのもわかります。

     

    ただし、シングルページウェブサイトは、いろいろなタイプのウェブサイトにとって、素晴らしい選択肢の一つではありますが、全ての事を解決してくれるほど万能ではありません。

     

    シングルページサイトは、自分のサイトにとって適正か?

    シングルページサイトを作る前に、その選択肢が自分のプロジェクトや事業にとって最適なものなのかを確認しましょう。下に挙げる観点から考えてみてください。

    どんな時にシングルページサイトを選ぶのか?

    シングルページサイトは、コンテンツ数があまりなかったり、以下の例のようなサイトに近いものであれば、素晴らしい選択です。

     

    シングルページサイトを選ぶべきでない場合

    もし、コンテンツが多くて複雑、もしくは情報量が大量にある場合は、シングルページサイトは不向きです。ベルボトムのジーンズのように、シングルページサイトは誰にでも似合うというわけではないのです。

    シングルページサイトの作り方

    自らのサイトのニーズにはシングルページサイトがぴったりと決めたなら、次にすべきことは、シングルページサイトに最適なテンプレートと美しく仕上げるための5ステップを学んでいきましょう。

    シングルページウェブサイトを完璧にデザインする方法
    シングルページサイトの作り方

    シングルページサイトに最適なテンプレート

    シングルページサイトを作る上で、難しい最初に1歩はテンプレートを選ぶことです。選ぶにはちょっとしたコツが必要なので、シングルページサイトに使われているトップ5のテンプレートを紹介します。

     

    ・カイロ

    ・マラガ

    ・マイアミ

    ・ローマ

    ・チューリッヒ

    (左から)

    シングルページウェブサイトを完璧にデザインする方法
    シングルページサイトに最適なテンプレート

    美しいシングルページサイトに仕上げるための5ステップ

    1. シンプルに徹する

    サイトの体裁は、シングルページサイトが成功するかどうかの鍵となります。

    覚えておかなければならない重要なことは、余計なものはない方が良いということです。サイトを作り始める前に、一番伝えたいメッセージは何なのかを考えてみてください。そして、文章は読みやすく、コンテンツは短めで的を得ているものになっているか確認しましょう。

     

    サイトを訪れたら、人はすぐに必要な情報を見つけたいと思うものです。

     

    問い合わせ先や事業・サイト自体についてのまとめを探すのに時間を無駄に使いたくはないはずです。その為にも、優先順位はきちんとつけ、余計な情報は省きましょう。読者がどうやってサイトをみて、情報にたどり着くのかを考えてみると、どうすべきかが容易にわかります。

     

    読者はどんな情報を求めているのでしょう?鍵となるコンテンツは、だれ、なに、なぜ、いつ、どこの5Wに答えるものになっていますか?

    【ジンドゥー AIビルダー】シングルページウェブサイトを完璧にデザインする方法
    シンプルに徹する

     

    サイト訪問者の半数以上は15秒しかサイトにいない(リンク先英語記事)というのは有名な話です。あなた自身で15秒かけてサイトをざっとみてみてください。必須情報は簡単に見つけられましたか? 伝えたいメッセージは明確でしたか? サイトをもっと読みたいと思いましたか?

    2.情報を論理的に配置する

    我々は、なんでも ”すぐ” ”簡単に” という即席社会に生きています。

    労力をかけずに読める体験を作り出す為に、コンテンツをどう構築したいのか、計画と概念をきちんとしましょう。ユーザーが探しているものを簡単に見つけれらるように、コンテンツを論理的に振り分け、構成要素を決めていくようにしてください。

    専門性の高いウェブサイトに見えるサイトを作る一つの方法は、ピラミッドの法則に則って進めることです。そのサイトが一体なんであるか?のような重要な情報はサイトのトップにあるべきです。そこから徐々に、より詳細な補助的情報へと掘り下げていきます。

    例えば、結婚式サイトを作っているとしましょう。誰が結婚するのか、いつ、どこで式が行われるのかといったもっとも重要な情報は、サイトのトップにあるべきでしょう。逆に参加するかしないかの返事いった重要度が下がる情報はページの下の方にあっても問題ありません。

    【ジンドゥー AIビルダー】シングルページウェブサイトを完璧にデザインする方法
    情報を論理的に配置する

    シングルページウェブサイトの各セクションにメリハリをつける方法をいくつかご紹介します。

    ・各セクションで違う背景色を選ぶ。アップロードする方法は、こちらを見てみてください。
    ・各セクションに独立したタイトル(見出し)をつける
    カラム機能を使って、文章の大きな枠で分ける。また枠で囲んだ文章の左右に余白を作ることもできます。視覚的に魅力を高めるため、各セクションの構成をいろいろ取り混ぜるのはどうでしょう。一つのセクションは3カラムあって、他のセクションは2カラムといった風です。
    ・文章を分ける為に写真機能を使って、写真やスライドショーを追加する
    ・横のラインを使って上下に余白を作り、セクションを分ける
    ・各セクションの間に十分な余白を持たせる
    ・ユーザーが画面をスクロールしてもすぐにページトップに戻ってナビゲーションメニューへ行けるように、”ページTOPへ”のボタンを有効にする(これは、固定されたナビゲーションのテンプレートを使っている場合のみで、マラガのように常にメニューが表示されているテンプレートには当てはまりません)
    論理的なレイアウトになっているかどうか、友人や家族に”テスト”してもらいましょう!

    3.マルチメディアを使ってストーリーを印象付ける

    我々は、情報の65%は視覚で判断するいうことを知っていましたか?(リンク先英語記事)ストーリーを伝えるに最善の方法は、視覚コンテンツを通して情報を伝えることです。文章がどれだけ素晴らしくても、複数のメディアで分割しないと、長すぎる文章に読み手はすぐさま興味を失います。

    読者を魅了し、メッセージをきちんと伝えるために、写真、動画、スライドショーなどを使って、文章をバージョンアップさせましょう。

    【ジンドゥー AIビルダー】シングルページウェブサイトを完璧にデザインする方法
    マルチメディアを使ってストーリーを印象付ける

    画像:美しい写真は魅力的なシングルページウェブサイトを作るには欠かせないものです。

    目に留まる、高画質の写真を投入すれば、読者の第一印象は必ず良いものになるでしょう。魅力的な画像は、ブランドを反映して全体の雰囲気を決めるもので、より長くサイトにいてもいいかなと読者に思わせることになります。プロ並みの商品写真の撮り方は、こちらのコラムを参照してください。

     

    いい写真がなかなか見つからないのであれば、ロイヤリティフリーのストック写真を多数揃えたサイトを紹介しているので、こちらもチェックしてみてください。

    動画:例えば、写真が1000語語るのと同等だとすれば、動画は100万語です!

    100%のユーザーが動画のあるサイトには動画のないサイトに比べて長時間滞在する傾向があります。動画は、コンテンツを魅力的なものにするもっとも簡単な方法なのです。

    ・スライドショー:複数の画像を表示するのにいい方法を探しているなら、スライドショーは複数枚の画像に特化して読者を惹きつけられる完璧な方法です。

    ホームページが必要ですか? 
    コーディングなしで、モダンなデザインのホームページをつくりませんか?

    4.使いやすいナビゲーションを作る

    ユーザーがサイト全体をスクロールでスムーズにみられたとしても、ユーザーに使いやすいよう、ナビゲーションは不可欠です。

     

    ナビゲーションは商品やサービスについての特定の情報があるところに、ユーザーを誘導するものです。アンカーリンクを使えば、他のページにユーザーを誘導するのではなく、サイト内のいろいろなポイントへ直接飛ばすことができます。

    【ジンドゥー AIビルダー】シングルページウェブサイトを完璧にデザインする方法
    使いやすいナビゲーションを作る
    【ジンドゥー AIビルダー】シングルページウェブサイトを完璧にデザインする方法
    使いやすいナビゲーションを作る

    シングルページウェブサイトでは、ナビゲーションをシンプルにしておくことが重要です。サイトを明快に作るに不可欠な5Wとナビゲーションにリンクさせるものを改めて考えてみましょう。ナビゲーションの中に、読者を外部へと導くようなものは入れないようにしてください。

     

    読者を混乱させるだけでなく、それを間違ったリンクだと思ってしまうかもしれません。どうしても外部サイトにユーザーを誘導する必要があるなら、ユーザーがどこへ飛ぶのかわかるようにアイコンを使いましょう

    5. 強いCTAを設置する

    ユーザーが次にどこへ向かうのかを明確にするために、強力なCall to Antion (CTA 行動喚起)のあるホームページをデザインすることがいかに大事です。シングルページウェブサイトも例外ではありません。

    オンラインで何かのサービスに登録した時のことを考えてみましょう。

    ニュースレターに登録したことがありますか? iTunesやDropboxをダウンロードしたことは?

    これらの”登録”はそのサイトが説得力のあるCTAを作れていたから起こり得たことです。あなたが読者にしてほしいことは何か?効果的なCTAで行動を起こさせるには、どう彼らを刺激すればいいかを考えてみてください。

    【ジンドゥー AIビルダー】シングルページウェブサイトを完璧にデザインする方法
    強いCTAを設置する

     

    *シングルページウェブサイトを作るのに、プロのデザイナーの助けを受けるのもいい方法です。JimdoExpert (ジンドゥーエキスパート)に依頼やジンドゥーリメイクをチェックしてみてください。

     

    ここで紹介されているヒントが美しいシングルページウェブサイトの構築に役立てば幸いです。自分なりの裏技を持っていますか? 何か質問がありますか? 

    どんなことでもいいので、コメントをお願いします!