5. 開発
DEVELOPMENT
開発フェーズでは、これまで行われた設計やデザインに基づき、ホームページとして機能するように実装していきます。その再現度がプロジェクトの成否に直結するため、ディレクター・デザイナーとエンジニア間で、何度もフィードバックを重ねながら慎重に進めていきます。
開発領域は、HTMLやCSS、JavaScriptを使用して画面を構築する「フロントエンド」と、PHPなどサーバー言語を使用してシステムを構築する「バックエンド」に分かれていますが、SAVVYではコミュニケーションコストや認識のずれなどのリスク面から、どちらの領域も同じエンジニアが担当するケースが多いです。
5-1. 開発の事前準備
開発に着手する前にここまでのフェーズの内容を再確認し、プロジェクトの背景や要件の理解を深めることで最適な機能や実装を検討します。同時に、開発着手後に環境や技術的な制約によって要件変更を迫られるといったことがないように、事前に開発環境の調査や技術要件の検証も行います。
このステップの主な目的
ホームページの最適な実装を検討
設計やデザインの意図からサイトに必要な機能をしっかり把握し、より最適な機能や実装を検討します。必要であれば設計・デザインにフィードバックし再度最適化を図ります。
5-2. 開発要件の定義
続いて開発調査や技術要件の検証、構築するシステムの機能要件のヒアリングで得られた情報をもとに、具体的なシステムの仕様を決めていきます。
機能要件を各画面単位で検討し、運用のしやすさや、可用性、拡張性など、さまざまな側面から要件としてまとめていきます。フロントエンドとバックエンドを同一のエンジニアが一貫して担当するSAVVYならではのメリットです。
このステップの主な目的
システム要件定義署の作成
機能要件や各画面単位で検討して要件としてまとめていきます。開発スコープを明確にすることができるので、開発過程での誤解やミスを防ぐことにもつながります。
テスト環境の構築
プロジェクトごとに開発や修正を行うためのテスト用の環境を用意します。公開環境へのデータ移行の方法もこの段階でお客様と協議・決定します。
セキュリティ対策の検討
ホームページのセキュリティに関する対策を考え、不正アクセスや情報漏洩を防ぎます。
5-3. フロントエンドの実装
フロントエンド実装は、デザインと同じものをブラウザで見られようにする、主にビジュアル面を組み上げていくステップです。主にHTMLやCSS、JavaScriptを使用して構築していきます。
また、デザイン制作フェーズで行ったインタラクション設計に基づき、各所にアニメーションやマイクロインタラクションも実装します。まずはエンジニアの裁量で実装し、その後にデザイナーと共同で調整をしていきます。ユーザーの利用体験に密接に関わる要素のため、公開の直前まで調整を繰り返すこともあります。
なお、フロントエンド実装時は以下の点も考慮しながら組み上げていきます。
レスポンシブ対応
PCやスマートフォンなど、異なるデバイスや画面サイズに合わせて要素の配置や表示方法を最適化するレスポンシブデザインで、どの環境においても正しく情報伝達ができるようにします。
クロスブラウザ対応
主要なウェブブラウザ（Chrome、Edge、Firefox、Safariなど）での動作を確保するために、フロントエンド実装ではブラウザ間の互換性を考慮します。CSSやJavaScriptのコードを最適化し、一貫した表示や機能を実現します。
※サポート対象のブラウザはプロジェクト設計時に定義します。パフォーマンスの最適化
サイトの読み込み速度やパフォーマンスの最適化にも取り組みます。画像の最適化、キャッシュの活用、コードの圧縮などの手法を用いて、スムーズなサイト表示を実現します。
5-4. バックエンドの開発
SAVVYではお客様のご希望要件にあわせてシステム構築も行っていますが、ホームページに包括される機能であることが前提のためそのほとんどはCMSになります。SAVVYでは拡張性や運用を含めたコストパフォーマンスの観点からWordpressの導入をお薦めしています。
多数の導入実績で培ったノウハウにより、高価格帯のハイエンドCMSにも劣らないレベルまでカスタマイズすることも可能で、リスク要因としてよく言及されるセキュリティについてもアプリケーション側、サーバー側双方から対策を行うことで担保していきます。
既存のCMS間でのデータ移行を行う必要がある場合は、事前にリスク調査や移行の計画を立ててお客様に共有します。
なお、CMS構築時は以下の点も考慮しながら組み上げていきます。
運用のしやすさ
CMSの役割は当然ホームページ運用にあります。いくら高機能だろうとお客様が自走で運用できなければ意味を成さないため、リテラシーに左右されず、誰にとっても分かりやすいワークフローとなるようにカスタマイズします。
柔軟な拡張性
ホームページは制作した状態が完成形ではありません。PDCAサイクルを回しながら継続的な改善を施していくことが前提のメディアのため、拡張性を考慮したカスタマイズを行なっていきます。
Wordpressを採用するケースが多いのは、アプリケーション自体に高い拡張性があることも理由の一つです。
