このたび、当社のコーポレートサイトをリニューアルしました。
今回のリニューアルには、佐藤、李、阿部をはじめ、社長や複数の社員が参加し、企画、デザイン、写真撮影、サイト制作まで、社内で協力しながら進めました。
今回は、新しいコーポレートサイトが完成するまでの制作の様子をご紹介します。
コーポレートサイトを見直すことになったきっかけ
これまでのコーポレートサイトは、公開から時間が経過しており、現在の事業内容や会社の雰囲気を十分に伝えきれていない部分がありました。
そこで、サイト全体のデザインや掲載内容を見直し、初めて当社のサイトをご覧になる方にも、会社の特徴や事業内容が分かりやすく伝わるサイトを目指すことになりました。
今回のリニューアルでは、主に以下の内容を重視しました。
- 会社の事業内容を分かりやすく紹介すること
- 当社の雰囲気が伝わるデザインにすること
- 採用情報を見やすくすること
- パソコンやスマートフォンから快適に閲覧できること
- 社内活動や技術情報を継続的に発信できること
社員それぞれの意見を確認しながら、掲載する内容やページ構成を少しずつ整理していきました。
Figmaを使ってデザインを作成しました
サイト制作を始める前に、まずFigmaを使って各ページのデザインを作成しました。
Figmaは、Webサイトやアプリの画面デザインを作成し、複数のメンバーで共有できるデザインツールです。
トップページ、会社案内、事業内容、採用情報など、各ページのレイアウトや色、文字サイズ、写真の配置をFigma上で確認しました。
制作担当者だけでなく、社長や社員にもデザインを確認してもらい、さまざまな意見を取り入れながら調整を進めました。
- 「会社のイメージが伝わりやすいか」
- 「文章が多すぎて読みにくくなっていないか」
- 「初めて見る方にも内容が分かりやすいか」
- 「スマートフォンでも見やすいデザインになっているか」
- このような点について何度も話し合いながら、少しずつデザインを完成させていきました。
社内で写真撮影を行いました
今回のリニューアルでは、当社の雰囲気をより身近に感じていただけるように、社内で写真撮影も行いました。
実際に社員が仕事をしている様子や、打ち合わせをしている場面、オフィス内の様子などを撮影しました。
撮影には、李、佐藤、阿部をはじめ、複数の社員が参加しました。
普段は写真を撮られる機会が少ないため、最初は少し緊張している社員もいましたが、撮影が進むにつれて自然な表情も増え、和やかな雰囲気の中で撮影することができました。
立ち位置や表情、パソコン画面の見え方、背景の映り込みなども確認しながら、何度も撮影を行いました。
今回撮影した写真は、トップページや会社案内、採用情報など、サイト内のさまざまなページで使用しています。
新しいコーポレートサイトをご覧になる際には、ぜひ写真にも注目してみてください。
WordPressとSWELLを使って制作しました
新しいコーポレートサイトは、WordPressを使って制作しました。
WordPressは、Webページやブログ記事を管理・更新できるCMSです。
今回のサイトでは、WordPressテーマの「SWELL」も使用しています。
SWELLには、見出し、画像、ボタン、ボックス、カラムなど、Webページを制作するためのさまざまな機能があります。
これらの機能を活用しながら、Figmaで作成したデザインに近づけるようにページを制作しました。
ただし、テーマの標準機能をそのまま使用するだけでは、Figmaで作成したデザインを完全に再現することはできません。
そのため、必要に応じてCSSを追加し、文字サイズ、余白、背景色、ボタン、画像の表示方法などを細かく調整しました。
また、パソコンだけでなく、スマートフォンやタブレットでも見やすく表示されるように、画面サイズごとの確認と修正も行いました。
制作中にさまざまな調整を行いました
サイト制作では、デザイン通りにページを作成するだけでなく、実際の画面で確認しながら、さまざまな調整を行いました。
例えば、パソコンでは問題なく表示されていても、スマートフォンでは文字や画像の配置が崩れてしまうことがあります。
また、ブラウザによっても表示に違いが出ることがあります。
そのため、以下のような環境で繰り返し表示を確認しました。
- パソコン
- スマートフォン
- タブレット
- Google Chrome
- Microsoft Edge
- Safari
画像サイズや余白、文字の折り返し、ボタンの位置などを一つずつ確認し、必要な修正を行いました。
制作途中では、掲載する文章や写真の変更もありましたが、その都度、社員同士で相談しながら対応しました。
