執筆者 刈込 隆二 公開日 2025年 03月01日
Phase5で完成したデザインを、実際にコードとして組み上げるのがフロントエンド実装の工程です。ノーコードやテーマ活用で多くをまかなえるとはいえ、微妙な演出やレイアウト調整など、より高い完成度を求めるならHTML/CSS/JavaScriptの最適化が欠かせません。Phase9ではレスポンシブデザインやアクセシビリティ対応を含め、最終的なユーザビリティを仕上げていきます。
まずHTML/CSS/JS実装では、デザインモックアップをもとに各ページをコーディングし、テーマのレイアウトやモジュールを微調整します。ノーコード編集だけでは再現しきれないアニメーションや細かな位置調整を行う場合は、子テーマにCSSやJavaScriptを追加して対応します。
次に、レスポンシブ最終調整。モバイルやタブレットなど複数の画面サイズで見たときに、文字が読みにくい、画像が切れるといった問題がないかを確認し、必要に応じてメディアクエリを調整します。スマホファーストで設計しているなら、特に重要なページで実機検証をしっかり行いましょう。
また、主要ブラウザ・デバイステストも重要です。Chrome、Safari、Firefox、Edgeなどでレイアウト崩れが発生しないか確認し、OSによるフォントレンダリングの違いにも留意します。
さらに、アクセシビリティチェックとして画像のalt属性やARIAラベルの設定、色コントラストの確保などを行い、あらゆるユーザーが使いやすいサイトに仕上げます。こうした取り組みは検索エンジン評価の向上や、企業の社会的信頼にもつながります。
スクロールに合わせてふわっと要素が出現するパララックス演出などを導入したい場合、テーマの標準機能だけでは足りないケースがあります（Act3の最新Verでは標準で使えます）。その際、子テーマのJavaScriptに軽いライブラリを導入して実装し、ブランドイメージに合った動きを追加します。
Phase9はサイトの使いやすさと魅力を最大化する最終的な“仕上げ”の工程です。ここで丁寧にブラウザ・実機テストを繰り返すことで、ユーザーがストレスなくページを閲覧できる体験を提供できます。
