1ページのウェブサイトデザインの流行について

このサイトのように、すべてのコンテンツを1つのページに配置するWebサイトの流入を見てきました。Smashing Magazineで私が見たリストのいくつかにあるサイトでさえ、これを行っています（このサイトのように、100のサイトのように見えますが、その大部分が使用しています）。

プログラマーとして、このスタイルは私にバグをもたらします（多くの理由、主に技術的、メンテナンス、SEO、ロード時間などを含む）が、さらに重要なこととして、なぜそれが人気を博したのかについて興味がありますそもそもデザイナー？

関係する2つの別個の傾向があります。

1つ目は、サイトがシンプルになる傾向です。パンフレットサイトの場合は、おそらく4つの個別のページは必要ありません。1つのスクロールページは、使いやすく、ナビゲートし、維持しやすいです。多くのiPhoneアプリサイトがこのモデルを使用しています。多くの中小企業と同様に。多くのサイトがこれから利益を得ることができます。

もう1つの傾向は、Flash開発者が最終的にHTML、jQuery、およびAJAXを発見し、「1つのファイル= 1つのサイト」という古いFlashモデルの内部でまだ考えていることです。これは、大量のコンテンツが1ページのデータ/インタラクションに圧縮された大規模なサイトであるという点で、最初の傾向とは異なります。あなたが述べているように、この方法にはさまざまな欠点がありますが、適切なコードで克服できます（URLが変更されたりブックマーク可能であることを確認したり、Googleがコンテンツをナビゲートしたり、読み込み時間をAJAX経由で管理したりできます）。

1ページのサイトの背後にある最高のアイデアの1つは、それには物語の側面の多くがあるということだと思います。私が考えることができる最も良い例は、このページ：婚約/結婚式の招待サイトです。これは素晴らしいサイトであり、多くの理由で機能します。1つは、すべてが非常にうまく連携していることです。これは、一連のページに広がる同じ影響はありません。

もともとIE9を紹介するために作成されたこのデモは、すべてストーリーテリングに関するものです。絵本のようですが、ページをめくるのではなくスクロールします。そのため、それは本当にシームレスでクールです。ビジネスサイトを作成するのにはあまり実用的ではありませんが、1ページの雰囲気が役立つ理由の1つを際立たせています。

また、コンテンツの少ない小さなページでも機能します。私が結婚したとき、ページからページへ行くことを保証するだけの十分なコンテンツがなかったので、私はすべての情報を1ページのサイトに持っていました。1ページのサイトを構築して維持する方が簡単で、読み込み時間はそれほど問題ではありませんでした。

ビジネスに関しては、もっと難しいケースだと思います。印象的な例は、GoogleがNexusスマートフォンを発売したときだと思った-彼らは1ページのサイトでそれをした。彼らはタブレットを発売してQを発表したので、もうそんなことはないのでリンクできませんが、すべてを1か所で見るのは本当にすてきでした。あなたはクリックを削減し、作成し、より臨場感あふれる体験を。

コーディングの筋肉を曲げたり、トレンドを利用したりするためにそれをしている人々の多くの例を目にするでしょう。しかし、それはデザインの世界では常に起こります。サイトの目的を検討するときはテーブルに置いておき、必要に応じて使用してください！

これには利点があります（考えられるのは1つだけです！）。つまり、Ctrl+ を使用して検索したい場合F、すべてのコンテンツが1つのページにあるため、Webサイト全体を一度に検索できます（コンテンツが検索可能であると仮定） 。

それは、「ユーザーにもっとコンテンツを要求させないでください-ただ彼らにそれを与える」という概念に部分的に由来すると思います。グーグル、ツイッターなどのように、下にスクロールするほど自動的に多くの結果が表示されます。

2008年のAza RaskinのGoogleTech講演「クリックしないでください」は一見の価値があります。

全体の話は非常に興味深いですが、ここに関連するビットは29分から始まります。ここで彼はFirefoxをハッキングして、ブラウザのすべてのタブを1つの連続した垂直スクロールページに表示できるようにしました。

これはあなたが今見ているものの先駆けだったのでしょうか。

2つの言葉：ユーザーエクスペリエンス。

基本的なポートフォリオサイトでは、コンテンツがシンプルでわかりやすい場合、ユーザーが複数のページをクリックして何を提供する必要があるかを確認する必要はありません。

より具体的には、行動を促すフレーズの1つです。サイトの目標が「私を雇う」である場合、サイトマップが不必要に複雑であると、サイトは逆効果になる可能性があります。

編集：以下のいくつかの例...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/

SEOの観点からは、1ページのウェブサイトのデザインは流行です。

これは、特に競争の激しいビジネス環境で作業している場合に、SEOパフォーマンスをおそらく台無しにするものです。グラフィックデザイナーがこれを考慮に入れることはめったになく、クライアントはSEOについて十分な知識を持っていませんが、SEOスペシャリストに尋ねると、彼らは同じことを言うでしょう。

私のチップ？SEOスペシャリストにキーワード調査を依頼し、ウェブサイト構造の概要を説明してください。

あなたはサーチエンジンランドでもっと読むことができます、これらの人はSEOを非常によく知っています;）https://searchengineland.com/single-page-websites-seo-182506

これは、「スクロールせずに見える範囲」すべてを取得しようとする試みのようです。平均的な短期注目の視聴者が滞在する貴重な貴重な領域です。さまざまな使いやすさの研究でこれが示されているので、人々はそこに「重要な」ものを入れようとします。このデザイナーは「すべてがそんなに重要だ」と感じたようです。

私は、最新の人目を引くトリックを使って人々にウェブサイトを読んでもらうこと以上のものではないと思います。

たとえば、@ Shaunaのリンクされた記事のNikeサイトを見てください。正直なところ、ランニングシューズのデザインと、同じランニングシューズの広告には、多くの革新が残されていますか？そのコンテンツは、視差が必要な場合は、パンフレットやFlashに簡単に配置できます。代わりに、Flashの負担なしに新しいナビゲーションスキームの結果として、気の利いた視差効果を追加できます。

Smashing MagazineのWebサイトにHTML5 / CSSのチュートリアルがあり、これを行う方法を示したサイトが表示されると思います。

実際にリンクした最初のアイテム（ドリフトバー）にはクールな要素があると思います。

実際にメニューリンクの1つをクリックするまで意味がありませんでしたが、アニメーションがアイデア全体の単一の原動力であることがわかりました。古いポパイやディズニーの漫画のような、昔ながらの3面カメラ効果のようなものです。

そのページのスクロール機能は間違いか、彼らが取り除くことができなかった機能だと思います。

1つの問題は、クライアントに人気がある可能性があることです。これらのサイトは、新しくリリースされた製品のフラッシュマイクロサイトの時代を思わせます。現在、視差がこの仕事をしているようです。製品のマイクロサイトの場合は問題ないと思いますが、実際にコンテンツがあるサイトの場合は、明らかに適切ではありません。もう1つのことは、デザイナーが最新で「トレンド」にあることを示すのが好きだということです。人気のある新しい流行技術のWebサイトがあると、有益に見える可能性があります。上記のすべてが同様のサイトのインターネットをカバーしています。

タイトルであなたの質問にかなり答えたと思います-つまり、それは流行です。

JavaScript（そしてAJAX）が何年も前に登場し、人々があらゆる種類の凝ったものを使っていたように、JqueryとCSS 2/3のサポートの向上とブラウザーでのレンダリング速度の向上により、新しい方法でまったく新しい実験が行われました。特定の古いブラウザが原因で、過去にそれほど実用的でなかったサイトをレイアウトすること。

しかし、CSS、Javascript、AJAXの場合と同様に、流行は成熟し、まろやかになり、時間とともに研ぎ澄まされ、心地よく、便利になります。 最初の例は、狂ったようにばらばらのスクロールで頭痛を誘発する明白なものです（たとえば、最初から「ギャラリー」を押した場合）。私の控えめな意見では、それは行き過ぎであり、通常との別れを正当化するのに十分なスムーズな経験ではありません。これは、同様の手法を使用しているすべてのサイトが悪いことを意味するものではありません。

デザイナーが新しいテクノロジーで物事を行う新しい方法を実験することが重要です。私は、これが決して試みられるべきではなかったことを少しの間示唆しません。しかしそれはそれが何であるか-実験的です。