Studioのカスタムコード機能で魅せたエンジニアの技術力。「YUMEMI Sans」サイト制作の舞台裏

株式会社ゆめみが開発したコーポレートフォント「YUMEMI Sans」の紹介サイトが、Studioで作られたWebサイトを讃えるWebデザインの祭典「STUDIO DESIGN AWARD2023（以下、SDA2023）」にてアイディア賞を受賞しました。

個性的でスタイリッシュなデザインや、同社が持つ技術力を活かしたインタラクティブコンテンツなど「YUMEMI Sans」の特長が存分に表現されている本サイト。

ORIさんとygknさんによると、このデザインができたのは「デザイナーとエンジニアによる共創が実現できたからこそ」だと話します。今回はサイト制作を手がけたお二人に、デザインや実装面でのこだわりを聞きました。

コーポレートフォントの魅力を伝え「自社らしさ」を表現するサイト

──「YUMEMI Sans」の紹介サイトの制作背景を教えてください。

ORI：そもそもの始まりは2020年、会社創立20周年のタイミングでロゴリニューアルを行った際に「YUMEMI」に含まれる5文字のアルファベット（Y,U,M,E,I）を作ったことです。

その後「GROW with YUMEMI」というブランドプロミスの文字組みを作ってもらった際に「それなら全てのアルファベットを展開しよう」という話が出て。そこで、まずはYUMEMI Gothicというベータ版フォントを開発し、1〜2年ほど社内で運用していました。

そして今回、正式版となる自社フォント「YUMEMI Sans」を開発するにあたり、その魅力をより広く、より深く知ってもらうことを目的として特設サイトの制作プロジェクトがスタートしました。

──「自社の独自フォントを作る」という一大プロジェクトを、社内外に知ってもらうためのサイトなのですね。制作期間や関わったメンバーについても教えてください。

ORI：全体の制作期間は2ヶ月ほどですが、メンバーの多くは他のクライアントワークも兼任しながらのプロジェクトだったため、時間の合間を縫いながら進めていきました。

制作メンバーはディレクター2名、LPデザイナー1名、モーショングラフィック制作1名、実装サポート1名の計5名です。またグラフィックの一部は「YUMEMI Sans」のタイプフェイス制作を手掛けたデザインスタジオのSTUDYさんに制作いただいています。

より良い表現を求める中で、デザイナーとエンジニアによる「共創」が生まれた

──サイト制作にあたってStudioを採用した背景は？

ORI：当社には多くのエンジニアが在籍しているものの、そのほとんどがクライアントワークに工数の大部分を割いています。そのため、ディレクター側で実装を担えるStudioは理想的でした。先輩ディレクターで、Studioによるサイト制作の経験が豊富な人がいたことも安心材料の一つでしたね。

実際にStudioでサイト制作をしてみると、とても優秀で使いやすいツールだと感じました。Figmaデータを一瞬でStudioにインポートできる「Figma to Studio」プラグインもあったので実装もスムーズにできましたし、ディレクターの手で細かいところに触れる点も助かりました。

実はこのサイトを作ったとき、リリース30分前のギリギリまでデザインの微調整を行っていたんです（笑）。このような臨機応変な対応ができるのも、ディレクターが直接実装作業を行えるStudioならではだと思います。

──Webサイトのデザイン面でのこだわりを教えてください。

ORI：コンセプトとしては「ダークモードでカッコよく、かつ『YUMEMIらしさ』を感じるデザイン」を目指しました。

当社には一貫した「YUMEMIらしさ」を視覚的に表現するための「VI（Visual Identity）ガイドライン」が整備されており、それぞれのカラーを象徴するキーワードやグラデーションの掛け方、シンボルロゴに使用されている「羽根モチーフ」の使用方法などが細かく規定されています。

そのガイドラインを参考にしながら、サイトのどの部分にどんな色や装飾を使うか、デザイナーとともに擦り合わせました。

──好きな文字を打ち込むとYUMEMI Sansに変換されるインタラクティブ・コンテンツは、SDA2023の審査員からも驚きの声が上がっていました。どのように実装しているのでしょうか？

ygkn：ここはStudioのembedボックス機能を活用して、外部サーバーでホストしているWebページを埋め込んでいます。

入力ボックスに打ち込んだ文字データを外部のWebページに送信し、Webページ経由で受け取った情報をサーバー側で処理して画像化した文字をSVGファイルで生成する。その生成画像を投影するというプロセスで、Studioだけではできないインタラクティブな表現を実現しています。

ちなみに、文字フォントではなく画像を投影しているのは、規約上の問題で社外の人が「YUMEMI Sans」をダウンロードできないようにする必要があったから。複数の制約がありながらもやりたい表現を実装すべく、サイト構造や技術面で工夫を凝らしました。

ORI：実はこのアイデアは、私が社内チャットで「サイト上でフォントを自由に打ち込めるようにしたいけど、Studioでは実装できないよなあ」と何気なく呟いたときに、先輩エンジニアが「こうすればできるんじゃない？」とデモを作ってくれたのがきっかけで生まれたんです。

デザイナーとエンジニアが意見を出し合いながら、より良いデザインを共創できたという意味でも、このコンテンツを作れたことは貴重な経験でしたね。

Studioなら複雑なコードなしでアクセシビリティに配慮したサイトが作れる

──このサイトはWebアクセシビリティ（障がいの有無にかかわらずWebサイトを支障なく利用できること）にもこだわったと聞きました。

ygkn：私たち二人ともWebアクセシビリティに興味があり、社内勉強会を開催したこともあったので、今回のサイトもアクセシビリティに配慮したものにしたいと考えていました。

今回Studioを初めて触ったのですが、画像の代替テキストやaria-label（読み上げソフトで読み上げられるラベル）属性など、コンテンツの内容に合わせて柔軟に設定できる要素が多く驚きました。ノーコードツールでここまでWebアクセシビリティにこだわっているものはなかなかないと思います。

ORI：Studioのアクセシビリティヘルプを見ながら「Studioでこんなこともできるんだ！」と二人で感動しました。

またWebアクセシビリティの観点からお話しすると、この特設サイトはキービジュアルが動画になっているため、ページタイトルにあたるh1タグが配置されていません。そこで視覚的には確認できないけれど、読み上げソフト上では読ませたいときに使えるCSSスニペットをStudio上で実装しています。

今回のサイトでアクセシビリティに配慮して実装した話は、noteにも別途まとめているのでぜひ読んでいただけると嬉しいです。

──サイトの中で、特にお気に入りのセクションがあれば教えてください。

ORI：「YUMEMI Sans」を使った作品を掲載している「Gallary」セクションは、社内でも好評の声が多かったです。

実はこの作品たちは「YUMEMI Sans」の完成後、社内メンバー向けに「このフォントを使ったグラフィックを作ろう」という企画を開催したときに出てきたもの。

ゆめみにはものづくりが好きな人がたくさんいる一方、仕事ではクライアントのニーズに合わせたアウトプットが求められることが多いので、こういった自由に創作を楽しめる機会を作れたのは良かったと思います。

Studio×ゆめみの技術力でさらに面白いものを作りたい

──今回のサイト制作で初めて本格的にStudioに触れたお二人ですが、サイト制作を終えた感想はいかがですか？ 今後Studioで挑戦したいことがあったら教えてください。

ygkn：Studioというまだ使ったことがない技術に触れることができて非常に楽しかったです。今回のプロジェクトでは時間がなくて実装できなかった技術もあるので、機会があればトライしたいですね。

ORI：現時点では社内プロジェクトでStudioを使うことが多いのですが、今回で実装〜運用時のメリットを改めて理解したので、今後は社外の案件でも積極的にStudioを提案していきたいと考えています。

SDA2023で受賞されたサイトを見てみると、デザインの表現力が豊かな会社が多い印象がありました。その中で私たちが強みを発揮できるとしたらエンジニアの技術力を活かした表現力だと思うので、サイトを見てくれた人を楽しませるためにも今後さらにStudioをどう改造できるのか挑戦していきたいですね。

「YUMEMI Sans」サイトのインタラクティブ・コンテンツには、まさにアイディア賞に相応しくノーコードの枠に囚われない創意工夫が詰め込まれています。

そのアイディア自体もプロジェクト外のエンジニアメンバーから提案されたものであったり「Gallary」セクションには社内企画として創作されたものだったり。改めて株式会社ゆめみのメンバー全員が、クリエイティブを愛し、真剣にクリエイティブに向き合っているのだと感じる今回のインタビューとなりました。

▲株式会社ゆめみのStudio制作事例