お仕事紹介とフロントエンドとして案件に関わる時に気をつけていること。

更新日:2021年3月15日

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

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

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

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

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

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

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

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

2. 掲載情報(最新版)の把握

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

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

3. 間に合わせる力(+ 正確性)を持つこと

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

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

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


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

(たなか)

International Women’s Day 2021

注目企業のパワポは真似したいポイントが盛り沢山!決算説明会資料6選

関連記事

  1. プレゼン会(co-lab墨田亀沢)

    先日22日、私たちの入っているco-lab墨田亀沢で第3回プレゼン会があり…

  2. パワーポイントで使えるピクトグラム集(ICT機材…

    気軽にプラモデルのようにPowerpointで作れるインフォグラフ…

  3. 挑戦者の肖像 CASE-02

    経営者の姿は企業の価値の一つであると思います。インクデザインでは、そんな会…

  4. 【制作事例】御堂筋税理士法人様|統合報告書 / …

    未上場企業でも高まる統合報告書ニーズ企業がその財務情報だけではなく…

  5. 【制作実績】コーポレートイラストレーション

    株式会社おとも様のコポレートイラストレーションを制作させて…

  6. 僕が、これからデザイナーを目指す人に「考え直した…

    代表の鈴木です。今日は採用や人材向けの記事を書いて見ようかと思いま…

  7. 【インクブログ】3月から新しくデザイナーとしてイ…

    3月から新しくデザイナーとしてインクデザインのスタッフになりましたみかげと申…

  8. 弊社のプロモーションビデオの撮影

    【インクブログ】弊社のプロモーションビデオの撮影…

    先日、弊社のプロモーションビデオの撮影をしました。で、写真は…

PAGE TOP