デザインのスキル

紙を思わせる暖色の背景とオレンジのアクセントで、SaaS画面のデザインを整えます。登録フォーム、カード、製品イラスト、動きまで一貫した見た目にまとめます。

• 暖かな紙色の登録画面を作りたいとき
• フォームやカードの見た目を統一
• 初期設定画面に製品イラストを配置

明るい外枠と黒い画面の強いコントラストを軸に、成形品のような立体的なパネルや押せそうなボタンを組み合わせ、工業的で端正なUI全体のデザイン方針を整えるスキル。

• 立体感のあるダークUIを作りたいとき
• カードと操作部の質感の統一
• 状態表示へのブランドカラーの活用

サロンやスパ、クリニックなどの予約制サービス向けに、写真と余白を生かした落ち着いたサイトを設計し、施術の比較から店舗・担当者・日時の選択、予約確定まで整えるスキル。

• サロンやスパのサイト制作・改修
• 料金と所要時間を含む施術紹介
• 店舗・担当者・日時の予約導線設計

暗いガラス面と時計のような円形ダイヤルを軸に、計測機器を思わせるUIを設計します。背景、ナビゲーション、ボタン、緩やかな動きまで、画面全体の表現をそろえます。

• 暗い計器パネル風のUIを作りたいとき
• 円形ダイヤル中心の画面を設計したいとき
• ガラス調のナビやボタンを統一したいとき

スクロールに合わせて製品画面や説明を段階的に見せるWebページを制作します。GSAP ScrollTriggerで画面の固定や場面転換を組み立て、製品の使い方を伝えます。

• スクロールで製品の操作手順を伝えたいとき
• 画面の機能を段階的に見せたいとき
• 製品紹介のセクションを動きでつなぎたいとき

ロゴや短い紹介文、スクリーンショットを途切れなく流す表示を実装します。要素の複製と幅の固定でつなぎ目のずれを防ぎ、端のフェードや動きを抑える設定にも配慮します。

• ロゴ一覧を途切れなく流したいとき
• 画像や利用者の声を繰り返し表示
• タグや短い機能紹介の連続表示

画面の角や端の接点から伸びる細いレーザーを、明るい発光点と霧状の光で表現します。配色や光線の角度、控えめな動きを調整し、奥行きのある構図を作るスキルです。

• 画面の角にレーザーを配置したいとき
• 光るポータルの継ぎ目の表現
• UIの配色に光の演出を合わせたいとき

明るいページの外枠に暗い角丸セクションやカードを入れ子で配置し、料金表やサービス紹介、ボタンまで余白と階層をそろえた画面を設計するスキル。

• 制作会社やサービス紹介ページの設計
• 暗い区画で料金表を目立たせたいとき
• 入れ子のカードでサービスを整理したいとき

工程や機能紹介、カードに01・02・03の装飾番号を添え、視覚的な区切りを整えるスキル。見出しや行動を促すボタンを引き立てる控えめな配置と書体を指定します。

• 工程紹介に控えめな番号を添えたいとき
• 機能カードの角の目印を統一したいとき
• 見出しの横に装飾番号を置きたいとき

雑誌のような大胆な見出しと非対称レイアウトに、細い区切り線や等幅ラベルを組み合わせるスキル。横長の画像と控えめな差し色で、技術製品の画面全体を設計します。

• 雑誌風の構成を技術製品の画面に使いたいとき
• 大見出しと横長画像を配置したいとき
• ナビゲーションや情報欄を統一したいとき

暗い背景にすりガラス風のパネルやグラデーションの枠を組み合わせた画面を作ります。文字の読みやすさ、フォーカス表示、モバイル表示も確認しながら整えます。

• 暗いすりガラス風の見せ場を作るとき
• 明るい画面をガラス風の暗い配色に変えるとき
• カードやモーダルの枠を装飾したいとき

カードや料金パネル、ボタンに、控えめなグラデーションの枠線を付けます。背景に応じたCSSの選択やTailwindでの記述、角丸・透明度・テーマ別の調整を扱います。

• カードや料金パネルの控えめな縁取り
• 複雑な背景を保った枠線の追加
• ホバー・フォーカス時の色のアクセント

細い境界線とL字の角飾りを使い、各セクションの位置や余白がそろったWebレイアウトを作ります。控えめな斜線背景と、画面幅に応じた列構成も扱うスキルです。

• 枠で情報を整理したWebページの制作
• 見出しや画像の位置をそろえたいとき
• 控えめな斜線背景と角飾りの追加

企業やツールのロゴをIconify Simple Iconsから選び、64×64の枠で統一して配置するスキル。連携サービスや取引先の一覧を整えます。

• 連携サービスのロゴを一覧にしたいとき
• 導入企業やパートナーのロゴ配置
• ツールのバッジの見た目を統一したいとき

温かみのある紙色の画面を暗い外枠で囲み、細い罫線やコーナーの印、控えめな斜線模様を組み合わせて、明るく精密なUI全体のデザイン方針を整えるスキル。

• 温かい明色の技術製品UIを作りたいとき
• 暗い背景に紙色の画面を配置
• アプリ試作と文字起こしパネルの統一

実際の製品画面や操作デモを中心に、SaaS・AI製品のランディングページを設計・改修します。入力から出力までの流れと料金の制限、FAQをつなぎ、検討に必要な情報を整理します。

• 実際の画面を軸にSaaSのLPを改修したいとき
• AIの入力から出力までを見せたいとき
• 料金の制限とFAQを整理したいとき

発光する粒子が密集した球体と薄い軌道リングをThree.jsで描き、色・密度・回転を調整しながら、Webページに惑星やデータ地球儀風の3D表現を加えるスキル。

• Webサイトに惑星風の演出を加えたいとき
• インフラサービスのデータ地球儀表現
• 軌道リングをブランドカラーに調整

黒やグレーを基調に、細いグラデーションの枠と非対称グリッドで画面全体を設計するスキル。パネル、文字、操作部品まで、境界線を生かした技術的な表現に統一します。

• ダークな画面のデザインを統一したいとき
• 細いグラデーション枠でパネルを整理したいとき
• ナビゲーションや選択状態を設計したいとき

太さの異なる輪郭線と明るい配色で、人物と小道具を組み合わせたSVGイラストを制作。初回案内や成功画面、ブログの見出しに使う親しみやすい挿絵を描くスキル。

• 初回案内の挿絵を作りたいとき
• 空の画面やエラー画面の人物イラスト
• 操作成功を伝えるイラスト

開発環境やデザイン作業場を、緑の濃淡で描く立体的なSVGイラストを作ります。付属の描画キットで機器や小物を一つの台座に配置し、陰影や細部まで整えます。

• サーバールームや開発構成の図解
• CIの処理工程を絵にしたいとき
• 空の画面や初回案内の挿絵制作

人物と一つの小道具で、エラー画面やサービス案内に使うフラットなSVGイラストを制作します。輪郭線を抑えた配色や体形、手の描き方まで統一します。

• 404・エラー画面の挿絵制作
• 空状態や初回案内の挿絵制作
• 人物と小道具による公開予告

画面の曖昧なアイデアを、レイアウト・文字・配色・余白まで定めたUI生成用プロンプトに整理し、一つずつ条件を変えながら見た目を調整するスキルです。

• 曖昧な画面案をプロンプトにしたいとき
• LPや初回利用案内の見た目をそろえたいとき
• 配色やカード配置の案を比較したいとき

太いネイビーの輪郭と鮮やかな配色で、人物やブラウザー画面、小物を重ねたポップなSVGイラストを制作し、構図から描画後の確認・修正まで進めます。

• 404・エラーページの挿絵制作
• 初回利用案内のイラスト制作
• ブログの見出し画像制作

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

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