架空サイトリニューアル(コーポレートサイト)
自主制作で架空のサイトリニューアルを行いました。課題の整理・ゴール設定、サイトコンテンツの設計・デザイン方向性のすり合わせ、ワイヤーフレーム作成、デザイン制作をしました。
【使用ツール】Photoshop
目次
① 要件
② 制作したデザイン
③ 工夫したこと
④ 制作を通して学んだこと
①要件
- クライアント情報
<クライアント名:株式会社マツケイ>
データセンター、アウトソーシングサービス、システム開発、導入支援サービスなどを展開している - 目的
お問い合わせ、採用応募の増加 - ターゲット
転職希望の方
システム構築、運用管理を求めている企業 - トンマナ
ビジネス感がありつつも地域に根付いた会社なので親しみがあるようなイメージ
②制作したデザイン
こちらが現状のサイトです。
リニューアルしたデザインです。

③ 工夫したこと
■課題解決のためのゴール設定
今回の制作目的は「お問い合わせの増加」「採用応募の増加」の2つに設定しました。
会社の課題をヒアリングした想定で考え、課題がどうなれば解消されているのか?を念頭にゴール設定を決めました。

具体的には、上のシートのようにゴール設定を考えました。
ゴール設定の前の課題を具体的にすることで、何が解消されると課題解決になるのかを決めることができます。
1. ファーストビュー
※ファーストビュー写真全体図

※サイトを開いた瞬間の図
リニューアルしたのは株式会社マツケイという、システム構築や運用管理などを軸としたIT企業のコーポレートサイトです。
目的のひとつとして採用応募の増加があるため、働いているイメージをポジティブに見せたいのと、業種が伝わるようにPCがあり、在籍する社員や会社の雰囲気が伝わるような写真を配置しました。また、現代的な社風や新しいことにも挑戦している会社のため、あえて写真を見切れさせることでそれらの雰囲気が伝わるようなモダンな印象を与えるようなFVにしました。
2. Who We Are

FVの写真とコピーで端的に伝えているが、いまいち何をしている会社なのかがわからないため、FV直下に具体的に説明をいれることで、お問合せや採用の応募を考えている方達に対し自分達が求めていることができそうかどうかの判断をしてもらいやすくします。
3.Client
様々なクライアント企業を載せることで信頼感や信憑性を与えます。
4. Service
実際にどんなサービスがあるのかを知りたいため、メインで行なっているサービスへの導線を設置します。
サービス名だけだとイメージが湧かないため、主にどんなことをするのかという説明を表示し、具体的な内容は下層へ流します。
5. News
更新頻度が少なく活発なイメージがないと、情報の鮮度が低く現在の会社の姿が見えにくくなってしまいネガティブな印象を持たれてしまう可能性があるため、Newsの他にBlogなどの頻繁に更新できるコンテンツを配置することで、鮮度の高い情報を届けます。
6. Careers、JobList

ここまで見てくれた方達は会社への興味が高いため、今求めている職種の提示をすることで会社が求めている人材やスキルを伝え、ミスマッチが起きないようにします。
7.Download、Contact
資料ダウンロードなど、思い出してもらえるようなコンテンツを配置することで今すぐのお問い合わせには繋がらなくても未来のお客様との接点を持てるようにしています。
| 制作を通して学んだこと
■ ゴール設定の重要性
今回初めてヒアリングを想定しての課題抽出からゴール設定を考えてデザイン制作を行いました。会社の抱える課題がどのようになれば解決されるのか、何を持ってゴールとするのか、を考えるのがかなり苦戦しました。
ですがゴールを設定することでどのような見せ方にするといいのか、FVからどのような順番だとゴールが達成されるのかなど、目的を決めることで見せ方や順番が明確になり、その後のデザインも目的に沿って制作することができました。
