FlutterKaigi 2023のデザインについて
FlutterKaigiスタッフでUIデザイナーのyumemiです。
この記事ではFlutterKaigi 2023のWebデザインについて書きました。
2023年らしいWebサイトを
FlutterKaigiというカンファレンスのWebデザイナーを募集していると知ったとき、私は「面白そう！」という軽い気持ちで応募しました。しかし私はフロントエンドエンジニアを数年とiOSアプリの個人開発の経験しかなく、正直Flutterについてはまったく知りませんでした。
そこで「Flutter」をググり、Googleに開発されたクロスプラットフォームのフレームワークであると知りました。そこで、もちろんMaterial Designのデザインガイドラインに従うだろうと考え、さっそくデザインに取り掛かり始めました。
最初のうちはFlutterのトーン&マナーを基調にデザインしていましたが、徐々に悩みはじめました。「本当にこのビジュアルでいいのだろうか？」「Flutterの可能性はもっとあるはず」「今年のFlutterKaigiらしさがほしい」と思うようになったのです。そこで新しいデザインをはじめました。
このデザインをしていたとき、私はつぎのようなことを考えていました。
- 開催時期である「秋」らしい季節感を感じさせたい
- FlutterKaigiはクールである
- そしてFlutterエンジニアを熱狂させたい
まず、今回はFlutterKaigi初のオフライン開催ということで、開催時期である11月が待ち遠しくなるような秋の雰囲気を演出するビジュアルを考えました。
秋といえば落ち葉やカボチャからオレンジや茶色を連想しますが、自然の実りや素朴さはプログラミングの世界観に合いません。
そこで、秋のもう一つの面について思い馳せました。秋深まり、肌寒く人恋しくなり、夜が長くなり、暗闇のなかランプのもとで夜通し寄り添い語り合うような、そんな寂しさと昂りを内包する景色です。こうして暗闇にロゴが浮かび上がるヒーローセクションができました。
さらにFlutterエンジニアに「Flutterはかっこいい」と感じさせたいとも思いました。なぜなら一緒にサイトを開発するメンバーたちのFlutterへの熱い想いを、私はデザインで返さなければならないと感じたからです。そこで、Flutterのシンボルである水色と神秘的な紫色の光を放つFlutterKaigi 2023のロゴマークが完成しました。
こうして、FlutterKaigi 2023のサイトは昨年のものとは180度違うダークでクールなビジュアルにたどり着きました。
FigmaのアップデートとFlutter
サイトの実装に入ってからすぐ、Figmaのアップデートが来ました。開発モードの登場です。
これは私たちウェブサイトチームにとって衝撃でした。ちょうどチームでミーティングしているときにこの機能を開いてみていたら、CSSやSwiftUIだけでなく、Flutterにも対応しているのです！
Flutterについてよくわからない私でも「ここを見て作ってください」と言えばよくなりました。開発メンバーに距離やサイズの測り方をレクチャーすると、彼らはすぐに使いこなしはじめました。
また、Figmaのプラグインを使ってすぐにMaterial Designのカラースキームを作りあげ、エンジニアに共有することができました。
また、私自身にとってこのプロジェクトに参加したことで、Flutterでできることやできないこと、Material Design 3を理解するための良い機会になりました。
デザインと開発の間で
一方で大変なこともあります。それはこの活動がボランタリーであるということです。それは、お互いのスキルレベルやバックグラウンドを知らないということでもあります。
つまり、デザインの意図どおりに実装できていないときに、私はどこまで品質を求めるべきかについて悩みました。
Webサイトチームはじめメンバーは全員最高です。しかし、ねらったUIがユーザーに届かないことはデザイナーとしてくやしいですし、自分にできることはすべてすることがプロフェッショナルだと思います。
しかし、全員がボランティアであるなか、私はどれだけエネルギーをかけてどこまでを開発メンバーに求めるべきでしょう。
この問いにまだ答えは出ていません。
おわりに
さて、今回はFlutterKaigi 2023のデザインについて語りました。
Webサイト以外にも、現在、イケてるノベルティグッズをたくさんデザインしています。どうぞ期待してお越しください。
