デモサイトのご案内

デモサイトをご覧いただきありがとうございます。
本サイトは、新潟を拠点とするWEBデザイン会社のホームページを想定したデモサイトです。

デモサイト作成の流れ

過程1.デザインデモ

Figmaを使用してデザインを作成しています。Adobe XDでも同様の制作が可能です。
Figmaデザインファイルはこちら >> 01_企業サイト例

過程2.HTML/CSS実装例（コーディングデモ）

過程1のデザインをもとに、レスポンシブ対応で HTML/CSSの実装を行っています。
実務ではFigmaのほか、XD/Photoshopのデザインカンプからのコーディング経験もございます。

HTMLコーディング版デモはこちら >> HTMLコーディング版デモ

過程3.WordPressカスタムテーマ

WordPressのオリジナルテーマを一から制作し、以下の機能を実装しています。

固定ページ
投稿ページ
カスタム投稿タイプ
カスタムタクソノミー
アーカイブページ（絞り込み対応）
カスタムフィールド
検索機能
コンタクトフォーム

WordPress実装版デモはこちら >> WordPress実装版デモ

過程4.STUDIO無料テンプレート

STUDIOを実務で利用したことはありませんが、
今回、STUDIO無料テンプレートSMART COMPANY 2 を使用して、CMS機能をもつサイトを作成いたしました。
過程3で作成したWordPressサイトから投稿記事、投稿記事カテゴリー、カスタム投稿記事をエクスポートし、STUDIOにインポートしています。

STUDIO実装版デモはこちら >> STUDIO 実装版デモ

備考

開発支援ツールまとめ

制作時に使用している主な開発ツールは以下の通りです。

Vite：高速なフロントエンド開発環境
GSAP：ファーストビューのアニメーション、スクロールアニメーション
Swiper：スライダー実装
SCSS：効率的なスタイル設計
npm：パッケージ管理によるモジュール化構成
Git：ソースコード管理
GitHub Copilot：環境構築や、バグ改修などのアドバイス
Local：ローカル開発環境構築ツール
Photoshop：FV画像作成
Illustrator：ロゴ画像作成
ChatGPT：環境構築や、バグ改修などのアドバイス

開発ディレクトリ構成

src → Vite によるビルドやバンドル対象となるファイル群。静的HTML・SCSS・JSを作成。
dist → Vite によってビルド・バンドルされたファイル群。HTML コーディング版デモ
public → 加工せずにそのままコピーする静的ファイルを配置するディレクトリ。
public/vendor → 外部ライブラリなどの静的ファイル群。npmモジュール化できない場合はこのディレクトリに配置する。
demo → WordPressテーマ用のテンプレートファイル群。dist下に排出されたhtmlを元に作成していく。

画像出典

制作時に使用した画像の出典は以下の通りです。