【自主制作】架空LP 子育てワークショップWebサイト制作

OVERVIEW

SHE likes Webサイト制作コースの実技試験で作成 制作期間:デザインカンプ10時間 使用ツール:Photoshop

YEAR 2025

1 制作物

【LPデザインカンプ】

※写真はAdobe stockの商用利用可能なものを使用


2 要件定義

【事業内容】

子育てワークショップ

【サイトの概要・制作目的】

SNSのバナー広告などからこのサイトにアクセスしてもらい、ワークショップの予約をしてもらう。

この活動を多くの人に知ってもらう。

【事業・サイトのターゲット】

子育て中のパパ、ママ

【サイトイメージ】

ワークショップに参加してみたいと思える温かい雰囲気

学びがある真面目さとワクワクできるような楽しい雰囲気

【サイトに必要な要素】

・ヘッダー

・メインビジュアル

・各セクション(ワークショップの説明、講師紹介、よくある質問、アクセス)

・フッター


3 ペルソナ

【名前・年齢】斉藤 はるか 28歳

【属性】

・関東マンション住まい

・夫、子ども(1歳・男の子)と暮らしている

・職業は公務員(現在育休中)

・休みの日は公園で散歩、ショッピングモールで買い物

・子どもの遊び場探しや子育てYoutubeを見るのが趣味

【背景や行動】

・自分の子育てに自信がなくついスマホで色んな子育て情報を見てしまう

・大切にしている価値観は家族が穏やかに過ごすこと

・そのためについ子どもに怒りそうになった時は深呼吸してから言葉をかけるように心がけている

・子育ての悩みを気軽に相談できるようなママ友がおらず、孤独感を感じることがある

・ママ友を作るきっかけを探している

【ニーズ】

・一緒にお出かけしたり悩みを相談できるママ友がほしい

・自分の子育ては完璧ではないけどそれも大丈夫と励ましてもらいたい

・子育てにおいての指針になるような専門家の話を聞きたい



4 情報設計

クライアント(今回は自分)からヒアリングした要件定義に沿って構成を進めていき、ワイヤーフレームを作成した。


5 デザインコンセプト

①配色

サイト名を体現できるような、太陽のような温かみのある色使いを意識し、薄いオレンジ色をベースカラーにし、メインカラーをオレンジに。アクセントカラーは自然や優しさを演出できるグリーンにした。


②タイポグラフィー

馴染み深い游ゴシック体を使用し、親しみやすい印象に。


③写真・モチーフ

・ここなら安心できそうというイメージを持ってもらえるように、自然光やグリーンが入っている温かみのある写真を使用。

・サークル(円)をメインビジュアルに使用し、参加者が輪になって交流できるイメージをデザインに落としこんだ。


6 デザインの工夫

【メインビジュアル】

・最初は写真を画面いっぱいに配置するデザインを進めていたが、プロデザイナーの方に見ていただいた際に、サイトのコンセプトに合うようなデザインにした方がいいと意見を頂いた。そのためサークルを2個重ねて繋がりの輪が連鎖していくようなイメージでメインビジュアルを大幅に変更した。

・写真をメインにし、文字は装飾っぽく、でも読みづらくないように文字の大きさや色を工夫した。

【ワークショップ】

・サイトで一番見てほしいのがワークショップなので、セクションの区切りを分かりやすくするために背景の色をグリーンにした。

・メインビジュアルで使用した円が2つ重なっているモチーフを繰り返し使用し、デザインの統一感を演出した。


7 制作を通して学んだこと

・最初の情報設計でしっかりと意図を持って構成していないとデザインに取り組んだ時に迷いが生じてしまうと体感しました。

・なぜそのデザインにしたのかを説明できるように明確な意図を持って考える必要があることを学びました。

・今回は自主制作でしたが、クライアントの依頼で作っていくときはより細かくヒアリングや情報設計をしていく必要があると感じました。