デザインのスキル

Webサイトや製品UIのアニメーションを、情報の優先順位や操作への反応に沿って設計します。動きの速度・順序をそろえ、表示性能や動きの軽減にも配慮します。

• 製品ページの登場演出を考えたいとき
• UIの速度や加減速をそろえたいとき
• ホバーや画面遷移を加えたいとき

カードや入力欄、パネルなどに、複数の影を重ねて自然な奥行きを付けるスキル。Tailwindの任意値クラスを使い、部品の用途に合わせて3段階から選びます。

• 入力欄や小さなカードに奥行きを出す
• パネルやポップオーバーの影を整える
• 冒頭の画像やモーダル風領域を浮かせる

白い本体に青緑の側面とくっきりした影を付け、単体の物を主役にしたSVGイラストを制作します。人物を使わず、アプリの案内画面や機能紹介を共通の画風でそろえます。

• データがない画面の挿絵
• アプリの初回案内用の画像
• 製品の機能を説明するカード

古い書籍や収蔵資料を読むような画面を設計するスキル。セリフ体の本文、紙の質感、余白の注釈、目次ナビゲーションを組み合わせ、閲覧画面全体を整えます。

• 文学作品の読書画面の設計
• 資料アーカイブや原稿の閲覧画面づくり
• 索引と注釈を備えた研究資料の整理

暗い背景に、布や霧のような縦の光をゆっくり漂わせるスキル。重なりによる発光と画面の隅や下端に集めた光で、奥行きのある背景を設計します。

• 暗い背景にゆっくり動く光を加えたいとき
• ブランドカラーに合わせた背景の発光
• 画面の隅や下端に光を集めたいとき

Three.jsで木材の年輪や導管、木口、塗装の質感をコードから生成し、画像テクスチャに頼らず、形状に沿う木目と接写時の細部表現を組み立てるスキル。

• 家具や床、工具の柄の木目制作
• 接写向けの導管や木口の表現
• 油・ワックス・漆の仕上げ調整

参考画像の雰囲気や構図の考え方を分析し、独自のブランド広告ビジュアルを複数制作します。元のロゴや特徴的な配置を複製せず、参考への近さと各案の個性を調整します。

• 参考画像から独自の広告案を作りたいとき
• 共通の世界観で複数ブランドを提案したいとき
• 既存案を参考の雰囲気に近づけたいとき

木材や石、布、葉などの3D素材を、接写でも細部が伝わるよう整えます。解像度や模様の向き、光への反応、段階的な読み込みを設計し、通信量とGPUメモリも確認します。

• 木材・石・布の接写用素材制作
• 継ぎ目や木目、凹凸の向きの修正
• 斜めの床や遠景の葉の表示改善

参考動画の画面構成や動き、配色、素材を分析し、Webページやアプリの再現・応用に使う、実装方法や必要素材まで具体化した詳細なプロンプトを作ります。

• 参考動画を制作指示に変換したいとき
• スクロール演出や画面遷移を言語化したいとき
• 再現に必要な画像や動画を整理したいとき

Three.jsで和紙やコットン紙、クラフト紙の質感を作ります。繊維の凹凸、破れた縁、厚み、折れやインクのにじみ、逆光の透け方を接写でも見える形で表現するスキルです。

• 逆光で透ける和紙の障子を作りたいとき
• カードやラベルに破れと厚みを付けたいとき
• 接写で紙の繊維を見せたいとき

接写に耐える滑らかな輪郭や面取りを備えた高精細3Dモデルを制作・導入し、距離別の軽量モデルや段階的な読み込みを整えて、描画時の負荷も検証します。

• 接写用の高精細3Dモデル制作
• 曲面の角ばりをなくしたいとき
• 詳細な建築素材の描画準備

HTMLや公開ページからアニメーション・操作の仕組みを読み取り、再利用できる指示文と画面画像を記事にまとめるスキル。必要に応じて動画収録や表示確認も扱います。

• HTMLから操作演出の指示文を作る
• Webの動きを画像付き記事にまとめる
• 実ページの動画と参考画像を記録する

Three.jsで金属の反射と表面の質感を調整し、鋼・真鍮・金・銅などを描くスキル。照明環境、傷、指紋、経年変化、面取りまで扱い、工具や指輪の金属表現を整えます。

• 金属のプラスチック感を直したいとき
• 鏡面やヘアライン仕上げの作成
• 緑青や縁の摩耗の表現

Three.jsで布の織り目や光沢、縫い目、裾の厚みを表現するスキル。ひだで模様が伸びない形状づくりから、薄布の透けや擦れまで扱います。

• 逆光で透けるカーテンを作りたいとき
• リネン・シルク・ウールの質感表現
• 接写用の裾や縫い目を作りたいとき

Three.jsの水中シーンに、太陽へ収束する光の筋と揺らぐ水面を加え、カメラの移動や泳ぐ魚にも連動する光のまだら模様を表現するスキル。

• 水中に差し込む太陽光を加えたいとき
• 水面の揺らぎを下から描きたいとき
• 光を横切る魚の明暗を表現したいとき

ランディングページなどのUI参考例を毎回5件選び、画面全体・各セクションの画像や動画、動きの分析、AI制作向けの指示文を日付別の記事資料にまとめます。

• 日々のLPデザイン参考例の収集
• ページの動きや操作感の研究
• AIサイト制作向け指示文の作成

文字や操作部品の見やすさ、キーボード操作、状態表示を点検するスキルです。配色のコントラスト計算や拡大表示の確認を通じて、UIの使いにくさを見直します。

• 文字と背景のコントラスト確認
• キーボード操作とフォーカスの改善
• 空・読み込み中・エラー表示の整備

Webサイトやアプリの配色・レイアウト・装飾を見直し、製品の個性と使う目的に合う画面へ整えます。定型的な構成や架空のデータ、動かない操作も点検します。

• LPの定型的な構成を見直したいとき
• ブランドに合う配色や装飾の検討
• 管理画面の表・グラフ・空状態の改善

スマートフォンからデスクトップまで、画面幅に応じて配置や文字サイズを調整するスキルです。横はみ出し、押しにくいボタン、内容を隠す固定ナビも点検します。

• 狭い画面でのレイアウト崩れの修正
• タブレット幅のグリッド調整
• タップ範囲や操作方法の改善

AIが作るWeb画面や文章の定型的な表現を、目的・個性・動作・根拠の観点で点検します。制作中のルール適用と、完成後に優先度付きで改善点を挙げる監査に対応します。

• 新しい画面の制作中に品質を点検
• 既存サイトの改善点を整理したいとき
• 配色や装飾の目的を見直したいとき

ブランドカラーや目指す雰囲気をもとに、Preline向けのテーマCSSを作るスキル。ライト・ダークの配色生成、保存前のプレビュー、生成した設定値の検証・修正に対応します。

• ブランドカラーに合わせたいとき
• 雰囲気からテーマの配色を作りたいとき
• 保存前にCSSを確認したいとき

データの形や伝えたい内容に合うテンプレートを選び、配色を統一したHTMLグラフ、HTML・PDFのプレゼン資料、HTMLレポートを作るスキル。

• 記事に載せるグラフの作成
• 週報向けの業務指標の可視化
• HTML・PDFのプレゼン資料作成

p5.jsで、粒子や流れなどを使った生成アートを制作します。制作方針と操作画面付きHTMLを作り、同じ模様の再現や数値の調整、PNG保存に対応します。

• 粒子や流れを使ったアートを作りたいとき
• スライダーで模様の変化を探りたいとき
• 同じシードで好みの模様を再現したいとき

文章や項目を整理し、AntV Infographic用の図解記述に変換します。手順・一覧・比較・階層・グラフから構造に合うテンプレートを選びます。

• 作業手順を順序付きの構文にしたいとき
• 二つの案の比較を整理したいとき
• 階層関係を図解用に記述したいとき