Meng To

黒に近い背景と紫のアクセントを使い、角丸の枠やカードを重ねた画面を設計します。検索欄やナビゲーション、発光する装飾まで統一したデザインに整えるスキルです。

• 未来的な人材サービスの画面設計
• カードや検索欄の見た目を統一したいとき
• 紫の照明や動く装飾を取り入れたいとき

深いネイビーの画面に鮮やかな青の強調エリアを置き、細い枠線と控えめな発光で、背景からナビゲーション、カード、フッターまで統一するスキル。

• ネイビーと青で暗いサイトを統一したいとき
• 青いグラデーションで主要エリアを強調
• 細い枠線と番号でリンク一覧を整理

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

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

ベージュやクリーム色を基調に、細い境界線と整然としたグリッドで情報を整理し、背景からカード、ボタン、控えめな動きまで統一するライトモードのデザイン指針です。

• 温かいベージュの製品紹介ページ
• 工程説明をグリッドで整理したいとき
• カード・ボタン・背景の見た目統一

スクロールに合わせて文字や画像、カードが順に現れるページを制作します。背景の視差やカードの重なり、読み込み演出を組み合わせ、物語のように展開する構成を整えます。

• 章ごとに展開するLPを作りたいとき
• 制作実績を重なるカードで紹介
• 見出しや背景をスクロール連動表示

Reactのボタンやカードに、液体金属のように動く枠線を追加します。選択・フォーカスとの連動や色、光の調整に加え、動きを抑える設定や代替表示も扱います。

• 選択中のタブやフィルターの強調
• 主要ボタンへの金属調の枠線追加
• カードの枠・光・角丸の調整

画像や文字、コンテナの左右・上下の端を、CSSで徐々に透明にします。フェードの幅や濃さを調整し、Safari向けの指定を含むコードを示すスキルです。

• 画像の左右をフェードさせたいとき
• 文字の上下をぼかして消したいとき
• フェードの幅や濃さの調整

SaaSの料金ページを、利用者がプランを選びやすい構成に整理します。料金表や比較表、申込ボタンの文言、FAQ、検索対策まで、設計と原稿づくりを支援します。

• SaaSの料金ページを新設したいとき
• 料金プランの違いを整理したいとき
• 購入前の不安に答えるFAQ作成

ボタンやカード、パネルの角を斜めに切った形へ整え、枠線や背景にも共通の形状ルールを適用し、操作しやすさを保ちながら幾何学的なUIを作るスキル。

• SF風の操作ボタンを作りたいとき
• カードとパネルの斜め角を統一したいとき
• 切り抜き形状へのグラデーション枠追加

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

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

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

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

企業向けAIや自動化製品の紹介ページを、権限・承認・監査・障害時の復旧まで伝わる構成に設計するスキル。裏付けのある事例からデモ申込みへつなげます。

• 企業向けAIの紹介ページを見直したいとき
• 権限と承認の流れを説明したいとき
• セキュリティ対策と導入事例の提示

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

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

黒に近いネイビーと青い光が重なるグラデーションを軸に、ページ冒頭の主役エリアからナビゲーション、ボタン、動きまで統一した画面を設計するスキル。

• 青い光で未来的なページを作りたいとき
• ナビゲーションやボタンの見た目の統一
• 小さなネットワーク表示と緩やかな動きの追加

Webページに回転する地球儀や拠点マーカーを追加するスキル。cobeを使った描画設定から画面サイズへの追従、表示負荷の調整、ReactやNext.jsへの組み込みまで扱います。

• メインビジュアルに地球儀を置きたいとき
• 地球儀に拠点を表示したいとき
• モバイル向けの表示調整

SaaSやアプリ、サービスの申込・購入につなげるランディングページを設計・改稿します。対象読者と一つの行動目標を軸に、構成やコピー、FAQ、検索対策を整理します。

• 無料体験の申込ページを設計したいとき
• 広告とページの訴求をそろえたいとき
• 実績やFAQで購入前の不安を解消したいとき

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

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

制作実績を主役にしたポートフォリオサイトを設計するスキル。雑誌のような章立て、案件ごとの配色、控えめな動きで、作品紹介から問い合わせまでの流れを整えます。

• 制作会社の実績サイトを改修したいとき
• 写真や作品を案件別に見せたいとき
• 実績から問い合わせへの導線設計

Webページの見出しや短い文章を、スクロールに合わせて単語ごとに下から順番に表示するスキル。GSAPを使い、動きを抑える設定や読み上げにも配慮します。

• ページ冒頭の見出しを演出したいとき
• セクション名を単語ごとに表示したいとき
• 動きを抑える設定に対応したいとき

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

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

中央に置く外枠と、余白を取った内枠でページを組み立てるスキル。縦の境界線や角のマーカー、背景、角丸を使い、各セクションの階層を見せます。

• ページ全体の境界を見せたいとき
• メイン領域・特徴・実績・CTAの区分
• 各ブロックの内側の余白を揃えたいとき

Webページの登場演出やスクロール連動の動きをGSAPで実装・修正するスキル。複数要素の動く順序や時間差を整え、描画負荷やReactでの後処理にも対応します。

• ヒーローの要素を順番に表示したいとき
• スクロール連動の演出を作りたいとき
• 見出しやボタンの動きを揃えたいとき

落ち葉や花びらが表裏を見せながら舞うアニメーションを、2Dのcanvasや3Dで実装するスキル。回転に連動する横滑り、奥行き、描画負荷まで整えます。

• Webページに紅葉を舞わせたいとき
• 桜の花びらを漂わせたいとき
• 3D空間に奥行きのある落ち葉演出

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

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