デザインのスキル

画面の配置や情報の順序を検討するための白黒のワイヤーフレームをSVGで作り、複数画面の流れや注釈、まとめて閲覧できる確認用ページも用意するスキル。

• 実装前に画面配置を検討したいとき
• モバイルやデスクトップ画面の構成確認
• 複数画面にまたがる流れの整理

Paperclipの画面や部品を、既存の色・文字・状態表示・操作の規則に合わせて作成・修正し、再利用する部品と見本ページも一緒に整えるスキル。

• 既存の規則に沿ってページを追加
• 再利用できるUI部品の作成
• 状態の色や優先度アイコンの統一

Paperclipでエージェントや稼働状態を表すカプセル画像を制作・実装・点検し、用途ごとの配色、動き、再現用の設定をブランド規則に沿って整えるスキル。

• エージェント用アバターの制作
• 稼働状態の表示を実装したいとき
• マーケティング用メイン画像の制作

160件の動きのサンプルからWebページや部品に合う表現を探し、HTML・CSS・JSを既存の構成に合わせて調整するスキルです。文字やスクロール演出にも対応します。

• ボタンにクリック時の波紋を加えたいとき
• 見出しをタイプライター風にしたいとき
• スクロールに応じて要素を表示したいとき

古典的なイラストとコバルトブルーを基調に、映画のようなスクロール演出を備えた制作スタジオの紹介サイトを、ブランドや事業内容に合わせて作るスキル。

• 建築スタジオのサイトを作りたいとき
• 古典美術風の作品紹介サイト制作
• サービスやFAQをまとめたいとき

既存のHTMLに調整パネルを付け、配色・文字サイズ・余白・テーマ・動きを画面上で変更するスキル。設定を保存し、エージェントへの再依頼なしに見た目を試せます。

• LPの配色や余白を詰めたいとき
• ブランドやデザインの違いを実演
• 見た目を調整できる単体デモの制作

新しいWebページの制作や既存UIの見直しで、構成・配色・書体を整えるスキルです。URLや画像のデザイン分析、改善点の優先順位付けにも対応します。

• 新しいランディングページを作りたいとき
• 既存UIの改善点に優先順位を付けたいとき
• 参考ページや画像を分析したいとき

ピクセルアートのキャラクター、大きな年号、動く文字や年表を組み合わせ、歴史や豆知識を紹介する画面録画向けのアニメーション付きHTMLを作るスキル。

• 歴史解説の一場面を作りたいとき
• 豆知識をピクセルアートで伝えたいとき
• 画面録画用のレトロな動きを作りたいとき

Figmaファイルから要素の階層、色や文字などのデザイン設定、書き出し対象の画像素材を抽出するスキル。後続の変換や実装で使えるファイルとして保存します。

• Figmaの要素構造を抽出したいとき
• 色・文字・余白の設定を集めたいとき
• 実装用の素材を準備したいとき

デスクトップ向けダッシュボードの画面構成を、灰色のブロックで示すHTMLワイヤーフレームにします。配色や写真を決める前に、情報の優先順位や配置を確認できます。

• ダッシュボードの配置を確認したいとき
• ナビゲーションと情報の優先順位の検討
• KPI・グラフ・表の配置検討

シルバーやクリーム色を基調に、柔らかな質感のウェブ試作品を作るスキル。二重枠のカード、大きな角丸、浮遊するナビゲーション、滑らかな動きを統一して設計します。

• 落ち着いたSaaSサイトを試作したいとき
• 消費者向けサイトの質感を検討したいとき
• カードとボタンで機能を紹介したいとき

モバイルアプリの画面遷移を、横に並べた3〜4枚のスマートフォン枠で可視化するスキル。灰色の仮配置、操作を示す矢印、注釈で利用の流れを整理します。

• 導入からホームまでの流れを整理したいとき
• 商品詳細から確認までの導線を見たいとき
• デザイン前に画面遷移を検討したいとき

複数SNSのフォロワー数や投稿への反応、人気投稿、話題、コメントを見渡せる分析画面を、整合性のあるサンプルデータ入りの単一HTMLで作るスキル。

• クリエイター向け分析画面の試作
• 複数SNSの指標表示を設計したいとき
• フォロワー推移と人気投稿の表示

新聞紙風の背景と極太の文字、細い罫線で、スイス印刷物風のWeb試作を作ります。赤を差し色に使い、編集記事やポートフォリオを硬質な見た目にまとめます。

• 新聞風の編集ページを試作したいとき
• 制作会社のポートフォリオ制作
• マニフェストサイトの制作

シェーダーや3Dシーン、粒子の動きを全画面で描き、見出しを重ねたWebGL表現を制作。外部通信のない単一のHTMLファイルにまとめます。

• Webサイトのヒーロー動画表現
• 見出し付き生成アートの制作
• 3Dシーンや粒子表現の試作

画面構成を検討するための手描き風ワイヤーフレームをHTMLで作ります。方眼紙、付箋、ラフなグラフ、案を示すタブを使い、設計初期の考えを可視化します。

• ポータルやダッシュボードの初期構成を検討
• 複数案をタブラベルで示したいとき
• 画面の下書きにレビュー用の注釈を付ける

制作前の計画段階で、既存のデザインルールやブランド資料、依頼内容から見た目の方向性を一つに定め、配色や書体などの実装方針を整理するスキル。

• 実装前にデザイン方針を固めたいとき
• 既存のデザインルールを適用したいとき
• ブランド資料から方針を決めたいとき

温かみのある白地、セリフ体の見出し、細い罫線と広い余白を使い、SaaSやドキュメント向けの紹介ページを編集物のような落ち着いたデザインで試作するスキル。

• SaaSの紹介ページを試作したいとき
• ドキュメントの見た目を検討したいとき
• 知識商品の紹介ページづくり

ランディングページや料金表、ドキュメント一覧などの試作を、付属テンプレートとレイアウトから組み立て、単一のHTMLファイルにまとめるスキル。

• 製品紹介ページを試作したいとき
• 料金プランの比較ページ作成
• ドキュメント一覧の画面設計

制作したデザインを、レイアウト・目的への適合・ブランド・使いやすさ・文章の5つの観点で点検し、見つかった具体的な不備の修正まで進めるスキル。

• 納品前のデザイン点検
• ブランドの指定との整合確認
• キーボード操作やコントラストの確認

デスクトップ向けランディングページの構成を灰色のボックスで描き、番号付きの注釈と仕様パネルで、配置や実装時の要点を共有するワイヤーフレームを作ります。

• デスクトップ向けLPの構成検討
• 開発担当への仕様メモ共有
• ナビや訴求エリアの配置確認

市場データを密に並べた取引分析ダッシュボードを、単一のHTMLで作成。明暗テーマの切り替えやチャートの詳細表示、コマンドパレットを備えた画面を用意します。

• 金融分析端末の画面を試作したいとき
• 市場情報を密に並べた画面の提示
• チャートの詳細表示や操作感の実演

ソースコードやFigmaの抽出データ、スクリーンショットから色・書体・余白などのデザイン設定を集め、出典や使用箇所を添えたJSONに整理します。

• コードに散らばるデザイン設定の整理
• Figmaのデザイン移行準備
• スクリーンショットからの設定抽出

サービスの料金プラン、機能比較表、よくある質問をまとめたHTMLページを作成。プラン数や推奨表示を整え、契約前に内容を比べられる料金ページを試作するスキル。

• サブスクリプション料金ページの試作
• プラン別の機能を比較したいとき
• 個人向けと法人向けのプラン提示