CSS とブラウザ レイアウトのツールを駆使すれば、ウェブ コンテンツを魅力的なビジュアル化できます。CSS フィルタ、WebGL、HTML5 動画、SVG、キャンバスなどのウェブ機能と、CSS リージョン、CSS シェイプ、CSS カスタム フィルタなどの進化する未来のテクノロジーを使用することで、クリエイティブな表現の幅が大きく広がります。Adobe は、レイアウトとデザインに情熱を傾けるコンテンツ クリエイターと長年にわたって連携してきました。そのため、この知識をウェブに積極的に適用し、進化する多くのウェブ標準に貢献してきました。
Google はナショナル ジオグラフィックの協力を得て、同局の「森林巨人」という番組のコンテンツを使用して、これらの機能によってリッチなウェブ レイアウトとレスポンシブ テクニックを実現できる方法を示すプロトタイプを作成しました。この記事では、このサイトの特に興味深い特徴をどのように構築したかについて説明します。概要を簡単に把握するには、こちらの動画をご覧ください。Christian Cantrell がサイトのさまざまな機能について説明しています。
レイアウトの微妙な違い
優れたレイアウトとその背後にある機能はわかりにくいことがあるため、注目すべき機能をハイライト表示する「エディタのオーバーレイ」を作成しました。編集者のマークを有効にするには、記事の下部にあるバーをクリックします。

レイアウトに依存しない
現在のウェブでは、コンテンツによってレイアウトが決まることが多く、コンテナはテキストに合わせて縦方向に拡大されます。複雑なレイアウトを作成する際、コピーなどのコンテンツを変更すると、レイアウト全体に望ましくない影響が及ぶことがあります。その結果、予期しない変更に基づいてコンテンツを再設計する必要が生じる可能性があります。領域を使用すると、要素をコンテンツとして定義し、そのコンテンツを流すレイアウトの部分を指定することによって、コンテンツとレイアウトを完全に分離できます。
「森の巨人」の例では、ストーリーが 1 つの要素に含まれています。ページ全体に、写真とテキスト領域で構成されるレイアウト スキャフォールディングがあります。CSS では、コンテンツを流す要素を定義します。コピーが要素の末尾に達すると、DOM の順序で次の要素に進みます。これにより、テキストが要素の高さに収まるかどうかを気にすることなく、列をオフセットしたり、デザインに基づいて高さを調整したりして、列を自由に配置できます。また、ストーリーが流れ続ける中で、レイアウト内に要素(全幅の画像など)を配置することもできます。
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
上記の CSS では、「story」という名前のフローを作成しています。この名前付きフローのコンテンツは、ID が "storyContent" の要素です。その後、クラス名が 「story」 のすべての要素に適用されます。CSS リージョンは、レスポンシブ デザインに適した優れたツールです。大画面ではマルチカラムやオフセット カラムなどの機能を使用してリッチなレイアウトを実現し、小画面では単一カラムのレイアウトに調整できます。リージョンでは、vw や vh などのレスポンシブ ユニットでリージョンのサイズを設定することもできます。これにより、コンテンツが切り捨てられることを心配することなく、レイアウトのビューポートの高さを超えないように列を配置できます。コンテンツは、リージョン チェーンの次の要素に自然に流れ込むためです。
ドロップキャップ
CSS 除外を使用すると、不規則な形状の周囲や内部にテキストを折り返すことができます。これは、ドロップキャップなどのデザインの装飾に役立ちます。ドロップキャップは一般的なデザイン手法で、物語や章の最初の文字を大きくし、残りのテキストをその文字の輪郭に沿って折り返します。この効果は、インライン コンテンツがフロートを中心に折り返される仕組みと非常によく似ていますが、除外を使用すると、長方形のボックスに制限されなくなります。フロートに shape-outside を使用すると、コンテンツを文字の形状にぴったりとラップできるジオメトリを定義できます。
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
これにより、コンテンツを円形の形状にラップできる楕円形が作成されます。また、シェイプには相対単位を使用しているため、要素のサイズを変更するとシェイプのサイズにも反映されます。

図形
除外を使用すると、ドロップキャップに加えて、shape-inside を使用して図形内にテキストを折り返すことができます。この機能は、サイト全体で使用されています。特に大きな画像のキャプションでは、写真の余白を利用してテキストをフレームに入れています。また、他の画像やグラフィックの輪郭に沿ってテキストを折り返すことも可能で、これまでウェブ上で実現することが非常に困難だったレイアウトをエミュレートできます。
相対単位を使用して図形を定義することで、レスポンシブ レイアウトで図形を使用することもできます。これにより、コンテナやビューポートに基づいて伸びるシェイプを作成できます。また、すべて CSS で定義されているため、メディアクエリを使用してシェイプを完全に変更したり削除したりすることもできます。以下は、サイト内で使用されているポリゴン形状の例と、ポイントを定義する値を示しています。
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

バランスの取れたテキスト
バランステキストは、行を折り返すときに、単語単位ではなく、要素内のテキストのブロック全体を考慮する機能です。テキストの行を分割して要素内の行のサイズを均一にすることで、1 行に 1 ~ 2 語しか表示されない状況を回避できます。このレベルの制御により、特にプルコピーや字幕などの短い行では、美しいテキスト ブロックを簡単に作成できます。
記事内でバランステキストを使用している箇所はまさにこの部分です。この機能は Adobe が提案する標準であるため、Randy Edmunds が作成したポリフィルを使用して同じ結果を実現しています。この機能は、レスポンシブ ケースで最も効果的です。ブラウザのサイズを変更しても、ブロックはテキストのバランスを保ち、行の幅がほぼ同じになるようにします。バランステキスト ポリフィルの使用は簡単です。jQuery プラグインであるため、レイアウトが変更されたときにセレクタに「balanceText()」を適用するだけで、次のようなバランスの取れたテキストが得られます。
$('.balance').balanceText();

フィルタ トランジション
遷移は、ユーザーの注意を引いたり、サイト内の状態を伝えたりする重要な手段です。不透明度と、最近では 3D 変換が、ユーザーがサイトの一部をスクロールしたり操作したりする際に、スムーズな遷移やアニメーションを作成するために使用されています。同じ目的で使用できるフィルタが追加されました。
「森の巨人」では、フィルタを使用して、画像が視界に入るとグレースケールからカラーにフェードします。これらのフィルタを不透明度や他のフィルタと組み合わせることで、複雑な画像効果や遷移を作成できます。カスタム フィルタを使用すると、さらに劇的な効果を追加できます。
カスタム フィルタは、WebGL と同じシェーディング言語である GLSL を使用して記述します。これにより、CSS を介してこれらのシェーダーを DOM 要素に適用し、複雑なブレンド エフェクトや 3D 歪みを実現できます。サイトの下部にある [大統領の系図を探す] をクリックすると、ページが下にスクロールし、別のセクションが表示されます。これは、カスタム フィルタを使用してコンテンツ間のリッチな遷移を実現する方法の例にすぎません。このアニメーションは 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 ピクセルの正方形をレンダリングし、パフォーマンスの低下を最初に移動します。これにより、タブレットでも、ツリーの高さ全体をスムーズに飛行してアニメーション化できます。
テクスチャをオフセットするために、テクスチャをジオメトリにマッピングする 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 で入手可能です)。
まとめ
また、これらの機能をモバイル アプリケーションのコンテキストで、電子書籍に近い形で使用できる方法についても検討しています。このプロトタイプは現在開発中であり、さまざまなインタラクションとタッチ パラダイムを利用して、タブレットでこれらの機能を実証しています。
ウェブブラウザのレイアウトは絶えず進化しており、従来の読み物コンテンツで慣れ親しんできた制作価値とレイアウトの品質を維持したいという要望が寄せられています。CSS リージョン、除外、バランステキスト、カスタム フィルタ、WebGL などの機能により、コンテンツ クリエイターはリーチとデザインの質のどちらかを選ぶ必要がなくなります。「Forest Giant」は、未来のウェブが両方を可能にすることを明確に示しています。