依頼内容
株式会社サイジスタ様は、SESサービスおよびシステム開発を手がける企業です。
このたび、コーポレートサイトと会社案内パンフレットのリニューアルをご依頼いただきました。
従来のサイトは、2018年の分社化に伴い短期間で制作されたため、デザインを一新する必要がありました。特に、新卒および中途採用を強化するため、採用につながる魅力的なコンテンツの充実を図ることを重視されていました。
リニューアルにあたり、クライアント様から以下のご要望をいただきました。
・情報のアクセシビリティ向上：サイトを通じてユーザーが必要な情報に容易にアクセスできるように改善したい
・スマホ表示の最適化：スマホでの閲覧性を向上させ、より見やすく操作しやすいインターフェースを実現したい
・採用の強化：採用ページのコンテンツを充実させ、企業文化や求職者にとって価値ある情報を提供することで、より多くの応募を増やしたい
これらのご要望に応えられるよう、ユーザーフレンドリーでアクセスしやすいデザインを目指し、クライアント様の魅力を最大限お伝えできるよう、サイトとパンフレットの制作に取り組みました。
WF検討／作成
採用関連の情報を充実させるため、採用ページはコーポレートサイトとは別で切り出す方針でサイトマップを組みました。
コーポレートサイトはアクセシビリティなどが主課題だったため、内容自体はあまり変えずに、階層構造を整理しました。例えば、個別ページで散り散りになっていたアクセスや沿革などの情報を「会社情報」の1ページにまとめました。
ほとんど新規で制作する採用ページは、クライアント様の新卒募集ページなどから情報をピックアップし、サイトに掲載するコンテンツをディレクターからご提案しました。
また、実際の社員様へのインタビューや写真撮影（後述）を経て、表に出ていない魅力的な社内制度や文化があることを知り、デザイン段階の間にもコンテンツを修正するなどクオリティを追求しました。
その他のこだわりとして、採用サイトでは、グローバルナビゲーションだけではなくページ下部にも共通ナビゲーションを入れることで応募者が様々なページを回遊しやすくしました。
インタビュー
社員インタビューページに掲載するため、実際の社員様へ、Zoomを使用したオンライン形式のインタビューを行いました。
事前にヒアリングシートをご記入いただき、それに沿って質問を進めるため、インタビューに慣れていない方でも安心して参加いただける流れになっています。
45分〜1時間程度のインタビューの後は、ヒアリングシートと当日のお話を元に記事を作成し、ご本人様に内容をご確認いただいた上で反映いたしました。
写真撮影
採用ページに掲載するための写真撮影もご依頼いただきました。
事前に香盤表（撮影スケジュールや構図の詳細をまとめたリスト）を用意し、撮影予定のカットや枚数、場所などをクライアント様とすり合わせた上で撮影にお伺いしました。
予定を決めていても、撮影当日の状況に応じてアドリブでカットを変更することもあります。
実際に、香盤表ではオフィスビルを背景に撮影する予定でしたが、そのアングルでは暗い印象の写真になってしまうことが現場で分かりました。そのため、オフィス周辺の緑がある場所に移動し撮影したことで、より良い写真を撮ることができました。このように、臨機応変に対応させていただくこともあります。
デザイン
＜カラフルでありながら、散らからないように。＞
「カラフルな色使いにしたい」というご要望でしたので、特定の色をメインカラー的な扱いにはせず、複数の色を用いてデザインを作成いたしました。
ランダムに多くの色を用いると、まとまりがなく雑然とした印象になりかねないので、「オレンジの近くにはピンク」「青の近くには緑」のように隣り合わせで近しい色を置くことで、カラフルでありながら整理された印象を与えるようにしています。
採用サイトも同様にカラフルな色使いにしていますが、コーポレートサイトに使用する色がベタ塗りなことに対して、採用サイトではグラデーションを多く用いています。
コーポレートサイトと採用サイトではターゲットが異なるので、内容の切り替わりをより印象付けるために、完全な別サイトに遷移した印象になってしまわない範囲内で、テイストに差をつけています。
＜「繋がり」をテーマにデザイン。＞
SEは他の職種との連携が重要とされます。特にクライアントの社内チームに常駐するSESサービスは、お客様の目指すゴールまでの「流れ」の一部となり協力する必要があるので、「繋がり」「流れ」を想起させるラインアニメーションをサイト内に配置しています。
アニメーション
TOPページのメインビジュアルには、シェイプアニメーションを配置しています。
キャッチコピーが「創造性と閃きで、あなたのヴィジョンに彩りを。」なので、円形のシェイプが弾けたり、それが線になって新たな流れとなって、また新たなものを生み出しているようなイメージでアニメーションを作成いたしました。
アニメーションの中でも、同じシーンの中に複数の色が混在するとうるさい印象を与えてしまう可能性があるので、同時に多くの色を用いないようにしています。
実装
「数字で見るサイジスタ」ページは、年月が経ってデータが変わってもクライアント様の方で更新できるよう、WordPressで入力した数字に応じてページ側が変化するように実装しました。
基本的には、数字の変化だけでも違和感がないように表現方法を工夫しましたが、ただ数字が並んでいるだけのページだと飽きてしまうので、合計が100%になるような項目には円グラフを用いることで、インフォグラフィックらしく楽しい画面に仕上げました。
マニュアル作成
クライアント様の方で更新運用ができるよう、WordPressの操作マニュアルを作成し、納品いたしました。
ページに合わせてカスタマイズした編集画面なので、それに合ったオリジナルの内容になっています。
完成デザイン
パンフレット
コーポレートサイトのリニューアルに合わせて、会社案内パンフレットのデザインリニューアルも行いました。
サイトのカラフルさとアニメーションの動きを紙面で表現するため、流動的なラインを3色であしらうデザインにいたしました。
色が偏ることのないように、バランスの良い配色を心がけております。
裏表紙の地図もデザインに合わせて書き起こしています。
中面の事業内容は、どのサービスの説明かわかりやすいように、それぞれの項目を赤・黄色・緑の3色でブロック分けしております。
紙面上でも多くの色を使用しておりますが、メインの色は3つに絞り、全体に散らかる印象にならないよう、色ごとにまとめる構成にしました。
株式会社 サイジスタ様 コーポレートサイト
