【コーディング】架空ブランドのWEBサイト制作

【制作の流れ】

①要件定義

②ワイヤーフレーム作成（Photoshop使用）

③デザインカンプ作成（Photoshop使用）

④コーディング（Atom使用）

【①要件定義】

●事業内容とサイトの目的：ハンドメイドアクセサリーの販売。アクセサリーを通じて自分に優しく、自分を大事にできる人を増やすこと。

●ターゲット：20代女性または20代女性にプレゼントを贈りたい方 。アクセサリーが好きな方。

●サイト名：”私の”アクセサリー「mia accessory」

●セクション内容：ブランドコンセプト、ジャンル別商品一覧、商品一覧、オーダーメイド

●参考サイト：

　株式会社野村建設　https://www.clasico-nomura.jp

　YOAN　https://yoan.jp

　STARJEWELY　https://www.star-jewelry.com

【②ワイヤーフレーム作成】

要件定義をもとに、PC用とSP用のワイヤーフレームを作成しました。

（Photoshop使用）

【③デザインカンプ作成】

ワイヤーフレームとデザインコンセプトをもとに、デザインカンプを作成しました。

●デザインコンセプト

●デザインカンプ（Photoshop使用）

【④コーディング】

Atomを使用して0からコーディングを行いました。（HTML、CSS、JavaScript）

また、アニメーションの実装も行いました。

●つけたアニメーション

・スクロール時にふわっとフェード表示させる

・ホバー時のリンクの色、下線アニメーション

・商品一覧のスライダー

・ページ内リンクのアニメーション

など

●コーディングの制作時間

・PC用：2日

・SP用(レスポンシブ対応) ：1日