雑誌のページをめくるように、美しいレイアウトでニュースやブログ記事を読めると人気のFlipboard。その雑誌のようなレイアウトを生成するレイアウトエンジンについて、Flipboardのエンジニアブログに“Layout in Flipboard for Web and Windows”というタイトルで解説されていました。そのレイアウトを生み出すまでのプロセスがあまりに面白かったので、今回その著者のCharles Ying氏に許可を得て翻訳させて頂きました！

（以下、2014年3月24日にCharles Ying氏によって書かれた、“Layout in Flipboard for Web and Windows”の翻訳です。）

Flipboardは、あなたのためだけに作られ、あなたが最も気になるであろうストーリーに満ちている、そんな世界最高のパーソナルマガジンを作ろうと取り組んでいます。

雑誌のレイアウトデザインは、このストーリーを伝えるにあたって大切な役割を果たします。 良いレイアウトのデザインはストーリーを形作り、 読み手がどのように受け取るかを大きく左右するからです。例えばSports Illustrated社（※訳者注…アメリカのスポーツ雑誌社）の廊下では、編集者がレビューのために全ての印刷版をつり下げ、出版の前に自分たちの手で調整を加えています。

ユーザーはFlipboardを、紙の雑誌と同じように記事や写真をめくりながら読むことが出来ます。まるで編集者やデザイナーがあなたのためだけに作ったかのように、それぞれのページレイアウトは手仕事であるかのように美しく感じられるのです。

どのようにして私たちはレイアウトデザインと編集の全プロセスを自動化したのでしょうか？まるでパズルのピースをはめ合わせていくかのように、カスタムデザインされたページレイアウトの中にコンテンツを入れ込むことによって実現しました。 まず、デザイナーの手で作られたレイアウトページのセットから始めます。そして、レイアウトエンジンがページの密度やペーシング、リズム、画像のクロップやスケールなどを考慮しながら、コンテンツをこれらのレイアウトにどうすればぴったりはめ込むことが出来るか判断するのです。

あらゆる点において、本質的にはデザイナーが制作しているということが、Flipboardの特徴であるルックとフィールにおいて重要な点です。

はじまり

2010年、私たちはFlipboard Pagesという、Webの記事をiPad向けにマガジンページにするというレイアウトエンジンを作りました。

Flipboard Pagesは、Vanity FairやNational Geographicと言った世界一流の出版社のコンテンツをページ割します。

Pagesは、それぞれの出版社のブランドアイデンティティとカスタムタイポグラフィーを再現する美しいレイアウトを生み出すことが出来ます。限定されたモバイルデバイス（例えばiOS 3.2のオリジナルiPad）でも充実かつ高いパフォーマンスでレンダリングするために、PagesはCSS3、SVG、そしてvanilla JavaScriptを使いました。出版社のレイアウトのためのダウンロードファイルサイズは平均すると、およそレイアウト、スタイリング、フォント、ネームプレートイメージなどで90キロバイトで、同等のWebページまたは記事における一枚の写真より軽いものになります。

まず始めにデザイナーが約20のページレイアウトセットを作成し、ポートレイト(768×1004)とランドスケープ(1024×748) に分割します。このセットから、Pagesは望ましいコンテンツに最もフィットするレイアウトを選択し、コンテンツをそのレイアウトに挿入、そして最終的なページを生み出します。この用例ベースのアプローチで、私たちはレイアウトをはっきりと美しいものにするためにデザイナーを頼っています。

Pagesで素晴らしいレイアウトを生成することは出来ますが、これはiPadという決まったサイズでのみ可能でした。

WebとWindows 8（※1）は、ユーザーがブラウザのウィンドウサイズをいつでも好きなように変更出来るという点で、新しい挑戦でした。任意のサイズをサポートするために、私たちは何かより優れたものが必要だったのです。

Duploの導入

Duploは新しいレイアウトエンジンで、Pagesのアイディアではじめますが、あらゆるサイズの数千というページレイアウトにコンテンツを素早くフィットさせるために、モジューラーブロックとグリッドシステムを使っています。

ぜひ自分の目で確かめてみて下さい。このマガジンをWebで開いて、数ページめくり、そしてブラウザサイズを適当に変更してみてください。Flipboardのページレイアウトは即座にウィンドウサイズに適応します。ここでDuploが作動しているのです。

DuploはPagesと同じようなやり方で始めます。デザイナーがレイアウトのセットを作り、そのセットからPagesはコンテンツに最もフィットするレイアウトを選択します。

しかし、Pagesが約20のレイアウト候補から探すのに比べ、Duploは2,000〜6,000の候補の中からコンテンツがフィットする最もベストなレイアウトを探します。

（3コラムのランドスケープページにおける2,000以上の候補の一部。）

実装

Pagesのように、DuploはWebブラウザで動くJavaScriptベースのエンジンです。JavaScriptは素早い開発、ポータビリティや最上の機能を提供し、CSS3はタイポグラフィーとフォーマットにとって強い基盤を与えます。このアプローチは通信を軽くし、そしてRetinaデバイスによくスケールします。

Duploは、レイアウトの生成、レイアウトの選択、レイアウトの調整、レイアウトの表示という主に4つの工程を行います。

レイアウトの生成

2,000を超えるレイアウトを手動でデザインすることは現実的ではないので、Duploのレイアウトジェネレーターは、デザイナーのガイドラインに従って小さなピースを大きなレイアウトへと組み立てます。

デザイナーのページバランスとハーモニーに対するガイドラインはニュアンスがあり、私たちは単純にこれらのガイドラインを例のレイアウトとして再現し、チェスの動きの樹形図のように、考えられる全レイアウトオプションの図を作成します。

Duploはまたハンドメイドの全ページレイアウトと自動組付のレイアウトを含めて、ベストマッチを探します。

レイアウトの選択とコンテンツの適用

Duploがレイアウトの順番を生成すると、Duploは2,000を超えるレイアウトの中から、与えられたコンテンツに対して最も適するものを見付け出さなければいけません。

まずどれくらい適合するのかを見るために、Duploはコンテンツの構造をレイアウトのコンテンツのスペースと比べます。次にDuploは複数のヒューリスティックス（※訳者注…必ず正しい答えを導けるわけではないが、ある程度のレベルで正解に近い解を得ることが出来る方法）それぞれから作った適応度関数を最適化することで、スペースとコンテンツの一番良い組み合わせを計算します。こういったヒューリスティックには、下記のようなものが挙げられます。

ページフロー　私たちはページ上のアイテムの種類や数に自然な印象の変化を与えるために、パーリンノイズを使っています。コンポーネントノイズ機能は、雑誌の編集者と同じようにマガジンページのペースを決めるのです。

（ページフローの重み付けの変更を視覚化）

与えられたフレームを埋めるテキストの量　私たちはフレームが含めることが出来るテキストの割合を計算し、フレームの80%以上を埋めるテキストに比重を置いています。

リサイズにおけるコンテンツの一貫性　元のページで一緒に表示されていたアイテムが、一緒に表示できる候補レイアウトを優先します。さらに順番が元のページとあまり変わらないレイアウトはより優先します。

画像認識、アスペクト比、スケール、クロップ　私たちはフレームにはめるために画像をスケールしたりクロップするのに必要な量を計算し、クロップがそこまで必要ない画像を優先して、スケールが120%を超えないようにしています。OpenCVを使って、サーバーサイドで画像の中の顔や重要な前景にあるものを検出します。

（画像のスケール、クロップ、特徴認識のマッチング）

全てのありえる候補を総当たりで探しているとものすごく遅くなってしまう可能性があります。Duploは分枝限定アルゴリズムを使って、チェスゲームにおける、最もベストな次の一手を効率的に探すかのように、ぴったりフィットしないオプションを取り除きます。

これら全てのヒューリスティックスは、人間のデザイナーまたは編集者が雑誌をレイアウトする行為に近付けるのに役立ちます。

レイアウトの調整

最適なレイアウトが選ばれると、Duploはレイアウトを調整します。ベースラインのグリッドにフレームを合わせ、ターゲットの画像に最もフィットするよう画像フレームはサイズ調整されます。余白なくスタイルされたフレームは、ページの境界線まで拡張されます。

（調整前。テキストと見出しがベースラインのグリッドに揃っていないことに注目して下さい。）

（調整後。テキストと見出しがベースラインのグリッドに揃っています。画像の表示域はクロップした画像に合わせて小さくなっています。）

レイアウトの表示

Duploがレンダリングの段階に到達したときには、ほとんどのパズルは解かれています。この段階では、様々な方法でレンダリングできる、よく考慮され、調整されたレイアウトがあります。しかしこの記事では、簡単にHTML DOMとしてレンダリングされるとしましょう。画像は読み込まれ、スケール、クロップされ、ダイナミックデータは取り込まれます。文章は正確にレイアウトフレームに流し込まれ、記事本文の場合はオーバーフローするか、見出しの文章の場合はリサイズされます。Duploは見出し文章のサイズを小さくするために、上手く組み合わさるようにデザイナーによって選ばれた仕様書に沿って、大きなサイズでは細字、そして小さいサイズで太字となるよう、タイプスケールを使います。

（タイプスケールによって太さは変わります。文字サイズの大きなテキストは細くなり、小さなサイズのテキストは太字に。Duploは見出しが相応しいエリアにフィットするまで調整し、可能であれば高さの比に対して1.61の幅になるよう最適化します。）

結論

あらゆる点において、Flipboardのストーリーは現代を象徴しています。ベストな結果は人間とテクノロジーのパートナーシップから生まれるのです。このネットワークハードウェアとソフトウェアの時代において優勢な流れは、人間をコンピューターとロボットによって置き換えることですが、キュレーションやレコメンデーション、パーソナライゼーションの分野においての最も素晴らしい結果は、人間とソフトウェアがペアを組む最適な戦略から生まれます。

似たようなアプローチはビジュアルエフェクトでも使われています。画像ベースのレンダリングは参照写真とシンプルモデルを使って、新しいシーンをフォトリアリズム的にレンダリングが出来ます。写真はCGアーティストが完璧には再現できないような、現実世界における全ての汚れや詳細を捉え、不気味の谷を渡るような違和感がないビジュアルエフェクトを完成させます。（※2）

同じことはダイナミックコンテンツレイアウトにも当てはまります。リニア制約を使うなどの完全なアルゴリズムアプローチより、デザイナーが作った数多くのレイアウトセットとコンテンツを合わせる方がずっと良い結果が生まれます。

（Paul KatzのI Want To Go To Thereから、様々なサイズのサンプル記事レイアウト）

結局のところ、私たちがPagesとDuploで成し遂げたことは、ストーリーを形作る強力なツールであり、読者に影響を与えるマガジンレイアウトデザインの要素を取り、人間のデザイナーの手仕事のアートとエッセンスを捉えながら、プロセスを自動化する方法を生み出したことです。

私たちがこの旅を続けていくにつれて、アートと科学の新しいフロンティアを拓くために、いかに人間とコンピュータが密接に働けるかを想像するのは楽しいです。

私たちはこれまでに作ってきたものを嬉しく思っていますが、もっと他にもやることがあり決して満足はしていません。こういった課題に興味がありますか？私たちは現在採用中です :)

この記事は2014年3月23日、最初にTechCrunchに掲載されました。

1, Flipboard for Windows 8は90% Webベースのハイブリッドアプリです。↩

2, 2000年に、画像ベースのレンダリングを最初に使った映画の一つのThe Matrixがビジュアルエフェクト部門でアカデミー賞を受賞、最新鋭だが伝統的なCGのビジュアルエフェクトを使ったスターウォーズエピソード1を打ち破りました。↩

Eugene, Eric, Todd, Andrew, Boris, Ethan, Johan, Josh, Irene, Geert, Anh それから Michael、この記事の下書きを読んでくれてありがとう。

以上が、“Layout in Flipboard for Web and Windows”の翻訳になります。いかがでしたか？私はこの記事を読むまで一体どういう仕組みで出来ているのかさっぱりわからなかったのですが、あの美しいレイアウトは人間とコンピュータのコラボレーションから生まれていたんですね。これからFlipboardがどんなものを生み出してくれるのか、非常に楽しみです！

Share on

Goodpatch
Goodpatch公式アカウントです。