次世代のウェブ レイアウト - National Geographic Forest Giant

Christopher Gammon

CSS やブラウザ レイアウトに応じてさまざまなツールを使い分けることで、ウェブ コンテンツを効果的に可視化できます。CSS フィルタ、WebGL、HTML5 動画、SVG、canvas などのウェブ機能を使用し、CSS Regions、CSS Shapes、CSS カスタム フィルタなどの進化を続けるテクノロジーを活用することで、クリエイティブ環境を大幅に拡大できます。Adobe は長い間、レイアウトやデザインに情熱を注ぐコンテンツ クリエイターと提携してきました。この知識をウェブに応用し、進化する多くのウェブ標準にも貢献してきました。

私たちはナショナル ジオグラフィックの協力を得て、「Forest Giant」というタイトルの機能のコンテンツを使って、これらの機能がどのようにリッチなウェブ レイアウトとレスポンシブな技術を実現できるかを示すプロトタイプを作成しました。この記事では、サイトの特に興味深い特徴をどのように構築したかを説明します。以下の動画では、Christian Cantrell がサイトのさまざまな機能について簡単に説明していますので、ぜひご覧ください。

レイアウトの微妙な違い

優れたレイアウトを構成する要素とその背後にある機能は微妙であるため、Google は注目すべき機能を強調する「エディタ オーバーレイ」を作成しました。編集者のマークを有効にするには、記事の下部にあるバーをクリックします。

レイアウトに依存しない

今日のウェブでは、レイアウトはコンテンツによって決まることが多く、コンテナはテキストに合わせて縦方向に拡大します。複雑なレイアウトを作成する場合、コピーやその他のコンテンツに変更を加えると、レイアウト全体に好ましくない影響を与えることがあります。そのため、予期しない変更に基づいてコンテンツを再設計する必要が生じることがあります。リージョンを使用すると、要素をコンテンツとして定義し、そのコンテンツを流れるレイアウトの部分を指定することで、コンテンツとレイアウトを完全に分離できます。

「Forest Giant」の例では、物語が 1 つの要素に含まれています。次に、ページ全体に、写真とテキスト領域で構成されるレイアウト スキャフォールディングがあります。CSS では、コンテンツをフローさせる要素を定義します。コピーが要素の最後に到達すると、DOM の順で次の要素に進みます。これにより、テキストが要素の高さに収まるか上回るかを気にすることなく、列を自由に調整して、デザインに基づいて列の高さを調整できます。また、全幅画像などの要素をレイアウト内に配置しつつ、ストーリーの流れを止めることができます。

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

上記の CSS では、"story" という名前付きフローを作成しています。この名前のフローのコンテンツは、ID が "storyContent" の要素です。すると、クラス名が「story」であるすべての要素を通過します。CSS Region はレスポンシブ デザインに最適なツールです。大画面ではリッチなレイアウトを実現し、小さな画面では単一列レイアウトに合わせて調整できるよう、複数列やオフセット列などの機能を使用できます。リージョンでは、vw や vh などのレスポンシブ ユニットを使用してリージョンのサイズを設定することもできます。これを使用すると、リージョン チェーンの次の要素に自然に流れ込むため、コンテンツが切り取られる心配なく、レイアウトで列がビューポートの高さを超えないようにすることができます。

ドロップキャップ

CSS の除外を使用すると、テキストを不規則な形状で囲むことができます。これは、ドロップ キャップなどのデザインを飾る場合に便利です。ドロップキャップは、ストーリーや章の最初の文字を拡大して、残りのテキストをキャラクターの輪郭に巻き付けるデザインの一般的な手法です。この効果は、インライン コンテンツが浮動小数点数で囲まれるのとよく似ていますが、除外により、長方形のボックスに限定されなくなりました。float で shape-outside を使用すると、コンテンツをキャラクターの形状にぴったりと包むようにジオメトリを定義できます。

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

これにより、コンテンツが円形の周りを囲む楕円が作成されます。また、シェイプには相対単位を使用しているため、要素のサイズを変更するとシェイプのサイズに反映されます。

図形

ドロップ キャップに加えて、シェイプの内側を使用して図形内にテキストを折り返す機能も利用できるようになります。この機能をサイト全体で使用します。特に大きな画像キャプションでは、写真のネガティブ スペースを利用してテキストをフレームに収めます。また、他の画像の輪郭に沿ってテキストを折り返すことも可能で、これまでウェブ上では実現が難しかったレイアウトをエミュレートすることもできます。

シェイプは、相対単位を使用してシェイプを定義することで、レスポンシブ レイアウトでも機能します。このようにして、コンテナやビューポートに基づいて伸縮するシェイプを作成できます。また、すべて CSS で定義されているため、メディアクエリを使用してシェイプを完全に変更したり、削除したりできます。以下に、サイト内で使用されるポリゴンの 1 つの例を示します。各ポイントは以下の値です。

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

バランス重視のテキスト

バランス テキストは、行を折り返すときに、単語ごとに折り返すのではなく、要素内のテキスト ブロック全体を確認する機能です。1 行あたり 1 つか 2 つの単語が 1 行に 1 行または 2 語の場合は、テキスト行を分割して要素内の行のサイズを均等にするといった事態を避けられます。このレベルのコントロールにより、見栄えのよいテキスト ブロックを簡単に作成できます。特に、引用やサブタイトルのような短い文章の場合はなおさらです。

これは、記事の中で「バランス重視のテキスト」を使用している例です。この機能は Adobe が提案している標準であるため、同じ結果を得るために Randy Edmunds が作成したポリフィルを使用しています。この機能は、レスポンシブなケースで最適に動作します。ブラウザのサイズを変更すると、ブロックがテキストのバランスを保ちながら、ほぼ同じ幅の行になっていることがわかります。バランス テキストのポリフィルは jQuery プラグインであるため、簡単に使用できます。必要なのは、レイアウトが変更されたときにセレクタに「balanceText()」を適用することだけです。このように、バランスのとれたテキストが得られます。

$('.balance').balanceText();

切り替え効果のフィルタ

遷移は、ユーザーの注意を引いてサイト内のものの状態を伝える重要な方法です。不透明度（最近では 3D 変換）を使用して、ユーザーがサイトの一部をスクロールまたは操作したときに、スムーズな遷移やアニメーションを作成することが確認されています。これで、同じ目的に使用できるフィルタができました。

「Forest Giant」では、フィルタを使用して、画像が視野に入るとグレースケールからカラーへとフェードします。これらのフィルタを不透明度などのフィルタと組み合わせて使用すると、複雑な画像効果や切り替え効果を生み出すことができます。カスタム フィルタを利用して、さらにドラマチックな効果を加えることもできます。

カスタム フィルタは、WebGL と同じシェーディング言語である GLSL を使用して記述します。CSS を使用してこれらのシェーダーを DOM 要素に適用すると、複雑なブレンド効果や 3D 歪みが可能になります。サイトの下部にある [Explore the President Tree] をクリックすると、ページがカールしてその下に別のセクションが表示されます。これは、カスタム フィルタを使用してコンテンツ間のリッチな遷移を実現する方法の一例にすぎません。アニメーションは CSS 遷移を使用して実現できます。ただし、遷移で許容されるよりも堅牢なアニメーションやインタラクションを使用したい場合は、以下のように JavaScript でスタイルを設定することで、シェーダーに値を渡すことができます。これにより、イージングをより細かく制御したり、ユーザー入力でシェーダーを操作したりできるようになります。

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

作成したフィルタは、効果を適用するために GPU でコンテンツをテクスチャとしてラスタライズしています。そのため、作業が終了したら必ず動画を削除してください。削除しないと、コンテンツがぼやけて表示されることがあります。

$("#map").css("webkitFilter", "none");

CSS のカスタム フィルタを使用すると、本物の本でページをめくるようにページの折り返しをするなど、面白い効果が得られます。ウェブ デベロッパーは、GLSL という言語で複雑なエフェクトをプログラミングし、ウェブ コンテンツに適用できます。カスタム フィルタの詳細、各種パラメータ、使用方法について詳しくは、こちらのチュートリアルをご覧ください。

WebGL でのプリレンダリング テクスチャ

この記事の宝石は、世界で 2 番目に大きな木と考えられている「The President」の最初の完全な画像でした。この画像は、何百枚もの木の写真を合成し、全体像を作り出して作成されました。このプロセスをシミュレーションするために、画像を複数の小さな写真に分割し、そこに飛ぶようにして全体像を作り出そうとしました。これは WebGL を使用して実現されており、特に WebGL の高レベルの API ラッパーである Three.js ライブラリで実現されています。

多くのテクスチャをレンダリングすると、新しいテクスチャが画面に描画しようとするたびに、さらにネットワーク リクエストが増えるだけでなく、すぐにパフォーマンスの問題が発生する可能性があります。これを軽減するために、テクスチャを可能な限り大きくして、タイルごとにオフセットしました。この手法はスプライト マッピングと呼ばれることが多く、ゲーム開発では一般的です。これにより、木全体に 3 つの大きなテクスチャが作成されます。テクスチャの 1 つが画面に最初に表示されるたびにパフォーマンス ヒットを回避するために、アニメーションを開始する前に各テクスチャで 1 ピクセルの正方形をレンダリングし、パフォーマンス ヒットを先頭に移動します。これにより、タブレットでも、木の全高を滑らかに飛行してアニメーション化できます。

テクスチャをオフセットするために、テクスチャをジオメトリにマッピングする UV を変更します。Three.js のコードは次のようになります。

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

ご覧のとおり、テクスチャの x オフセットと y オフセットに変数を使用しています。ジオメトリ上に描画された座標をオフセットするカスタム GLSL シェーダー マテリアルでも、同じ効果が得られます。

試験運用機能

デモで使用する機能の一部はまだ試験運用版であるため、この記事を Chrome Canary で表示し、こちらのウェブサイトで Chrome Canary について記載されているすべてのフラグを有効にする必要があります。

Chrome Canary をインストールして正しく設定したら、デモをご覧ください。（プロジェクト全体がオープンソースで、GitHub で公開されています）。

おわりに

また、モバイル アプリケーションのコンテキストで、より電子書籍に沿って、これらの機能がどのように使用されるかについても検討しています。このプロトタイプが現在進行中で、Google がさまざまなインタラクションとタッチのパラダイムをどのように活用してこれらの機能をタブレットで紹介しているかを確認できます。

ウェブブラウザのレイアウトは絶えず進化する中、従来の読書コンテンツでこれまで慣れ親しんだ、プロダクション バリューとレイアウト品質を維持したいという要望が寄せられています。CSS リージョン、除外、バランス テキスト、カスタム フィルタ、WebGL などの機能により、コンテンツ クリエイターはリーチとデザインの品質のどちらかを選ぶ必要がなくなります。「Forest Giant」という言葉は、未来のウェブがその両方を可能にするという明確なしるしです。