開発前の調査やシステム要件定義が終わると、プロジェクトごとの開発環境を整備した上でHTMLのコーディングやWordPressなどのCMS実装を行います。
開発環境の整備
開発に入る前に以下の環境の整備を行います。
- テスト用サーバーの準備
- DB設定とCMSインストール
- Gitのリポジトリ作成
- タスクランナーの準備
テスト用のサーバーは案件ごとに用意します。開発中のウェブサイトのデータはこのサーバーにアップロードし、お客さまとベイジ社内で確認できるようにします。ウェブサイトにWordPressなどのCMSを導入する場合はインストールもこのタイミングで行います。開発環境の情報は【サーバ情報シート】にまとめて、プロジェクトメンバーに共有します。また、ウェブサイトの開発データはGitでバージョン管理を行っています。
フロントエンド実装
ウェブサイトにはWordPressなどのCMSを導入することがほとんどで、その場合はテーマファイルの開発と同時にHTMLやCSSのマークアップも並行して行います。とはいえCSSなどは直接記述するのではなくWebpack等で組み上げたタスクランナーを用いてScssで記述します。タスクランナーではこの他にもJavaScriptのトランスパイル、画像の軽量化・Webp形式での生成なども行っています。また、稀に静的なHTMLで納品する案件もあり、そのような場合はHTMLの代わりにPugというテンプレートエンジンを用いてコーディングすることもあります。
基本的にソースコードをゼロから書くことは少なく、過去案件のソースコードを積極的に再利用したり、独自作成した共通ライブラリを用意するなどして、実装の効率化、品質の向上を目指しています。より多くの案件で同じソースコードが活用できるよう、さらなるテンプレート化を進めています。
モーションデザイン
デザイナーから共有されたイメージに基づき、ウェブサイトにマイクロアニメーションを実装します。エンジニアがある程度実装した上で追加でデザイナーと議論しながら約1～2日かけて調整することが多いです。モーションデザインはこの一度の工程だけで完全に終わることは少なく、デザインチェック、テスト公開段階など、複数回に渡ってブラッシュアップを行っていきます。公開の直前まで、ユーザーの利用体験を向上させる適切なアニメーションを追求していきます。
デザインチェック
デザインデータを忠実に再現するため、エンジニアが実装したウェブサイトは必ずデザイナーによる以下のようなチェックが行われます。
- テクニカルチェック
- コンテンツチェック
- デザインクオリティチェック
- ユーザー体験チェック
マージンや文字サイズなどには採用された理由があるため、エンジニアには高度な再現スキルが求められます。デザインチェックはすべてのページで実施するため、各ページが完成した段階で随時デザイナーが確認します。そのため、コーディングの進捗は毎日報告され、プロジェクトの全メンバーがいつでも確認できるようになっています。
デザインが再現されているか以外にもブラウザで表示されたときに最適なUXが提供できるかという観点からもフィードバックし、それに基づいてエンジニアが修正を行い、ウェブサイトをブラッシュアップしていきます。
デザイナーは、「ユーザー視点で見てどうか？」という、本来がやるべき仕事と捉えて、使ってみて、「これ分かりにくくない？」と思ったら大胆に変えるようなチェックの方が、本来あるべき姿としています。
「過去に作り上げたルールに従う＝正、品質が高い」という固定観念はやめ、ユーザーやビジネスのためのデザインチェック、という有意義な視点を大事にしています。
