皆さん、こんにちは！

夢の街グループのサイトです！

夢の街グループサイトは老後まで安心して過ごす方法を色々と試しているグループです。
お金や趣味、生きがいや悩みを多くの人と知り合いになり信頼できる人を見つけ解決したいと思い作りました！
興味の在る方は一緒に試してみませんか？

このサイトはアフィリエイトプログラムを含むプロモーションが含まれています！

🏠夢の街グループサイトのトップページを作成するシリーズ第１回「夢の街グループの世界観を伝えるトップページ構想」

🏠 第1回　構想編

🏠 第1回　構想編

◆ はじめに

こんにちは、わんこです。

今回から新しい挑戦を始めます。それは「夢の街グループのトップページ制作」。
WordPressを使い、さらにAdobe Creative Cloudの各ツールを実際に触りながら、「学び」と「作品づくり」を同時に進めていくプロジェクトです。

なぜこのような挑戦を始めるのか？
それは「夢の街グループ」のブログ記事もだいぶ増えて来たので、これまでのきの紹介をする場所を作りたいと思ったからです。

　訪れた読者が「ここに来れば全部わかる」「この街の中なら、自分に合った居場所が見つかりそうだ」と思えるような、ナビゲーション型＋共感型のトップページを目指します。

◆ なぜトップページが重要なのか？

　ブログやショップは記事や商品ページから検索流入することが多く、必ずしもトップページを経由しません。
しかし、それでもトップページは “サイトの顔” です。

例えば初めて街を訪れたとき、駅前の雰囲気や看板で「この街は居心地がよさそうだな」と感じるように、サイトもまたトップページで印象が決まります。　まずは検索から各記事を読んで気になるサイトだと思ったら何が書いてあるサイトだか気になりませんか？そんな時は多分トップページで確認すると思うんです。

さらに読者にとっては、「見やすさ」「安心感」「まとまり感」が大事です。
ゴチャゴチャしているよりも、落ち着いた雰囲気で、どこに何があるのか一目でわかる方が親切。

だからこそ夢の街グループブログは特に広報の役割のあるので肝心です。
　「トップページ＝夢の街の玄関口」をしっかり作り込むことが、グループ全体の信頼感と魅力を高めることに繋がると思います。

◆ トップページ構成（構想段階）

1. ヒーローセクション（ファーストビュー）

目的：世界観を提示し、「ここは特別な場所だ」と直感させる
キャッチコピー例：「“好き”をカタチに。夢の街から、あなたの人生が動き出す。」
背景イメージ：街並み＋空＋手仕事＋自然（ブランドを象徴する要素を合成）
配置するボタン：
- 「ブランド一覧を見る」
- 「サークルに参加する」
- 「ブログを読む」

2. ブランド紹介セクション（カード型）

各ブランドをカードにして横並び、またはグリッド表示
写真＋短いキャッチ＋行き先リンク
例：
- わんこの道楽 → 趣味と副業のハイブリッドブログ [ブログを見る]
- ワンティル → あなたの“好き”を形にするハンドメイドショップ [ショップへ]
- わんこのマイガーデン → メダカと植物で癒しの空間づくり [育成記録を見る]
- サークルハッピーライフ → ゆるくつながる、社会人の居場所 [サークル紹介]

3. 最新記事・更新情報

「動いているサイト」に見せるためのセクション
新着ブログ記事のサムネイル付き一覧
イベント告知（例：ハロウィン交流会、新作販売開始）
SNS埋め込み（InstagramやX）でリアルタイム感を演出

4. サークル・コミュニティ紹介

コンセプトコピー：「社会人の孤独をゆるく解消する場です」
参加者の声（短文コメント＋写真）
参加方法・費用・よくある質問をシンプルに掲載

5. お問い合わせ・プロフィール

運営者プロフィール（wannkoとしての想い、なぜ“夢の街”を作ったか）
問い合わせフォーム
SNSリンクやLINE公式アカウントへの導線

◆ デザインの方向性

デザインのキーワードは 「世界観 × 機能美」。

色：ブランドごとにテーマカラーを設定し、トップページ全体では落ち着いたトーンで統一
フォント：見やすさを重視し、40〜50代にも優しい丸みのある書体を採用
レイアウト：余白をしっかり取り、カード型やグリッドを使って整理
レスポンシブ対応：スマホでの閲覧を第一に考えた設計（Cocoonテーマ活用）

街並みのように「それぞれが個性を持ちながらも一体感のある世界観」を表現していきたいと思います。

◆ 今後の制作フロー（学びの課題）

今回のシリーズは、ただトップページを作るだけではなく、Adobe Creative Cloudを使って学びながら実践する課題形式にします。

Adobe XDかAdobe Express
　トップページのレイアウトを設計（ワイヤーフレームづくり）です。
Photoshop
　ヒーロー画像・ブランドカード・イベントバナーを制作
Illustrator
　夢の街グループのロゴ・各ブランドアイコンをデザイン
Premiere Pro
　ブランド紹介動画を編集（YouTube埋め込み予定）
WordPress（Cocoonテーマ）
　最終実装シリーズの修正を案と修正後とその理由を入れていきます。

「構想 → 設計 → デザイン → 動画 → 実装」という流れを一歩ずつ記事にして公開します。
同じように学習している方にも「実際にどう学んで、どう失敗して、どう活かしたか」がわかるロードマップになるはずです。

　で、次回以降自分には難しいと感じた時点で使うソフトを替えて進めると思いますが、ご了承ください。

◆ まとめ

今回は「構想編」として、夢の街グループのトップページをどんな方向性で作っていくか、その全体像を整理しました。（AIに相談して作りました。）なので実際に経験して難しいものは代替え案を採用するので現時点の内容と替わる可能性はあります。

トップページはただの入口ではなく、訪れる人が「ここで過ごしたい」と思える居場所を提示するもの。
ブランドをつなぐ“街の地図”としての役割を果たすために、デザインと情報設計を丁寧に考えていきたいと思います。

次回は Adobe XDを使ってワイヤーフレーム（設計図）を作る編 に進む予定ですが計画を立てるのが苦手な私は計画（課題）をAIに作ってもらい実行する形で進めています。
　なので現時点でAdobe XDを使ってワイヤーフレーム（設計図）を作るのが困難と判断した場合はAdobe Expressに切り替える予定です。