フェンリルでは現在、オンラインセミナー「コ論」を定期開催しています。

デザイナーである私はこのセミナーに、ロゴなどの意匠をデザインするだけにとどまらず、オンラインセミナーという体験そのものをデザインするという立場で関わっています。

本エントリーでは、その実践的な記録をお伝えします。

シンプルで愛着がわくネーミング

まずは、「コ論」という名前の由来をお話しします。

「コ」は「コロナ／これから／Co-（共に）」の頭文字をとって、「論」は「論じる／話し合う／考える」というアクションを起こす意味から、この２文字を組み合わせた造語です。

「コロナをきっかけに、さまざまなテーマをみんなで考えていきたい」というメッセージを名前にあらわしました。

造語なので見慣れないけど、でも読めないこともない。「ころん」となんだかトボけた感じの音もとっつきやすい。覚えやすい名前で、すぐに気に入ってしまいました。

いくつかの候補を出しながら考えていたのは、「名前が与える印象」と「他との違い」です。特に印象は気にしていました。企画には真剣そのもので取り組んでいますが、かといってマジメすぎたり、重厚な名前はつけたくないと思っていました。

「みんなで一緒に」といっているセミナーが、とっつきにくい感じを受けるのはどうだろうか。とはいっても「コロナをきっかけに考える」ので、軽すぎるイメージがつくのも違う。また、それらの印象とは別に、コロナに関連するオンラインセミナーは当時すでにたくさんあったので、差別化の意味で周りに埋もれないようにもしたい。

そんなことを考えながらたどり着いた「コ論」は、うまい具合にバランスがとれた名前だと思っています。

見慣れない字面を活かすロゴ

ロゴに、パッと見て凝った点はないように見えるかもしれません。その通りで、「コ論」という見慣れない字面の２文字を活かすことが引っかかりを生むと思ったため、形状には凝らないことにしました。

もし、オリジナルの書体を作ったり造形的に加工しすぎると、相当うまくやらないと読みづらくなってしまい、結果として伝わるスピードが落ちてしまいます。個性的な名前であれば、形状でさらなる特徴を付け加える必要はなく、そのまま読んでもらったほうが良い。

そう考えて、「コ論」の２文字のサイズ感が揃って見えるように視覚的な調整だけして、ほとんど打ちっぱなしでいくことにしました。抜群の読みやすさがあるからこそ、字面の珍しさが立ち上がってくる気がします。

このロゴは、「こぶりなゴシック」というゴシック体をベースにつくりました。

日本でDTPが普及しはじめた2002年に、字游工房と大日本スクリーンが開発した書体で、「ベーシックなゴシック体」を目指して開発されたといいます。ヒトが書いたようなやわらかで自然な骨格を持ち、丸みを帯びた輪郭はとっつきやすい感じ。開かれたイメージを持たせたい「コ論」にぴったり合うと思いました。

ロゴ以外でも、PeatixやVimeoのカバー画像、登壇に使うスライドなど、セミナーで使われる文字には、すべて「こぶりなゴシック」を使っています。

すこし話が逸れてしまうのですが、書体は「声」と似たようなものです。どんな声で話すのか決めたら、ずっと同じ人が話しているようにできるだけ同じ書体を一貫して使う。そうすることで、無理なくデザインに一貫性を与えることができると思っています。

コロンが隠された遊びあるシンボル

デザインのモチーフは「知恵の輪」です。

セミナーの在り方を象徴するように、「複雑に絡み合う問題も、みんなで根気よく向き合えばきっと解決する」という希望を込めて選びました。

#0 → #1 → #2 …とテーマごとに、知恵の輪のカタチとカラーが変わります。

これは、同じモチーフを使って視覚的な一貫性を保ちつつ、でもちょっとした違いがあることで、変わり続けるセミナーをわかりやすく表現するためです。それに、毎回ビジュアルに変化があれば、開催する私たちも参加いただく皆さんも「新作はどんなのかな？」と、ちょっとでも楽しんでもらえるといいなと思いました。

もちろん実際には、皆さんはお忙しいなかで時間を割いて参加してくださっているので、小さなビジュアルのことなんか気にも留めないと思います。このエントリを書いているときは、#2開催のちょっと前。#3に備えて、次はどんな知恵の輪にしようか考えている私自身が、いちばん楽しみにしているのかもしれません。

知恵の輪には、できるだけ勢いがあって鮮やかな色を選んでいます。

「さぁ、解こう！」と前向きになれるように。それから、いつかアーカイブページを公開したとき、色とりどりの知恵の輪がズラっと並ぶと綺麗に見えるだろうなと想像してのことです。コロナがきっかけのセミナーだからこそ、その表現はポップなものにしてポジティブなイメージで向き合いたいと思っていました。

この写真はシンボルを描くときに参照した知恵の輪です。運営メンバーのひとりが集めた「お茶のおまけ」を借りてきました。テーマごとにシンボルのカラーを変えようと思っていただけに、この知恵の輪を見たときはケースの背景紙がカラフルで驚いたのを覚えています。

そういえば、「知恵の輪でいこう！」と思ってからGoogleやPinterestなどを使って参考写真を探したのですが、いまの知恵の輪って、なんとなく頭に思い浮かぶシンプルなカタチはむしろ少ないようですね。どうやって解くんだろう…と、写真を見ただけではまったくわからないものもけっこう見つかりました。

いくら「複雑に絡み合う問題」といっても、とっかかりがつかめないほど難しそうだとなかなかやる気も出しにくい。なので「コ論」の知恵の輪は、シンプルに解けそうな感じにしています。ほら、わりと解けそうでしょう。

体験の中心になる配信画面

ここからは、セミナーでもっとも大事な「メッセージそのものである配信画面」についてお話しします。

企画当時よく見かけたのは、スライドの手前に登壇者を合成して配信する方法や、スライドと登壇者の表示をスイッチさせる方法でした。前者は、合成に必要な切り抜きの精度に難があり、スライドを作るときに登壇者が重なる部分を意識しなければならないのが気になりました。後者は、スイッチのタイミングが難しそうに思えたのと、登壇者の表情がわからない瞬間が生まれるのがイヤでした。

いろいろと試行錯誤した結果、画面全体を左右に分割して、スライドと登壇者を同時に表示する方法に至ったのですが、これには思わぬ副産物もありました。

スライドはもともと、登壇者の発表資料（16:9）と、アンケートにお答えいただいた方にお渡しする配布資料（4:3）の２種類を準備するつもりでした。それぞれのアスペクト比が異なるため、毎回作り替えていると大変です。

しかし画面分割することで、発表資料と配布資料の両方を兼ねるスライドを１種類だけ準備すればよくなりました。つくらなければならないものが減るのは、ずいぶんと気もラクになります。おかげで#0では、配信直前までスライドの詰めに時間をかけられ、より充実した内容に仕上げられました。

この大胆な画面設計は、iPad OSのSplit Viewからヒントを得ました。画面を２つに分割することで、スライドと登壇者が互いに重なったりせず、参加者も登壇内容に集中しやすい画面になったかなと思います。

この画像では、#0で使った画面からいくつかを抜粋しました。右側のグレーの部分に登壇者が表示されます。左側がスライドで、単調に見えないようにしつつも視覚的な一貫性と汎用性が高いレイアウトを意識しました。

「キーワード」「キーワード＋コピー」「キーワード＋写真」といったありそうな組み合わせをテンプレートとしてつくっておき、説明内容に適したものを選んで文字や画像を差し替えていくだけで、一定水準のスライドが組み上がります。もちろん、登壇内容に沿った写真選びや図の作成は必要になりますが、それ以外の部分で時間がかからないように工夫しました。

＊　＊　＊

スライドのほかに、画面に映り込むものとして登壇者が着るオリジナルTシャツもデザインしました。胸の部分に知恵の輪が描かれています。

実はこのTシャツ、登壇者だけでなく裏方である運営メンバーもお揃いで配信に挑んでいます。#0開催の一週間ほど前に「ほしい！」と思い立って、Original Tshirt.stに依頼してシルクスクリーン印刷で製作しました。まっ白なTシャツに知恵の輪がしっかりと映えていてキレイな仕上がりです。

こういう現場では、一体感を視覚化したり文化祭的な勢いを演出するのって大事です。「コ論、やってます！」って感じがわかりやすくて、意外なキーアイテムだと思っています。

ちなみにTシャツは、テーマごとに新しいものをつくっています。運営メンバーは毎回もらえるので、近いうちに一週間まいにち着替えられるだけのTシャツが手元に…となるかもしれません。

前より「いいね！」と思える体験を

「コ論」は、皆さまとフェンリルとのタッチポイントのひとつです。

本エントリーでお話しした通り、ネーミングからはじめて、ロゴ、書体、シンボル、カラー、スライド、レイアウト、Tシャツ…と、私たちの「コ論」がどんなふうに見えてほしいかをひとつひとつ考え、世界観をつくりこんでいきました。

丁寧につくった世界観を守りながらも、複数のテーマに参加してくださった方が「前のより良くなってない？」と感じる、変わり続けるセミナーを目指して運営しています。

改善と新しいチャレンジを取り入れる姿勢で、運営メンバー一同、今後も頑張っていきます！

＊　＊　＊

「コ論」では、アプリ開発の豊富な実績を持つフェンリルならではの考え方やアプローチで、これからのUXのあり方について話しています。

次回のテーマは、「コロナをきっかけに考えるUXとパフォーマンス」。

デジタルで「快適で心を動かす体験」を実現するために重要な要素となる「システムパフォーマンス」をキーワードに、UXとの関係、クラウド活用の目的と考え方、これからのシステムパフォーマンスの重要性についてお伝えします。

オンラインでの開催ですが、申し込みが必須となっています。ご興味ある方は下記から申し込みをお願いします。（Peatixからも申し込んでいただけます。）

ぜひ、ご参加ください！

変更履歴
誤字・脱字の修正、表記の統一、気になる言い回しを変更しました。（2020.8.24） 

執筆者：中西 弘樹