BRAND SYSTEM / 2026.09.01

THINKLABのカテゴリ別OGPを
制作する。

ページを開く前から、そのページで何ができるかを伝える。16カテゴリのOGPを、個別の画像制作ではなく再利用可能な仕組みとして整えました。

完成物：16カテゴリの共有用画像実装：Next.js OG Imageサイズ：1200×630配信：Xカード対応

THE PROCESS

課題：リンク先の違いが共有画面で伝わらない

トップ、AIツール、画像AI、動画AI、ニュースなどは役割が異なります。しかし共通のサムネイルでは、XやLINEで共有されたときに、リンク先で何ができるのかを見分けにくくなります。

すべてを別デザインにせず、1200×630の同じ構図を採用しました。カテゴリ名、短い説明、アクセントカラー、識別コードを共通の位置に置くことで、THINKLABらしさとページごとの違いを両立させます。

Next.jsのOG画像生成を共通化し、各ルートはカテゴリ名・説明・色・コードだけを渡す形にしました。画像AI、動画AI、音声AI、音楽AI、AI辞典、ニュースなど、同じ品質で追加・更新できます。

各ページのXカードを大きい画像表示へ統一しました。検索結果だけでなく、SNS・チャットでURLが渡った瞬間にも、次に読む理由が伝わる状態を目指しています。

OUTPUT SYSTEM

OGPは単なる装飾ではなく、最初の案内板です。カテゴリ名と説明を短く固定し、色とコードで識別できるようにすることで、リンクを並べたときにも役割が混ざりません。

用途別に最適なAIツールが見つかるガイド

画像・動画・音声・音楽を目的から比較

IMG

画像生成・編集・デザインをAIで加速する

VID

動画生成・編集・アニメーションをAIで効率化

VOX

音声合成・読み上げ・クローンをAIで実現する

MUS

作曲・編曲・BGM生成をAIでクリエイト

NEW

生成AI・AI業界の最新ニュースを毎日お届け

HOW

初心者から実務までAI活用をステップで学ぶ

WHAT THIS LEAVES

新しいカテゴリを作るときは、ページごとに画像のデザインをゼロから考え直す必要がありません。役割、短い説明、色を決めれば、THINKLABの統一感を保った共有画像として追加できます。