デザインデータ(Aiファイル)を元にコーディングを行いました。

期間

2022年05月〜2022年05月

お仕事概要

既存ページのリニューアルとして、Aiファイルのデザインデータ(PC、SP)をもとに、レスポンシブ対応でコーディングを行いました。

お仕事詳細

JavaScriptでアコーディオン、スライダー機能の実装

アコーディオンは外部ライブラリ等を使用せず作成しました。スライダーはslick.jsというライブラリを使用し、実装しました。

ピクセルパーフェクトではないが、デザインデータと同じサイズ感になるようpx単位で調整

デザインを忠実に再現するため、全てではありませんが、ピクセル単位でサイズ、余白を調整しました。

※コーディング前のページの画像はコチラ

PC表示一部

SP表示一部

デザインデータ
一部

コーディング済ページ
一部

コーディング済ページは、コーディング後(納品後)数日経ってからキャプチャしたため、東方ではコーディングしていないコンテンツも含まれています。
コーディング前画像とデザインデータの差分を担当いたしました。

装飾以外の部分はほぼ全てテキストコーディングで行い、画像編集を行わずHTMLコードを変更するだけで対応できるよう実装

画像や背景、特殊な見出し以外の部分はテキストコーディングで実装しています。そのため、変更にも柔軟に対応できます。