「架空のヘアサロン」のWebサイトのマークアップをさせていただきました。
BASIC認証をかけております。お手数ですが、下記をご入力いただきご覧ください。
- ID：works
- PW：works
ソースコードはgithubにて公開しておりますので、こちらをご覧ください。
下記に、ポートフォリオの詳細をまとめさせていただきました。
担当範囲や制作期間、開発環境、ほかにも制作にあたってのポイントなどを箇条書きで記載させていただきましたので、ぜひご覧ください。
■ 概要
- Adobe XD デザインカンプからのコーディング
- TOPページの実装
■ 担当範囲
- 素材の書き出し
- マークアップ
- レスポンシブ対応・確認 ( 詳細は下記 )
- サーバーへのアップロード
- クロスブラウザ・端末確認 ( 詳細は下記 )
■ 制作期間
- 3日間 ( 素材書き出し〜ブラウザチェック )
■ ページ詳細
下線部をクリックしていただきますと、該当ページへジャンプします。
こちらは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
- Xserver ( 自前の契約サーバー )
- FileZilla ( FTPソフト )
上記環境にて制作を行なっています。
本番環境へアップロードした後の修正等は、FileZiilaにて行っております。
■ 使用技術・ツール
- HTML5
- CSS3
- Sass ( scss記法 )
- jQuery
- Gulp
- Git ( Bitbucket )
- Adobe XD
Sassを使用してCSSを記述しており、設計は「FLOCSS」を導入しています。
タスクランナーはGulpを使用し、以下を自動化しています。( 詳細はgithubにて公開 )
- Sassのコンパイル
- ブラウザシンク ( ファイル編集・保存後、ブラウザを自動更新→反映 )
- ベンダープレフィックスの付与
- 画像の自動圧縮
■ 制作にあたってのポイント
- SEOを意識し、セマンティックなマークアップを行う
- ピクセルパーフェクトでの実装
- 各リンクhover時のアニメーション実装
- 各要素へのフェードインアニメーションを付与
- 画像へパララックス効果を付与
- スタッフの詳細をモーダルを使用して実装
- Googleマップをグレースケールで埋め込み
■ 制作の経緯
CODE MENTOR ( コードメンター ) 様での課題を基に制作させていただきました。
最後までご覧いただきありがとうございました。
他にも制作物がございますので、そちらも併せてご覧いただけましたら幸いです。