デザインのスキル

細い青いレーザーと霧を背景に、暗いすりガラス調のカードやナビゲーションを組み合わせ、ダッシュボード全体の配色・余白・動きを統一するデザインスキル。

• 暗いダッシュボードを設計したいとき
• ガラス調のカードとナビの統一
• 青いレーザー背景を取り入れたいとき

黒い線と細かな網点を使い、協働や通勤などの場面をSVGイラストに描きます。手描き風の開いた輪郭と温かみのある紙色で、サービス画面や記事に添える挿絵を作るスキルです。

• 協働やレビュー場面の挿絵制作
• モノクロの導入案内イラスト制作
• データなし画面や404ページの挿絵制作

Three.jsのページ冒頭の3D演出に、マウスの動きに滑らかに追従するカメラ移動と小さな回転を加え、文字やカードとの構図を保ちながら奥行きを出すスキル。

• ページ冒頭の3Dをマウスに反応させたいとき
• 手前と奥で動きに差を付けたいとき
• 文字やカードとの構図を保ちたいとき

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

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

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

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

アバターや人物写真、Webサイト背景に使うUnsplash画像を選び、写真ページのURLと用途に合う縦横比・解像度、切り抜きやサイズ調整の手順を案内します。

• 正方形のアバター画像を選びたいとき
• プロフィールカード用の人物写真選び
• Webサイトの横長背景を選びたいとき

Webサイトやアプリの過剰な装飾、定型的な構成、使い勝手の問題を、画面やコードの根拠付きで点検します。既存の方向性を保ち、削除や最小限の修正に優先順位を付けます。

• LPの過剰な装飾を見直したいとき
• 画面の読みやすさと操作性の点検
• 既存デザイン内で修正を優先付けする

デザイン案やマーケティングに使う背景・建築・人物画像をAura Assetsから探し、カテゴリごとに5件の直接URLと用途に合う解像度・縦横比を提案するスキル。

• Webサイトのメイン背景を探したいとき
• デザイン案に使う人物画像の選定
• スマートフォン用の抽象壁紙探し

黒い髪や服を大きく配した、脚の長い人物のフラットなSVGイラストを制作します。配色やポーズをそろえ、アプリの案内画面やエラーページ、広告カードに使えます。

• アプリの初回案内用の挿絵
• エラーページの人物イラスト
• デザイン・開発業務の紹介カード

太い輪郭の主役モチーフに太陽や文字を組み合わせ、レトロな紋章風のSVGイラストを制作します。７色の平塗りと木版画風の陰影で、チームやイベントのバッジを描くスキルです。

• チームやクラブのバッジ制作
• リリース告知カードの制作
• ステッカーやワッペン用の図案制作

黒とミントの2色刷り風に、人物や仕事の場面をSVGカードとして描くスキル。太く揺れるマーカー線と色ずれを使い、案内画面や記事に添える挿絵を作ります。

• データがない画面の挿絵
• 初回利用の案内に人物画を添えたいとき
• 404ページのイラスト制作

サイトやアプリの制作・修正で、目的のない装飾や不統一な見た目、操作上の欠陥を見つけて整えるスキル。既存の個性を保ちながら、情報の優先順位や操作状態も点検します。

• 既存ページの不要な装飾を整理
• 追加部品をデザイン規則に合わせたいとき
• 情報の優先順位と主な操作の確認

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

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

細いインディゴの線と白を基調に、室内やテラスで働く人物のSVGイラストを制作し、控えめな差し色や家具の配置、手の形までそろえて仕上げます。

• リモートワークの場面を描きたいとき
• ホワイトボードでのチーム相談の挿絵
• 初回利用案内のイラスト制作

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

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

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

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

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

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

広告サイトやポートフォリオを、独自の画像・文字組み・動きで設計し実装します。GSAPによる演出に加え、アクセシビリティや表示負荷、素材の出典も確認するスキルです。

• 画像と動きを統一したLP制作
• 独自性のあるポートフォリオ制作
• 操作しやすいスクロール演出の設計

動物や物をキャラクターにして、開発やデザインの考えを表す手描き風SVGカードを作ります。太さの揺れる筆線と水彩風の色、大きな目で、読み込みやエラー画面などを彩ります。

• カタツムリで読み込み中を表したいとき
• エラー画面にキャラクターを添える
• 開発の考えをブログ画像で伝える

青空のグラデーションとゆっくり流れる雲の光を背景に、白い文字や細い枠、余白のある構成を組み合わせ、明るく落ち着いたページを設計するスキル。

• 青空を背景にした冒頭部分の設計
• 余白のある製品紹介ページの制作
• 白い文字と控えめな枠の統一

花びらや雪、紙吹雪などを、ページ内の一区画に控えめに動かす装飾を実装します。密度や風、重力を調整し、文章の読みやすさと端末の負荷にも配慮します。

• 一区画に花びらや雪を添えたいとき
• ブランドの小さな図形を動かしたいとき
• モバイルの装飾負荷を抑えたいとき

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

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

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

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

動物がパソコンや本と過ごす場面を、鮮やかなピンクの背景と粒状の質感で描くスキル。絵本やガッシュ画を思わせる、温かみのあるSVGカードを制作します。

• データがない画面に動物の絵を添えたいとき
• 初回案内用のイラスト制作
• 秋らしいブログ見出し画像の制作