Flipboardのレイアウトエンジンについては以前から興味はあったのですが、最近のネット企業にしては珍しくエンジニアブログがなかったのでわからずじまい。けど、今週からやっとエンジニアブログを始めたようです。

最初のレイアウトエンジンFlipboard Pagesは、各コンテンツ記事にあわせて、CSS3 + SVG + JavaScriptで平均90Kのサイズのレイアウトを自動生成。この時点ではレイアウトは20種でしたが、最新のエンジンDuploでは、2,000-6,000種あるとのこと。

サンプルページ（ブラウザで開いてサイズを変えるとレイアウトも併せて変更されます。）

レイアウトサンプル図

• スクリーンサイズごとにページのタイプを定義してレイアウト候補を自動生成し、コンテンツの内容とページフローを考慮して最適なパターンを選択。コンテンツ内容とのマッチは、分枝限定法、ページフローの決定は、パーリンノイズを応用。
• テキストエリアはフレームの80%+になるように設定。
• OpenCVで重要な画像を検知し、最適なサイズに変更/切り取り処理。
• ベースラインのグリッドにあわせて、レイアウトを調整。(調整前 調整後)
• フォントサイズにあわせて、フォントの太さも調整して表示。

デザイナーの感覚を一連の自動化フローに組み込むために、かなり細かい調整を重ねて、レイアウトエンジンをつくりあげているようですね。

デザインとスケーラビリティ

#flipboard #デザイン