Portfolio Frame

Portfolio Frameは、スクリーンショットやコード、ツイートをモックアップ枠・注釈・コード整形・サイズ設定付きの共有用ビジュアルに変換するChrome拡張機能です。アカウントやアップロード不要でローカル作業に対応。

概要

Portfolio Frameは、スクリーンショット、コードスニペット、ツイートの内容をプレゼンテーション用のビジュアルに変換するChrome拡張機能です。キャンバスエディターに、デバイス、ブラウザ、ターミナルのフレーム、背景、パース調整、注釈、サイズプリセットを組み合わせて使用できます。

この製品はローカル作業向けに設計されています。サイトによると、ユーザーとエディターの間にアカウント、アップロード、サーバーはなく、保存にはローカルストレージとIndexedDBが使われます。無料プランを利用でき、買い切りのProライセンスでは追加の素材、モックアップ、ブランディングオプション、エクスポート機能が開放されます。

機能

2種類のエディター

スクリーンショットを読み込むかコードを共有キャンバスに貼り付け、場所を変えずに画像モックアップ編集とコードスニペット編集を切り替えられます。

モックアップとシーン

デバイス、ブラウザ、ターミナルのフレーム、調整可能なX/Y/Z傾き、ズーム、パース、シーン、任意で使えるガラス素材により、ビジュアルに文脈を加えられます。

コードのプレゼンテーション

Prism.jsのテーマ、言語バッジ、行のハイライト、表示・非表示を切り替えられるガター、macOS・Windows・ミニマリストのウィンドウスタイルでコードを整形できます。

注釈

キャンバス上にテキスト、ボックス、矢印、番号付きステップ、ハイライト、墨消し、ステッカー、端部バッジを直接追加できます。

ソーシャルカード

実際のツイートレイアウト、ライトまたはダークテーマ、編集可能な返信・リポスト・いいね数を備えたスタイル付きツイートカードをモックアップ用に作成できます。

エクスポート設定

プリセットまたはカスタムのアスペクト比を選び、エクスポート解像度とJPEG圧縮を調整できます。Proでは一括、ZIP形式、SVGのエクスポートも利用できます。

用途

製品・ポートフォリオ用ビジュアル
製品のスクリーンショットをデバイスまたはブラウザのフレーム内に配置し、コンテキストバッジや注釈を加えて、ポートフォリオ、ケーススタディ、製品ページ向けのサイズに調整できます。
コードの説明
構文ハイライト、言語バッジ、行番号、選択行の強調表示を使ってコードの一部を見やすく提示し、ドキュメント、リリースノート、技術アップデートに活用できます。
ソーシャルコンテンツのモックアップ
ブラウザのクロームをキャプチャせずにツイート形式のカードを作成し、ソーシャル投稿の案や予定された告知に合わせてテーマとエンゲージメント統計を調整できます。
チャネル横断の公開
同じキャンバスから、ブログ記事、スライド資料、ソーシャルチャネル向けに、正方形、縦長、ストーリー、横長、プレゼンテーション用のビジュアルを準備できます。
注釈付き・保護されたプレビュー
墨消しツール、注釈、タイル状のウォーターマークを使って、詳細を目立たせたり、スクリーンショットやプロトタイプを共有する際に作品を保護したりできます。

Pros and Cons

Pros

スクリーンショットとコードを1つのエディターで扱え、共有キャンバス、サイズ設定、エクスポート設定を利用できます。
デバイスやブラウザのコンテキスト、3D傾き、コードテーマ、注釈、ウォーターマークなど、詳細なプレゼンテーション設定を利用できます。
ローカル優先のワークフローで、サイトによるとアカウントは不要で、作業内容はブラウザ内に保持されます。
継続課金ではなく、無料プランと買い切りのProライセンスを提供しています。

Cons

Chrome拡張機能として提供されているため、他のブラウザに対応しているかは情報から確認できません。
無料プランでは利用できるデバイスとブラウザのフレームが制限され、SVGや一括エクスポートなど複数のPro機能も含まれません。
共有ワークスペース、チームコラボレーション、クラウドベースのプロジェクトアクセスについては、情報に記載がありません。

FAQ

Portfolio Frameを使い始めるにはどうすればよいですか？

FrameはChrome拡張機能です。サイトによると、セットアップは不要で、拡張機能を開くだけですぐに使い始められ、アカウントも必要ありません。

基本的なワークフローを教えてください。

スクリーンショットを追加するかコードを貼り付け、同じキャンバス上で背景、フレーム、注釈、サイズプリセット、エクスポート設定を使って編集できます。

利用できる出力形式とサイズ設定を教えてください。

自動、カスタム、正方形、縦長、ストーリー、横長、プレゼンテーション用のサイズ設定に対応しています。エクスポート解像度とJPEG圧縮も設定でき、Proではすべてのアスペクト比の一括エクスポート、ZIP形式でのエクスポート、SVGエクスポートが追加されます。

スクリーンショットやコードはアップロードされますか？

サイトによると、作業内容はローカルストレージとIndexedDBを使用し、間にサーバーはなく、作業内容がブラウザの外に出ることはありません。また、アカウントも必要ありません。

無料プランとProには何が含まれますか？

Frameには無料プランがあります。Proライセンスは買い切りで、デバイスとブラウザの全ライブラリ、グラスモーフィズム素材、カスタムブランドのウォーターマーク、一括エクスポート、SVGエクスポートが追加されます。

Quick Facts

製品タイプ: Chrome拡張機能
主なワークフロー: スクリーンショット、コード、ツイートをスタイル付きビジュアルに変換
保存方式: ローカルストレージとIndexedDB。サーバーは記載なし
エディターモード: 画像モックアップとコードスニペット
プラン: 無料プランと買い切りのProライセンス
ソースドメイン: portfolioframe.com

Portfolio Frameの代替品

PixelDrive

PixelDriveは、ブラウザ編集、REST API、CSV一括、MCPで1つのテンプレートから大量のブランド画像を生成できるAPI。キャッシュ可能なレンダリングと従量課金に対応。

Napkin AI

Napkin AIは、テキストをプレゼン資料や文書、共有用コンテンツ向けの編集可能なビジュアルに変換します。テキスト起点で生成でき、共同編集にも対応。PPT、PNG、SVG、PDFで書き出せます。

appdesigns

appdesignsは、アップロードしたアプリ画像からApp StoreとGoogle Play用スクリーンショットを作成できるブラウザツールです。デバイスフレームやレイアウトをカスタマイズし、アカウント不要で透かしなしのPNGを無制限に書き出せます。

Shotie

ShotieはMacで、シミュレータやエミュレータのキャプチャ、生成画面、アップロード画像からApp StoreとGoogle Play向けのローカライズ済みスクリーンショットを作成。チャット編集、表示チェック、ワンZIP書き出しに対応。

Refero MCP

Refero MCPは、MCP対応AIエージェントをReferoの厳選されたWebおよびiOSのUI/UX参考事例とユーザーフローに接続し、UI生成前の実践的なデザインリサーチを支援します。Refero Proで利用可能です。

Pass Designer

Pass Designerは、Apple Walletパスの作成・プレビューに対応するmacOSベータツールです。テンプレートや画像、項目、色、セマンティックデータを編集し、iPhoneとApple Watchでの表示を確認できます。