Rails World 2026: sponsor logo refinements and Speakers navigation link
Rails World 2026 のサイトで、スポンサーロゴのサイズとフィルタを調整し、Speakers へのナビゲーションリンクを追加しました。これにより、スポンサーグリッドの視認性が向上し、参加者がスピーカー情報へ容易にアクセスできるようになります。
背景
この変更は スポンサー表示の統一感 と ナビゲーションの充実 を目的としています。従来、ロゴの高さやフィルタが統一されておらず、ダークテーマで一部ロゴが視認しにくい問題がありました。また、イベントページにスピーカー情報へのリンクが無く、訪問者が手動で URL を入力する不便さが指摘されていました。そこで、ロゴサイズを調整しつつ、メニューに Speakers リンクを組み込むことで、ユーザー体験の向上を図ります。
技術的な変更
データファイル _data/world/2026/sponsors.yml では Baytek のロゴパスを SVG から PNG に置き換え、同時に不要になった Gumroad エントリを削除しました。これにより、画像形式の統一と不要データの整理が同時に達成されます。
@@ -48,7 +48,7 @@ silver:
other:
- name: "Baytek"
- logo: /assets/world/2026/logos/logo-baytek.svg
+ logo: /assets/world/2026/logos/logo-baytek.png
url: "https://www.baytekent.com/"
- name: "Beyond Finance"
logo: /assets/world/2026/logos/logo-beyond-finance.svg
ナビゲーション _includes/world/2026/components/nav.html に、デスクトップとモバイル両方のメニューへ <li><a href="/world/2026/speakers" class="nav-link">Speakers</a></li> を追加しました。これにより、どのデバイスでも同一のリンク構造が提供され、UI の一貫性が保たれます。
@@ -45,6 +45,7 @@
</div>
<ul class="nav-links" role="list">
+ <li><a href="/world/2026/speakers" class="nav-link">Speakers</a></li>
<li><a href="/world/2026/faq" class="nav-link">FAQs</a></li>
@@ -76,6 +77,7 @@
<div class="nav-mobile-menu" id="nav-mobile-menu">
<ul role="list">
+ <li><a href="/world/2026/speakers" class="nav-link">Speakers</a></li>
<li><a href="/world/2026/faq" class="nav-link">FAQs</a></li>
スタイルシート _sass/world/2026/modules/_sponsor_grid.scss に対して、複数スポンサーの max-height を調整し、Baytek の filter: none を削除しました。具体的には Intercom、SerpApi、Fullscript のロゴ高さを 60px に統一し、Baytek の高さを 32px に設定して他ロゴとバランスを取っています。フィルタの除去により、暗色背景でも標準の brightness(0) invert(1) が適用され、ロゴが正しく白く表示されます。
@@ -204,12 +204,15 @@
&__item--37signals img,
- &__item--intercom img,
&__item--wyeworks img,
&__item--planning-center img {
max-height: 46px;
}
+ &__item--intercom img {
+ max-height: 60px;
+ }
+
&__item--sorcer img,
&__item--buzzsprout img {
max-height: 30px;
@@ -247,16 +250,21 @@
}
&__item--serpapi img {
- max-height: 46px;
+ max-height: 60px;
max-width: 240px;
}
@@ -261,6 +267,13 @@
&__item--baytek img {
- filter: none !important;
+ max-height: 32px;
}
+
+ &__item--fullscript img {
+ max-height: 60px;
+ }
画像資産 assets/world/2026/logos/logo-baytek.png が新規追加され、上記 PNG パスに対応する実体ファイルが提供されました。これにより、ロゴが正しい形式で配信され、ブラウザのキャッシュやビルドプロセスでの取り扱いがシンプルになります。
設計判断
ロゴサイズの調整は CSS の max-height 上書き という最小侵襲の手法で実装され、既存のレイアウトロジックを大きく変更せずに高さ統一を実現しています。新たにフィルタ指定を削除した点は、暗色モードでの一貫した視覚表現を保証するための選択であり、既存のテーマ設定に依存した実装です。ナビゲーションリンクはデスクトップとモバイル両方に同一要素を追加することで、メニュー構造の 一貫性 と アクセシビリティ を保ち、将来的なメニュー拡張時にも同様のパターンを踏襲しやすくなります。
まとめ
本 PR は Rails World 2026 サイトのスポンサー表示とナビゲーションを改善し、ロゴの視認性とサイズ統一、そして Speakers ページへの直リンクを提供しました。最小限の CSS と HTML の差分で実装されたため、既存のページ構造やテーマ設定への影響はほとんどなく、ユーザー体験の向上が即座に得られます。