LP・HP

04（架空）訪問美容室HPオリジナル

使用ソフト AiPsfigmaDw
制作時間 7 日

XDでワイヤーフレーム、デザインカンプを作成後ドリームウィーバーでコーディング、レスポンシブ化、jQueryの実装を行なった。
また画像の一部は画像生成AIを使用し、文章などはchatGPTを用いて作成した。

制作したサイト

コンセプト

（架空設定）訪問美容室「つむぎ」の予約促進サイト、ターゲット：子供がいて外出できない主婦や足腰が弱く美容室に行けない高齢者
-----------
予約促進が目的のため、予約ボタンは固定して常に画面に入るように設定。訪問美容室はお客様の家というプライベートな場所に入るため、信頼感が必要であると感じたため、爽やかなデザインを目指し、シンプルでかつ優しい色合いで構成した。シンプルなため、飽きが来ないようにheaderやスライダー、アコーディオンメニューなどの動きをつけた。

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

・「slick.js」を用いて「お客様の声」の画像を無限スライダーに設定。
・headerの位置によって、中の文字色を変える
・「よくあるご質問」で使用したアコーディオンメニュー

感想

今回はロゴから自作して制作して、一貫したデザインのまとまりを意識して制作した。メインビジュアルの写真がなかなか決まらなくて、画像生成AIなどで何度も指示を変えて作成したが、やはり人の顔となると、嘘っぽくなったり、綺麗すぎたりと採用できなかった。結局フリーの画像を探して使用した。
Xdはfigmaと違い、フォントの取り扱いが少し面倒だったが、イラレのデータを直接入れ込めたりと、便利な面も多かった。
「slick.js」の無限スライダーでは途中で速度が落ちたりと色々と思い通りに行かなかったが、色々試してみて、一つずつ解決していった。