架空のハンバーガーショップサイトのデザインを作ってみた（Canva,ChatGPT）

久々にハンバーガーを食べたら美味しかったので、CanvaとChatGTPを使用し、架空のハンバーガーショップのサイトデザインの一部を作ってみました。

ChatGPTにロゴやハンバーガーの画像を生成してもらう

ChatGPTに「いい感じのサイト作って」と依頼しても上手くいかないので、ChatGPTには、サイトのロゴと、実際のハンバーガーの画像を生成してもらいました（あとキャッチコピーのアイディア）

リアルバーガー画像は、なかなか美味しそうなバーガーにならず

リアルハンバーガーの画像は、なかなか美味しそうなバーガーにならず、複数個作った中で無難な画像を選びました、、

Canvaで地道にデザイン作成する

素材が用意できたので、そのあとはCanvaで地道にサイトっぽくデザインしていきました。
最初の案では、ハンバーガーを複数個並べるデザインを想定してましたが、実際に配置してみると微妙な感じでしたので、ハンバーガーは1つ配置し、あとはバーガーの紹介するエリアに使用しました。

各要素は適当&感覚で配置

ちゃんとしたモックを作る人は、各要素ごとのサイズを厳密に計算し微調整しますが、私はサーバーサイド寄りの人なので、その辺りは適当&感覚で配置しています。笑

CanvaにHTML書き出し機能はなさそう

CanvaにHTML書き出し機能があれば、実際のサイトを作るときに楽なのになあと思いながら作業をしてましたが、軽く調べた感じなさそうでしたのでちょっと残念。

全部作ると大変なので、ファーストビューのみ作成

サイトのトップページ全体のデザインを作るのは、労力がかかってしまうので、今回はファーストビュー（画面アクセス時に最初に見える箇所）のみのデザインとしました。

作成してみて

このようなデザイン画像は作ったことがなかったですが、思ったより上手くまとまった気がしており、やっていて達成感もありました！

序盤は微妙な感じにしかまとまらず、頓挫気味でしたが、バーガーショップのサイトをいくつか参考にしつつ、何度か試行錯誤しているうちに整えることができました！

この作業は結構楽しかったので、また別シリーズのサイトデザインを作ってみようと思います！

最後まで読んでいただき、ありがとうございます！

おまけ

最近、ChatGPTを使用し、色々なことを模索しています。
もしよければ、以下の記事も見て頂けると嬉しいです！