EditorialDesignmodoは2010年から運営しているWebデザインのトレンドなどを紹介するメディアです。この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。複数ページにまたがるWebサイトよりも、1枚で構成されるシングルページのWebサイトの方が明らかに作りやすいように思えます。実際はユーザーフレンドリーであると同時に見た目も魅力的なサイトという観点では、シングルページで作る方がずっと難しいのです。シングルページのデザインに、マルチページデザインの10倍の時間がかかることはありません。言いたいことすべてを1つのページに詰め込むために、しっかりプランを練ることが難しいのです。好きなだけページを長くすることができますが、ほとんどの訪問者は3回目のスクロールの後で離脱し始めます。シングルページの作り方について、この記事では5つの重要な要素を中心に説明しています。シングルページを構成するこれらの要素それぞれについて正しく理解していきましょう。ゴールWebサイトのゴールを明確にして取り組むWebサイトが達成しようとしているゴールを理解しないままデザインを始めても意味がありません。そのゴールに基づくことで、サイトの構造を設計できます。シングルページのWebサイトは、ユーザージャーニーを1つのゴールに向けて設計する必要があります。それは以下のようなものです。何かを売るポートフォリオを見せるイベントを告知する訪問者をすぐに離脱させてしまっているような特徴を探してみましょう。この特徴は、彼らがCTAに応える前に発生しているかもしれません。ページの読み込み速度です。AgencyこのWebサイトのファーストビューにあるインタラクティブな効果は、サイト全体の読み込み速度を遅くするようなことはありません。3BeThemeのあらかじめ作られたこのシングルページの特徴は、動いているように見える静止画です。Labちょっとしたアニメーションが、ページの動作を鈍らせることなくファーストビューにあるイラストを活気づけています。2こちらは、このページのフレッシュな見た目そのものがセールスポイントになっている例です。Sheerlink大きな画像とスライドパネルが、ユーザーを引き付ける役割を果たしている素晴らしい例です。4アプリを宣伝するのに長々とした技術的な説明は必要ありません。鮮やかな色使い、しっかりした効果、本当にかっこいいプレゼンテーションが成果をあげます。テキスト最小限にとどめて読みやすくするシングルページWebサイトのファーストビューをテキストで埋めると、ほとんどのユーザーはわざわざページを下へスクロールしなくなってしまいます。なく、見出しを目立たせることに注力して、テキストの量は最小限にする必要があります。短いパラグラフや箇条書きを使用してもいいでしょう。ページ内のどこであってもテキストを固まりにするのは避けましょう。テキストはセクションに分けて、見た目を統一させましょう。内容を面白くわかりやすくするためなら、そのほかに何ができるかも考えましょう。ブックマークすべきシングルページWebサイトは以下のとおりです。Robotとても面白いサイトなので、すべてのセクションをおそらくもう1度見たくなります。3要素がきちんと整理されている例です。Alfred核となる情報はファーストビュー上にあり、説明に箇条書きも使用してメッセージをできるだけ簡潔にしています。Cakes大きくて魅力的な画像がセールスに役立つ他の例です。ここでは、各画像に対してテキストが適切な位置に添えられています。Mercedes-Benzこの例のように自動車がブランドと同等の人気を持っているときであれば、テキストよりも高品質な画像に重点を置く方が効率的です。正しい視覚パターンを見極めて余白を賢く使う人はテキストをFパターン(F字型)で読み、画像をZパターン(Z字型)で見る傾向があります。その流れを保つようにテキストや画像を正しく配置する必要があります。惜しみなく余白を使うことで、セクション分けができます。テキストを読みやすくし、訪問者を惹き付けておくこともできます。やり過ぎないようにしましょう。Connolly秩序をもたらすために余白を活用している例です。WeShootBottles.comこのWebサイトは非常にクリエイティブです。余白がキャンバスのようになっています。2このあらかじめ作られたシングルページWebサイトの余白は、秩序を保っています。いろいろなセクションが飛び出してくる仕様になっています。Reviewさまざまなデザイン原理を最大限に利用して、すばらしいビジュアルを作る方法のいち例です。Drops点鼻薬のプロモーションサイトに面白さを期待することは普通ありません。このサイトは、スライドや余白、アニメーションを巧みに使うことでその常識を打ち破りました。ナビゲーション操作しやすく、スクロールを楽しくさせるナビゲーションとスクロールの問題ほど訪問者をイラつかせるものはほとんどありません。長いシングルページの扱いには注意すべきです。訪問者がもっと何かを発見したくなるようなナビゲーションをデザインする必要があります。横に伸びるスティッキーヘッダーやサイドバーメニューを使うのはいいやり方です。ユーザーは1回のクリックだけで、興味のある場所へ簡単にジャンプできます。操作で疲れてしまうこともある、マウスでのスクロールのようなアナログな方法とは正反対です。自動スクロールするナビゲーションリンクも効果的です。訪問者はセクション間を瞬間的にジャンプする代わりに、自分がリンクを謳歌したときにページ上を遷移する様を楽しむことができます。ここからはユーザーを惹きつけ、扱いやすいナビゲーションの使い方をしているシングルページを紹介します。PederciniこのデザイナーのWebサイトには、3つの異なる自動スクロールのナビゲーションリンクが含まれています。Gameでは、あなたが面白さを見出すかもしれないナビゲーション体験を提供してくれます。2色彩設計、レイアウト構造、マウススクロール3回でページ全部を見ることができる、という3点で優れたサイトです。Brainflop最上部と左サイドの2つのメニューによって、ユーザーがWebサイトをすばやく操作できるようにしています。コールトゥアクション正しいCTAを見定め、ためらわずに使う一般的に、CTAボタンはWebサイトのゴールとつながっているので、ユーザーに行動を起こさせるために、ためらわずに使ってください。それがむしろシングルページWebサイトの最もいいところです。場合、ユーザーを1つのゴールに向かわせることができます。ポートフォリオを載せているなら、CTAボタンはファーストビュー内に載せるのが一般的でしょう。サービスやプロダクトを扱う場合には、複数のボタンが必要になるかもしれません。Hairdresserこのあらかじめ作られたWebサイトでは、CTAボタンはファーストビューとメニューの2か所にあります。Textureファーストビューに2個のCTAボタンが設置してあり、ユーザーは見たいものを選ぶことができます。Pyrismicこのサイトでは、目立つCTAボタンを使いシンプルな登録フォームを設置しています。(編注:現在は仕様が変更になっています)RenezaRenezaはCTAボタンに対して特に工夫などはしていません。適切な色とテキストサイズを用いて、賢明に扱っています。まとめここまでシングルページWebサイトの5つの重要な要素と、その使い方を見てきました。ここからは、あなたがこの技術を習熟するまで練習あるのみです。いえ、気をつけてください。これらの原理は合理的でシンプルなわかりやすいものです。長いシングルページのWebサイトをデザインするときには、必ずしも簡単にこれらの原理を取り入れることができるわけではありません。手っ取り早い方法がよければ、Webサイトのテンプレートを使いましょう。それらはここで述べた5つの原理が組み込んで仕上げられています。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。