【実案件】子供向けプログラミング教室紹介ブログ（WordPressテーマのカスタマイズ）

1. 概要

サイトURL：ハロープログラミング
制作期間：2ヶ月（2022年1月〜2月）
使用ツール：Photoshop /Illustrator / AFFINGER6（WordPressテーマ） / Canva
担当範囲：デザイン（ヘッダー画像、ロゴ、アイキャッチ、サイト全体のレイアウト）

2.  要件整理

◆サイトの目的
子供にプログラミングを習わせたいママさんたちが、どんなプログラミングスクールに通わせたらいいのか？の悩みを解決するサイト

◆ターゲット
ヒアリング情報よりペルソナを設定しました。（ペルソナ設定シート）
「35歳　女性　主婦　子供をプログラミング教室に通わせたい」

◆デザインのコンセプト
・若い主婦がターゲットなので「今っぽさ」「シンプル」
・子供向けプログラミング教室の紹介なので「好奇心」「カラフル」「柔らかい」「IT」
上記を意識しながらデザインを制作いたしました。

3. 工夫したこと

①アイキャッチ（6パターン作成）

・ユーザーが各記事で別のコンテンツにいると明確に認識できるようをそれぞれのアイキャッチをを違ったテイストで作成いたしました。

・使い回し希望のアイキャッチはクライアント様が更新できるようCanvaにて作成。素材の一部はIllustratorにて作成し、Canvaへ移行。また文章が変更になった際もレイアウトが崩れないよう文字の周りに余白を多めに取りました。

②キャラクター

・サイト全体で統一感がでるようにキャラクターは全て同じイラストレーターさんのものを選びました。

・ユーザーが感情移入できるよう表情のパターンを複数用意しました。

③ロゴ

・「コンセプトを決める」→「イメージにあう参考を探す」→「モチーフやフォントを決める」→「Illustratorを使用し作成・微調整」という手順で制作しました。サイトのイメージからずれないよう制作前の参考探しやイメージ構想など準備に時間をかけました。

4. 制作を通じて学んだこと

はじめての実案件でした。こちらの案件で何よりも大切だと感じたことは初期段階でのデザインの方向性のすり合わせです。最初のミーティング時はターゲットが曖昧な状態で「誰に何を伝えたいサイト」なのかも不明確でした。このままではクライアントの想いをユーザに届けることが難しいと感じたため、独自に作成したペルソナ設定シートを用いてより具体的なペルソナ像を事前に決めることをご提案させていただきました。そのシートを用いたことでその後も双方の認識にブレがなく、スムーズにデザインを作成することができました。