某アウトドアブランドサイトの全面的なリニューアル対応の一部に携わらせていただきました。

弊社ではフロントエンド部分を担当、静的ページのコーディングに始まり、商品のフィルタリング機能や一覧画面での商品画像の切り替え等のJSを使った機能実装を行いました。

今回のようにフロントエンダーとして関わる機会も増えてきております。
その際に気をつけているポイントを簡単にまとめてみました。

1. WEBページ上におけるデザインの再現クオリティ

デザインカンプから実際のページに落とし込む際に気をつけなければいけないポイントは大きく２つあると考えています。

①カンプに基づいたデザインの再現クオリティ
②実際のレスポンス時におけるデザインの再現クオリティ

①はデザイナーさんから支給いただく設計図（カンプ）の再現をしっかりと行うことができるかどうかです。多くの場合はPC時とモバイル時の2パターンをいただけるのでそれに基づいて制作を進めれば大きく外れることはありません。

②についてはフロントエンド側の裁量が大きく影響してきます。
モバイルといっても今や様々な幅のスマホ/パッドが存在しますし、PCのディスプレイ幅も多岐に渡りますしブラウザのウィンドウ幅も好みに合わせて自由に変えられますよね。その辺りがしっかりと配慮されているかどうかによって最終的な仕上がりも違ってきますので、確認作業も含めて丁寧に対応します。

2. 掲載情報（最新版）の把握

「あたりまえじゃん！」と思われるかもしれませんが、とっても大事なこと。
デザインはFIX後したデータをいただくことが普通ですが、その中に入るコンテンツ（特にテキスト）情報については流動的な場合が多いです。

特に今回の場合は商品数が多く、さらにリニューアルに伴う新規製品や廃番商品、継続商品の把握、各商品のフィルタリングなどなど…制作時に必要な情報がボリューミーでした。

3. 間に合わせる力（＋ 正確性）を持つこと

WEB制作においてフロントエンドの登場は終盤の方になります。（ざっくりな順番ですが、UI設計→デザイン→フロントエンドのイメージ）

そうするとスケジュールが押された中でバトンが渡されることも少なくありません。
かといってリリース日が変わることも滅多にないので、そこで必要となってくるのが”間に合わせる力”だと考えます。

いかに効率良く対応できるかということになりますが、そこで忘れてはいけないのが先に挙げたデザインの再現や掲載情報についても怠ってはいけないということ。そういう点も含めてしっかりと間に合わせていくことがフロントエンドを担当する際に求められることが多いです。

---

インクデザイン合同会社では幅広くデザイン業務を承っているのと同時に、このようなフロントエンド部分についても併せて対応がすることができます。是非ご相談ください。

(たなか)