2024年9月、築80年以上の古民家をリノベーションしたスピッカートさんのオフィスを会場にStudio Talk vol.4「デザイナーとディレクターの視点から紐解くイラスト表現×Studioの可能性」を開催しました。開催にあたって、3名の登壇者はイベント告知とあわせて互いの似顔絵をXに投稿。それを契機にStudioのユーザーたちが次々とイラストをアップするムーブメントが起こるなど、開催前から期待が高まっていました。イベントではイラスト表現を得意とし、「STUDIO DESIGN AWARD」 受賞経験もある3社から、イラストやアニメーションを用いたサイト制作のポイントを解説。イラスト×Studioで実現できる表現の広がりについて、各々の視点から語っていただいた当日の様子をレポートでお届けします。※当日のアーカイブ動画は「Studio Community」にて視聴いただけます。アニメーション機能とカスタムコードで親しみやすいWebサイトに最初に事例を紹介したのは、株式会社スピッカート代表の細尾さん。大阪を拠点に活動する制作会社で、過去には「STUDIO DESIGN AWARD2023」でグランプリを受賞した「YELLOW（イエロー）」の公式サイトの制作を手がけています。今回は和歌山で150年以上農業を営む「いとうふぁーむ」のサイト制作事例をもとに、Studioでイラストを活用したWebサイト制作のポイントを紹介していただきました。▲いとうふぁーむ「いとうふぁーむは主にみかんを栽培している農家で、Webサイト上でお客様へ直接みかんを販売しています。クライアントの方とお話しする中で『家族経営ならではの親しみやすさが伝わるWebサイトにしたい』とご要望をいただき、イラストと写真を組み合わせた表現を採用することにしたんです」（細尾さん）サイト訪問者が「日常にみかんがある風景」を想起できるよう、1日の中でみかんを食べるシーンをタイムラインで表したイラストも作成。さらに随所にイラストが動くアニメーションを取り入れ、遊び心がありながらもアットホームな雰囲気が伝わるWebサイトに仕上げています。「このサイトでは写真やイラストがカタカタと動く表現を多用していますが、その多くはStudioのアニメーション機能を使って実現しています。要素をdivタグで二重に囲み、一度左、その後スピードを合わせて右に動くように設定すると、木に実をつけているみかんが風に揺れたり、女の子が手を振ったりといった動きを実現できるんです。またループで動かしている要素などStudioでは表現しきれない部分については、カスタムコード機能を用いてCSSで設定しています」（細尾さん）あたたかみのある可愛らしいイラストは「クライアントからも好評だった」と細尾さん。サイトのリリース後には、ロゴや発送されるみかん箱のデザインにもこれらのイラストが活用されているようになったと言います。イラスト表現をきっかけにブランドの方向性が定まり、顧客に親しみやすさを感じてもらえるようになった好例と言えるでしょう。After EffectsやLottieを駆使した複雑なアニメーションで個性を表現続いて事例を紹介してくれたのは、クックドゥードゥードゥーの大橋さん。Webサイト制作をはじめ、紙媒体や動画のデザインも手掛ける彼女から「Studio Mora Mora」「僕と私と株式会社」の2つのWebサイトの制作過程をお話しいただきました。▲Studio Mora Mora「Studio Mora Moraは名古屋に拠点を置くバイオリン工房で、長年にわたってバイオリンの制作・販売を行っています。Webサイトのリニューアルに際し、技術の深さや安心感、誠実さをユーザーに伝えることを重視してサイト制作を行いました」（大橋さん）デザインにイラストを使った理由について、大橋さんは「バイオリンは色とフォルムが特徴的で、写真を多用するとバイオリン以外の印象が残りにくい。サイト全体で特定の要素に偏らず、調和の取れた雰囲気を表現するため、イラストを使って柔らかさを出した」と説明。また複雑なアニメーションについては、After Effectsで作成したアニメーションをGIFで書き出し、Studioに組み込んでいると言います。「Studio Mora Moraの公開をきっかけに自分の作風が知られるようになり、『イラスト表現を活かしたサイトを作ってほしい』と声をかけてもらうことが増えました。次に紹介する『僕と私と株式会社』コーポレートサイトも、そうした経緯で発注いただいた会社の一つです」（大橋さん）▲僕と私と株式会社 コーポレートサイト僕と私と株式会社は、Z世代向けの企画・マーケティングを行う会社。サイト制作にあたっては同社のビジョンである「自分らしさを咲かせる」からインスピレーションを受け、「メンバーたちが水を与えることで、様々な個性の花が咲くイメージをイラストで表現した」とのこと。「このサイトでもアニメーションを多用しており、Studio Mora Moraと同じくGIF画像を書き出したものをサイト内に組み込んでいます。しかし『マウスをホバーするとボタンから花が咲く』など、GIFでは表現できない仕様はLottie（※）を使って実装しています」（大橋さん）※Lottie…JSONベースのアニメーションファイル形式。インタラクティブなアニメーション表現が可能。LottieFiles連携機能について詳しくはこちらまた「クライアントがなかなか気づかない細部にまで配慮してWebサイトを作りたい」という大橋さん。そのこだわりが光るデザインの一例として、404エラーページ上のイラスト表現を紹介しました。「場合によってはサイト訪問者にネガティブな印象を与えてしまうページだからこそ、あえて404ページに遊び心のあるアニメーションを施しました。気づいたときに思わず嬉しくなるような、クライアントにも訪問者にも楽しんでもらえるサイトとなっていれば嬉しいです」（大橋さん）大橋さんの遊び心と工夫が凝らされたイラスト表現に、参加者からも感嘆の声が上がっていました。コンセプトを象徴する色使いやアニメーションを目指して細部にこだわる最後にWebデザインやグラフィックデザインを中心に活動するデザイン事務所・NEWTOWNの犬飼さんが登壇。同社のイラストを手がけてきたイラストレーターの紹介とともに「AZABU DEI」サイトの制作事例を通じたイラスト・アニメーション表現のポイントを解説しました。「NEWTOWNにはイーゴンというクリエイターがいて、NEWTOWNのアイコンになっているこのイラストも彼が作ったものです。このイラストは多くの人から好評で、今ではNEWTOWNのシンボルになっています。2023年には、このイラストを全面的に使ったNEWTOWNのリクルートサイトを公開、そのサイトを見た方から今回のAZABU DEIサイトについて相談を受けました」（犬飼さん）▲NEWTOWN リクルートサイト「AZABU DEI」は麻布大学が主導するDEI推進プロジェクト。ダイバーシティ（diversity：多様性）、エクイティ（equity：公平性）、インクルージョン（inclusion：包括性）をテーマに、ライフイベントやワーク・ライフ・バランスに配慮した研究環境の改善を推進、研究者にとって働きやすい環境を作る目的で発足しました。「プロジェクトのコンセプトや取り組み内容が難しい印象を持たれがちなので、より親しみやすいビジュアルが求められていました。そんな中、DEI推進センター長である永澤先生からイーゴンのイラストを活用したいというご連絡をいただいたのです」（犬飼さん）▲AZABU DEI プロジェクトサイトサイト制作の過程では、イラストの色使いやアニメーションの動きについて試行錯誤があったそう。「最初のイラスト案では、多様性を表現するための方法の一つとして、カラフルなイラストを使おうと考えました。しかし、あまりカラフルすぎるとサイト全体でまとまりがなくなり、包括性が失われてしまいます。そこで6〜7色の既定色を設定、配色や色調のバランスを調整することで、多様性を表現しつつも一体感のあるデザインに仕上げました」（犬飼さん）また、キービジュアルで使用されている「歩く」アニメーションについてもこだわりが。「キャラクターをどのように動かすかで、与える印象も大きく変わります。通り抜けるパターンやその場で歩き続けるパターンなどいくつかの動きを試し、最終的に『DEIプロジェクトが前進する』イメージを強調するため、キャラクターがその場で歩き続けるアニメーションを採用しました。これは獣医学部がある麻布大学ならではのエピソードですが、犬の歩き方はいただいたフィードバックをもとに調整を重ね、アニメーションの完成度を高めています」（犬飼さん）イラストで伝える親しみやすいWebサイトデザインの秘訣パネルディスカッションの時間では、スピッカート・細尾さん、クックドゥードゥードゥー・大橋さん、NEWTOWN・犬飼さんの3名がStudioユーザーから寄せられた質問に回答。和やかな雰囲気の中、イラストを活用したWebサイト制作のポイントを話し合いました。1つ目のテーマは「イラスト表現が適しているサイト」について。細尾さんからはイラストを使うかどうかの判断について「予算の制約やオフィス・商材の有無で写真ではなくイラストを使うこともある」と説明しました。「写真撮影の方がコストがかかる場合も多いため、社内にイラストレーターが多くいる当社では、イラストを使うことで予算を抑えることができます。またまだ会社ができていない段階やプロダクトローンチ前など、写真で見せられる具体的なモノがない場合も、イラストを使ったデザインがおすすめです」（細尾さん）大橋さんは「柔らかいイメージを伝えたいときにもイラストは役立つ」と続けます。「イラストを活用すると、リラックス感や親しみやすさが伝わりやすくなります。お堅いサービスを柔らかく見せたり、難しい内容を分かりやすくしたりなど、温かい印象を与えたいときはイラストを活用することが多いです」（大橋さん）犬飼さんも「無形商材の場合、写真での表現が難しいためイラストを使う」と同意し、イラストを活用するメリットについて「イラストは想像の余地を与え、写真とは違った情緒的なイメージを生み出せる」と付け加えました。続いてのテーマは「写真とイラストが共存するサイト制作のコツ」。大橋さんからは「青を基調としたサイトでは写真に青みを足すなど、写真とイラストの色味を揃えると統一感を出せる。また、イラストで使ったモチーフの形に合わせて写真を切り抜くなど、写真の切り抜き方も重要」と語りました。細尾さんも「写真とイラストを一つのページに載せたいときは、デザインやイラストをある程度作ってから撮影に進むことで、統一感を持たせたビジュアルに仕上げることができる」と、イラストと写真で伝えたいイメージを共有する重要性を強調しました。3つ目のテーマは「イラストを用いたWebサイト制作におけるディレクションのポイント」。犬飼さんは「クリエイターごとに柔軟な対応をしている」と語り、ディレクションの工夫を紹介しました。「イーゴンのようにアイデアを出しつつ自分で企画もできるクリエイターには、自由に任せることが多いです。ディスカッションしながら、最終的なビジョンを共有して進めていきます」（犬飼さん）一方で、外部のクリエイターと仕事をする際は、共通のビジョンを持つために具体的なイメージボードやテーマを共有するとのこと。「押し付けにならないようにしつつ、クリエイターの個性を活かす柔軟なディレクションを心がけています」と、コミュニケーションの大切さについて語りました。細尾さんも「社内での制作が多い」と前置きした上で「外部クリエイターと仕事をする場合は、より丁寧にやりとりするようにしています。その際、事前にどの程度の指示を望んでいるのか確認することで、コミュニケーションロスを防ぐことができるんです」とディレクションのコツを話しました。イラストを活用したWebサイト制作における実践的なポイントが語られた本イベント。「あたたかみ」や「親しみやすさ」を表現する際にイラストが有用であるとともに、効果的な印象を与えるための色使いやアニメーションの工夫が惜しみなく共有された90分でした。イラストを駆使してより魅力的なサイトを作りたいと思っている方は、ぜひ彼らのノウハウを参考にしてみてはいかがでしょうか。