改善 = ウェブページ上の視差スクロール効果とグラフィカルなプレゼンテーションの作成と設計

ONEパララックススクロール

子供の頃、ファミコンやスーファミでゲームをしましたか？

これらのゲームは基本的に、シーンが動くときに前景と背景の間に異なる視差を作り出すことで、単純な 3 次元効果を実現します。

パララックス スクロールは新しいものではなく、私たちは皆、子供の頃にそれで遊んだことがあります...

現在、この視差スクロール効果は海外のウェブサイトでもどんどん使われており、ウェブデザインのホットなトレンドになりつつあります。

再定義する

ただし、このタイプの効果を使用する場合は、ページが煩雑になりすぎないように、特定の環境と最終ページの全体的なパフォーマンスも考慮する必要があります。

第二に、デザインは密接に関係していなければならない

パララックススクロール効果の主な特徴:

1. 直感的なデザイン、応答速度が速く、単一ページに適しています

2. 差分スクロール階層視差

ページ上の多くの要素は、互いに独立してスクロールします。これらを重ねると、背景レイヤー、コンテンツ レイヤー、テクスチャ レイヤーの 2 つまたは 3 つのレイヤーを作成できます。

（もっと増やすことは可能でしょうか？視覚的に行う方法はあるでしょうか？）

差分スクロールの実装ルール:

背景レイヤーのスクロール（最も遅い）

テクスチャ レイヤー (コンテンツと背景レイヤー間の要素) のスクロール (2 番目に遅い)

コンテンツ レイヤーのスクロール (ページのスクロール速度と一致させることができます)

3つのレイヤーのスクロール速度を不均一にし、美しい差分スクロール効果を生み出しました。

デザイナーとして、次のことができます...

1. 全体像を把握する

これらの背景画像は通常、Web サイト全体をカバーする高解像度の大きな画像です。

高解像度の写真は、視聴者の注目を素早く引き付けるのに適しています。非常にインパクトのある視覚効果を生み出し、ユーザーの目は無意識のうちに広い背景に釘付けになります。

知らせ：

1. 背景画像の色と内容は、ユーザーエクスペリエンスを損なわない限り、慎重に選択する必要があります。そうでないと、写真がどれだけ美しくても無駄になってしまいます。

ウェブサイトのメインコンテンツの読み取りや認識に影響を与えない、より柔らかく、やや透明感のある画像を選択し、コーディネートに注意を払うのが最適です。

1.2. 多数の画像を掲載したページでは、ユーザーに優れたスムーズな視覚体験を提供するために、画像のプリロードを検討する必要があります。

2. シンプルな配色を使うこともできます

単色の背景ほど直感的で簡潔なものはありません。純粋な色はさまざまな方法で表現できます

視差範囲内に 2 ～ 3 色を維持するのが最適です。色の透明度を調整することで、さまざまな視覚効果を実現できます。

3. 背景レイヤー、テクスチャレイヤー、コンテンツレイヤーの関係を見つける

ページ独自の機能に基づいてレイヤーを貼り付けるかどうかを定義します

テクスチャレイヤーの目的は、視覚効果をより効果的に伝えることですが、それが邪魔になってしまえば、本来の使用目的に反することになります。

コンテンツ レイヤーのプレゼンテーションが最も重要です。背景レイヤーやテクスチャ レイヤーがどれだけ凝っていても、ユーザーに対するコンテンツ レイヤーのプレゼンテーションは、デザイン プロセスにおける最優先事項です。

4. ストーリーテリング

パワフルなパフォーマンス、ミニマリスト スタイル、美しいデザインがすべて組み合わさって、素晴らしいインタラクティブなストーリーテリング体験が生まれます。コンテンツこそが王様であり、テクノロジーはそれを実現するための単なるツールに過ぎない、という話をよく耳にします。強力なメッセージングと美しい実行をうまく組み合わせることができれば、人々が愛し、楽しめる体験を生み出すことができます。

————ワイデン+ケネディ

TWO データ視覚化 - 情報グラフィックデザイン

ストーリー1 従来の水銀温度計と大文字水銀温度計

ストーリー 2 赤信号？ 青信号？

これらはすべて、日常生活におけるグラフィック デザインのシンプルな応用例です。グラフィック デザインは、情報の視覚化を表現する方法です。

データのグラフ化は、読むこととは異なり、目で見てわかる方法で情報を表現する方法であるデータ視覚化から生まれました。

こうした視覚的表現は、説明を提供するだけでなく、すべての読者が理解できる普遍的な結論も提供する必要があります。

今日では、視覚的な表現は単純な円グラフや棒グラフよりもはるかに目を引くものとなり、情報の発信をより興味深いものにしています。そこにはデザインのトレンドや創造的な革新が含まれています。

製品にグラフィックスと視差を使用する際のデザインプロセス

元のタイトル: 改善 = ウェブページ上の視差スクロール効果とグラフィカルなプレゼンテーションの作成と設計

キーワード: 改善、作成、視差、スクロール、効果、グラフィック、ウェブページ、プレゼンテーション、ONE、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化