こんにちは。ENECHANGEのデザイナー安住です。
今回、 Figma で作成したLPデザインと、AI駆動のエディタ Cusorを組み合わせることで、デザインの忠実性を保ちながら、これまでにないスピードで実装するプロセスを確立しました。このプロセスが、デザインワークフローにどのような革新をもたらしたのか、デザイナー視点でご紹介します。
プロジェクト概要
本プロジェクトでは、ENECHANGEの新しいLanding Pageにおいて、CursorでFigmaデザインを完全な新規コードで実装しましたが、最初はレイアウト崩れ、文字切れ、画像の表示問題など多くのトラブルが生じました。
修正したFigmaデータを再読み込み依頼し、1回目のコードベースを維持しながら新しいデザインを実装する戦略で、各セクションの完全な差し替えとレスポンシブ対応を実現し、デザインの忠実性とユーザビリティの両立を目指しました。
Figma読み込み
Phase 1：デザイン分析と計画
デザイン分析の重要性: Figmaデザインを読み込む際、まず詳細な分析が不可欠です。デザインの構造、色使い、タイポグラフィ、レイアウトの特徴を理解し、既存のコードとの違いを明確に把握する必要があります。
既存コードとの競合回避戦略: 既存のコードベースを維持しながら新しいデザインを実装するため、新しいクラス名の命名規則を確立しました。「-new」サフィックスを付けることで、既存のスタイルとの競合を避け、段階的な実装を可能にしました。
実装計画の策定: 各セクションごとに実装計画を立て、HTML構造の変更、CSSの実装、レスポンシブ対応、細かい調整の順序で進めました。これにより、品質を保ちながら効率的な実装が可能になりました。
Phase 2: HTML構造の差し替え
段階的な実装アプローチ: 一度に全てを変更するのではなく、段階的に実装することで、問題が発生した際の原因特定と修正が容易になりました。まずHTML構造を変更し、次にCSSを実装し、最後にレスポンシブ対応を行う流れで進めました。
画像アセットの管理:
Figmaから出力された画像アセットを適切に管理し、命名規則を統一しました。problem-1.png、solution-1.png、stat-1.pngなどの命名規則により、ファイルの管理と参照が容易になりました。
アクセシビリティの考慮: 画像には適切なalt属性を設定し、スクリーンリーダーでの読み上げに対応しました。また、セマンティックなHTML構造を維持することで、SEOとアクセシビリティの両方を向上させました。
Phase 3: CSS実装とレスポンシブ対応
新しいデザインシステムの構築:
各セクションごとに新しいCSSクラスを作成し、既存のスタイルとの競合を避けました。section-title-new、problems-grid-new、stats-content-newなどのクラス名により、明確な区別が可能になりました。
レスポンシブ対応の戦略: clamp関数を使用した流動的なサイズ調整と、メディアクエリによる詳細な調整を組み合わせました。これにより、全ての画面サイズで最適な表示を実現しました。
パフォーマンスの最適化: 不要なCSSルールを削除し、効率的なセレクタを使用することで、ページの読み込み速度を向上させました。また、画像の最適化により、視覚的な品質を保ちながらパフォーマンスを維持しました。
問題と解決策
1. 画像表示の問題
問題の詳細: 画像が適切に表示されない、切れる、または縦横比が崩れる問題が発生しました。特に小画面での表示において、画像の一部が切れてしまい、デザインの意図が伝わらない状況がありました。
解決策の実装:
object-fitとobject-positionプロパティを組み合わせることで、画像の表示方法を制御しました。小画面ではobject-fit: containを使用して縦横比を保持し、大画面ではobject-fit: coverを使用してコンテナを埋めるようにしました。
結果: 全ての画面サイズで画像が適切に表示され、デザインの意図が正確に伝わるようになりました。また、画像の品質も維持され、ユーザーエクスペリエンスが向上しました。
2. サイズ調整の要求
問題の詳細: 特定の画像サイズの調整が必要になりました。Figmaデザインで指定されたサイズと実際の表示サイズが異なり、デザインの忠実性を保つために調整が必要でした。
解決策の実装:
個別のサイズ指定を行い、Figmaデザインで指定されたサイズに合わせました。width: 293px; height: 242px;などの具体的なサイズ指定により、デザイン通りの表示を実現しました。
結果: Figmaデザインで指定されたサイズ通りに画像が表示され、デザインの忠実性が大幅に向上しました。また、レスポンシブ対応も適切に行われ、全ての画面サイズで最適な表示が実現されました。
3. レイアウト調整の要求
問題の詳細: グリッドレイアウトの行数・列数の変更が必要になりました。画面サイズによって最適なレイアウトが異なり、ユーザビリティを向上させるための調整が必要でした。
解決策の実装: メディアクエリを使用して、画面サイズに応じたグリッドレイアウトを実装しました。768px以下では3列×4行、480px以下では2列×6行のレイアウトに変更し、各画面サイズで最適な表示を実現しました。
結果: 全ての画面サイズで最適なレイアウトが実現され、ユーザビリティが大幅に向上しました。また、コンテンツの可読性も向上し、ユーザーエクスペリエンスが改善されました。
まとめ
CusorのようなAIツールは非常に賢いですが、入力されたデータの質が低いと、期待通りのコードは生成されません。特に以下の点に注意が必要です。
- コンポーネントの整理: 繰り返し使う要素（ボタン、カード、アイコンなど）は必ずコンポーネント化し、Variantを適切に設定しましょう。これにより、AIがデザインの構造を正しく理解し、再利用可能なコードを生成しやすくなります。
レイヤーの命名規則: レイヤー名は、その要素が何であるかを明確に示しましょう。「Rectangle 1」のようなデフォルト名ではなく、「CTA Button Background」や「Product Image」といった具体的な名前をつけます。
Auto Layoutの活用: レスポンシブなデザインは、Auto Layout を活用して構築しましょう。Auto Layoutは、要素間の関係性（余白、方向、配置）を正確に定義するため、CusorがレスポンシブなCSSを生成する上で不可欠な情報となります。
Figmaでのデザイン作業を「ただ見た目を作る」のではなく、「コード化を前提としたデータを作る」という意識に切り替えることが、成功への第一歩です。
FigmaとCusorの組み合わせは、デザインと開発の境界線を曖昧にし、デザイナーの創造性を最大限に引き出す新しいワークフローを提示してくれました。デザインデータを単なる「画像」として扱うのではなく、「実行可能なデータ」として捉え直すことで、今後のWebデザインはもっと自由で、もっと速く、そしてもっと楽しくなるはずです。
