コーディング実績2：Web系サービスの代行業者【XDデザインデータからコーディング】

Yuki Arihara
OVERVIEW

制作日数「5日」。架空コーポレートサイト（トップページのみ）です。エンジニアの方が販売されているデザインをもとにコーディングしました。Swiperの設置やGoogleフォームの埋め込みを行なっています。その他に実装した機能やコーディングで工夫したポイントは下記をご覧ください。

目次

1. サイトURLと認証パスワード

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

3. コーディングで工夫したポイント（HTML / CSS）

1. サイトURLと認証パスワード

下記URLからご確認いただけます。Basic認証をかけていますので、ユーザーIDとパスワードをご入力くださいませ。

https://arihara-yuki.com/portfolio-2-coding.arihara-yuki.com
ユーザーID：arihara-test-review
パスワード：arihara-test-review-pass

2. 使用しているアニメーション機能の紹介（Javascript / jQuery）

  • ハンバーガーメニューのクリック時、要素が右からスライドイン（アイコンも変化）※内部リンクのクリックで自動的にドロワーが閉じる仕様です。
  • 内部リンククリック時は該当のセクションまでスクロールする（スムーススクロール）
  • スクロールで要素がふわりとスライドアップ
  • Q & Aセクションにアコーディオンを設置。１つ目のAnswerは最初から開いた状態とした。

  • 写真部分（例：ブログのサムネイル）はブラウザ画面が伸縮した際もアスペクト比を維持。さらにどんなサイズの写真を挿入してもトリミングされて同じ幅・高さで表示される。

  • 制作実績にSwiper機能を実装。５秒おきに自動スクロール＆ループ処理する。　※スライドの数やスクロールスピード、マウスポインターで触った時に自動スクロールを停止するか否かなど、細かくカスタマイズ可能です。

3. コーディングで工夫したポイント（HTML / CSS）

■トップページ

  • Perfect Pixelを使い、カンプとの差異を限りなくゼロに
  • お問い合わせフォームはGoogleフォームを埋め込んでおり、送信完了後は自動返信メールが届く。なお、入力欄とプライバシーポリシーへの同意にチェックがない場合には送信ができない設定（java scriptと連動させています）。

■サイト全体の設定

  • サイトタイトルやサイトディスクリプションを設定し、SEO対策