「架空の行政書士事務所」のWebサイトをWordPressを使用して構築しました。
BASIC認証をかけております。お手数ですが、下記をご入力いただきご覧ください。
- ID：works
- PW：works
ソースコードはgithubにて公開しておりますので、こちらをご覧ください。
下記に、ポートフォリオの詳細をまとめさせていただきました。
担当範囲や制作期間、開発環境、ほかにも制作にあたってのポイントなどを箇条書きで記載させていただきましたので、ぜひご覧ください。
■ 概要
- Adobe XD デザインカンプからのコーディング
- TOP ＋ 下層12ページの計13ページの実装
■ 担当範囲
- 素材の書き出し
- マークアップ
- レスポンシブ対応・確認 ( 詳細は下記 )
- CMS構築(WordPress)
- サーバーへのアップロード
- クロスブラウザ・端末確認 ( 詳細は下記 )
■ 制作期間
- 10人日 ( 素材書き出し〜ブラウザチェック )
■ ページ詳細
下線部をクリックしていただきますと、該当ページへジャンプします。
こちらはGoogleドライブのリンクになります。 ( 一覧表示でご覧いただけます )
■ レスポンシブ対応・確認
ブレークポイントを下記の4種類を基本設定とし、スマホからデスクトップまでマークアップ・表示確認を行なっております。デスクトップの大画面1920pxについても確認させていただきました。
■ ブレークポイント
- 640px
- 768px
- 1024px
- 1280px
確認は下記の実機を使用して行い、それ以外のディスプレイについてはGoogle Chromeなどの「検証ツール」を用いて確認を行っております。
■ 実機
- iPhone X
- iPad Air 第4世代
- MacBook Pro13インチ
- 23インチディスプレイ
■ ブラウザチェック
クロスブラウザおよび実機での確認は以下の環境で行いました。
- Mac ＋ Chrome
- Mac ＋ Safari
- Mac ＋ Firefox
- Mac ＋ Microsoft Edge
- Windows ＋ Chrome
- Windows ＋ Firefox
- Windows ＋ Microsoft Edge
- iPhone ＋ Safari
- iPad ＋ Safari
■ 制作・開発環境
- MacBook Pro 13インチ
- ASUS 23インチ ディスプレイ
- iPad Air 第4世代
- iPhone X
- VSCode
- Local by Flywheel ( WordPressローカル開発環境 )
- Xserver ( 自前の契約サーバー )
- FileZilla ( FTPソフト )
上記環境にて制作を行なっています。
WordPress構築を行う際は「Local」を使用しローカルでの確認を行なった上で、「All-in-one WP Migration」にてデータを本番環境へ移行しております。
本番環境へアップロードした後の修正等は、FileZiilaにて行っております。
■ 使用技術・ツール
- HTML5
- CSS3
- Sass ( scss記法 )
- jQuery
- WordPress
- Gulp
- Git ( Bitbucket )
- Adobe XD
Sassを使用してCSSを記述しており、設計は「FLOCSS」を導入しています。
タスクランナーはGulpを使用し、以下を自動化しています。( 詳細はgithubにて公開 )
- Sassのコンパイル
- ブラウザシンク ( ファイル編集・保存後、ブラウザを自動更新→反映 )
- ベンダープレフィックスの付与
- 画像の自動圧縮
- jpgやpng画像のWebP形式への変換
■ 制作にあたってのポイント
- SEOを意識し、セマンティックなマークアップを行う
- ローディングアニメーションを実装
- マウスカーソルのデザインを変更
- ページ遷移時のローディングアニメーションの実装
- ユーザビリティを意識し、ハンバーガーメニューのメニュー外をクリックしても閉じれるように実装
- メインヴィジュアルにて、再生マークをクリックするとビデオ再生画面へ遷移するように実装
- メガメニューの実装
- ニュースティッカーの実装
- 各リンクhover時のアニメーション実装
- 各要素にフェードインアニメーションを実装
- サービスページの料金表をスマホでは横スクロールできるように実装
- パンくずリストは「Breadcrumb NavXT」を使用
- コンタクトフォームは「Contact Form 7」を使用 ( 動作確認済み )
■ 制作の経緯
CODE MENTOR ( コードメンター ) 様での課題を基に制作させていただきました。
最後までご覧いただきありがとうございました。
他にも制作物がございますので、そちらも併せてご覧いただけましたら幸いです。