「架空のコスメ商品販売会社」の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のコンパイル
- ブラウザシンク ( ファイル編集・保存後、ブラウザを自動更新→反映 )
- ベンダープレフィックスの付与
- 画像の自動圧縮
- jpgやpng画像のWebP形式への変換
■ 制作にあたってのポイント
- SEOを意識し、セマンティックなマークアップを行う
- ピクセルパーフェクトでの実装
- ローディングアニメーションの実装
- ユーザビリティを意識し、ハンバーガーメニューのメニュー外をクリックしても閉じれるように実装を行いました
- 各リンクhover時のアニメーション実装
- YouTubeの埋め込み
- FAQをアコーディオン形式での実装
■ 制作の経緯
CODE MENTOR ( コードメンター ) 様での課題を基に制作させていただきました。
最後までご覧いただきありがとうございました。
他にも制作物がございますので、そちらも併せてご覧いただけましたら幸いです。