ホームページリニューアルプロジェクト！全て内製で作りきりました！【社内イベントレポート：番外編】

こんにちは、プロジェクトテクノロジーズ採用担当のサトウです。
今回はホームページリニューアルのお知らせです！10月よりホームページのデザインを一新しリリースいたしました。構成・デザイン・コーディング・移行作業まで、全て自分たちで、1か月で第一フェーズを完遂しました！作成の過程やデザインのこだわりなどをお伝えできればと思っております。

2023年8月某日、突如自社ホームページのリニューアルプロジェクトが発足。10月1日公開という短期間の中で、精一杯こだわったデザインや構成で完成させられるようプロジェクトメンバー全員で全力を尽くしました。

実は、4月にも一度ホームページをリニューアルしており、この時は4月に入社したメンバーと共に突貫的に2週間で完成させました。元々のホームページは会社設立時に作成されたものでとてもシンプルなものだったため、デザイン性を高めたスタイリッシュなものにするべく、数日間で4パターンほどのデザイン案を作成してくれたのがメイちゃん（社員インタビューvol.5）でした。その中から決定したのがこのデザイン（↓画像右）です。

シンプルな構成とメイちゃんのデザイン力で、2週間という短い時間の中で完成させることができました。

4月のリニューアルから4ヶ月ほど経ち、今回発足したホームページリニューアルプロジェクトでは、会社設立から1年というタイミングでより明確となったMISSION・VISION・VALUEを表現することが目的でした。（MISSION・VISION・VALUEについては、後日10月より代表取締役社長に就任した濱崎へインタビューしたいと思います！）トップ画像のデザインから、ページの階層、ボタンの配置まで細部にこだわり10月の公開へ向けてプロジェクトメンバー全員で総力を尽くしました。

プロジェクトメンバーはサトウ含め7人でした。代表取締役社長の濱崎、執行役員の向井、メイちゃん、ひなちゃん、もえちゃん、プロジェクトカンパニーグループ全体のシステムを管理しているM氏。下記の役割分担の元、それぞれのスキルやアイデアを集結させ作り上げました。

構成　　　　：濱崎、向井
デザイン　　：メイちゃん、もえちゃん、サトウ
開発　　　　：ひなちゃん、メイちゃん
移行作業　　：M氏、ひなちゃん、メイちゃん

まずはHP全体の構成や階層をいくつかのパターンで検討して決定。そこからさらに、それぞれの配置やデザインを細かく決定していきました。毎日新しいアイデアを話し合い、より良いものを作り上げていくことができ、本当に密度の濃い1ヶ月だったなと思います。

テーマカラーは「pink」「blue」「yellow」。共有価値観である「Challenge・Chance・Change」を載せたトップ画像は20種のデザイン案から決まりました。他にも、COMPANYやBUSINESS、RECRUITのボタンも数パターン作成。写真のフィルターのかけ具合、文字のフォントやサイズ、それぞれの配置まで、全てミリ単位で細かいところまでこだわり抜いて作り上げました。
ここからは、プロジェクトメンバーに聞いたデザイン・開発それぞれのこだわりポイントをお伝えします。

【デザイン面】

目指したのは、「ポップさとワクワクさを持ち合わし、かつ洗練されたサイト」です。

• 各ページの色味
  各ページで基調となる色を「pink」「blue」「yellow」の３色に指定しました。各色は、明るくやわらかな印象を与えられるよう、彩度を高くし、白色を少し混ぜたミルキーな色に調整しています。
• トップページのデザイン
  トップページでは、指定した各ページの色を引き立たせられるよう、白色と黒色をベースにまとまりのあるページを目指しました。
• トップ画像
  トップ画像は、AIで生成したデザインを基に作成しています。個性やビジョンが交わりながら、会社として挑戦を続け、明るい未来に向かう様子をイメージしました。
• RECRUITボタン
  周辺の写真は、従業員の人柄が伝わるような写真を選んでいます。
• COMPANYページとBUSINESページのデザイン
  シンプルで、整理されたデザインにしています。差し色として指定した色を使用したり、グループ概要図を見直したり、よりわかりやすいデザインで作成しました。
• RECRUITページのデザイン
  ポップで親しみやすいページになるよう、他のページとはテイストを変え、イラスト中心に仕上げました。作成中は、メンバー同士でよくコミュニケーションを図り、楽しんで取り組むことを基本にしました。
  サイトを訪れた方に、私たちや会社の明るい雰囲気が伝えられたらいいなと思います。

【開発面】

• 細かな連携
  今回、フレームワークはVue.js、言語はHTML・CSS・JavaScript・TypeScriptを使用し、2人で開発を行っています。初めてGit/Githubを使って共同開発をおこなったので、コンフリクトしないようにルールを設け、お互いに連携をしっかり取ることを意識しました。
• シンプルなコード
  開発している2人のどちらが見てもわかりやすいように、コードが長く、多くならないよう意識しました。共通するデザインの要素をclassでまとめ、なるべく少ないコードで仕上げています。

そして完成したホームページがこちら。こだわりポイント含め、細かい部分まで見ていただけたら嬉しいです。これからもどんどんアップデートしていきますので、お楽しみに！

今回わたしたちは、自分たちの会社のホームページを自分たちで作り上げるという、本当に貴重な経験を積むことができました。そんなたくさんのChanceがある弊社では、エンジニアとして一歩踏み出したい方を募集しております。ぜひ一度カジュアルにお話してみませんか？「話を聞きに行きたい」ボタンよりエントリーお待ちしております。