Kaigi on Railsのデザインを担当しました #kaigionrails

2020年10月12日 15:26

これは2020年10月3日にオンライン開催されたKaigi on Rails STAY HOME Editionのデザインを担当した者による記事です。

自己紹介

べこと申します。群馬に住んでいます。
ハンドルネームの由来は「乳製品が好き」で、人生の半分をこの名前で押し通す羽目に遭っています（べこ→牛🐄）
Ruby/Railsワールドだと、五十嵐さん松岡さん共著の『ゼロからわかる Ruby 超入門』（技術評論社）イラスト、五十嵐さん著『Railsの教科書』（達人出版会）デザイン・イラストを担当させてもらっています。

参加のきっかけ

チーフオーガナイザーの大倉さんには以前にGrow.rbのロゴを作らせてもらったご縁もあり、TwitterのDMで誘っていただいて参加しました。

デザイナーとしてやったこと

以下のことをやっていました。
・ロゴ作成
・サイトデザイン、ページ更新
・グッズデザイン
・バーチャル背景作成
・配信画面用の装飾パーツ提供
・オンラインミーティングへの参加
使っていたツールは主に、初期はネタ帳、そのあとはイラレやFigma、VS Code、ターミナルを見てることが多かったです。

ロゴの意図

パーカーなどグッズ用として用意したロゴ画像

傾いたルビーとレールを組み合わせたロゴを作りました。

傾いたルビーについては、プログラミング言語のRubyのロゴがもともと傾いてまして、新たなカンファレンスであるKaigi on Railsのロゴでも同じようにすることで、Rubyへのリスペクトや、良い意味での「原点回帰」「再スタート」の意味を込められたらいいんじゃないかな〜と思ったためです。（傾きの向きは逆なんですけどね）

また、レールのあしらいについては、運営メンバーから出た「Slackとかでワークスペースのアイコンが並んだときに、Ruby関連だとどれもルビーのアイコンでどれがどの集まりかわかりにくいんですよね」といった言葉を受けて追加したという経緯があります。（遠い記憶なので原文ママとは言えないですが要はこのようなことを言っていた）
これって実際コミュニティ活動をしている人でないと絶対出てこないコメントなのでありがたかったですね…！

Rubyとレールの組み合わせ方は3パターンほど作ってメンバーに見てもらいました。

斜めに輪っかになってたり下に敷いてみたり。

最終的に正円のレールになりましたが、案を作っていた頃から「このレール絶対回したい！！！」とこっそり思っていまして、サイトトップでぐるぐる回せたことにはなんとも言えない達成感がありました。
PCでトップのロゴにマウスホバーするとレールが逆回りするという無意味な機能が施してありますw

使用した書体

ロゴと一緒に使っていた丸みのある書体は、Google Fonts から使用できる Comfortaa を使いました。
デザイナーでなくても、Webや他媒体でも誰でも使える書体なのであえてここから選んだという背景があります。

オンラインカンファレンスのデザインのお仕事

新型コロナウイルスの影響でオフライン開催からオンライン開催に変更になったわけですが、デザイナーのお仕事としての変更点はオフラインで実会場の開催であれば必要な紙物のデザインがなくなりました。
ポスターや案内板、ネームプレートなどですね。

オンライン開催になったので、紙物の代わりに、あると便利そうかも？と思いバーチャル背景を作ってみたり、YouTube Liveの配信画面用の装飾パーツも動画配信チームに提供したりしました。

バーチャル背景

配信時の装飾パーツの素（サンプルイラストはいらすとやさん）

楽しかったですー楽しかったなーー（かみしめてる

準備のミーティング参加については、そもそも私が住んでいるのが群馬なので、コロナ前後に関わらずオンライン参加になります。
住んでいる場所が遠くてもインターネットがあることで話し合いに参加できるのは本当にありがたいですね🙏
ミーティングの時間中にやむを得ずワンオペでいるときは、子ども（2歳）が会議中の画面越しに乱入し笑顔で元気よく挨拶したりなどあったのですが、運営の皆さんには手を振っていただいたりなど受け入れてもらいとても助かりました……（血涙）

ミーティング以外の時間はSlackやGitHubでのテキストコミュニケーションがメインとなるわけですが、デザインについて意見を聞くのとかがちょっと大変でした。タイムラグがあるし、次の週のミーティングまで待ってたら間に合わないのでは！？と焦り、突っ走ってしまったところもありました…その点は個人的な反省点です。

他、イラストとか

列車モチーフとして駅風看板や汽車のヘッドマークっぽいイラストを作っていました。（Railsのひらがな表記に迷い "れいるず" にしてしまったものの結局使わなかった。読み的には "れーるず" ？）

STAY HOME Editionだからと機関庫に入る汽車の下絵が残っていました↓

当日を迎えて感じたこと

学ぶ立場としても参加して楽しく過ごせました。
登壇された方、運営メンバーの方、お疲れさまでした…！

プログラミングを仕事にすることを目標にしていたり、私自身はエンジニアさんに関わりつつデザインの仕事をしていることもあり、プログラミングを仕事で使っている人がどう考えてどう向き合ってるかを知ることは大切なんじゃないかなと思うんですよね。
正直なところちゃんと理解しながら聞けたトークはほとんどなかった（笑）のですが、トークした人や見ている人たちがワイワイ楽しそうにしてるの見て私もこの仲間に入りたい…！！と感じました。

デザインについてポジティブな反応をいただけてとても嬉しかったです！
また、作ったデザインを使って告知していただけたり、グッズに喜んでいただいたり、デザイナー冥利に尽きるといった感じでとてもありがたかったです。。。

これから【PR含む】

お仕事募集中ですー
シンプルでほんのりかわいい感じのデザインや、見通しがよさそう？で修正しやすそうな感じ？のHTML/CSSを書くのが得意です。
ゆるキャラのデザイン、ロゴデザインもできます。
TwitterのDMでご連絡ください。

また、フィヨルドブートキャンプに参加しているものの中断してしまってまして、登壇された方の発表を聞いて再開せねばという気持ちになりました。