[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"post-behind-the-design-that-shaped-aoai-dev-day-2025":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"body":8,"categories":9,"author":12,"thumbnail":24,"ogpImage":28},"behind-the-design-that-shaped-aoai-dev-day-2025","2025-07-15T07:56:38.492Z","2025-09-01T08:56:16.036Z","AOAI Dev Day 2025の会場を彩ったデザインの裏側","\u003Cp>2024年に初開催され、大盛況だった「AOAI Dev Day」。今年も2025年7月18日に「AOAI Dev Day 2025」として再び開催されました。約700名が参加した本カンファレンスは、Azure OpenAI Serviceをテーマにしたエンジニア向けコミュニティカンファレンスです。技術的なトピックを扱いながらも、幅広い層にとって参加しやすい場を目指しています。今回は前回からさらにスケールアップし、より多くの来場者と多様なセッションで盛り上がりました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Faf2952b7342c445a955417aefd3a7881\u002Faoai-image1.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Cp>世路庵では、カンファレンスに使用する各種デザイン制作を担当しました。この記事では、デザイン制作の舞台裏や、準備の工夫、当日の運用までをご紹介します。カンファレンスのデザインについてご興味のある方の参考になれば幸いです。\u003C\u002Fp>\u003Ch2 id=\"h53a5cccc8e\">制作物\u003C\u002Fh2>\u003Ch3 id=\"h1b6905461f\">ウェブサイト\u003C\u002Fh3>\u003Cp>印象的なキービジュアルを用いたウェブサイトを制作しました。ネオンやグラデーションを活かしたサイバーな印象が特徴で、AIというテーマを直感的に伝えるデザインとなっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fb61d32f6598049c79ced3a59e8150741\u002Faoai-image2.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Ch3 id=\"h5406e3fd0a\">垂れ幕\u003C\u002Fh3>\u003Cp>スクリーン横に掲げられた2枚の垂れ幕です。デザインは2種類で構成されており、スクリーンの右側にキービジュアル、左側にキャッチコピーのデザインを吊り下げました。サイズは幅150cm×高さ383cmと非常に大きく、圧倒されるサイズ感です。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fd75693b4a0f64e95b73ebd55aac7545f\u002Faoai-image3.jpg\" alt=\"\" width=\"1280\" height=\"854\">\u003C\u002Ffigure>\u003Cp>垂れ幕のような大きな印刷物は、入稿時に特に気をつけなければいけない点があります。デザインデータが入稿規定に沿っているかどうか、細かなチェックを1つずつ丁寧に行いました。\u003C\u002Fp>\u003Cul>\u003Cli>原寸サイズで入稿するとデータ容量が大きいため、一定の縮尺（今回は1\u002F10）で作成されているか\u003C\u002Fli>\u003Cli>トンボや塗り足しが作成されているか\u003C\u002Fli>\u003Cli>画像の解像度が問題ないか\u003C\u002Fli>\u003Cli>CMYKで作成しているか\u003C\u002Fli>\u003Cli>仕上がりイメージの確認PDFがあるか\u003C\u002Fli>\u003C\u002Ful>\u003Cp>入稿後、いったん世路庵に納品してもらい、成果物に問題がないかチェックを行いました。実際に手に取ってみると、発色が良く、完成イメージに近い仕上がりになっていました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fa2405593758b4ee488b59026935d76a9\u002Faoai-image4.jpg\" alt=\"\" width=\"1280\" height=\"854\">\u003Cfigcaption>デザインを確認する様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>本番当日は会場に配送し、設営作業を行いました。会場スタッフに取り付けができる技術バトンを下げていただき、垂れ幕のハトメ部分に紐を通して吊り下げています。吊り下げる際は垂れ幕が寄れていないか、紐が前面に出ていないかチェックも行っています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F77cc9357eff745f6b9fe100e60610f30\u002Faoai-image5.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003Cfigcaption>設営中の様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>ホールに入るとまず目に飛び込んでくる垂れ幕は、カンファレンスの第一印象を決める重要な役割です。会場全体の統一感や「カンファレンスらしさ」が視覚的に伝わるので、設置してみて非常に効果的だったと感じています。準備の手間以上に得られる効果が大きく、写真を撮る方も見受けられたので準備して良かったと実感しました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F55bb181ca57e4315a91da0b0dea866d9\u002Faoai-image6.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Ch3 id=\"h953d19b3ba\">腕章\u003C\u002Fh3>\u003Cp>スタッフと来場者の違いを識別するため、Tシャツの代替として腕章を用意しました。キービジュアルのデザインをベースに、「STAFF」の文字を大きく配置した視認性の高いデザインとなっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fffd62a1f2bab430582e5a5150f7308b0\u002Faoai-image7.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Cp>こちらも以下の項目を入稿基準に基づいて確認しています。\u003C\u002Fp>\u003Cul>\u003Cli>デザインできない部分（腕章のマジックテープ）に重要な要素が入っていないか\u003C\u002Fli>\u003Cli>トンボや塗り足しが作成されているか\u003C\u002Fli>\u003Cli>画像の解像度が問題ないか\u003C\u002Fli>\u003Cli>画像が埋め込まれているか\u003C\u002Fli>\u003Cli>CMYKで作成しているか\u003C\u002Fli>\u003C\u002Ful>\u003Cp>垂れ幕と同様に、事前に納品してもらい仕上がりのチェックを行いました。イメージしていたよりかなり発色が良く、画質も綺麗でした。腕章を腕にマジックテープでつけ、安全ピンで留める構造となっており、現場でも使いやすい仕様です。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fc39c0e2e708840f6b13ac9dcf787cbb1\u002Faoai-image8.jpg\" alt=\"\" width=\"720\" height=\"960\">\u003Cfigcaption>装着時の様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>実際に当日使用したところ、イメージ通りスタッフの識別が非常にスムーズに行えました。\u003C\u002Fp>\u003Ch3 id=\"h22213b472a\">ネームカード\u003C\u002Fh3>\u003Cp>同じくスタッフの識別用に、アバターと名前を記載したネームカードを作成しました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fa994a3d8633a411e9c3129e4f006a7ee\u002Faoai-image19.jpg\" alt=\"\" width=\"720\" height=\"960\">\u003Cfigcaption>実際のネームカード\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>カット作業は手作業で1枚ずつカットしています。丁寧にガタつきがないようにカットする作業は、地味ながらもとても大変です。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F27b4a74e0901407393af47cea0a53314\u002Faoai-image18.jpg\" alt=\"\" width=\"720\" height=\"960\">\u003Cfigcaption>カット作業の様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>実際に付けていただくと、アバターや名前がオンラインツールで会話していた時と一致しやすく、初見でもすぐに認識できて大変わかりやすかったです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe02d4215e529418eaeb51609cb39bc48\u002Faoai-image20.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Ch3 id=\"h046fa97e02\">サイネージ\u003C\u002Fh3>\u003Cp>会場内の各部屋の入口付近には、トラック名とタイムテーブルに遷移するQRコードを表示したサイネージを設置しました。会場が混雑することを想定して、フォントサイズやQRコードを大きくすることで遠くからでも視認できるよう工夫しました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F2a7cac5616d0404badf0ee8ab1833f97\u002Faoai-image9.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F2d251df326cb4430b49c24c5fa56e760\u002Faoai-image10.jpg\" alt=\"\" width=\"720\" height=\"960\">\u003Cfigcaption>遠くから見てもトラック名がわかりやすい\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>来場者はフロアマップをウェブサイトで随時確認せずとも部屋を把握でき、スムーズな移動が可能に。運営の効率化にもつながりました。\u003C\u002Fp>\u003Ch3 id=\"h9804e86681\">誘導サイン\u003C\u002Fh3>\u003Cp>今回の会場内はとても広く、1\u002F2階にも分かれています。そこで各トラックや受付の位置など、来場者の迷いを防ぐ施策として動線に合わせた誘導サインを複数用意しました。\u003C\u002Fp>\u003Cul>\u003Cli>「一般受付」「受付最後尾」「スピーカー スポンサー MVP 受付」など受付周りで使用するサイン\u003C\u002Fli>\u003Cli>「左にお進みください」「階段はこちら」「会場はこちら」など移動用のサイン\u003C\u002Fli>\u003C\u002Ful>\u003Cp>それぞれのサインにはキービジュアルを背景に用い、統一感を持たせています。遠くから見ることが多いため、文字はできる限り大きくし、視認しやすいデザインを心がけました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff98cd86e98e644e8a1e73ad4a32b62db\u002Faoai-image13.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003C\u002Ffigure>\u003Cp>来場者動線のシミュレーションに基づき、配置場所を調整しています。誘導サインが来場者の動線を塞がないよう、位置や角度に配慮して設置していただきました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F4f50aba3a7784e9a9671a9305700f9fe\u002Faoai-image12.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003Cfigcaption>誘導サインを設置する様子\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>受付周辺のサインには受付票QRコードを入れていたので、当日はスムーズに受付の対応ができました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F1f53831d92f4487b9dbba83023470d1c\u002Faoai-image11.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003Cfigcaption>受付用の誘導サイン\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"he8390a19cf\">スライド\u003C\u002Fh3>\u003Cp>幕間やスピーカーのセッション前にプロジェクターで投影するスライドも制作しました。デザインは全体のトーン＆マナーに合わせ、用途に応じた複数パターンを用意しています。\u003C\u002Fp>\u003Cul>\u003Cli>登壇者情報と時間を表示するスピーカーのフタ画\u003C\u002Fli>\u003Cli>待機用スライド\u003Cul>\u003Cli>フロアマップ、懇親会案内などのスライド\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\u003C\u002Ful>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F69ff7abac99f41b29024b98b8de2dd9c\u002Faoai-image14.png\" alt=\"\" width=\"1280\" height=\"720\">\u003Cfigcaption>スピーカーのフタ画\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F00084dc8acff411bace1f4f6afb194e0\u002Faoai-image15.png\" alt=\"\" width=\"1280\" height=\"720\">\u003Cfigcaption>フロアマップ、各ルームの説明スライド\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe35c255face04834a3325dab4c488b02\u002Fslide_other6.png\" alt=\"\" width=\"1920\" height=\"1080\">\u003Cfigcaption>懇親会案内のスライド\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>スライドのアニメーションはすべてFigmaのプロトタイプ機能を使って作成しています。スピーカーが20人以上いたため、全体をミスなく繋ぐには構造の設計が重要です。クリック操作のみで次のスライドに遷移できるようにし、当日の運用負荷が最小限になるよう配慮しました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fb2030fea87ca480fa1aa6913b68fac46\u002Faoai-image17.png\" alt=\"\" width=\"1280\" height=\"975\">\u003Cfigcaption>全体をプロトタイプでつなげたところ\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>本番当日はスタッフがPCでスライドを操作し、ほぼタイムテーブル通りに進行。トラブルもほぼなく、事前準備の成果が当日にしっかりと活かされました。\u003C\u002Fp>\u003Ch2 id=\"h0b2bb79295\">振り返り\u003C\u002Fh2>\u003Cp>今年も多くの来場者でにぎわったAOAI Dev Day 2025。\u003C\u002Fp>\u003Cp>世路庵では、カンファレンス全体のビジュアル制作を担当し、 垂れ幕、サイネージ、誘導サイン、スライド……と、当日のあちこちで活用される成果物を制作しました。準備期間は細かい確認作業や大量の制作物で大忙しでしたが、当日のスムーズな運営や参加者の反応を見ると、やはり「やってよかったな」と思える瞬間がたくさんありました。\u003C\u002Fp>\u003Cp>最後に、デザイン制作に携わったスタッフをはじめ、AOAI Dev Day 2025スタッフのみなさん、そして当日現場で動いてくださったみなさんに改めて感謝します。また次の機会があれば、今回の経験を活かしてさらにより良くできたらと思います。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F6c4037eb41384c60885bd2875bb64d59\u002Faoai-image21.jpg\" alt=\"\" width=\"1280\" height=\"720\">\u003Cfigcaption>スタッフ集合写真\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Ch3 id=\"h7a90e7720a\">クレジット\u003C\u002Fh3>\u003Cul>\u003Cli>ディレクター：沖 良矢（世路庵）\u003C\u002Fli>\u003Cli>デザイナー：三木 純代（hayate graphics）、奈良 葵（世路庵）\u003C\u002Fli>\u003Cli>アシスタント：小山 樹人（世路庵）、阿部 萌夏（世路庵）、高橋 みさき（世路庵）\u003C\u002Fli>\u003C\u002Ful>",[10,11],"コミュニティ","デザイン",[13],{"id":14,"createdAt":15,"updatedAt":16,"publishedAt":15,"revisedAt":16,"name":17,"job":18,"avatar":19,"profile":22,"xId":23,"githubId":14},"naramochi","2024-02-14T01:35:50.107Z","2024-02-21T09:39:03.560Z","奈良 葵","ウェブデザイナー",{"url":20,"height":21,"width":21},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fcb42ef4d6bcf42d19aa072be665661ab\u002Fnara.aoi.jpg",512,"栃木県出身、2000年生まれ。日本工学院八王子専門学校のWebクリエイター科を卒業後、新卒で合同会社世路庵にウェブデザイナーとして入社。ウェブデザインはもちろん、コーディングやグラフィックデザインなど幅広い領域に対応できるデザイナーを目指している。","_naramochi",{"url":25,"height":26,"width":27},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F1d99dadd05604bea9097642f50a6e6ed\u002Fbehind-the-design-that-shaped-aoai-dev-day-2025.png",720,1280,{"fieldId":29,"type":30,"image":32},"ogpImage",[31],"タイプ2（タイトル＋画像）",{"url":33,"height":34,"width":35},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F7b0e5cc6bb4f4242b3f30cd85b81e116\u002Fbehind-the%20-design-that-shaped-aoai-dev-day-2025-ogp.png",630,1200,1776401660705]