デザインのスキル

Webページやアプリの画面を、用途に合うデザイン方針から動くコードまで作成します。書体・配色・余白・動き・操作時の表示を整え、画面サイズに応じた見せ方も設計します。

• 特徴のあるLPを作りたいとき
• ダークテーマの分析画面の作成
• 画面サイズに対応する部品の実装

WebGLを使うランディングページの演出方針を、目的やブランドの印象に合わせて選びます。文章や申込ボタンの分かりやすさ、表示性能、実装の複雑さを踏まえて設計します。

• WebGLを使うLPの演出方針を決めたいとき
• 3D製品モデルを使う公開ページの設計
• モバイル表示の重さや動きを改善

ナビゲーションや操作ボタンのアイコンを、Iconify Solar Duotone Boldで統一します。サイズ、ラベル、二色の濃淡、背景とのコントラストをそろえるスキルです。

• ナビゲーションのアイコン統一
• 操作アイコンへのラベル付け
• 機能紹介カードのサイズ調整

ボタンやカードに実物のような厚みや押し込み感を与えるため、グラデーション、内外の影、反射する縁、細かな質感を組み合わせてWeb UIを作るスキル。

• ボタンに押し込み感を付けたいとき
• カードやパネルに厚みを加えたいとき
• 操作部品に樹脂や金属の質感を付けたいとき

画面を二つのパネルに分け、ビジュアルと説明を整理するデザイン指針です。細い枠線や等幅ラベル、余白を組み合わせ、製品紹介や作品展示のページ全体を整えます。

• 製品画像と仕様を並べたいとき
• 作品と解説を分けたポートフォリオ
• 技術的なコンセプトの紹介

暗いモノクロ画面に、分解した3Dワイヤーフレームと注釈線、数値表示を組み合わせ、製品の構造やシステムの状態を読み取れる統一感のあるUIを設計します。

• 製品の分解図UIを設計したいとき
• システムの診断画面づくり
• 注釈付きの構造・仕様説明

見出しや短い紹介文が画面に入ると、単語ごとに少しずつ浮かび上がるアニメーションを実装するスキル。動きを抑える設定や読み上げ、JavaScript無効時の表示にも配慮します。

• ポートフォリオの見出し演出
• 冒頭コピーを画面内で順次表示
• セクション導入文に控えめな動きを追加

記事や事例、ブランドの物語を、スクロールで展開する一枚のWebページに仕立てます。動画、Three.js、HTMLの3方式から内容に合う表現を選びます。

• 長文記事を視覚的に読ませたいとき
• 製品の物語を3D空間で伝えたいとき
• 調査結果をスクロール連動の図表で説明

マットな黒とエメラルド色を軸に、カード、ナビゲーション、データ表示を統一。控えめな発光と技術的な枠線で、落ち着いたダークモード画面を設計するスキル。

• ダークな分析画面を設計したいとき
• カードとナビゲーションの統一
• 状態やグラフを緑色で強調したいとき

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

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

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

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

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

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

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

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

制作会社や建築事務所のサイトを、大きな文字と白黒の章立て、実際の制作風景や作品写真で構成します。不規則な写真配置に加え、操作しやすいメニューやFAQも設計します。

• 制作会社や建築事務所のサイト刷新
• 写真で制作過程を伝えたいとき
• 実績と制作方針を章立てで見せたいとき

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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