トップWebデザインデジタルアイデア ビジュアルトレンドクリエイティブガイド サービスポートフォリオ 会社についてお問い合わせ
Creative Guides

クリエイティブガイド

デザインの各分野における実践的なステップバイステップガイドを提供します。初心者からプロまで活用できる、深みのある知識をお届けします。

Step by Step

ガイドコレクション

01

ブランドカラーシステムの構築

  • 1ブランドの価値観と感情的目標を定義する
  • 2主要カラー1色を直感と分析で選定する
  • 3色相環を使い補助色を体系的に展開する
  • 4アクセシビリティ基準でコントラストを検証する
  • 5実際のUIコンポーネントに適用して検証する
02

タイポグラフィ階層の設計

  • 1コンテンツの種類と優先度を分類する
  • 2ベースフォントサイズとスケール比率を決める
  • 3見出し・本文・キャプションの階層を定義する
  • 4行間と字間を読みやすさに合わせて調整する
  • 5様々なデバイスで視認性をテストする
03

アニメーションタイミングの極意

  • 1アニメーションの目的と感情的メッセージを定義する
  • 2イージング関数を目的別に選択する
  • 3デュレーションを100ms〜600msの範囲で調整する
  • 4連続アニメーションはステガーで自然なリズムを
  • 5reduced-motion設定に対応したフォールバックを実装
04

ランディングページ構成の法則

  • 1ファーストビューで価値提案を明確に示す
  • 2社会的証明を視覚的に組み込む
  • 3問題提起→解決策の流れで構成する
  • 4CTAボタンを視線の流れに合わせて配置する
  • 5フォームは最小限の項目に絞り込む
05

モバイルファースト設計プロセス

  • 1320pxの最小画面でコアコンテンツのみ設計する
  • 2タッチターゲットは最低44×44pxを確保する
  • 3ブレークポイントをコンテンツで決める
  • 4段階的に機能を追加するプログレッシブな設計
  • 5実機でのテストを全工程に組み込む
06

デザインシステム構築ロードマップ

  • 1既存UIを監査してパターンを抽出する
  • 2デザイントークンを定義・文書化する
  • 3基礎コンポーネントから順に構築する
  • 4Storybookなどでコンポーネントを可視化する
  • 5継続的更新のガバナンスプロセスを確立する
Resources

リソースダウンロード

PDF
カラーパレット チートシート
コースタルデザインのための24色パレット集。Hex値・RGB・使用例付き。
ダウンロード →
Figma
UIコンポーネントライブラリ
ミラージュストランドウェブデザインシステムの全コンポーネント集。
取得する →
CSS
アニメーションスニペット集
波をモチーフにした30種のCSSアニメーション。コピー&ペーストで即使用可能。
コピーする →