MIYU’s Portfolio

Web制作を依頼したい企業・個人事業主

制作スキルや実装力を分かりやすく伝える

デザイン再現、WordPress実装、動作制御

• Swiper
• カスタム投稿
• タブ切替
• モーダル表示

WordPressでカスタム投稿タイプとACFを用い実績を管理。Swiperによるスライダー、ジャンル別タブ切替、モーダルで詳細表示を実装し、直感的に閲覧できる構成にしました。

PHPでループ処理を共通化し、ジャンル別表示を関数化。ACFの繰り返しフィールドを活用し、更新しやすく保守性の高い設計を学びました。

タブ切替とページネーション、モーダル表示の連携に苦戦。JavaScriptの状態管理を整理し、クラス制御を統一することで安定した挙動を実現しました。

デザインの世界観を保ちつつ、実用性と管理性を両立。WordPressを活用した動的サイト構築の理解が深まり、実務を意識した実装力が身につきました。

観光に関心ある20〜40代Instagram利用者

尾道観光地の魅力発信とSNSでの拡散促進

デザイン再現・HTML/CSSコーディング・レスポンシブ対応

• レスポンシブ（PC/SP両対応）
• ドロワーメニュー（JSアニメーション付き）
• ２種類のスライダー（画像切替）

応募手順をカード形式で3段階に分けて表示し、背景装飾やイラストを組み合わせて、キャンペーンの世界観を視覚的に表現しました。

複数の背景画像や装飾を重ねてもレスポンシブ表示が崩れないよう、Flexboxやタグを活用して最適化しました。

カードの高さや余白のバランス調整に苦戦しましたが、Flexboxのプロパティを駆使し統一感ある配置を実現できました。

視覚的に楽しいデザインと操作性を両立させ、応募導線を直感的に理解できるサイトに仕上げることができました。

グローバル人材育成に関心のある社会人

研修・事例・ニュース情報を分かりやすく提供

デザインカンプを基にしたフロント実装全般

• MVスライダー
• 導入事例
• ニュース
• 問い合わせフォーム

MVスライダー、サービス・事例・ニュース一覧を動的表示し、Contact Form 7で問い合わせフォームを設置しました。

アイキャッチ画像やカスタムフィールドを活用して投稿ごとに表示し、画像の遅延読み込みや文字数制御でユーザビリティを向上させました。

カスタム投稿タイプとフィールド管理が複雑化していましたが、ループ処理やID生成を工夫し、動的表示の整合性を確保して解決しました。

デザイン忠実に再現しながら、動的要素を安全に実装できました。ユーザビリティと管理性を両立できた完成度の高いサイトとなりました。

環境意識のある20〜30代女性のアクセサリー購入者

海洋マイクロプラスチック利用を訴求しブランド認知拡大と購買促進

デザイン再現・HTML/CSSコーディング・レスポンシブ対応・商品一覧実装

• レスポンシブ画像
• スクロールアニメーション
• 商品カード表示
• リンク導線

トップビューから商品一覧まで各セクションを忠実に再現して、スクロールアニメーションやカードレイアウトでブランド世界観を演出しました。

レスポンシブ画像やアニメーションを組み合わせながら、商品一覧のカード表示を崩さず軽量化と可読性を両立できました。

異なるサイズの画像やテキスト量によるカード高さの差異に苦戦しましたが、Flexboxと余白調整で統一感を確保できました。

ブランドの世界観を忠実に再現し、視覚的に楽しく操作しやすいサイトに仕上げることができました。

朝活や通話アプリに関心ある20〜30代のスマホユーザー

アプリの認知拡大とダウンロード促進

デザイン再現・HTML/CSSコーディング・レスポンシブ対応・ギャラリー・ニュース表示

• レスポンシブ画像
• スクロールアニメーション
• 導入実績ギャラリー
• ニュースカード
• モーダル表示

トップビューから導入実績・news・aboutまで各セクションを忠実に再現し、画像とテキストを組み合わせてアプリの世界観を表現しました。

レスポンシブ画像やflex/gridを活用し、実績ギャラリーとニュースカードを崩さず可読性と操作性を確保しました。

多様な画像サイズやテキスト量の調整に苦戦しましたが、Flexboxと余白調整で統一感ある表示を実現できました。

アプリの魅力を視覚的に伝えながら、操作しやすい導線を整えたサイトに仕上げることができました。