コンペ初採用・初受注実績。 パンフレットを基にLPデザインをWeb向けに一から再構築。 HubSpot CMSでインラインCSSを駆使し、レスポンシブ対応とデザインの忠実な再現、運用容易性をすべて両立させました。 案件の概要と実績（初受注） 本案件は、クラウドワークスにて実施されたデザイン・実装コンペでの初採用、初受注実績です。 制作物: サービス紹介LP 使用ツール: HubSpot CMS、デザインツール（Figma） 担当範囲: LPの企画構成案、デザイン（Web向け再構築）、フリー画像選定、HubSpot CMSでの実装（インラインCSS）、レスポンシブ対応、納品サポート。 クライアント様のLP制作をご依頼いただきました。 既存のパンフレットデザインをベースとしつつも、Web環境での効果を最大化できるデザインと実装が求められました。 私の具体的な役割と工夫点 1. デザイン企画・Web向け再構築の工夫 デザインソースの活用と再構築: 既存パンフレットのブランドイメージと配色を踏襲しつつ、Web特有の「縦の動線」や「CV（コンバージョン）への導線」を考慮し、LPデザインを一から全面的に再構築しました。 視覚的訴求: サービスの仕組みを図解を用いて分かりやすく分解し、ファーストビューでの訴求力に注力しました。 2. HubSpot実装の技術的な工夫 インラインCSSの戦略的な利用によるデザイン忠実性の確保: デザインカンプの微細な調整（スペーシング、フォントの微調整、特定の装飾表現など）を実現するため、インラインCSSを戦略的かつ集中的に使用しました。 これにより、HubSpotの標準機能の制約内でありながら、デザインカンプと寸分違わない忠実なデザイン表現を実現しました。 構造的な編集（HTML/CSS）の適用: カスタムモジュールを使用せず、リッチテキストフィールド内のソースコード編集や既存モジュールへのCSS直接挿入といった手法を駆使しました。 これにより、標準機能で構築されたモジュールをデザインカンプに合わせて最適化し、デザインの忠実性を最大限に高めました。 運用容易性の確保: クライアントが変更する必要のないデザイン部分はインラインCSSで固定し、テキストや画像などクライアントが変更すべき部分のみを編集可能な状態に保ちました。これにより、デザイン崩れを防ぎながら、納品後の更新コスト削減を実現しました。 3. レスポンシブ対応と運用容易性の確保 完全なレスポンシブ対応: PC表示だけでなく、タブレットやスマートフォンでの表示崩れが発生しないよう、CSSのメディアクエリ等を活用し、全デバイスで視認性と操作性を保った完璧なレスポンシブ対応を実現しました。 運用容易性の確保: モジュール設計と実装において、クライアントが納品後もドラッグ＆ドロップでテキストや画像を容易に差し替えられるよう、編集可能範囲を明確に定義。納品後のインハウスでの更新コスト削減を実現しました。