「架空のTOEFL学習スクール」のWebサイトをWordPressを使用して構築しました。
BASIC認証をかけております。お手数ですが、下記をご入力いただきご覧ください。
- ID：works
- PW：works
ソースコードはgithubにて公開しておりますので、こちらをご覧ください。
下記に、ポートフォリオの詳細をまとめさせていただきました。
担当範囲や制作期間、開発環境、ほかにも制作にあたってのポイントなどを箇条書きで記載させていただきましたので、ぜひご覧ください。
■ 概要
- Adobe XD デザインカンプからのコーディング
- TOP ＋ 下層8ページの計9ページの実装
■ 担当範囲
- 素材の書き出し
- マークアップ
- レスポンシブ対応・確認 ( 詳細は下記 )
- CMS構築(WordPress)
- サーバーへのアップロード
- クロスブラウザ・端末確認 ( 詳細は下記 )
■ 制作期間
- 7日間 ( 素材書き出し〜ブラウザチェック )
■ ページ詳細
下線部をクリックしていただきますと、該当ページへジャンプします。
こちらは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を意識し、セマンティックなマークアップを行う
- パンくずリストは「Breadcrumb NavXT」を使用
- コンタクトフォームは「MW WP Form」を使用 ( 動作確認済み)
- 「お知らせ」をカスタム投稿で実装(functions.php へ記述)
- カスタム分類(タクソノミー)は「Custom Post Type UI」で実装
- ユーザーからも変更しやすく、TOP の事例部分および料金部分はカスタムフィールドで実装 ( Advanced Custom Fields )
- ページャーはプラグインを使用せず functions.php にて実装
- コンタクトフォームは、全項目入力しないと送信ボタンを押下できないよう設定
- ブログ個別記事の SNS ボタンは「wp_social_bookmarking_light」を使用
■ 制作の経緯
Web制作フリーランサーShogo様制作のデザインカンプを基に実装させて頂きました。
最後までご覧いただきありがとうございました。
他にも制作物がございますので、そちらも併せてご覧いただけましたら幸いです。