URL：https://portfolio.web-manato.com/demo/musya

GitHub：https://github.com/web-manato/demo_corporateSite/tree/main/demo_corporateSite

担当

デザイン：模写修行様 https://moshashugyo.com/
コーディング：まなと

制作詳細

制作期間：12時間

ページ数：6ページ

概要

模写修行様のデザインを基に、コーディングスキル向上のため制作。

WordPressを使用し、運用が可能な動的サイトを構成しました。

WebPへの対応等画像の最適化でよりサイトの軽量化を図り、HTMLのセマンティック面も考慮し制作いたしました。

GSAPを活用したスムーズなアニメーションで、ユーザーエンゲージメントを向上。

制作のポイント

レスポンシブ対応

モバイルファーストで制作いたしました

画像の最適化

ピクセル幅によっての画像の出し分けと、ブラウザが対応していればWebPを表示するという形を取っています。

HTML上で行っているため、環境による違いなどは限りなく少なくなっています。

WordPressテーマ開発

オリジナルテーマとして一から構築し、管理画面からの投稿・編集が可能な動的サイトを実現しました。

セキュリティ・サイト軽量化

reCAPCHA v3.0を導入。
その他下記プラグインを使用しています。

セキュリティ：SiteGuard（不正ログイン・スパム対策）

サイト軽量化：Converter for media、WP Super Cache（表示速度の向上、SEO効果）

シングルページ下のおすすめ記事

WordPressのループを使用し、表示する記事を絞り込むことで、現在開いている投稿と同じカテゴリの記事が新しい順に表示されるようにしています。

Gitによるバージョン管理

これからも運用をしていく設定で、このポートフォリオサイトで公開するにあたっての修正をGitで管理しています。

OGP設定

SNSでのシェア時に魅力的に表示されるよう、OGP設定を実装済みです。

技術・ツール

言語：HTML、SCSS、JavaScript、PHP
CMS：WordPress
外部ライブラリ：GSAP https://gsap.com/

制作を終えて

WordPressのテーマ開発という形で、実際に運用を行えるようなサイトを構築しました。投稿の各ブロックの装飾についても、子孫セレクタを活用した柔軟なCSS設計により、クライアントが記事を追加する際も自動的に統一されたデザインが適用される運用性を重視した設計にしています。

実際の運用を想定した設計により、クライアントの更新作業負担を軽減し、長期的な保守性を確保しました。

その他のセクションについてもアニメーションを使用して魅力的なサイトに見せています。