-
Webサイトのコーディング・WordPress構築
■ プロジェクトの目的
店舗・サービスの集客と問い合わせ獲得を想定したWebサイトを、自主制作で4件つくりました。
デザインカンプを再現するだけで終わらせず、公開して運用できる状態まで仕上げることを目的としています。
■ 体制・人数
個人（1名）。コーディングからWordPress構築まで一人で担当。
■ 自分のポジション・役割
Webコーダー。デザインカンプの読み取り、HTML / CSS のマークアップ、JavaScript / jQuery の実装、WordPressのテーマ構築、公開までの一連の作業。
■ 目的を達成する上での課題
・見た目を再現するだけでは、後から修正を加えたときに崩れてしまう
・WordPressに載せたあと、運用する人が自分で更新できないと更新が止まる
・SP表示の崩れは、直した箇所とは別のところで出ることが多い
■ 課題に対して取り組んだこと
・BEMによる設計を徹底。クラス名の命名規則とコンポーネント単位の切り分けを前提に書き、後から見て構造が読める、修正箇所がすぐ特定できる状態にした
・テンプレート階層に沿ってテーマファイルを構成。CSSで無理に押さえ込まず、管理画面の機能で実現できる部分はそちらに寄せ、納品後に編集しても崩れない形にした
・カスタム投稿タイプを使い、お知らせや実績を動的に管理できる構成にした
・PCとスマホの両方で表示を確認する手順を固定。崩れは直した箇所の周辺もあわせて確認するようにした
■ ビジネス上の成果
制作したものはポートフォリオサイトにまとめています。
https://t-osanai.vercel.app/
・ダイビングショップサイト（WordPress・BEMによるCSS設計）／制作期間20日
・輸入車販売サイト（WordPress・カスタム投稿タイプ）／制作期間20日
・フィットネスジムLP（HTML / CSS）／制作期間5日
・表参道カフェ（HTML / CSS）／制作期間5日HTML, CSS, JavaScript, jQuery, WordPress, Figma, BEM, レスポンシブ対応