自主課題制作：ビジネス英会話サイトのトップページデザインを制作してください

• ターゲット：20-40 代の社会人
• 色：清潔感を感じる配色が希望
• ウェブサイトのゴール：無料体験レッスンに来ていただくこと
• 情報： 
  • 社名：ABC ビジネス英会話 
  • 住所：大阪府大阪市中央区本町◯◯◯-◯◯
  • 電話番号：000-000-0000
  • 料金・・・短期集中コース（２ヶ月プラン）19万8,000円
• ロゴデータ以外の写真素材なし（素材サイトなどを利用してご用意ください）

以上、課題ネタ元のサイトの「SkillUp!!」様より。

■ペルソナ作成

氏名：青木英二
年齢：29歳
職業：化学素材メーカー営業
家族：独身
仕事時間：　9時～18時（繁忙期以外長時間の残業なし）
休み：土日。有給消化は難しい。
趣味：ゲーム、宝くじ、サッカー観戦
貯金：200万ほど
インターネット利用状況：仕事中は業務用以外ほぼ使用しないので、ネットサーフィンは家のノートPCでのんびり。
性格：真面目で人当たりも良いが、仕事以外ではシャイ。
ストーリー：将来の結婚などを考え、給与を上げたい。職場が海外営業にも力を入れており、転勤も視野に入れて希望を出せるようになりたい。実務で使える英語を身につけたいが、大人数でディスカッションしたり、陽気な雰囲気はあまり得意ではなく、勇気が出ない。

■参考サイト調査

・オンラインビジネス英会話ならビズメイツ Bizmates https://www.bizmates.jp/ 

・法人専門オンラインビジネス英会話プライムトーク｜Primetalk 　
　https://www.primetalk.co.jp/ 

・DMM英会話｜世界とつながるオンライン英会話 https://eikaiwa.dmm.com/

など。

■簡易ワイヤーフレーム作成

手描き（iPad）で作成。

ほぼラフで描く。

■配色・参考サイト決定

ペルソナの性格や課題の色要望を考慮し、白青ベースの清潔感ある配色に決定。
同時に主な参考サイトを

「法人専門オンラインビジネス英会話プライムトーク｜Primetalk
　https://www.primetalk.co.jp/ 」

こちらに絞る。

■大まかなデザインの決定、準備

おおよそのデザインを簡易ワイヤーフレーム2枚目の方向で決定し、「SkillUp!!」様の提供サイトマップを参考にしながらindexの必要項目を書き出し。写真素材として、
・MV用の素材×２
・コース説明用の画像×３
・インタビュー用の人物素材×２
・流れ説明用のアイコン素材×５
・SNS用のアイコン素材×２
・チェックボックス、Q&A用の＋－アイコン
を商用利用可能な素材から探す。

■Photoshopによるデザイン

ガイド幅980で作成。※画像は元はPIXTA素材のため、仮のものに差し替え。

• フォント
• 游明朝体 Pr6
• 漢字タイポス４１５Std
• 源ノ角ゴシック JP

★スクール講師からのフィードバックで修正したこと
①当初MVのコピーはゴールドで、少し胡散臭い印象を受けてしまい、真面目な印象を損なっているとの指摘。白に変更して統一感を出し、画像を爽やかに変更。コピーも「最強の講師陣が２ヶ月であなたを変える」から「現場で通じる本物の英語力を」に変更した。

②全体的に文字が大きく、幼稚な印象を与えてしまっているとの指摘。
　→参考サイト等を検証で見ながら、フォントサイズを小さめに調整した。Photoshopで作っているとつい大きくなってしまうことを知り、今後注意する。

③テキスト量が多く文字が大きいため、divいっぱいにテキストが入ってしまって余白が少ない。デザイン全体の雰囲気から考えても余白はたっぷりとったほうがいいとの指摘。
→テキスト量とフォントサイズを調整し、余白をしっかりとって敷き詰めすぎないよう調整した。

★フォルダ分け

■課題を終えて

なんとか初カンプを完成させることができたが、フォント選びや余白に苦しめられた。
また、同期で同じ課題に取り組んだ現職のグラフィックデザイナーの方々の作品を見て、自分のデザインのストックがいかに貧困かを思い知った。そのため、空き時間にPinterestやギャラリーサイトを眺めるだけでなく、Twitterでサイトレビューを始めることにした。一部まとめ→https://note.mu/tasu_design/n/n1edd02a692aa
結果、その後のチーム課題でも積極的に意見を出すことが出来た。