デザインカンプからのコーディング・WordPress構築｜架空のコーポレートサイト

片岡えりな🍎
Webコーダー
OVERVIEW

【Figma】デザインカンプからのコーディング〜WordPress構築まで。 CSS設計を意識して他者でも見やすく、使い回しができ、更新しやすいコードを心がけました。テキストの増減やアスペクト比の違った画像への差し替えにも対応できるコードになっています。

※ベーシック認証をかけております。
　お手数ですが、以下の情報からアクセスくださいませ。

URL：https://eriii--web.conohawing.com/aplus-for-wordpress/

BASIC認証
ユーザー名：aplus
パスワード：aplus@0921

◼︎制作概要

作業内容：コーディング

ページ数：4ページ（トップページ+下層5ページ）

サイト構成：トップページ、私たちについて、サービス、ニュース（ニュース詳細ページはモーダル表示）、FAQ、採用情報、お問い合わせ


◼︎実装内容

  • CSS設計を意識したBEM設計手法でのコーディング
  • テキストを増やしたり、アスペクト比の違う画像に差し替えても表示崩れを起こさない
  • スマホファーストでのコーディング、レスポンシブ対応
  • サイズ指定をremで統一


◼︎アニメーション

  • swiperを使用して画像切替（メインビュー、ギャラリー）
  • gsapを使用したアニメーション（ローディング、パララックス画像）
  • ハンバーガー、ドロワーメニュー
  • モーダル（ニュース投稿詳細ページ）
  • スムーススクロール、ページトップボタン


◼︎WordPress構築

  • ニュースページは通常投稿タイプ
    投稿内容に統一性があったのでカスタムフィールド追加
  • 採用情報ページはカスタム投稿
    募集職種も編集しやすいようにカスタムフィールド追加
  • お問い合わせフォームはContact Form 7 （プラグイン）で実装


WEBSITE