2026年10月のデザイントレンド｜手作り広告・Figma・新書体を実務につなぐ

デザインの参考を集めたあと、「結局、自分のバナーやLPに何を持ち帰るか」で迷うことがあります。2026年10月2〜8日に発表・公開・紹介された事例を、制作で使える判断へ整理します。

今週の軸は、商品を観察して表現を選ぶこと、媒体をまたいで視覚ルールを保つこと、そのルールを制作ツールへ渡すこと。ぺんてるの手描きUI、Ouraのミニチュア広告、Figmaのエージェントを、それぞれ異なる制作工程のヒントとして見ていきます。

初回公開：2026年10月2日／更新：2026年10月9日。2026年10月9日時点。発表日・記事掲載日・提供開始日を分けて記載しています。実践テストは制作提案であり、広告配信や各アプリで実施した検証結果ではありません。

1．グラフィック：商品から質感を選ぶ

ぺんてる「さりげデコ図鑑」：線そのものが商品説明になる

ぺんてるは9月24日、マットホップで描いた文字・ボタン・イラストを使う特設サイトを公開。12種類の小さなデコレーションを紹介し、10月5日の「デコの日」に合わせて駅広告やSNS施策も展開しました。駅広告は9月28日〜10月11日の期間内に、都内7駅で掲示日程を分けています。公式発表／特設サイト

見どころは、商品が生む線をUIへ使っている点です。手描きの質感が、商品の使い方を想像させます。美容・雑貨の広告へ応用するなら、まず商品の「跡」「輪郭」「触り心地」を言葉にしてから、それを見出しの囲みや補足図へ変換すると、装飾を選ぶ理由が明確になります。

文字の不揃いさは、使う範囲まで設計する

10月7日の紹介記事で取り上げられたVeeは、手による解釈の癖を残す書体です。本文やCTAまで同じ強さで崩すのではなく、短いタイトルで個性を見せ、商品情報は読みやすく保つ使い方が考えられます。書体の詳細と出典はフォントの節で整理します。

配色やレイアウトも同様です。「今はこれが流行」と一律に採用するより、商品写真を主役にする色数と余白を決める。手描きを加えた結果、最初に読んでほしい言葉が弱くなるなら、質感の量を減らす判断が必要です。

2．ブランド：形・使う動作・振る舞いをつなぐ

Oura：指輪を使う手から、広告の舞台まで考える

Ouraの「Wear Your Best Life」は10月8日に展開開始。手を登場人物に見立て、実物の10分の1スケールの街を使った広告です。Ouraの公式制作紹介

制作視点では「指にはめる」という使い方が、主役の選択と画面の大きさをつないでいると読めます。広告に人物の顔を置くか決める前に、商品を使う手や動作だけで話が伝わるかを考える。スポイト、ふた、スイッチなど、商品の小さな接点が演出の入口になります。商品カテゴリーが分かる手掛かりは残し、予想外の要素をひとつだけ試すと、何を売っているかを見失いにくくなります。

Biotic：ひとつの点から、静止画と動きへ

MuchoによるBioticのデザインは、細胞を表す点と、反応拡散の仕組みを使う静止画・アニメーションを組み合わせています。10月8日の紹介で注目された事例ですが、Bioticの組織立ち上げは7月2日。今週立ち上がったブランドとは区別します。Muchoの制作記録／Bioticの発表

BtoBのKVなら、サービスの機能を「集まる」「整う」「反応する」などの動詞へ置き換え、同じルールで図と動きを作る方法が参考になります。科学的な見た目を借りるだけでなく、説明したい機能と動きが対応しているかを確認しましょう。

Orchid：商品体験を、文字とモーションまで広げる

Love and MoneyによるTelepathic InstrumentsのOrchidは、音楽機器のブランドを文字・ビジュアル・動きへ展開した事例。10月6日に紹介されていますが、制作会社の記録では2024年ローンチです。制作会社のケーススタディ

参考にしたいのは、ロゴだけでブランドを完結させない考え方です。商品に触れるときのリズムや反応を、画面の切り替わり方へつなぐ。ロゴ、LP、動画を別々に発注する場合も、共通の「動詞」を渡すと方向を合わせやすくなります。

3．Web・LP・UI/UX：探索体験と分かりやすさ

A24の非商用プロジェクト：作品一覧を探索へ変える

Ravi KlaassensによるA24を題材にした実験サイトは、10月2日にCSS Design AwardsのWebsite of the Dayを受賞。3Dディスクで映画作品を閲覧する非商用プロジェクトです。A24公式サイトのリニューアルではありません。CSS Design Awards掲載ページ

作品数の多いポートフォリオやブランドアーカイブでは、一覧をどう探すか自体が体験になります。一方、問い合わせが目的のLPへ応用するときは、最初の画面で「何のサービスか」「誰向けか」「次に何をするか」を先に伝えたいところです。

EddyOS：ページ全体をひとつの操作世界にする

10月8日受賞のEddyOSは、レトロなOSを思わせるポートフォリオ。ウィンドウ操作やWebGLの作品表示、遊びのある404ページを組み合わせています。受賞日はサイトの公開日とは区別します。CSS Design Awards掲載ページ

取り入れるなら、ウィンドウ風の見た目より「どの操作を覚えれば全体を読めるか」に注目するとよさそうです。独自の操作を増やすほど説明が必要になります。スマートフォンのタップ、戻る操作、文字の大きさ、読み込み時間を含めて確認しましょう。

LPでの実務判断：スクロール演出は情報を理解する順序づけに使い、CTAを探す負担は増やさない。装飾の動きを止めても内容が読めるか、モーション軽減設定でも操作できるかを、デザイン段階から点検します。

4．SNS・短尺広告：最初の一瞬と次の行動

15秒の中で、何を先に見せるか

Ouraのように使用動作が主役になる事例は、短尺広告の構成を考える材料になります。商品を置いた静止画から始めるか、使う瞬間から始めるか、悩みを言葉で出すか。最初の情報が変わると、その後の映像の受け取り方も変わる可能性があります。

比較するなら、尺・人物・BGM・後半・CTAをそろえ、冒頭だけを変えます。人物も音楽も変更すると、どの差が評価に影響したのかを判断しにくくなります。具体的な作り分けはテスト3で示します。

TikTok：広告の先にある質問や購入まで設計する

TikTok for Businessは10月5日、Shopping Assistant、Buy Direct、Lead Agentなど、AIを用いた広告・コマース関連の取り組みを紹介しました。対象広告主向けのテスト機会として案内されており、日本の全アカウントで使えるという発表ではありません。TikTok公式記事

機能が使えるかにかかわらず、制作側が考えたいのは、広告を見た人に残る疑問です。「何の商品か」「どう使うか」「自分に合うか」「詳しく知るにはどうするか」。動画のコピーと遷移先LPの説明を対応させると、広告だけで情報を詰め込みすぎるのを避けられます。

5．映像・モーション：素材から動詞を考える

Tobie Tse：手仕事の素材に、デジタルの動きを重ねる

10月5日公開のインタビューでは、Tobie Tseが手描き、クロシェ編み、レース、刺繍などを組み合わせる工程が紹介されています。本人のサイトには2026年のOlivia Rodrigo向け制作も掲載されています。掲載日を各作品の公開日とは扱いません。制作インタビュー／本人の作品ページ

参考にしたいのは、手作業の素材を撮影・スキャンして、デジタルの動きと組み合わせる工程。全編を刺繍のストップモーションで作った、と一般化できる内容ではありません。

After Effectsでは、触感と可読性を別々に点検する

自作の紙や布の素材を取り込み、数フレームごとの差し替えや小さな位置の変化で、コマ送り感を試す方法があります。紙なら折れる、布ならたわむ、糸ならつながる。まず動詞を決めてから、トランジションやタイトルへ使います。全面を動かす案に加え、静止の間に商品や文字だけを短く動かす案も比較できます。

商品名や価格までテクスチャに焼き込むと、後の修正が難しくなります。素材と文字を分け、同じ内容を滑らかに動かす版も用意する。止めたときの読みやすさ、再生中の認識、差し替えのしやすさを比べると、採用判断につなげられます。

6．制作ツール：Figmaの今週の変更と、既報の見直し

Figma：生成前に、ブランドのルールを渡す

Figma Design内のエージェントは10月6日にオープンベータから一般提供へ移り、AIクレジットの消費対象になりました。一般提供は、全ユーザーが無条件・無制限に使えるという意味ではありません。公式AIクレジットFAQ

公式記事では、ライブラリにガイドラインを添付する方法や、既存画面のコンポーネント・トークンとの整合を点検する使い方が紹介されています。デザインシステムとの利用／活用例

LP制作なら、見出しサイズ、余白、ブランドカラー、ボタン、使用コンポーネントを先に整理する。そのうえで1セクションの情報配置だけを2案に分けると、「綺麗か」だけでなく既存ルールへの適合を見られます。使えない環境では手作業で同じ比較ができます。

Adobe：映像の補助素材と、商品の輪郭を見直す

9月8日の発表には、Premiereのタイムライン内で動画・効果音を生成するGenerative Media Toolや、After EffectsのAI Assistantが含まれます。後者はパブリックベータです。今週の新発表と混同せず、使う機能ごとの提供条件を確認します。Adobeの9月8日発表

PhotoshopのEnhance Edgeは、切り抜き境界や背景色の縁残りを整える9月版の機能。新機能ページの更新日だけを見て、10月に新登場したとは書けません。商品を切り抜いて手描き背景へ組み合わせるなら、細い部分や反射の境界を実画像で確かめる用途が考えられます。Photoshopの新機能

Illustratorではロゴや図形、Photoshopでは商品画像と質感、Premiereでは構成、After Effectsでは動きを担当させる、という分業も選択肢です。これは制作案であり、今週追加された統合機能の説明ではありません。

FramerとCanva：今週の欄へ既報を混ぜない

FramerのFirewallは10月1日発表で、国・アクセス先パスに応じたブロックやリダイレクトを扱います。Advanced Hostingの追加契約またはEnterprise向けです。海外向けLPを運用する場合は、対象国から意図したページへ行けるかという運用の確認材料になります。Framer公式更新

Canva ProSuiteは9月16日発表。Affinity、Cavalry、Flourish、Leonardoをつなぐ構想・更新群です。Cavalryアニメーションの一部をCanva内で編集する機能は発表記事でComing soonとされているため、一括して提供済みとは扱いません。Canva公式発表

実務では「どのアプリで作れるか」に加え、「受け取る人が何を編集できるか」を確認したいところです。ここに挙げたのは確認できた既報の位置づけであり、Adobe・Framer・Canvaに今週ほかの更新がなかったと断定するものではありません。

7．フォントと制作素材：見た目、提供日、用途を分ける

DynaFont：10月19日提供予定の欧文5書体

ダイナコムウェアは10月7日、DFInkPress、DFInkWave、DFJellyInk、DFSketchPop、DFBouncyPopの追加を発表しました。提供開始予定は10月19日で、10月9日時点では開始前。DynaSmart Vと対象の教育機関・学生向け年間契約が案内されています。公式発表・対象契約

インクや手描き感を使う欧文タイトルの候補ですが、日本語広告では別の日本語書体と組み合わせる必要があります。小さい画面でも読めるか、商品名と数字の印象が合うかを確認してから使いたいところです。見本から字形を写すのではなく、正規の提供と契約条件を確認しましょう。

Vee：手の癖と、扱いやすい仕組みを両立する

VeeはLaura Pappa、Aimur Takk、Andree Paatによる2026年の書体。1907年のVenusに着想を得つつ、スケッチの癖を残して展開されています。5ウェイトと可変版があり、ウェイトを変えても文字送りを保つuniwidth設計も特徴です。10月7日は紹介記事の掲載日で、発売日とは断定しません。公式書体ページ／制作記録

この事例からは、不揃いな見た目と、運用上の一貫性を一緒に設計する発想を持ち帰れます。広告の数文字で個性を出しつつ、サイズ違いの展開でレイアウトがどう変わるかを見ておくとよさそうです。

8．業界ニュースと、商用制作前の権利確認

JAGDA Exhibition 2026：同じ告知目的でも、表現は分かれる

JAGDA Exhibition 2026は10月2日に東京ミッドタウン・デザインハブで開幕し、10月25日まで開催。全国8地域から40組が参加し、地域ごとに8種類の告知ビジュアルも制作されています。展覧会の発表自体は以前からあり、今週の動きは開幕です。JAGDA公式案内／主催者の告知ビジュアル紹介

制作の参考にするなら、好きな1枚を選ぶだけでなく、文字の優先順位、写真と図形の比率、余白を比べたいところ。同じ内容を複数案へ展開するとき、どこを共通にし、どこで違いを出すかを考える材料になります。

素材を集めたら、利用条件も一緒に残す

フォントや音楽、写真、AI生成素材は、入手した場所だけでは広告利用の条件が分かりません。具体的な可否は素材・サービスの最新条件に戻って確認します。ここでは個別案件の法的判断ではなく、制作前の確認項目として整理します。

• 出典：配布元、契約したアカウント、取得日を記録する
• 用途：商用広告、Web埋め込み、映像、ロゴなどの対象範囲を見る
• 期間と渡し方：掲載期間、再配布、編集データの納品、クライアント側の利用を確かめる
• 入力データ：商品素材や人物画像を外部AIへ渡してよいかを確認する
• 表示と主張：掲載先や依頼条件で求められるAI生成表示・クレジット・広告やPRの表示を確認する。環境訴求などの主張は根拠資料と照合する

公式広告の画像をそのまま自社のラフ素材に流用する前にも、転載・利用の条件を確認しましょう。今回の記事の制作提案は、各ブランドの利用許諾を示すものではありません。

9．続きそうな表現、用途を選ぶ表現

以下は今回の事例から立てた制作上の仮説です。市場全体の普及率や広告成果を示す調査結果ではありません。

• 商品体験から導く表現：継続して使いやすそうです。形や使う動作に理由があるため、静止画から動画へ展開しやすいと考えられます。
• 紙・布・インクの質感：表現の選択肢として残りそうです。商材との相性と、縮小時の読みやすさが採用条件になります。
• 極端に崩した文字、レトロOS風UI：用途を選びます。個性と引き換えに、読む・操作する負担を増やしていないかが判断点です。
• 3Dの探索体験：アーカイブやポートフォリオでは試す価値があります。短時間で申し込みへ進みたいLPでは、速度と導線を優先する場面もあります。
• デザインルールを前提にするAI支援：チーム制作との相性がよさそうです。ただし、実際に守れたか、修正が減ったかは自分のファイルで確かめる必要があります。

採用基準は「流行しているか」に加えて、商品理解を助けるか、媒体を変えても維持できるか、次の担当者が直せるか。この3点を置くと、試す表現を絞りやすくなります。

10．今週すぐ試せる6つの制作テスト

新しい有料契約を前提にせず、手元の素材と制作環境で行う提案です。まずラフや社内レビューで比較し、実際に配信する場合は目的・計測条件・予算を別途そろえます。

テスト1：商品バナーの質感だけを変える

固定：商品写真、コピー、CTA、配置、サイズ。変更：背景と補足装飾を、フラット版／紙・インク版にする。評価：縮小時の文字、商品の視認性、ブランドとの相性。装飾の量も記録します。配信する場合のみ、同条件でのCTRも検討します。

テスト2：BtoBのFVで、情報の組み方を変える

固定：サービス、対象読者、訴求内容、CTA。変更：説明中心／視覚中心の配置。評価：何のサービスか、誰向けか、導入価値、CTAの見つけやすさ。配置に伴って文章量も変える場合は、複合案の比較となり、配置だけの効果とは判断しません。

テスト3：同じ15秒広告の冒頭だけを3案にする

固定：商品、人物、BGM、声、総尺15秒、冒頭以降の構成、CTA。変更：同じ長さの冒頭区間だけを「商品から」「悩みから」「質問から」にする。評価：最初に理解したこと、商品への興味。配信時は冒頭の視聴維持・完了率・クリック率を確認します。BGMや人物まで同時に変えません。

テスト4：After Effectsで滑らかさと触感を比べる

固定：文字、配色、画面構成、尺、移動経路、読み取れる表示時間。変更：滑らかな動き／紙・布を使ったコマ送り感のある動き。評価：再生中の可読性、ブランド適合、素材と文字の編集しやすさ。テクスチャも変えるなら、これは表現パッケージの比較です。動きだけの影響を見たい場合は素材を共通にします。

テスト5：Figmaで同じセクションの情報配置を2案にする

固定：文章、トークン、見出し・ボタン・コンポーネント、ブレークポイント。変更：情報の配置。評価：ルールへの適合、コンポーネント再利用、読み順、テキスト編集、手直し箇所。エージェントは利用条件が合う場合だけ使い、生成した見た目からルール順守を推定せず、実際の構造を確認します。

テスト6：ひとつの商品をバナー・LP・9:16動画へ展開する

固定：商品、主要コピー、色、書体、モチーフ、動きの方向。変更：媒体に応じた比率と情報の順序。評価：同じブランドに見えるか、各媒体で必要情報が読めるか、素材を再利用できるか。これは媒体間の整合を確認する制作レビューで、どの媒体が成果に優れるかを比較する実験ではありません。

どのテストでも、制作時間、修正箇所、採用できなかった案を残すと、次回の判断材料になります。生成機能を使う場合は、1回の消費量だけでなく、修正・再試行を含めた採用案までのクレジットを記録しましょう。ここでは未測定の節約率や成果の数値は示しません。

よくある疑問

手描きや不揃いな文字を、すべての案件へ入れるべき？

商品や伝えたい内容との関係を説明できる部分から試すのがよさそうです。価格、注意書き、CTAなど、すぐ読めることが重要な情報は特に確認します。

Figmaの一般提供は、追加費用なしで使えるという意味？

同じ意味ではありません。エージェントはAIクレジットを消費し、プラン・シート・設定などの条件があります。自分の利用可能範囲と残量を公式案内・管理画面で確認してから試してください。

紹介された書体は、広告やロゴにそのまま使える？

個別の契約と用途によります。提供開始前の書体もあります。購入・契約条件、利用媒体、埋め込み、納品時の扱いを確認してください。

最初に試すなら、どこから？

ひとつの商品バナーで、固定する要素を残し、質感だけを変えるテスト1から始めると比較範囲を絞れます。その後、採用した視覚ルールをLPや縦動画へ広げる順序が考えられます。

まとめ：表現を選ぶ前に、商品を観察する

今週の事例から持ち帰りたいのは、形、使う動詞、素材、配置・動きの順で考える方法です。AI、手描き、3D、モーションを選ぶ前に、どの商品体験を伝えたいかを決める。そのルールを制作ツールと各媒体へ渡していくと、試作の目的が明確になります。

画像生成・部分編集の使い分けを整理したい方は、関連記事：AI画像生成・編集ツール比較もご覧ください。