Portfolio.

プロジェクト概要

企業情報やサービス内容を分かりやすく伝え、信頼感のある印象を与えることを目的としたコーポレートサイトです。
デザインカンプをもとに、HTML・SCSS・JavaScriptを用いたコーディングを行い、レスポンシブ対応やWordPress化を意識して制作しました。

使用技術

• HTML5
• CSS
• JavaScript(jQuery)
• FLOCSS
• Responsive Design
• WordPress

工夫した点

• FLOCSSを採用し、Component・Project・Layoutを分離することで保守性・再利用性を意識しました。
• デザインカンプを忠実に再現できるよう、余白や文字サイズ、レイアウトのバランスを細かく調整しました。
• WordPress化では、カスタム投稿タイプやAdvanced Custom Fields（ACF）を活用し、管理画面から必要な情報を更新できるよう実装しました。
• テンプレートを共通化し、新しい制作実績を追加する際も管理画面から登録するだけで一覧ページ・詳細ページへ反映される構成にしました。

苦労した点

• 静的コーディングからWordPress化する際、テンプレートの共通化やACF・カスタム投稿との連携方法を理解しながら実装することに苦労しました。
• トップページの制作実績一覧と詳細ページで同じデータを利用できるよう設計し、表示内容やレイアウトを維持しながら動的化することに時間をかけました。
• PC・タブレット・スマートフォンの各画面サイズでデザインが崩れないよう、レスポンシブ対応を細かく調整しました。

スクリーンショット

PCデザイン

スマートフォンデザイン