Parallax-scrolling-in-web-design-web-design-and-parallax-scroll
Webデザインと視差スクロール
この章では、Webデザインの概念と、Webデザインで視差スクロールを使用する利点について説明します。
Webデザインの背景
20世紀初頭以来、紙媒体はデジタルメディアにより激烈な競争に巻き込まれています。 デジタルメディアには、インターネット上で見られるものが含まれているため、関連する雑誌も含まれています。
毎週/毎月のサブスクリプションの一部として受け取るニュースレターもデジタルメディアに含まれています。 主に、デジタルメディアはモバイルデバイスとデスクトップデバイスに大きく依存しています。 モバイル（ハンドヘルド）デバイスとデスクトップデバイスの両方でコンテンツを表示できる場合、違いが生じます。 いずれかのデバイスでコンテンツが表示される方法、コンテンツをデザインする特定のスタイルが有効です。
このスタイルの設計は、 Web Designing と呼ばれます。 設計またはコーディングの観点から、Webページの設計者がWebページの構築に着手すると、モバイルデバイスも考慮されます。
ウィキペディアによると、* Webデザイン*には、Webサイトの作成と保守に関するさまざまなスキルと専門分野が含まれます。 そのようなスキルの1つは、ユーザーにインパクトのあるエクスペリエンスを設計することです。 Webデザインは、このエクスペリエンスに対応し、ページコンテンツを整理するための体系的な方法を提供し、さまざまなスタイルを提供します。
Webデザインには、インターフェイスデザイン、グラフィックデザイン、およびコードを記述するための特定の標準の使用が含まれます。 この作業は、1人またはチームで実行できます。
この作業を簡単にするための市場には多くのツールがありますが、ウェブページの外観を作成するのは創造的なスキル次第です。
現代のWebデザイン
技術の進化に伴い、知識が爆発的に増加しています。 インターネットはモノになり、私たちの生活の質を飛躍的に高めました。 どの時点でも、平均的なインターネットユーザーにより多くの情報が処理されています。 この情報は、デスクトップコンピューター上のWebサイトまたはハンドヘルドデバイスの形式にすることができます。タブレットまたは携帯電話。
あまりにも多くの情報がユーザーの注意を引き付けようとしますが、Webエクスペリエンスを設計する人としては、メッセージの受け渡しに3秒しか割り当てられていないことが明らかです。
これにどのように対処しますか。 メッセージはすべてのWebデザインのソースにあるため、メッセージを渡すことは非常に重要です。 通信するWebサイトを構築すると同時に、ユーザーを引き付けて、コンテンツに執着させる必要があります。 それは確かに難しい仕事です。
任意のWebコンテンツの膨大な作業範囲を考慮すると、ますます多くの人々がWebデザインの世界に参入しています。 クリエイティブなWebデザイナーは、優れたユーザーエクスペリエンスを作成する彼/彼女の驚くべき才能のおかげで、町の話題です。 Webデザイナーは現在、マーケティング/広告会社に就職するか、自分で始めてWebデザインに飛び込むことができます。
美的魅力はウェブ上の特定のコンテンツの鍵です。 これは、Webデザイナーがデザイン、色、間隔などの原則と基盤を認識している必要があることを意味します。 より多くのユーザーが毎日高品質のWebコンテンツを見るようになります。 現在のWebページまたはWebサイトを、数時間または数分前にアクセスしたWebページと比較することは明らかです。 コンテンツの順序と優れたグラフィックスと色の組み合わせにより、多くのスタンドアロンのバナー/ページがインターネット上で人気のあるものになりました。
例
単純なグラフィックの場合を考えてみましょう。 ミームと呼ばれる多くのグラフィックがインターネット上にあります。 これらは、グラフィック内にテキストが埋め込まれたシンプルな* Graphics Interchange Format（GIF）*画像です。 これらのミームは、世界のある地域での最近の出来事に基づいてインターネットを巡回しています。 この例を見ると、彼らが持っている唯一の魅力は、グラフィックと関連するテキストまたは無関係のテキストです。
それでも、それは非常に多くの人気を得ており、インターネット上の驚くべき可能性について考えるようになっています。
したがって、Webデザインを効果的にするには、創造性とメッセージを伝える方法の両方が重要な役割を果たします。
成功するWebページはWebデザインとWeb開発の組み合わせであることに注意することが重要です。 現在の市場動向に従って、Webデザイナーとともに、Web開発者はチームに不可欠です。 Webデザイナーは常にインスピレーションを求め、彼/彼女の創造性を使用してグラフィックスと関連する配色を作成します。 一方、Web開発者はコーディングスキルを使用して、Webサイトでグラフィックと配色を公開します。
Webデザイナーは、コードを記述する知識も持っている必要があります。これにより、Web開発者が目的のグラフィックや配色を使用できるようになります。 Notepadのような単純なアプリケーションの単純なコードは、WebデザイナーがWeb開発の原動力となるのに役立ちます。
視差スクロールの使用
Parallax Scrollingは、WebデザイナーとWeb開発者の両方の仕事の境界になります。 Webデザイナーは、InVision、UXPinなどのツールを使用して視差スクロールの効果を作成し、Web開発者に意図したスクロール動作を伝えることができます。 さらに、Web開発者は自分のスキルを活用して、視差スクロール効果を作成します。 これは、さまざまなJavaScript、CSS、およびjQueryの手法によって実行できます。 これらの各方法の詳細については、次の章で説明します。
前のセクションで指定した定義に従って、視差スクロールは、背景コンテンツがスクロール時の前景コンテンツとは異なる速度で移動するときのテクニックです。
視差スクロール効果を作成する簡単なCSSテクニックは、このWebサイト（http://urban-walks.com/mobile/[The Urban Walks]）に示されています。
上記のスクリーンショットでわかるように、画面の中央にある携帯電話は、2回スクロールした後にコンテンツを変更します。 また、最初のスクロールで、携帯電話の背景が変わります。
この移行は、電話がその場所で一定であり、下にスクロールすると背景が変化しているという感覚をあなたに与えています。 この効果は、視差スクロール効果と呼ばれます。 画面の右端に向かっていくつかのドットの形で画面のインジケータがあるため、下にスクロールしていることがわかります。
視差スクロールの最初の使用は、古いコンピューターゲームでした。 キャラクターが背景よりも速く移動するため、固定された背景画像がより遅い速度で移動する場合。 これらのゲームの例–ディズニーのアラジンとディズニーのライオンキング。 これらのゲームは、それぞれ1993年と1994年に発売されました。
ゲームから始まったのは事実ですが、現在、多くのWebデザイナーは、視聴者に自分のサイトを愛させる効果を強調しています。 視差スクロールの利点は、Webサイトからモバイルサイトに拡張されます。
これらのWebサイトは、デスクトップバージョンの視差スクロールを使用して設計されていたため、モバイル画面もサポートするコードが追加されています。
Webおよびモバイルでの視差スクロールの利点
このセクションでは、以下で説明するように、さまざまな視点から視差スクロールを使用する利点について説明します-
視聴者の視点から
- 視差スクロールに関連する楽しい要素があります。 上記の例で見たように、ユーザーがさまざまな画面からスクロールすると、千語の情報の伝達が容易になりました。
- 初めてのユーザーを検討する場合、各スクロールに関連付けられた好奇心があります。 そのため、Webサイトのエクスペリエンスが向上するだけでなく、ユーザーがWebサイト自体への最初のアクセスにより多くの時間を費やす可能性が高くなります。
- ユーザーがスクロールに興味を持つにつれて、ユーザーエンゲージメントの割合は劇的に増加します。
- 情報はより明白な方法で利用できるため、ユーザーは情報を把握するプロセスについて考える必要はありません。
- 場合によっては、ロゴやメニューアイコンなど、画面上の他のアイテムをアニメーション化することで、提供する製品/サービスに関するストーリーを作成できます。
技術的な観点から
- デスクトップバージョンに視差スクロールを実装すると、同じフレームワークをモバイルWebサイトまたは画面に非常に簡単に使用できます。
- コードスニペットはシンプルで再利用可能であるため、マーケティング代理店またはウェブサイトサービスプロバイダーの会社であれば、新しいクライアントを収集するときにこれは楽になります。
- 視差スクロールの知識には、CSS、JavaScriptなどのフロントエンドフレームワークの専門知識が必要です。
