架空LP・HP
02秋の限定商品「栗食パン」LPオリジナル
| 使用ソフト |   |
|---|---|
| 制作時間 | 3 日 |
イラストレーターでワイヤーフレーム、デザインカンプを作成後ドリームウィーバーでコーディング、レスポンシブ化、レシピの部分にはスライダーを採用。
メイン画像は画像生成AIを使用、またキャッチコピーや、説明文、レシピなどはchatGPTを用いた。
コンセプト
（架空想定）食パン専門店「PULLAプッラ」が展開する秋の限定商品「栗食パン」の販促LP／ターゲット：子持ちの主婦、20-40代女性
-----------
パンのLPということで、なるべく可愛らしくカントリー風のデザインを目指して作成。
また秋の限定商品ということだったので、秋のあしらいを各所に散らばらせ、全体を茶色でまとめた。
子持ち、女性を意識して、自然なおいしさをアピールした。
学んだこと、使用したライブラリなど
・「slick.js」を用いたレシピ部分のスライダー
・PC時とSP時で表示する画像の切り替え方法
・display: flex; justify-content: center;flex-wrap: wrap;gap: 30px;と各子要素にwidthを設定することで、レスポンシブ時に自動で改行されて、flex-direction:column;しなくてもよくなった
感想
レシピ部分を一つだけ見せ、他は少しだけ見せてスライダーで登場させるようにしたかったのだが、これがなかなかうまくいかず大変だった。
横スクロールを出さないようにしたり、スライダーの矢印ボタンが出てこなかったり、レイアウトが崩れたり・・slickのcssと睨めっこしながらなんとか形にしたが、slickのオプションを用いればもっとスマートにできたのではないかと思うため、今後検証・勉強が必要と感じた。
またchatGPTや画像生成AIのクオリティの高さと便利さに驚いてしまった。今後も何かと利用できそうなので、この分野も勉強する必要性を感じた。