【概要】
架空のマッサージチェアのランディングページを、
HTML・CSS・JSの構成で、readdyを用いて作成しました。
ページ構成や文言はAIに相談して、細かい指示で生成しています。
【ポイント】
・初回生成時のかなり細かい指示
・納品を想定したファイル構成（生成後に画像URL等を置き換えて、HTML・CSS・JSの分割）
【感想】
今回はReactではなく、HTMLベースで生成を行いました。
HTML版は全体的にシンプルで落ち着いたデザインになりやすく、初回のプロンプトで構成や文章を細かく指定することで、修正が少ない状態で出力できました。
また、レイアウト崩れや修正時の不具合が少なく、生成速度も速いため、ローカル環境での運用や納品に向いていると感じました。ソースコードも読みやすく、修正しやすい点がメリットでした。
一方で、クラウド上で高度な演出や動的な表現を行う場合はReactの方が適していると感じ、用途に応じた使い分けが重要だと学びました。
なお、指示プロンプト作成時にはDeepLearningを活用して情報収集を行い、Readdy向けに調整しました。自分の理想よりも一般向けの内容になった部分もありましたが、ユーザー視点を意識した設計の重要性を学ぶ機会になりました。
使用ツール：readdy、ChatGPT