Kaigi on Rails 2025 のデザインをやりました Vol.1 「メインビジュアルの3つの案」

この記事はフィヨルドブートキャンプ Advent Calendar 2025 の8日目の記事です。Advent Calendar とは、12月1日からクリスマスまで毎日リレー形式で記事を公開する企画です。昨日の7日目の記事は :@npakk: npkさんの「R[uby技術者認定試験 Silver / Gold 合格体験記 \[Re:Re:\]](https://orematopee.hatenablog.com/entry/2025/12/07/000000)」でした。 --- ## Kaigi on Rails 2025 2025年09月26日（金） 、27（土）に東京駅のすぐそばにある「[JP TOWER Hall & Conference](https://www.jptower-hall.jp/)」で開催されたカンファレンス「Kaigi on Rails 2025 」のデザインをやらせていただきました。 サイトはこちら。 https://kaigionrails.org/2025/ Kaigi on Rails は今回で6回目。日本最大の Ruby on Rails のカンファレンスです。 Kaigi on Rails 2025 は 700人くらいが参加しました。 なんど、フィヨルドブートキャンプのメンターもしてくれている :@okuramasafumi: 大倉さんが第一回からチーフオーガナイザーを務めています！フィヨルドブートキャンプも毎年スポンサーをやったり、たくさんの卒業生がスタッフをしていたり、登壇したことのある卒業生もたくさんいたり、フィヨルドブートキャンプと関係の深いカンファレンスの一つです。 ### Kaigi on Rails 2025 ふりかえり会も開催 フィヨルドブートキャンプでは、月に一回受講生やメンターや卒業生などフィヨルドブートキャンプのコミュニティのみんなの懇親を目的としたオンラインのミートアップを開催しているのですが、2025年10月のミートアップでは Kaigi on Rails 2025 をフィーチャーしたKaigi on Rails 2025 ふりかえり会を開催しました。 この会でのデザインについて僕がしゃべったり、 Kaigi on Rails 2025について大倉さんがしゃべっている動画を公開していますので、ぜひこちらもご覧ください！！ https://bootcamp.fjord.jp/articles/184 --- ## Kaigi on Rails 2025 のデザイナーとして作ったもの、今回はメインビジュアル編 過去に RubyKaigi 2028、RubyKaigi 2022 のカンファレンスのデザインの経験はありましたが、Kaigi on Rails にデザイナーとして関わるのは今回が初めてでした。 Kaigi on Rails 自体は毎年参加しているので、割と詳しく知っていると思っていたのですが、いざスタッフの中に入ると、「へーこうやって物事が決まっているのか〜」と思うような色々な発見がありました。大きな特徴としては、みんなで決める、というのが Kaigi on Rails の特徴のように感じましたね〜。デザインはデザイナー任せという感じではなく、何かこうしたいみたいなのがある人はどんどん積極的に意見を出していく形でした。これはこれで面白い経験でした。 これからKaigi on Rails 2025 として作ったものを小話を交えながら紹介していきたいと思います。今回はメインビジュアルの話をします。 ## 3つのメインビジュアル案 まず、初めに作ったのがイベント自体のテーマとなるメインビジュアル案でした。大倉さんの想いとして、「みんなで決めたデザイン」にしたいというのがあり、今回はラフな3案を出して、そこから投票をして決めるという形をとりました。 そうそう、今回は僕の中でも「AIを使う」という個人的なテーマを持っていました。何か2025年ならでは何かを入れたかったんですよね。あとで振り返ったときも、あのときはああいう時代だったなーと振り替えれる何かが欲しくて、「AIを使う」をテーマにしました。 ### 案 1 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBM29sQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--abaf45a9d99f317c2102ead6cf6e6617c5d1b9dd/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBM29sQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--abaf45a9d99f317c2102ead6cf6e6617c5d1b9dd/image.png" width="993" height="761" alt="image.png"></a> Kaigi on Rails の常連スピーカーの willnet さんの2017年のRubyKaigiのときのポスト（当時はツイート）が元ネタなのですが、カンファレンス会場に向かう Rubyist たちを表現したメインビジュアルにしたいなー、というのがあって作りました。 https://x.com/netwillnet/status/909583146504511489 Kaigi on Rails はデザイナーチームがあり、僕以外にもデザイナーがいるので、何かデザインのルールを決めて、それに沿って自由にみんなが作れるといいなぁ、という思惑もあり、「ステンシル調の人間の絵にRubyをかぶせる」というものを使って各々自由に好きなものを作ろう、ということにしようと考えてました。 3案作りましたが、これで僕としてはこの「案 1」で行く気満々だったので、ロゴもこの時点である程度作りこんでたりしてたんですよね。 ### 案 2 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMzhsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f0cf841dc336a9061b63469754026a7b81490e1a/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMzhsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f0cf841dc336a9061b63469754026a7b81490e1a/image.png" width="993" height="761" alt="image.png"></a> AIにRubyを抽象的に描いてもらったインクがドバーっとしてるやつをメインにしたものです。Ruby + お祭り なイメージ。こういう抽象的なものをメインにした回があってもいいかな、って思って作りました。AI ならではって感じがしますが、インクがドバーはエネルギッシュなものを表現するのに便利で、結構色んなところに使われてるので既視感がありますね〜。 ### 案 3 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNEFsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--e35c77f0c097c03532522ec2e5567f17e9bba6b0/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNEFsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--e35c77f0c097c03532522ec2e5567f17e9bba6b0/image.png" width="993" height="761" alt="image.png"></a> で、これが採用になった宇宙バージョンの最初のラフです。これが投票で一位になりました。 今回の Kaigi on Rails は6回目ということで、六角形をいじって何かいいロゴができないかなと考えていたのですが（2001年宇宙の旅のあのシーンは八角形）、「2001年宇宙の旅」のあのビジュアルみたいなロゴができるかもと、 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNFFsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b0ec7f3f97ee042af9aff15ecd3c899f831b342d/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNFFsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b0ec7f3f97ee042af9aff15ecd3c899f831b342d/image.png" width="271" height="350" alt="image.png"></a> <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNE1sQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f679289a4925d70c543445a6247fda288af1bf62/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNE1sQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--f679289a4925d70c543445a6247fda288af1bf62/image.png" width="214" height="190" alt="image.png"></a> そのロゴに合わせて宇宙っぽいものを作った感じです。ロゴスタートだったんですよね。結局、Ruby にも Rails にも見えないし、色々いじってたら飽きてきたので最終的にロゴは使わずでした。 そうそう、カンファレンスのサイトで人間を出すとき、特定の性別や人種を贔屓して他を蔑ろにしてはいけないですが（なので、結構人数を登場させる必要がある）、顔に Ruby を被せて宇宙服を着せることで、これは人間っぽい別の何かになるので、そういう気遣いが不要になる利点もあります。 #### ステンシル調が良かった 「案 1」ではAIに絵を描かせるときに「ステンシル調」で注文していたのですが、「案 3」でもそのようにしていて、この「ステンシル調」と「宇宙」が結構相性が良かったですね。程よく複雑さがなくなっておしゃれな感じになりました。ちなみに、ステンシルとは、模様や文字の形を切り抜いた型板を使い、上からインクやスプレーを吹きつけることで同じ図柄を素早く、きれいに繰り返し描ける技法のこと。[バンクシーです](https://www.google.com/search?q=バンクシー&tbm=isch)。 <a href="https://www.google.com/search?q=ステンシル&tbm=isch" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNHdsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--a97427274db6fdfc60211ce4a8b290ed107d5c62/image.png" width="1024" height="1024" alt="image.png"></a> ## 完成 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNFVsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ad37e5b1b12aa169e0ca5170462a68b9ba7327e2/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNFVsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ad37e5b1b12aa169e0ca5170462a68b9ba7327e2/image.png" width="993" height="649" alt="image.png"></a> そして、最終的に完成したのがこれです。 天の川を Rails に見立てて、Ruby人間がふわふわしています。ちなみに、天の川はCSSで実装しました。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNGNsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--18f5c71240bd611e768171b6ee248de5e8744f48/image.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNGNsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--18f5c71240bd611e768171b6ee248de5e8744f48/image.png" width="1748" height="328" alt="image.png"></a> ロゴは、[Fugaz One](https://fonts.google.com/specimen/Fugaz+One) をベースに作成。フォントを自由に使えるライセンスである[SIL Open Font License](https://openfontlicense.org/open-font-license-official-text/)のフォントをベースにすると、そのフォントをスライドにも使えるし、サイト内でも画像に書き出さずに使えて便利です。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNGdsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--273d2043765faa3e5b6b4907f4c4c5c66c04ba5a/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2025_12_08_18_16.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNGdsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--273d2043765faa3e5b6b4907f4c4c5c66c04ba5a/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2025_12_08_18_16.png" width="2394" height="958" alt="貼り付けた画像_2025_12_08_18_16.png"></a> では、トップページのちょっとしたトリビアを紹介したいと思います。 ### 指が六本 実は右側の Ruby 人間は指が六本あります。これも、2025年の生成AIっぽくて後で振り返った時に懐かしくなりそう、ということであえてそのままにしました。 <a href="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNFlsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--331a8982140259aa3ce7e64da475842b6a2e1651/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2025_12_08_17_33.png" target="_blank" rel="noopener noreferrer"><img src="https://bootcamp.fjord.jp/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNFlsQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--331a8982140259aa3ce7e64da475842b6a2e1651/%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%94%BB%E5%83%8F_2025_12_08_17_33.png" width="400" alt="貼り付けた画像_2025_12_08_17_33.png"></a> ### Ruby 人間をクリックすると...？ 宇宙なので銀河鉄道みたいに機関車を走らせたいという声をスタッフからもらっていたので実装しました（カンファレンス当日のリリースになってしまいました）。ぜひ、試してみてください。 ## 続きを乞うご期待 僕のTシャツ案がデザイナーチームの :@moegi: moegiさんの案に完敗した話など、他にも色々あるので、Kaigi on Rails 2025 のデザインについてはまた続きを書きますので、お楽しみに！！ ## サイトはこちら https://kaigionrails.org/2025/