Photo Studio 結-yui-｜架空のphotoStudioサイト
デザインカンプからのコーディング（上級課題）を元に、題材・ロゴ・配色・画像・テキストを変え、半オリジナル化した架空のサイトになります。
サイト情報
※架空サイトのためベーシック認証をかけております。
お手数ですが下記ＵＲＬからユーザー名・パスワードをご入力ください。
ＵＲＬ：https://wp824966.wpx.jp/wp/photo_studio_yui
ユーザー名：shi_ta
パスワード：shi_ta-01
制作概要
制作内容 ：デザインカンプ（上級課題）からの
コーディング及びwordpress化をしたのち、
そのデザインを元に題材等を考えて変え半オリジナル化。
制作時間 ：コーディング ６５時間
半オリジナル化 ２５時間
ページ数 ：１１ページ
サイト構成：トップページ/コース・料金/ブログ一覧/カテゴリー別一覧/ブログ詳細
お知らせ一覧/お知らせ詳細/お問い合わせ（入力）
お問い合わせ（入力確認）/お問い合わせ（送信完了）/４０４ページ
使用スキル：HTML・CSS・jQuery・Sass・WordPress
使用ツール：VScode・Figma・Local by Flywheel
実装内容・工夫した箇所
・レスポンシブ対応
・ファーストビュー（３枚）が徐々に切り替わるようにSwiperを用いて実装
・ローディング画面はCSSアニメーションで実装し、ローディングが全て終わらなくても
３秒後に画面が切り替わるようにjQueryを用いて実装
・jQueryを用いてハンバーガーメニュー、ドロワーメニュー、スムーススクロール、
ページトップボタンを実装
・ヘッダーを上部固定
・ボタンはホバーで色が反転するパターンとキラリと光るようなパターンを
CSSで実装
・トップページの撮影事例、コース・料金ページの料金表価格は
Smart Custom Fields（プラグイン） を用いてカスタムフィールドを実装し
編集できるようにしました
・コース・料金ページの料金表はスクロールできるようにして
スクロールヒントをjQueryで実装
・ブログは通常投稿で実装し、お知らせはCustom Post Type UI（プラグイン）を 用いて
実装
・ブログはダミー記事をインポートし
ページネーション及び詳細ページの表示崩れ等を確認
・ブログ詳細ページのおすすめ記事はpickupタグが付いた記事だけを表示するようにし
関連記事は表示記事と同じカテゴリーの記事を表示するようにしました
・フォームはContact Form 7 （プラグイン）を 用いて実装し
Contact Form 7 Multi-Step Forms （プラグイン）を 用いて
入力確認ページと送信完了ページを紐付けしました
・SEO SIMPLE PACK （プラグイン）を 用いて内部SEO対策を行い
Googleアナリティクス 、Googleサーチコンソール の設定をしました
・SiteGuard WP Plugin （プラグイン）を 用いてセキュリティ対策しました
・reCAPTCHA を用いてフォームのスパムメール対策しました
気を付けた点
デザインカンプからのコーディング
・品質チェックをしっかり行い、修正の手間を省く
→その結果修正無しで提出することができた
・画面幅が変わっても表示崩れをしないよう意識
・BEMを使用し、修正・管理しやすいコーディングを意識
半オリジナル化
・元のデザインに合うような題材
・題材に合うような画像や色の選択
半オリジナル化について
元々のサイトがスクール系のサイトで
コース別の料金表があったのでそこをまず活かす業種を考えました。
私自身もフォトウエディングを利用したことがあり
どのようなサイトの雰囲気なら利用したくなるかをイメージして制作しました。
ウエディングといえば純白をイメージする方が多いと思いますので白を基調とし、
親しみやすいオレンジ系の色を主に使用しました。
全体的にシンプルにし、見やすく親しみやすいサイトにしたかったため
色を何種類も使用せずオレンジ系の濃淡で色の区別をつけました。
ＰＣ表示（トップページ）
ＳＰ表示（トップページ）
