Rails World 2026 サイトを Jekyll で構築した設計システム全容

2026年04月24日 00:03 JST rails/website

https://github.com/rails/website/pull/651

Rails World 2026 の公式サイト（/world/2026/）が Jekyll ベースのサイトに追加され、ホームページ・FAQ・Rails at Scale の3ページと、それを支える 2026 年版デザインシステム一式が実装されました。ネオングロウエフェクトを核とした独自のビジュアルシステムと、データとテンプレートを明確に分離したアーキテクチャが特徴です。

背景

Rails World は毎年開催されるカンファレンスであり、過去の 2023・2024 年版サイトと同様に、本リポジトリの Jekyll サイト内に年度別のサブサイトとして追加されます。今回の 2026 年版（Austin, TX、9月23〜24日開催）は、新たなビジュアルアイデンティティとして「ネオングロウ」テーマを採用し、スポンサーグリッド・スピーカーカルーセル・アクセシブルな FAQ アコーディオンなど複数のインタラクティブセクションを含む構成です。

また、Rails at Scale という招待制サミット（150名上限）のページが独立して設けられており、申し込みフォームへのリンクや T&Cs PDF の配布、NDA への言及など、運営ロジスティクスに関わるコンテンツも含まれています。

技術的な変更

ディレクトリ構成とデータ分離

コンテンツ・テンプレート・スタイルが年度別のパスに整理され、それぞれの責務が明確に分離されています。主要なディレクトリ構成は以下の通りです：

world/2026/ — Jekyll ページ（ホームページ・FAQ・Rails at Scale）
_data/world/2026/ — sponsors.yml・faq.yml・ras_faq.yml
_world_speakers/2026/ — スピーカープレースホルダー
_includes/world/2026/ — ナビ・フッター・ホームページセクション・スピーカーカード
_sass/world/2026/ — デザインシステム全体
assets/world/2026/ — 画像・ロゴ・アイコン・フォント・PDF

データファイルは _data/world/2026/ 配下に YAML として管理され、テンプレートからは site.data.world['2026'].sponsors のように参照されます。スポンサーは platinum・gold・silver・other の4ティアで定義されており、sponsor_grid.html がティア名をキーにループしてグリッドを生成します。

デザインシステム（SCSS）

_sass/world/2026/ 配下は base/・common/・modules/ の3層に分かれています。base/ には _colors.scss・_fonts.scss・_layout.scss・_typography.scss・_media.scss が含まれ、デザイントークンとレスポンシブミックスインを定義します。

ネオングロウエフェクト は _neon_glow.scss にミックスインとして集約されています。外側グロー（neon-glow-outer）と内側グロー（neon-glow-inner）を独立して合成できる設計で、Rails at Scale セクション専用の赤色バリアント（neon-glow-outer-red）も用意されています。ボタンのホバー時には CSS @property でカスタムプロパティをアニメーション可能にし、btn-glow-spin キーフレームで4色のグローが循環するエフェクトを実現しています。

@mixin neon-glow-outer($opacity: 1, $blur: 8px) {
  box-shadow:
    0px 4px 4px rgba(0, 0, 0, 0.25),
     4px 0   $blur rgba(#FD8B00, $opacity),
     0   4px $blur rgba(#993FF2, $opacity),
    -4px 0   $blur rgba(#3C51ED, $opacity),
     0  -4px $blur rgba(#FF000B, $opacity);
}

フォントは Clash Grotesk（CSS Fonts API 経由）と Calibre・Borgstrand Pro（@font-face でローカル woff2 を参照）の組み合わせで、_fonts.scss に font-display: swap 付きで定義されています。

コンポーネントとインタラクション

ナビゲーション (nav.html) は SVG の feTurbulence + feDisplacementMap フィルターによるガラス屈折エフェクトをインラインで定義し、glass-pill クラスのナビバーに適用しています。

FAQ アコーディオン は _accordion.scss に共通スタイルを持ち、FAQ ページと Rails at Scale ページの両方で再利用されます。各アイテム間のセパレーターはネオングラデーションの ::before 擬似要素で実装されており、aria-expanded / aria-controls / aria-hidden を適切に切り替えるバニラ JavaScript がインラインで埋め込まれています。

スピーカーカルーセル は speaker_carousel.html 内で keynote スピーカーを先頭にソートし、スピーカーが0件の場合はメーリングリスト登録を促すメッセージを表示するフォールバックを持っています。

設計判断

年度別の完全分離 が一貫して採用されています。_includes/world/2026/・_sass/world/2026/・assets/world/2026/ がすべて年度でスコープされており、過去年度（2023・2024）のアセットは共存したまま独立して変更できます。一方で、スポンサーロゴなど一部のアセットは /assets/world/2024/images/sponsors/ や /assets/images/ を参照しており、変更頻度の低い共有リソースについては再利用が選ばれています。

CSS @property を活用したアニメーション は、カスタムプロパティを型付きで宣言することでブラウザに補間を委ね、JavaScript を使わずに滑らかなグロースピンを実現しています。サポートしないブラウザでは静的なグロー状態にフォールバックする設計です。

アクセシビリティへの配慮 として、ナビゲーションへの aria-label・装飾画像への aria-hidden="true"・スライドショーへの role="img" 付与など、WAI-ARIA の適切な利用が随所に見られます。FAQ の会場アクセシビリティ情報（車椅子対応・エレベーター・クローズドキャプション）もコンテンツレベルで明記されています。

まとめ

本PRは、Rails World 2026 サイトをデータ・テンプレート・スタイルの3層に明確に分離しながら、ネオングロウを統一テーマとしたデザインシステムを構築した変更です。年度別のスコープを徹底することで既存サイトへの影響を排除しつつ、CSS @property やSVGフィルターといったモダンな技術を活用してデザインの表現力と保守性を両立させている点が注目されます。