トップページのメインスライダーと、各ページのループスライダーを、PC表示とレスポンシブ表示の両方で調整して制作しました。
小向建設株式会社様のサイトで、次の点を整える必要がありました。
・トップページの第一印象を左右するメインビジュアルを、複数の施工写真などの画像を切り替えて見せる形に改めたい
・下層ページにも、画像が自動で流れるスライダーを入れて、サイト全体の見栄えをそろえたい
・提供された画像はPC表示用のものが中心で、スマートフォンでも崩れずに見られる形に整える必要があった
見た目の印象を高めつつ、PC・スマホのどちらでも読み込みや表示に支障が出ない、スライダーの実装が求められていました。
ステップ 01
トップページの最初に表示される、メインビジュアルのスライダーを制作。画像が自動で切り替わる動きを、デザインとコーディングの両面で実装しました。
ステップ 02
スライダーの見せ方(画像の大きさ・切り替わる速さ・動きのつけ方)を設計し、サイト全体の雰囲気にそろえました。
ステップ 03
スライダーの動きを、HTML・CSS・JavaScript・PHPで実装。表示速度に配慮して、軽く動く形に仕上げました。
ステップ 04
提供された画像はPC表示用のため、スマートフォン・タブレットの表示は、画像の見え方や切り替えの動きを調整して対応しました。
動画を主役に据え、SNSへ自然に回遊できる導線を設計。想いが伝わるPRサイトを構築しました。
新規オープンの髪質改善専門サロンに、予約につながるWEBサイトとGoogleマップ対策(MEO)を構築しました。
ShopifyのECサイト「CHOOSE」を、Yahoo!ショッピングへ移行。移行作業と、バグ・コードの細かな精査を担当しました。