この度、ついに、やっと！ガジェットイシューのウェブサイトをフルリニューアルしました。
今回のデザインコンセプトは、その名も「ビタミンぱわぁ」
見る人が元気になれる、優しくて温かい力。アンパンマン的な、あの感じです（笑）。
白を基調にビタミンカラーをアクセントとして取り入れ、ワクワクする仕掛けをあちこちに散りばめてみました。そして今回のリニューアルで、特にお伝えしたいことがあります。
実は私、デザイナーでありながらHTMLやCSS、JavaScriptといったコードの知識がちょっと疎いです。
それでも、ChatGPTの「GPT‑6.1 Sol」と「Work」を活用することで、トップページのレイアウト変更からアニメーション、スマートフォンへの対応まで、思い描いていたデザインを形にすることができたんですね。
上記の写真は左がリニューアル前、右がリニューアル後です。
随分様変わりしましたが、楽しげなサイトになったと思います。
今回は、その制作過程をなるべく分かりやすくご紹介したいと思います。
WordPressのデザインを、専門的なコーディング知識がなくても自由にいじれる。
そんな時代が、いよいよやってきたのかもしれません。
アートディレクションができれば、ウェブサイト制作の自由度が大きく広がる
私は本業がグラフィック＆映像デザイナーであり、アートディレクターでもあります。そして元Webデザイナーでもあります。ただ、HTMLの知識はWeb 2.0以前でほぼ止まっています。CSSやJavaScriptについても、決して詳しいとは言えません。
そのため、これまではWordPressのテーマにずいぶん依存してきました。
ChatGPTが登場する以前は、テーマをほぼ初期状態のまま使い続け、ちょっとしたデザイン変更さえ自分ではどうすればいいのか分からなかったんですね。それが今では、GPT‑6.1 SolとWorkを組み合わせることで、かなり自由度の高いサイト制作ができるようになりました。
ただし、一つ大切なことがあります。
それは、自分が作りたいものを相手に伝える力です。
- 何を作りたいのか
- どんなデザインにしたいのか
- どのような機能が必要なのか
- 読者にどう見せたいのか
こうした方向性をChatGPTに伝えることで、AIが具体的なデザインや実装方法を提案してくれます。もちろん、私自身がアートディレクションの仕事をしているため、少し有利な部分はあるかもしれません。
でも、そんなに小難しく考える必要もないと思うんですよ。
「カフェのような優しい雰囲気にしたい」
「シンプルで上品なサイトにしたい」
「ブラックでクロムハーツの様な世界観にしたい」
そんな言葉からでも、サイト制作は始められます。
ChatGPTでWordPressサイトを作る方法
では、具体的にどうやってサイトを制作していけばいいのでしょうか。
私がおすすめするのは、いきなりWorkで実装を始めるのではなく、まずChatでじっくりデザインやサイト構成を練る方法です。
Chatは相談や企画、デザインの方向性を決める場所。
一方、Workは設計したものを実際に制作・修正するための作業場所。
私はこのように役割を分けています。
以前の記事でもChatとWorkの使い分けについて紹介していますので、よろしければ併せてご覧ください。
それでは、今回私が実際に行った制作の流れをご紹介します。
Chatで行う8つのステップ
ウェブサイトをリニューアルしたいと伝える
どんなサイトにしたいかを説明する
参考にしたいサイトを共有する
カラーテーマを決める
トップページの構成を決める
記事ページや共通パーツを整える
デザインを制作・調整する
Workへの引き継ぎ用PDFを作成する
大まかには上記のような流れになります。
順を追って説明しますね。
1.ウェブサイトをリニューアルしたいと伝える
まずはチーム結成の合図です。
ChatGPTに「ウェブサイトをリニューアルしたい」と伝えてみてください。
それだけで、どんなサイトにしたいのか、どういった構成にするのかなど、相談を始められます。
時には、こちらが何も言わないうちからデザイン案を提案してくることもあります（笑）。
まずは気軽に会話を楽しみながら、方向性を探っていきましょう。
2.どんなサイトにしたいかを説明する
次に、現在のサイトのURLをChatGPTに教え、どのようなデザインにしたいかを伝えます。
例えば、
- カフェショップのような温かいデザイン
- シンプルでおしゃれなデザイン
- 黒を基調としたクールなデザイン
- 雑誌のように写真を大きく見せるデザイン
などなど。
具体的なイメージがなくても構いません。
私の場合は、**「ワクワクする仕掛けがたくさんある、元気なサイト」**と伝えました。
この最初の方向性が、サイト全体のデザインを決める土台になります。
3.参考にしたいサイトを共有する
気に入っているサイトがあれば、そのURLをChatGPTに伝えるのもおすすめです。
色の使い方、記事の並べ方、余白、写真の見せ方など、参考にしたいポイントを具体的に説明すると、イメージを共有しやすくなります。ただし、参考サイトをそのままコピーするのではなく、自分のサイトに合った表現へ発展させることが大切です。
せっかく作るのですから、独自性のあるサイトを目指したいですよね。
4.カラーテーマを決める
ここはデザイナーとして、かなり重要だと考えている部分です。サイト全体の印象は、色の使い方によって大きく変わります。基本となるメインカラー、アクセントカラー、必要に応じた補助色を決めましょう。
あまり多くの色を使いすぎると、サイト全体が散漫な印象になってしまいます。
今回のガジェットイシューでは、ホワイトとビタミンカラーをキーカラーに据えました。
見出しのアイコン、ボタン、ヘッダーのアイコン、タグなど、さまざまな要素に共通のアクセントカラーを使用しています。デザインの統一感を生み出すうえで、カラーテーマはとても大切です。
5.トップページの構成を決める
次はレイアウトです。
ここでは、手書きのラフスケッチでも構いません。PowerPointなどを使って、丸や長方形を組み合わせた簡単な図を描く方法もおすすめです。それを画像としてChatGPTに渡し、「こんなレイアウトにしたい」と伝えます。
今回のリニューアル前、ガジェットイシューのトップページは3カラム、記事ページは2カラムを基調としていました。しかし、今回は1カラムを基調とした、すっきりしたレイアウトへ変更しています。
情報量を減らすのではなく、情報の見せ方を整理する。
そんな方向性で制作しました。
6.記事ページや共通パーツを整える
トップページの方向性が固まったら、記事ページにも手を加えましょう。
見出し、ボタン、囲み枠、関連記事、ページ送りなど、細かい要素もデザインテーマに合わせて調整します。私の場合は、記事ページだけでなく、ポップアップウィンドウやエラー画面などにも統一感を持たせたいと考えました。
「エラー画面も今回のテーマに染めて！」
なんてお願いするのも芸が細かいですね。
ただし、見た目だけでなく、文字の読みやすさや操作のしやすさにも気を配りましょう。
7.デザインを制作・調整する
大まかな方向性が決まったら、いよいよデザイン制作です。
ChatGPTにデザイン案を作ってもらい、完成したものをチェックします。
「ここ、いいね！」
「このボタンはもう少し小さくして」
「このブロックを上に移動したい」
といった感じで、会話を重ねながら調整していきます。
時にはブロック単位で配置を入れ替えるなど、大胆な変更を行うこともあります。
一度で理想のデザインになるとは限りません。
でも、何度もキャッチボールをしていくうちに、自分が思い描いていたサイトへ近づいていくんですね。
この過程がとても楽しいんです。
8.Workへの引き継ぎ用PDFを作成する
ここまででChatによる設計作業はひと区切りです。
次はいよいよWorkの出番。
まず、ChatGPTに次のように依頼します。
「Workで実装作業を行うので、作業引き継ぎ用のPDFを作ってください。デザイン画像と仕様の説明も忘れずに入れてください」
すると、それまでに決めた内容を設計書としてまとめてもらえます。
PDFには、可能な限り以下の情報を含めておくと良いでしょう。
- サイト全体のデザインコンセプト
- カラーテーマ
- トップページと記事ページのレイアウト
- ボタンや見出しなどの共通パーツ
- スマートフォンでの表示方針
- 必要な機能やアニメーション
- 完成イメージの画像
このPDFが、ChatからWorkへの引き継ぎ資料になります。
WorkでWordPressを構築する前の準備
ここからは、実際のサイトへデザインを組み込む工程です。
Chatで作ったデザインは、あくまで完成イメージです。
実際のWordPressでは、使用するテーマやプラグイン、サーバー環境などによって実装方法が変わります。
そのため、デザイン画像と完全に同じ仕上がりになるとは限りません。
それでも、Workと相談しながら調整することで、完成イメージへ近づけていくことができます。
下準備① WordPressの環境を伝える
まずは、現在のWordPress環境をWorkに伝えます。
必要な情報は主に次のとおりです。
- サイトのドメイン名
- WordPressのURL
- 使用している親テーマ名
- 使用している子テーマ名
- レンタルサーバー名
私は次のように伝えることをおすすめします。
「今回はWordPressサイトのリニューアルを行います。まずは現在の環境を確認し、既存の設定や機能を維持したうえで作業を進めてください」
特に、現在使用しているテーマやプラグインを把握しておくことは大切です。
下準備② サイトのバックアップを取る
ここは非常に重要です。
作業を始める前に、必ず現在のサイトをバックアップしてください。
WordPressのデザインを変更すると、予期しない表示崩れや機能の不具合が発生する可能性があります。
Workにバックアップ作業を依頼できる場合もありますが、利用環境や権限によって対応方法は異なります。
バックアップファイルが正常に作成されたかどうかは、必ず確認しましょう。
また、可能であれば本番サイトとは別のテスト環境で作業することをおすすめします。
※私は面倒だったのでWordPressの本番環境でいきなりやりました。
下準備③ 設計書PDFを渡す
準備が整ったら、Chatで作成した設計書PDFをWorkへ渡します。
例えば、次のように指示します。
「添付した設計書に従って、WordPressサイトのリニューアルを進めてください。既存の記事・設定・機能は維持し、変更内容を確認しながら作業してください」
WordPressへの接続や操作が可能な環境であれば、Workは画面操作やコードの作成・修正などを通じて作業を進められます。もちろん、サイトのセキュリティ設定やログイン環境によっては、自動操作できない場合もあります。
その場合は無理に進めず、作業可能な方法を確認しましょう。
バグ修正もAIに任せられる。でも時間はかかる
以前のChatGPTでは、サイト制作中にエラーが発生すると、なかなか大変でした。
怪しい箇所のスクリーンショットを撮る。
ChatGPTに見せて原因を調べてもらう。
提示されたコードを自分で修正する。
そして、またエラーが出る……。
この繰り返しです。
正直、メンタルが削られる作業でした（笑）。
しかし現在は、Workが対応できる環境であれば、エラーの原因調査からコード修正、動作確認まで一連の作業を進めてもらえるようになりました。
これは大きな進歩だと思います。
ただし、AIがすべてのバグを一度で直せるわけではありません。
実際に制作していると、
「ここだけレイアウトが崩れます！」
「スマートフォンでボタンが押せません！」
「なんだかアニメーションの動きが変です！」
なんてやり取りは普通に発生します。
一つ直したと思ったら、別の問題が見つかることもあります。
結果として、バグ修正だけで一日が終わってしまうことも珍しくありません。
それでも、以前は自分でコードを調べ、手作業で直していたことを考えると、ずいぶん進歩したものだと感じます。
AIに任せられる部分が増えたからこそ、私たちはデザインや使い勝手の確認に集中できるようになったんですね。
サイトが完成！スマートフォンにも対応
そんなこんなで、ガジェットイシューのリニューアルが完成しました！
今回のデザインでは、1カラムを基調としたレイアウトに加え、スクロールに合わせて動く視差効果（パララックス）や、ガラスをモチーフにした表現などを取り入れています。
単に情報を並べるだけではなく、サイトを眺めたり、操作したりすること自体を楽しんでもらいたかったんです。また、デスクトップとスマートフォンでは画面サイズも操作方法も異なります。
そのため、両方の表示を確認しながら、レスポンシブデザインの調整も行いました。
ここは特に大切です。
パソコンでは美しく見えていても、スマートフォンでは文字が小さかったり、ボタンが押しにくかったりすることがあります。完成したと思っても、実際の端末で触って確認することをおすすめします。
AIが実装を担当してくれても、最終的な使い心地を判断するのは私たち自身です。
完成後のWordPressサイトはどう管理する？
せっかく完成したサイトですから、日常的な更新も簡単にしたいですよね。
例えば、
「この写真を変更したい」
「ここの文章を編集したい」
「トップページの表示内容を入れ替えたい」
そんなときは、WordPressの管理画面から変更できる仕組みを検討してみましょう。
Workに「この部分を管理画面から編集できるようにしたい」と相談すると、実装方法を提案してもらえます。
また、記事内で繰り返し使用するデザインパーツは、WordPressのブロックエディターから呼び出せるようにしておくと便利です。これなら、記事を書くたびにコードを編集する必要がありません。
記事そのものは、これまでどおりWordPressの「投稿」機能で作成・編集できます。
見た目を大きく変えても、日常の運用はシンプルに。
このバランスが大切だと思います。
まとめ：AI時代こそ記事の中身が大切になる
さて、今回はChatGPTとWorkを活用したWordPressサイトの制作方法をご紹介しました。なるべく噛み砕いて説明したつもりですが、気づけば結構な長文になってしまいましたね💦
振り返ってみると、AIによるサイト制作は驚くほど身近になったと感じます。
以前は専門的な知識が必要だったことも、今ではChatGPTに相談しながら、一つずつ形にできるようになりました。もちろん、デザインを思いどおりに保つことや、複雑な機能を安定して動かすことには、まだ難しさもあります。
それでも、今まで手を出せなかった領域へ、自分のアイデアを持って挑戦できる。
これは本当に大きな変化だと思うんです。
そして、AIの進歩によって、これから美しいウェブサイトが次々と生まれてくるのではないでしょうか。
今、画像生成AIによってさまざまな表現が花開いているように、ウェブサイトのデザインも一斉に花開くのかもしれません。
でも、少し考えてみてください。
美しいデザインが当たり前になったとき、読者が本当に求めるものは何でしょうか。
私は、やはり記事の中身だと思います。デザインは読者を迎えるためのもの。そして記事は、その読者に何かを持ち帰ってもらうためのもの。
AIのおかげで表現の自由度が広がった今だからこそ、デザインにおごることなく、これからも記事の質を磨いていきたいと思います。
サイトが生まれ変わると、気持ちまでワクワクしますね★
皆さんもぜひ、ChatGPTと一緒に自分だけのウェブサイト作りに挑戦してみてください！😊
