products
制作実績
当ポートフォリオサイト
URL
担当範囲
コーディング(デザイン・静的コーディング・WordPress化・WordPressオリジナルテーマで制作)
制作時間
約200時間(約1ヶ月半~2ヶ月)
– デザイン(約60時間)
– 静的コーディング(約80時間)
– WordPress化(約60時間)
構成(トップページ+下層3ページ)
トップページ
– ヘッダーのアニメーション(ナビゲーションをクリック時に色を変更)
– GSAPアニメーション(メインビジュアル)
– スクロール誘導のアニメーション
– モーダルウィンドウ(AboutセクションのNDWebへの想い)
– アニメーション(Aboutセクションの画像部分)
– 3Dスライダー(Productsセクションのメイン部分・JavaScriptプラグイン「Swiper」)
– モーダルウィンドウ(Workセクションの料金目安)
– お問い合わせフォーム(WordPressプラグイン「Contact Form 7」で実装)
– 送信ボタンのグラデーションのアニメーション(Contactセクションのボタン部分)
– フッターのアニメーション(ナビゲーションをクリック時に上にスライド)
Products詳細ページ
– カテゴリーとタグの使い分け
– 左にスライドするボタンのアニメーション(ページの下部)
– 右にスライドするボタンのアニメーション(ページの下部)
– ボタンのグラデーションのアニメーション(ページの下部)
– 実績詳細を時系列順に並べ、ボタンで遷移できるように実装
お問い合わせ完了ページ(お問い合わせ後の遷移先)
– お問い合わせフォーム(コーディングで制御し、お問い合わせ送信後に完了ページに遷移するように実装)
404ページ(制作することで、Webサイトを見る人がサイトから離脱することを軽減できるというメリットがある)
その他
– レスポンシブ対応
– ハンバーガーメニュー(ハンバーガーメニューを押した後、右下からドロワーメニューが出現)
– SEO対策(WordPressプラグイン「SEO SIMPLE PACK」を導入しタイトル・ディスクリプションを設定、ファビコン・OGP画像・Googleアナリティクス・Googleサーチコンソールの設定、XMLサイトマップを生成)
– 本番環境への移行時、WordPressプラグイン「All-in-One WP Migration」を使用
– セキュリティ対策(WordPressプラグイン「SiteGuard WP Plugin」「Wordfence」を使用、reCAPTCHAの設定)