■目次
❶制作時間 ❷制作物 ❸クライアント要件 ❹工夫点 ❺バナー制作の手順
❶制作時間：10時間 （2023/04）
❷制作物：Webデザイナー交流会 for Beginner｜情報設計、バナー制作（２点）
❸クライアント要件（必須条件）
⚫︎クライアント名：SHElikes WEBデザイン入門 終了課題
⚫︎目的：Webデザイナー交流会 for Beginner
【遷移先】申し込みページ
【方向性イメージ】女性向けで温かいイメージ
【指定カラー】温かみが伝わるピンク系、オレンジ系などの暖色
【伝えたいこと】トークセッションもあるがメインは参加者同士で交流ができること
⚫︎ターゲット：
・Webデザイナー歴1~2年の初心者デザイナー
・最近スクールを卒業しWebデザイナーとして働き始めたがまだまだ不安がある方
・フリーランスを目指しており同業の方との繋がりが欲しい方
作成のポイント：女性にターゲットを絞ったバナー。いまの仕事に不満を持つ女性に「転職してみようかな」と思わせる雰囲気。小さなサイズの中にキャンペーンの文言を上手く取り入れる。
⚫︎掲載場所：Twitter
⚫︎入れたい要素（必須）コピー、写真
【コピー】
・Webデザイナー交流会 for Beginner
・みんなでわいわい
・開催日：4月10日(火) 19:30-21:30
・参加費無料
【画像など】指定写真を使用
・色補正・トリミング・大きさの変更は自由
【サイズ】幅1146px 高さ600px
❹工夫点
■情報設計で工夫したこと
・交流会という一番言いたいことを読みやすいヒラギノ角ゴシックを使用し、かつ一番大きな文字にしました。
・文字や図形の配置は端（隣の要素）から５０ptを基準にし、全体がバラつかないようにしました。
（横の余白は５０、上下は２５と横の半分になるようにして法則性があるようにしてまとまって見えるようにしました。）
・文字と図形は始まりと終わりを揃えました。
・情報の優劣をつけない部分は同じフォントサイズにしました。
・フォントは多くのフォントを使わずにヒラギノ角ゴシックをメインにし全体をまとめました。太さやドロップシャドウで目立たせたい場所とそれ以外を区別しました。
■デザインで工夫したこと（配色、フォント、写真など）
・女性向けなので温かみのあるピンクをメインにしました。
・画像の楽しそうなところに目が行くようにグラデーションを外から女性の画像に向かってグラデーションをつけました。
・初心者とパッと見ただけでわかるように初心者マークを入れました。初心者マークは緑と黄色からできていますが、全体の背側割合が（７０：２５：５）が崩れるので使用しているメインカラーの白で線画にしました。
・開催日や時間など重要な部分は白塗りつぶしの図形の上にまとめ参加に必要な情報の視認性を高めました。
・Webデザイナー向けがタグのように初めに目に入る左上に配置して、誰が対象なのか明確にしました。
・使用したカラーは女性の服や口の色など写真の素材内にある色を濃くしたり、薄くしたりすることで写真と文字のリンクをさせました。
・「わいわい」と楽しげな感じが出るように文字を丸い図形の上に配置し、話し言葉のように配置しました。ただし、そこだけが浮かないように「みんなで」の上端はWebデザイナーの文字と高さを揃えました。
・交流会の文字は一番大きいが、上の四角い図形の終わりと揃え、かつ隣の女性と画面の端までの中央になるように配置しました。
❺バナー制作の手順
要素配置▶︎情報優先順位▶︎ビジュアルデザイン
①まず要素を書き出す
②書き出した要素を基にユーザーストーリを考え定法設計
③大まかなレイアウトを作り、後から明度を気にした画像配置修正をする事で情報設計がぶれにくい。