AI Workflow AgentsのAI・SaaSポートフォリオデザインとプロンプト

このテンプレートについて

AI・SaaSプロダクト向けにポートフォリオページを作り直す前にAI Workflow Agentsを読むと、構成とそれを支える仕様がここに揃っていることが分かる。ページ自身の見出しは「Axon — Digital Workers for Mundane Workflows」で、構図はその言葉をそのまま中心に組まれている。配色は白 #E8E6F1の下地、深いのインディゴ #1B133Cの文字、マゼンタ #7A4064のアクセントで、書体はInstrument Serif。実装は単一のコンポーネントだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。ブリーフはモーションの予算をループする動画の下地に使う。書いている間は開いておく。3,215文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

単一のコンポーネントを1444x1080の切り出しと一緒にエンジニアへ渡し、組み直しは任せろ。
この種のページを通常の工程で出すフロントエンド開発者は、単一のコンポーネントを参照実装として使う。
競合のSaaSポートフォリオページを作り直すチームが、フレームワークを決める前に単一のコンポーネントを明示したい。

含まれる内容

一行に収めたナビゲーション. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#7A4064の1つだけ。いずれも独自の背景を持たずにポートフォリオページの上に載ります。リンクはワードマークより小さいサイズで組み、#7A4064の操作だけがバーの中で重みを持つ要素です。
明記された寸法. レイアウトは固定値（100vhのセクション）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
文字の背後に全面配置したクリップ. 1444x1080の動画がコピーの背後で6.9sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。自動再生が使えないときは1444x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
役割が明確な2書体. 大見出しはInstrument Serifで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。書体は1つ、役割は明確に。

モーションとインタラクション

反応するのは操作要素

ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は1444x1080で収録しました。

スクロールライブラリなしの環境モーション

背景の映像は6.9秒、1444x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ほかに連続して動くものがないので、注意を引くのは映像だけだ。1444x1080以上で撮影または書き出す。

ポートフォリオページの再配置

多くのレスポンシブ対応は要素を隠して終わる。ここではレイアウトの形が変わる。セクションは100vhに固定。折り返しに収めるために重要な要素は削っていない。ビューポートに応じて変わるのは尺度で、順番は変わりません。

AI Workflow Agentsで動くもの

ここでのモーションはライブラリではなく、判断の積み重ねである。ホバー状態と押下状態、6.9sのメディアループ。スクロールで動くものはない。結果として、著者のいるページになる。短い時間、一度だけの入場、そして装飾ではなく操作を確認するための状態変化である。このポートフォリオページで、動くために動く要素はない。