手を掛けずにAIを活用してWebサイトを作成する方法が注目されていますが、今回はレイアウト画像を「Readdy」Webサイト構築サービスに読み込ませ、自動生成されたコードをDreamweaverで編集するという手法を試してみました。レイアウト画像の段階からDreamweaverでの編集に至るまで、レイアウトが崩れることなく（※一部レイアウトが変わっている箇所があります）、レスポンシブ対応のWebページが完成しました。
以下はその作業を行った工程になります。
「Readdy」のサイトで、レイアウト画像を読み込みます。
レイアウト画像を読み込みます。
画像が読み込まれたことを確認し、「右向きの矢印」を選択します。
画像の内容についての分析が行われます。
▼下記は画像に対して分析が行われた内容です。
1. ヒーローセクション
-
レストランのロゴとナビゲーション メニューを備えた大きなヘッダー
-
食欲をそそる食べ物の写真をフィーチャーした全幅のヒーローイメージ
-
目立つ見出し あなたの好みに合った最高の食べ物
-
行動喚起ボタン - 白い背景のすっきりとしたモダンなレイアウト
2. メニューカテゴリー
-
水平に配置された4つのアイコンベースのカテゴリセクション
-
さまざまなメニューオプションを表すシンプルなアイコン
-
各アイコンの下に短いカテゴリラベル
-
簡単なナビゲーションのためのミニマリストデザイン
3. セクションについて
-
画像とテキストでレイアウトを分割する
-
左側には食べ物の写真が掲載されています
-
右側には健康的な食事の提供についての説明文が含まれています
-
「詳細を見る」のCTAボタン - きれいなタイポグラフィと十分な余白
4. サービスギャラリー
-
4つのサービスカテゴリを備えたグリッドレイアウト
-
各サービスは画像とともに表示されます
-
各画像の下にサービスタイトルと簡単な説明
-
すべてのサービスカードで一貫したスタイル
5. 配信のハイライト
-
画像とテキストの2列レイアウト
-
市内最速の食品配達の見出し
-
配信機能を強調する箇条書き
-
料理の準備と配達を示す補助画像
6. お客様の声
-
3列の推薦文セクション - プロフィール画像付きのお客様の声
-
星評価
-
クリーンで信頼できるプレゼンテーション
7. ブログと記事
-
最近のブログ投稿を表示するグリッドレイアウト
-
メイン記事の大きな注目画像
-
二次記事用の小さいサムネイル画像
-
記事のタイトルと簡単な説明
-
追加コンテンツについては「もっと見る」ボタンをご覧ください
8. フッター
HTMLコードが自動生成され、画面右下の「ダウンロード」の選択からHTMLコードの書類がダウンロードされます。
Dreamweaverで書類を開き、リンク設定や画像、テキストの差し替えなど編集作業を行うことが出来ます。
下記のページでは、同様の方法で7ページを開き、リンク設定を行いました。
「Bistro Bliss」
・Home
・About
・Menu
・Book
・Blog
・Blog Details
・Contact
▼作成を行ったWebサイト
「Readdy」 - デザインを、一瞬でカタチに。
Webサイト制作に、もう時間と手間はかけさせません。「Readdy」は、最先端のAI技術を搭載した、全く新しいWebサイト構築サービスです。
お手持ちの画像、デザインツールで作成したレイアウト画像をアップロードするだけ。驚くべき速さで、AIが画像の構造を解析し、HTML、CSSといったWebサイトのコードを自動生成します。
こんな課題を「Readdy」が解決します。
- コーディングスキルがないけど、Webサイトが欲しい。
- デザインはあるのに、コーディングに時間がかかってしまう。
- 急ぎでWebサイトを公開したい。
- プロのWebサイトを、もっと手軽に作りたい。
「Readdy」を使えば、あなたのアイデアをすぐにWeb上で表現できます。複雑なコーディングの知識は一切不要。直感的な操作で、思い描いた通りのWebサイトが、あっという間に完成します。
#Readdy
#Dreamweaver
#Dreamweaver
■Kishioka Design Blog
■Kishioka-Design日誌（はてなブログ）
■note
