架空LP・HP

01母の日花屋LP(コーディングのみ)オリジナル

使用ソフト Dw
制作時間 1 日(コーディングのみ)

|| 職業訓練校の課題 ||

3人一組になり、それぞれが以下の役割を担当し、一つのWEBサイトを制作
・WEBディレクター
・デザイナー
・コーダー(私はコーダーを担当)
コーダー担当となったため、デザイナーが制作したデザインカンプを元にコーディングを行なった。

制作したサイト

コンセプト

<ディレクターからの指示>
花屋の母の日LP
ターゲットは20後半-40前半の主に女性
テーマカラー:モノクロベース
デザインテイスト:モダン、シンプル、清潔感、アンティーク

学んだこと、使用したライブラリなど

・イラストレーター形式のデザインカンプからのコーディング
・擬似要素を用いた見出し文の装飾
・aos.jsを用いてメインビジュアルの画像のスクロールアニメーション実装
・cssスプライトを用いたhover時のボタン挙動

感想

ディレクション、デザイナーが作り上げたものをコーディングするといった経験が初めてだったため、最初は情報の共有方法など決めなければいけないことがたくさんあったが、とても楽しかった。
メインビジュアルの見え方がウィンドウの幅によって変わってしまうため、何パターンか作成し、ディレクター・デザイナーに見てもらえる形にして相談しあった。
自分が良いと思っているものと、他の役割を持った人の視点から見えるものでは違ってくるので、パターンをいくつか作って見てもらうのは理想のデザインに近づけるために必要だと感じた。