HANIWAMAN Corp. WEBSITE

架空の会社「HANIWAMAN Corp.」のLPサイトのコーディングを実施。

Google Mapsの埋め込みや、カードメニューのスライダー（スワイプ動作と、スライダー連動のボタンで任意のカードを選択する動作に対応）、Q&A部分をアコーディオンにするなど、いろいろな機能を設けている。

作業実施箇所

• （Adobe XDで作られたデザインカンプをもとにした）コーディング
• サーバーへのサイトのアップロード

使用言語や使用ツール

• HTML5＆CSS3
• Sass (scss)
• jQuery
• JavaScript
• Visual Studio Code

ページ数

1ページ（LP）

気をつけた点

• ピクセルパーフェクトを常に意識し、サイト完成図の画像と適宜照らし合わせ、微調整を行いながら、コーディングを行なった。
• できる限り保守性の高いコードを書くことを意識し、クラスの命名やタグ構造をどのようにするかについて気をつけるようにした。

利用素材、参考にしたものなど

• モックアップ素材 …“Psd Minimalist Web Showcase | Psd Web Elements | Pixeden”
• 当サイトのサイトデザインは、2020年3月末まで無料公開されていた、東京フリーランスさん（https://tokyofreelance.jp/）によるWebサイト制作学習プログラム「30DAYSトライアル」より。