インターグ公式サイトの制作背景を振り返ります【画面設計～デザイン制作編】
こんにちは、インターグのMomokoです。
以前の投稿にてお知らせしたとおり、インターグの公式サイトがリニューアルしました。
今回は、前回の【コンセプト～サイト設計編】に続き、実際の画面設計やデザイン制作について振り返ります。記事の後半には制作メンバーへのインタビューも掲載していますのでぜひ最後までチェックしてくださいね！
画面設計・ワイヤー制作
今回は、企画フェーズで作成した「コンセプトシート」や「コンテンツ設計シート」に記載した情報に沿って、実際の画面設計を進めました。
ちなみに、ワイヤーの制作にはAdobeXDを使用しました。
コンテンツ設計シートにテキストで記載していた内容を実際の画面へ落とし込んでいく作業は時間との戦い、そしてリモートワークということもあり、メンバー1人ひとりの意見をくみ取っていくことも当初はかなり悩みながら進めていた部分がありました。
しかしながら、振り返ってみると、前フェーズのコンセプトやコンテンツ設計にじっくり時間をかけたこと、そして互いにコミュニケーションを取ることを意識したこともあり、最終的にターゲットに向けた理想のコンテンツを落とし込むことができたと思います。
ワイヤー制作完了後、デザイナーのちーさん、エンジニアとコーダーのけんてぃ・いりえちゃんにご協力いただき、無事このコーポレートサイトが完成しました。
リニューアル内容
ここからは実際に制作したサイトのトップページから各メインページについてご紹介します。
「インターグがどんな会社なのか」が伝わるTOPページ
トップページのメインビジュアルといえば、企業の第一印象を決める部分。いわば「会社の顔」を表すコーポレートサイトにおいてかなり重要な部分です。
リニューアル前のインターグのメインビジュアルでは、画像だけでなくテキストも含めて「何をやっている会社なのか」が伝わりづらい状態でした。
そこでリニューアルサイトでは「インターグが何をやっている会社なのか」が伝わるトップページにするために、大きく分けて以下２つをポイントに制作をしました。
- 社内の雰囲気（働く社員の姿）が伝わるビジュアルを引用
- インターグが掲げるビジョンを掲載
サービス情報
インターグの事業は大きく分けて「広告運用代行」「Web・デザイン制作」「インターネットメディア」の３つの事業があります。各事業の詳細メニューを分かりやすく伝えるため、デザイナーのちーさんにはレイアウトにもこだわって制作していただきました。
採用情報
これまでのサイトでは採用のコンテンツは募集要項のみで、インターグが描く採用ビジョンが見えにくい状態でした。その点を踏まえ、採用面において「働いている人・社内の雰囲気を雰囲気」や「求める人物像」を明確に伝えることを重視しました。
働く社員の表情を掲載するだけでなく、インターグが求める人物像を明確に記載することで、入社して下さる方とインターグ双方のミスマッチを減らすことにもつながると考えています。
ブログ
今ご覧いただいているブログについては、リニューアルサイトを立ち上げるにあたり、かなり大規模に仕様を変更しました。変更点は主に以下の項目です。
- 別々になっていた自社サイトとブログのWordpressを一本化
- 新着記事を強調し、読者にサイトの新鮮さを伝える
- カテゴリ選択の導線をわかりやすくする
- 管理画面のカスタマイズ
- SNSでの拡散機能の追加
制作メンバーより
今回制作に携わってくれたデザイナーのちーさん、そしてエンジニア・コーダーのけんてぃ・いりえちゃんに今回の制作プロジェクトを振り返ってもらいました。
Webデザイナーちーさん
１.今回の制作で、苦労したことや大変だったことはなんですか？
『HPは会社の顔』です。とても重要な仕事だと感じました。
ページ数も多くあり期限内に制作を終えられるように、スピードとクオリティーのバランスが大変でした。
２．制作時、特に気を付けたことはありますか？
上記でもお話ししましたが、『HPは会社の顔』です。
ということは、会社の方針や事業内容などを言葉、レイアウト、色、画像、UIなど全てで表現します。
リニューアルの目的をしっかりと念頭に置き、その目的達成のためのデザインを常に考えながら制作しました。
３．このサイトを見て下さっている方にどんなことを伝えたいですか？
このサイトで見て欲しいところは、『写っている人の表情』です。 生き生きと仕事をしている姿、真剣に取り組む姿が見てとれると思います。 『仕事＝人』です。この会社と仕事をしたい、この会社で働きたいと思っていただければ嬉しいです。
エンジニアけんてぃ
１.今回の制作で、苦労したことや大変だったことはなんですか？
ターゲットを考えた上でどのようなコンテンツが必要か、ページ構成はどのようにしたら最適かをメンバーと相談する際に 想像よりも時間がかかりましたね。
また、普段あまり使わないアニメーションを使う場面があり試行錯誤を繰り返しましたが、結果的に自身の引き出しを増やすことができました。
２．制作時、特に気を付けたことはありますか？
どのように実装したらライターが記事を書きやすいかを意識しました。ブログの見出しやリストのデザインをストレスなく、ライターに実現してもらうにはどのような方法で実装するかを意識して実装しました。
Webサイトはターゲットとなるユーザーを第一に考え制作しますが、それだけではサイトの力を100%発揮することは難しいと考えています。日々サイトに付加価値を付ける運用者にとっても、簡単に情報発信や更新ができることで、 生きたサイトとしてより影響力を持つものになると思います。
３．このサイトを見て下さっている方にどんなことを伝えたいですか？
要件定義からオフィス、メンバーの雰囲気を伝えることを重視したので、 弊社にお仕事の依頼を考えてくださる方、または入社希望の方には 「一緒に仕事を進めていく時にはこんな感じかな」と想像を膨らませてみてほしいですね。
コーダーいりえちゃん
１.今回の制作で、苦労したことや大変だったことはなんですか？
ブログページを作成する中で、実際にどんなパターンで文章が挿入されるか等を想定しながらコーディングするのが大変でした。しかし、制作側と運用側で打ち合わせする機会が多くあったので、 その辺の共有が都度できていたのはとてもよかった思います。
２．制作時、特に気を付けたことはありますか？
コーディングを二人で分担して制作する上で頻繁にコミュニーケーションをとりながら、できるだけ組み方を統一するように気を付けました。
３．このサイトを見て下さっている方に、どんなことを伝えたいですか？
ブログページの[会社紹介]のカテゴリの記事をぜひ見てほしいです。社員がわきあいあいとしているものがたまに紹介されているので、 会社の楽しい雰囲気が伝わればうれしいです。
制作メンバーの皆さん・プロジェクトメンバーの方々のみならず、本当にたくさんの人のご協力があって、無事にサイトがリリースできました。
この場をお借りしてお礼申し上げます。ありがとうございました！
おわりに
初めての自社サイトリニューアルは予想以上に時間がかかったり、予期せぬ問題が起きたり、自分の力が及ばない部分があったり…。と、かなり悩みながら取り組んだプロジェクトでしたが、会社の価値を見つめ直すキッカケにもなり、大変貴重な体験だったと感じています。
新たなサイトがリリースできたことに満足せず、ここをスタートラインにインターグの魅力をたくさんの方に知ってもらうべく、今後も様々なコンテンツ作りなどに取り組んでいきます。
