Feima Code

公開中のWebサイトを実際に確認し、コントラストやスマートフォン表示、画像切れなどの問題を、注釈付きスクリーンショットと平易な報告にまとめます。

• サイトのスマートフォン表示を点検したいとき
• アクセシビリティ上の問題を探したいとき
• 改修提案の根拠を集めたいとき

レポートや表計算、PDF、既存スライド、リポジトリの資料をもとに、出典をたどれる構成案からプレゼン資料や1枚ものを作るスキルです。

• 報告書から会議資料を作りたいとき
• 表計算から経営報告を作りたいとき
• CHANGELOGからリリース資料を作りたいとき

Open Designで作ったデザインを、最新のチェック画像や依頼内容、スタイルに照らして評価します。公開してよいか、磨き込むか、作り直すかの判定と、最大5件の修正案を得られます。

• 完成前にデザインをレビューしたいとき
• 依頼内容との適合を確認したいとき
• デザインの具体的な修正案がほしいとき

Webサイトの色、フォント、余白、ボタンの状態を調べ、実測値をそろえたデザインシステムとCSSトークンを作成して見比べます。

• サイトの色や書体を抽出したいとき
• 参考URLからテーマを作りたいとき
• ブランドの見た目を文書化したいとき

ランディングページやスライド、プロトタイプ、ダッシュボードなど、目的に合ったデザイン案や画面を作成します。

• ランディングページのデザイン案作成
• ピッチデッキを作りたいとき
• ダッシュボードを試作したいとき

既存サイトの課題を調べ、ブランドや実際の文章・写真・価格を生かしたトップページと最大3ページの再デザイン案を作ります。

• 古い企業サイトを刷新したいとき
• 店舗にサイトの改修案を提案するとき
• トップと下層ページをまとめて見直すとき

注文や顧客など1件の詳細画面を、状態・主要項目・関連情報・活動履歴とともに設計し、未発見やアクセス不可の状態も扱います。

• 顧客や注文の詳細を見せたいとき
• 問い合わせの状態と会話をまとめたいとき
• 関連レコードと活動履歴を示したいとき

レコードの作成・編集、会員登録、決済などのフォーム画面を設計します。入力項目や検証、送信中、エラー、完了後の案内まで考慮できます。

• 新規作成や編集フォームを設計したいとき
• 会員登録の入力項目を整理したいとき
• 決済フォームの検証表示を考えたいとき

AIチャットの画面一式を、入力前の提案、返答中、エラー時の再試行、結果への操作までつながる流れとして設計します。

• AIアシスタントの会話画面を設計したいとき
• 返答中やエラー時の表示を整理したいとき
• 回答を保存できる結果画面を作りたいとき

検索・絞り込み・並べ替えができるレコード一覧画面を作り、複数選択や一括操作、ページ送り、空・読み込み・該当なしの状態まで設計します。

• 顧客や注文を検索できる一覧を作りたいとき
• 管理画面に絞り込みと並べ替えを加えたいとき
• 選択したレコードを一括操作したいとき

サインイン、登録、パスワード再設定、メール確認、ワンタイムコードなどの認証画面を分岐ごとにつなぎ、入力ミスや期限切れの状態も設計します。

• ログインと新規登録の画面をつなぎたいとき
• パスワード再設定とメール確認を加えたいとき
• ワンタイムコードの入力・エラーを設計するとき

設定トップからプロフィール、通知、サブスクリプション、アカウント削除までをつなぐ画面群を設計し、確認や完了など各画面の状態も整理します。

• アプリのアカウント設定をまとめて作りたいとき
• プロフィールと通知の画面をつなぎたいとき
• 契約内容や解約方法を設定に含めたいとき

アプリの初回利用時に、歓迎画面から目標選択、通知許可、任意の有料プラン案内を経てホームへ進む画面の流れを設計します。

• アプリの初回案内を設計したいとき
• 目標選択からホームまでをつなぎたいとき
• 通知許可を求める理由を先に伝えたいとき

検索語の入力欄、絞り込み、種類別の検索結果、最近の検索をまとめ、結果なしや読み込み中の状態も含む検索画面を設計します。

• アプリ内検索の画面を作りたいとき
• 種類別の検索結果を表示したいとき
• 検索条件と件数を整理したいとき

プロフィール、通知、セキュリティ、請求などの設定画面を設計し、保存後の完了表示や失敗時の案内、アカウント削除の確認まで整理します。

• アプリの設定項目を整理したいとき
• 通知やセキュリティ設定を設計したいとき
• 保存失敗時の画面を用意したいとき

プラン選択や無料体験、アップグレード、購入復元、成功後や解約後の案内をつなぎ、価格・規約リンクを含む課金画面の流れを設計します。

• 月額・年額プランの選択画面を作りたいとき
• 無料体験後の課金条件を示したいとき
• 購入復元や規約リンクを含めたいとき

Webやモバイルアプリの共通枠として、サイドバー・トップバー・タブバーなどのナビゲーション、アカウントメニュー、作業領域を設計します。

• アプリの共通ナビゲーションを決めたいとき
• サイドバーやタブバーを選びたいとき
• アカウントメニューを設計したいとき

文章や知識を、小红书風の複数枚のカードにまとめるスキル。表紙から要点、まとめまでを大きな文字と柔らかな配色で構成し、投稿用にスクリーンショットを撮れます。

• ノウハウを知識カードに整理
• 小红书向けのカルーセル投稿作成
• WeChatの朋友圈向け画像作成

TwitterやXの投稿に添える、引用文やデータの横長カードを作ります。中央の短い文章に著者名やハンドル、ブランドの透かしを添え、画像として共有しやすく整えます。

• 短い引用文を投稿画像にしたいとき
• データをカードで共有したいとき
• 著者情報付きで気づきを共有

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

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

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

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

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

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

市場・企業・製品に関するX/Twitterの反応を調べ、支持・批判・中立の論点と根拠、調査範囲を再利用できるMarkdownレポートにまとめるスキル。

• 製品へのX/Twitterの反応を知りたいとき
• 企業や銘柄への賛否を比較したいとき
• 市場イベントへの反応を調べたいとき

商品のお披露目や予告、背景ループに使う3〜10秒の短い動画を生成します。被写体や動き、照明を整理し、指定の長さと縦横比でMP4を保存します。

• 商品のお披露目動画を作りたいとき
• 動きのある短い予告の制作
• 雰囲気を伝える背景ループ作り