ブログのデザインを決めるとき、私はAIに案を出してもらい、画像や動くプレビューを見ながら修正を頼みました。最初から完成形が浮かんでいたわけではありません。「この配置は好きだけど、色は別の案がいい」「自己紹介が重複している」と伝え、少しずつ自分のブログに合う形へ近づけました。
この記事では、「どいやさんぽ。」のデザインを決めたときのチャットを振り返り、実際に進めた順番、AIへの伝え方、迷った点と修正した理由をまとめます。コードの変更はAIに依頼し、私は画面を見て、残したいものや違和感のある部分を伝える役割でした。
デザイン案の画像、ローカルの動くプレビュー、実際のWordPressサイトは、確認できることが違います。この区別も含めて、これからブログを作る人が進めやすいように整理しました。
私がブログデザインを決めた流れ
- 元のテーマをプレビューする。まず今のサイトを見える形にして、記事一覧や自己紹介の配置を確認しました。
- 複数のデザインを比べる。他のテーマを参考にした案を見て、カード型、ブラウン系、雑誌風、ミニマルな案を動く画面で比べました。
- 好きな部分を組み合わせる。最初はカード型の構成に、別の案の明朝体とブラウン系の色を合わせました。その後、よりスタイリッシュな案も画像で比較しました。
- 違和感を具体的に直す。自己紹介の重複、名前の大きさ、サイドバー、ボタンの行き先、スマホのメニューを順に見直しました。
- 他のページにも反映して確認する。トップだけでなく記事・固定ページ・お問い合わせなどの見た目をそろえ、動くプレビューと公開サイトで確認しました。
一度の依頼ですべて決まったのではなく、見て、伝えて、もう一度見る作業を繰り返しました。見た目だけでなく、記事を探せるか、本文を読めるか、次のページへ進めるかも判断の基準にしています。
手順1｜ブログの目的と、残したいものを決める
私が作りたかったのは、自分の実績や制作物を紹介しながら、制作の話や日々のことを書けるブログです。チャットでも「自分の実績や制作物などを紹介しながらブログを書くという目的ならなにがいい？」と相談しました。
そこで制作物をトップに並べる案も出ましたが、私はトップの「Portfolioを見る」ボタンを残し、作品はその先で見せる形を選びました。ブログの入り口に作品を全部詰め込むより、記事と制作物をそれぞれ探しやすくしたかったからです。
| 決めたこと | 私のブログでの考え方 |
|---|---|
| サイトの目的 | 制作活動を紹介しつつ、ブログ記事も読んでもらう |
| トップに残すもの | 短い自己紹介、Portfolioへのボタン、記事を探す入り口、新着記事 |
| サイドバーの役割 | プロフィールとPortfolioへの案内、よく読まれている記事をまとめる |
| 詳しい説明の置き場所 | 「このブログについて」などの独立したページで読めるようにする |
最初に全部を決め切る必要はありません。ただ、AIに任せる前に「記事を中心に見せたいのか」「制作物も見せたいのか」と、消してほしくない要素を伝えておくと、提案を選びやすくなります。
手順2｜複数の案を見て、配置と雰囲気を分けて選ぶ
最初は、カード型とブラウン系を組み合わせた
参考探しでは、SANGO、JIN:R、SWELLなどのデザイン例をAIに紹介してもらいました。私が見ていたのは、記事カードの並び方、色、フォント、プロフィールの配置です。そのテーマへ乗り換えるのではなく、自分のオリジナルテーマに取り入れる要素を探していました。
その後、カード、ブラウン、マガジン、ミニマルの4案を、切り替えて見られるプレビューで比較しました。さらにブラウンカード、ノート、カフェの案も見て、最初に頼んだのは次の組み合わせです。
構成は１のカード型で文字フォントと色の感じは２の感じで作り直して
このように、どこに何を置くかという「構成」と、色・文字・線などの「見た目」を分けて選ぶと、自分の好みを伝えやすくなりました。
その後、スタイリッシュな案も画像で比較した
使いやすい形が見えてきたあと、「もっとかっこよくしたらどうなるか」も気になり、まず画像で見せてもらいました。濃いグレーと銅色の案、ダークな制作スタジオ風、白黒の雑誌風、青とライム色の案、写真と深緑の案などを見比べました。
ここで特に好きだったのが、後半の比較でAと呼んでいた案と、Cの白黒の雑誌風の案です。私は「スタイリッシュ」「ごちゃごちゃしすぎない」「シックな感じ」と好みを伝え、最後はこう言い直しました。
構想はAが好き。色合いとかデザインはｃがすき
ただ、最初の組み合わせ案は構成までCに寄りすぎました。そこでAのヒーロー、記事を探す欄、2列の記事カード、サイドバーを軸に戻し、さらに「もうちょいA寄り」「Portfolioを見る部分のでかい画像はAそのままでいいかも」と修正を頼みました。
この段階では、Aの大きなヒーローを残し、Cの赤いアクセントを控えめに加える方向に決めました。これは制作当時の比較の話です。公開後も画像や配色、記事カードなどを調整しているので、当時の案と今のサイトは完全に同じではありません。
また、前半の「トップの構成を整理する案」と後半の「スタイリッシュな見た目の案」では、別々にA・B・Cという名前を使っていました。比較を続けるときは「後半のA案のヒーロー」のように、どの画像の、どの部分かまで指定すると取り違えを減らせます。
手順3｜AIには「残す部分」と「直す部分」を一緒に伝える
私の場合、「いい感じにして」だけでは好みが伝わり切りませんでした。画面を見たあとに、気になる場所と、そこをどうしたいかを追加で伝える方が進めやすかったです。
| 実際に気になったこと | チャットで伝えたこと |
|---|---|
| 名前が大きすぎる | 「IORI SATOの部分が大きすぎて変」と伝え、別の見せ方を相談した |
| 自己紹介が重複している | トップ、サイドバー、ページ下に似た説明があることを指摘し、整理案を出してもらった |
| サイドバーを残したい | 一度整理したあと「やっぱりサイドバー残して」と伝え、Portfolioへの案内も入れてもらった |
| 採用案から構成が変わりすぎた | 「構想はA」「色合いやデザインはC」と、採用したい部分を分けて伝えた |
| トップだけ別の見た目になりそう | 他のページも統一し、既存の機能は残したまま直すよう依頼した |
次の文章は、当時の指示をそのまま抜き出したものではなく、依頼の仕方を使いやすく整理した例です。自分の画面に合わせて、残す場所と変更する場所を書き換えます。
A案のヒーロー、記事を探す欄、記事カード、サイドバーの配置は残してください。色・文字・線の使い方はC案を参考にしてください。Portfolioへのボタンと既存の機能は残し、トップ、記事一覧、記事本文、固定ページで統一してください。まず比較用の画像を見せて、方向が決まってからテーマに反映してください。
一度にすべての項目を変えると、どの変更がよかったのか分かりにくくなります。まず配置、次に色と文字、最後に余白や動き、というように分けて確認する方法も使えます。
手順4｜実際に迷った配置・リンク・スマホ表示を直す
苦労したこと1｜自己紹介を減らすと、残したい案内まで消えた
トップの自己紹介、サイドバーのAbout Me、ページ下の「このブログについて」が重複していて、私には情報が多すぎるように見えました。整理するためにサイドバーの紹介を外す案を試しましたが、あとからサイドバー自体は残したいと感じました。
そこで、サイドバーにアバター、名前、短い自己紹介、Portfolioへのボタン、「このブログについて」をまとめ、人気記事はその下に置く形にしました。詳しい説明は別ページへ、短い案内は必要な場所へという役割の分け方が、私にはしっくりきました。
この経験から、内容が似ているからといって全部削るのではなく、どこで読者に案内したいかを考えてから残す場所を決めるようになりました。
苦労したこと2｜大きな名前だけでは、自分の活動が伝わりにくかった
トップを「IORI SATO」「Student / Web Developer」「大学で学びながら、WebサイトやWebアプリを制作しています。」という紹介に変えたあと、名前が大きすぎることが気になりました。名前を小さくし、紹介文が主役になる案へ直してもらいました。
その後のスタイリッシュな案では大きなヒーローも気に入りましたが、名前を大きくすることと、制作活動を伝えることは別だと感じました。何をしている人か分かる文と、制作物へ進めるボタンを一緒に見ることが大切でした。
苦労したこと3｜ボタンがあっても、行き先が意図と違った
初期の「Portfolioを見る」は、専用の制作物ページではなく、web制作の記事タブへ移動する形でした。私は、制作物を見る入口と記事を探す入口を分けたかったので、独立したページへ進めるように依頼しました。
「記事を探す」の各ボタンやヘッダーの項目も、押した先で対応する記事一覧や固定ページが開くように頼みました。見た目を選ぶときは、ボタンの色だけでなく、実際に押して、名前どおりのページへ進むかも確認します。
苦労したこと4｜PCでは整っていても、ヘッダーが折り返した
画面が狭くなったとき、ヘッダーが2段になるのが気になりました。チャットでは「2段になるタイミングでハンバーガーメニューに変えて、その中にホームやブログ運営を入れて」と依頼しました。
当時の修正版では550px以下でメニューをまとめる設定になりました。ただし、この数値をそのまま他のブログに当てはめる必要はありません。メニューの文字数やロゴの大きさで折り返す幅が変わるため、自分の画面で窮屈になるところを見て調整するのがよいと感じました。
人気記事にカーソルを合わせたときの動きも、新着記事とそろえるよう頼みました。新しい飾りを増やすより、同じ役割の要素が同じように動く方が、サイト全体がまとまって見えました。
手順5｜画像の案から、動くプレビューとWordPressの確認へ進む
途中で、比較案を全部サイトとして構築すると作業が増えると考え、「案だけ出して。画像だけでもいい」と頼んだことがあります。色や雰囲気を選ぶ段階では画像が便利でした。その後、方向が決まってから「サイトとしていったん見せて」と依頼し、クリックできるプレビューへ進みました。
| 確認する段階 | 見ること |
|---|---|
| デザイン画像 | 配色、文字の強弱、余白、ヒーローやサイドバーの配置 |
| 動くローカルプレビュー | 記事やメニューのクリック、ページの移動、画面幅を変えたときの表示 |
| WordPress上のプレビュー | 実際の投稿タイトル・本文・アイキャッチを入れたときの表示 |
| 採用後の公開サイト | 実際のURLでの表示、リンク先、端末やキャッシュによる違い |
当時のプレビューの記事は仮データでした。画面にAIの質問欄やお問い合わせフォームがあっても、画像や表示用プレビューだけでは実際の回答・送信まで確認できません。デザイン確認と機能の動作確認を分けて考える必要がありました。
同じ記事・同じ画面幅で比較する
比較用には、短いタイトルと長いタイトル、見出し、表、画像、コードを含む記事を用意します。トップ、カテゴリー一覧、記事、固定ページを同じデータで見れば、候補間の違いを判断しやすくなります。写真だけのきれいなサンプルでは、長いタイトルのはみ出しや、本文の読みにくさを見落としがちです。
| 比較項目 | 具体的に見るところ |
|---|---|
| 本文 | スマホでも文字が読めるか。行間が詰まりすぎていないか |
| 余白 | 段落や見出しの区切りが分かるか。空きすぎて記事が間延びしないか |
| 記事カード | 画像、カテゴリー、長いタイトルが枠内に収まるか |
| リンク・ボタン | 記事へのリンクと分かるか。移動先が言葉と一致するか |
| 表・コード | 表示が崩れず、必要な部分だけ横にスクロールできるか |
主要ページは、この順番で確認する
- トップ・カテゴリー一覧：記事を探すボタン、カード、サイドバーを見て、記事を1つ開く。
- 記事ページ：導入、見出し、表、画像、関連記事や次の記事へのリンクを確認する。
- 固定ページ：Portfolio、このブログについて、お問い合わせへメニューから移動する。
- スマホ幅：同じページを開き、メニューを開閉して、文字とカードの収まりを確認する。
- 公開後：実際のページを開き直し、PCと手元のスマホで採用した表示になっているか確認する。
私はテーマを自作する流れで進めました。ファイル構成や実装の順番はWordPressオリジナルテーマの作り方にまとめています。
画像の比率と文字切れは、デザインと分けて確認する
画像が切れていると、デザイン全体が合っていないように感じることがあります。ただ、たとえば1200×600の画像でも、カードの枠が別の比率で、枠を埋める表示になっていれば端が切れます。元の画像を小さくするだけでは解決しない場合があります。
- 元画像の幅と高さを見る。画像自体がどの比率かを確認する。
- 表示枠の比率を見る。記事一覧のカードと記事冒頭で、同じ画像の切れ方が違わないか比べる。
- 切り抜きの位置を見る。人物、イラストの中心、画像内の文字が欠けていないか確認する。
- 画像か枠のどちらを直すか決める。全体を見せたい画像は表示方法を調整し、文字を入れる画像は端に余白を取る。
アイキャッチの文字や構図を作り直すときは、AIでブログのアイキャッチを作る方法で依頼文や設定手順を確認できます。
決定した理由と、次に確認することを残す
案をいくつも見ていると、「どれが好きだったか」だけでは途中の判断が曖昧になります。私の制作では、カード型、ブラウンの雰囲気、サイドバー、Portfolioへの導線など、残す要素を言葉にしたことで修正を続けやすくなりました。
以下は当時のやり取りを振り返って整理した表です。当時この表に記録していた、という意味ではありません。これから比較するときは、同じように採用理由と未確認の点をメモしておくと便利です。
| 選んだ要素・修正 | 選んだ理由・学んだこと | 次の確認 |
|---|---|---|
| カード型の一覧 | 記事を探しやすい配置を残したい | 実際の長いタイトルでも収まるか |
| サイドバーを残す | プロフィールと制作物への案内を置きたい | トップの説明と役割が重複しすぎないか |
| Aの構成にCの見た目を合わせる | 配置と配色の好みを別々に選べた | 指示した配置が本当に残っているか |
| 独立ページへのリンク | Portfolioと記事一覧の入口を分けたい | ボタンを押して意図したページへ進めるか |
| スマホのメニューをまとめる | ヘッダーの折り返しを減らしたい | 開閉と、メニュー内の各リンクを確認する |
採用したテーマの変更履歴を残す方法はWordPressテーマのGitHub管理・更新、公開前に確認する場所はWordPress公開前チェックリストにまとめています。
AIに任せてよかったことと、自分で判断したこと
よかったのは、頭の中で想像していた好みを、複数の画像や動く画面にして比べられたことです。コードを一から自分で書かなくても、「ここは残したい」「この名前は大きすぎる」「ボタンの行き先を変えたい」と伝え、修正案を見ながら進められました。
一方で、「スタイリッシュに」「AとCを合わせて」だけでは、残したかった配置まで変わることもありました。私がやる必要があったのは、修正後の画面を見て、自分が伝えた意図と合っているか確かめることです。
これから同じように進めるなら、まず今のサイトをプレビューし、気になる箇所を1つ選びます。そのうえで「残す部分」「変える部分」「比較したい画面」をAIに伝え、直した結果をクリックして確認する。この繰り返しが、私にとってデザインを決める具体的な方法でした。
コメント