フリーランスWebデザイナー - TAKUYA NAKANO PORTFOLIO
「架空のフリーランスWebデザイナー」のポートフォリオサイトをWordPressを使用して構築しました。
BASIC認証をかけております。お手数ですが、下記をご入力いただきご覧ください。
- ID：works
- PW：works
ソースコードはgithubにて公開しておりますので、こちらをご覧ください。
下記に、ポートフォリオの詳細をまとめさせていただきました。担当範囲や制作期間、開発環境、ほかにも制作にあたってのポイントなどを記載しましたので、ご覧いただければ幸いです。
■ 概要
- Adobe XD デザインカンプからのコーディング
- TOP ＋ 下層9ページの計10ページの実装
■ 担当範囲
- 素材の書き出し
- マークアップ
- レスポンシブ対応・確認 ( 詳細は下記 )
- 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を意識し、セマンティックなマークアップを行う
- ユーザーからも変更しやすく、WORKS 詳細ページはカスタムフィールドで実装(Advanced Custom Fields)
- 「Instagram Graph API」を利用してInstagramの画像を表示
- ユーザビリティを意識し、ハンバーガーメニューのメニュー外をクリックしても閉じれるように実装
- 慣性スクロールをレスポンシブで切り替えできるようにJavaScriptで制御
- スクロール位置によって WORKS セクションの背景色変更
- パンくずリストは「Breadcrumb NavXT」を使用
- コンタクトフォームは「MW WP Form」を使用
- コンタクトフォームのバリデーションをリアルタイムで表示
- WORKS をカスタム投稿で実装(functions.php へ記述)
- カスタム分類(タクソノミー)は「Custom Post Type UI」で実装
- ページャーは「WP-PageNavi」を使用
■ 制作の経緯
CODE MENTOR ( コードメンター ) 様での課題を基に制作させていただきました。
最後までご覧いただきありがとうございました。
他にも制作物がございますので、そちらも併せてご覧いただけましたら幸いです。