本記事は 虎の穴ラボ Advent Calendar 2023 20日目の記事です。
- 本記事のテーマは「虎の穴ラボのロゴとサイトをリニューアルしたよ！」です！
- 前回はhk220さんによる「「GitLabに学ぶ 世界最先端のリモート組織のつくりかた」を読んでみた」でした。
- 次回はnagaさんによる「Whisper Micを使ってライブ配信リスナーと会話してみた」です。ご期待ください！
はじめに
こんにちは。虎の穴ラボ株式会社のデザインチームです🎨
11月末に虎の穴ラボのロゴとコーポレートサイトをリニューアルしました🎉🎉🎉👏👏👏
toranoana-lab.co.jp
今回は、このリニューアルプロジェクトのご紹介をしたいと思います❗️
リニューアルの目的
虎の穴ラボは現在、虎の穴、ユメ(ノ)ソラグループにて提供している多くのサービスのエンジニアリングを担っています🤩
さらにより良いサービスを提供していくため、エンジニアを中心とした採用活動を活発に行なってきました。
コーポレートサイトは前回のリニューアルから4年ほど経過していることもあり、
今まで以上に、より多くのIT業界で働く方々やステークホルダーへ弊社の魅力を伝えるため、リニューアルすることとなりました。
目的達成のためにやったこと
- ロゴをリニューアルして新たな虎の穴ラボの印象を作る
- サイトデザインは、これまでのキャラクターを押し出したデザインからモダンなイメージのデザインに刷新
- トップページにインタビューやブログ、その他各種メディアの活動を大きく掲載して、メンバーの活動を見える化
- これまでの採用情報に加えて、職場の環境や社内制度についての情報を充実
- 虎の穴ラボ単体での価値創出を行なっていくため、これまでのユメ(ノ)ソラドメインから新ドメインに変更
デザインチームでは、新コンテンツの提案も含んだデザイン、レイアウトの提案を行いました。
採用担当者、決裁者とのMTGを繰り返しリニューアルプロジェクトは進んで行きます💪
■ロゴリニューアル
新ロゴはこちら⏬
ロゴの決定にあたり、いくつかデザイン案を作成しました。
シンボルマークを使ったものなども検討しましたが、今回はシンプルなデザインのロゴが採用となりました。
提案したロゴ案
新しいロゴは早速名刺や各種サイトにて使用を開始しています。
皆さんの目に触れる機会もあるかも❗️❓
■モダンなイメージのデザインに刷新
Before
After
リニューアル前はアニメのサイトをイメージして可愛らしい雰囲気でしたが、
モダンなイメージ刷新ということで、白を基調に爽やかな雰囲気になっています。
イメージカラーも青系のクールな印象に変更しました。
園児たちの卒園に社内から惜しむ声もありましたが、新しい虎の穴ラボをサイトを通してお届けしていきたいと思います。
■トップページにメンバーの活動を見える化
メンバーのインタビューで社内の雰囲気を感じていただき、
イベントなどの活動でどのような取り組みをしているかを知っていただけるようにしました。
■職場の環境や社内制度の情報を充実
職場の環境や社内制度のページも新規に作成して、より伝わりやすいイメージを掲載しています！
■新ドメインの取得
これまでユメ(ノ)ソラのサイトの一部として虎の穴ラボのサイトを運用していましたが、
今後虎の穴ラボ単体での価値創出を行なっていくためにもtoranoana-lab.co.jpのドメインを取得しました。🤗✨
Webサイト制作のあれこれ
Webサイトの制作に使ったツール
■Googleスプレッドシート
サイト設計、コンテンツ整理、プロジェクトメンバー内での情報共有に使用しました。
■Figma
デザインツールにはFigmaを使用しました。
サイトデザインもバナーの作成もFigmaのデザインファイルを使用しています。
少し前までは主にAdobe XDを使用することが多かったのですが、現在はFigmaにてデザイン業務を行うことが増えています。
共同編集やファイルの共有が簡単で、開発者モードなどの機能も充実しており、デザインから実装までの連携がとてもスムーズになったことを実感しています。
www.figma.com
■WordPress
旧ラボサイトもWordPressをベースに開発しており、今回の新サイトもWordPressを採用しています。
WordPressの開発について
WordPressサイトを新しく設置する時は、ドメイン毎にWordPressをインストールして制作することが多いですが、今回はマルチサイト機能を利用して、すでにあるWordPressに新サイトを稼働させる構成を採用しました。
「カスタム投稿タイプ」と「Advanced Custom Fields (ACF)」プラグインを組み合わせてより利用しやすいCMS機能を構築しています。
■WordPressのマルチサイト化のメリット
- 1つのWordPressで複数のサイトの運用ができ、データベースもインストール時に設定する1つだけなのでバックアップの手間が少ない
- テーマやプラグイン、ユーザーの追加など、通常であればサイト一つひとつで管理が必要な設定も複数サイト分をまとめて管理することができる
■ACF・カスタム投稿について
ラボサイトでは「カスタム投稿タイプ」と「Advanced Custom Fields (ACF)」プラグインを組み合わせて活用しています。
ja.wordpress.org
WordPressは一般的に「投稿」と「固定ページ」があり、入力する項目も「タイトル」「本文」「アイキャッチ画像」などのごく普通のブログと変わらない作りになっています。
「カスタム投稿タイプ」を活用して、ノーマルな投稿以外の採用情報やインタビューなどの投稿種別を増やしています。
さらに「Advanced Custom Fields (ACF)」プラグインを使用することで、より柔軟にページ内のコンテンツ管理ができるようになり、非エンジニア、非デザイナーでも簡単に更新が行えるよう構築しています。
Advanced Custom Fields (ACF)とは
ACFはWordPressのカスタムフィールドを拡張するプラグインで、さまざまな種類のカスタムフィールドを柔軟に定義・実装が可能。
（プラグインを使わずにfunctions.phpで自力実装しようとするとものすごく大変）
シンプルなテキストの登録やビジュアルエディターの他に以下の様なフィールドも簡単に実装が可能です。
画像アップロード、ファイルアップロード、ギャラリー（複数画像登録）、カラーピッカー、日付選択、Googleマップ、関連投稿選択、繰り返しフィールド（PRO有料）、柔軟コンテンツ（PRO有料）
この中でも柔軟コンテンツと繰り返しフィールドはめちゃくちゃ優秀❗️✨
有料のPROの機能ですが、この二つを駆使すればノーコードでLPを量産できるCMSを作れちゃうくらい優秀です✨✨✨
カスタムフィールドを導入した設計のメリット・デメリット
◯ 頻繁に更新するコンテンツをダッシュボードから手軽に更新できる
◯ Webサイト制作の知識がない人でも、管理画面にログイン・ブログ感覚で記入するだけで更新ができる
◯ データに適した形の入力フォームを用意できるので、更新担当者が直感的に入力できる
△ 導入している箇所のデザイン・レイアウトはある程度固定化される
△ 静的にコーディングする場合と比べて、最初の導入・実装に工数がかかる
◎ 日本語の解説ブログやドキュメントが多く存在しているので初心者でもやる気があれば導入可能！
虎の穴ラボサイトでは主にここで活用
- トップの各コーナー（インタビュー、メディア記事、イベント）
- 採用情報ページ
- インタビューページ
- よくあるご質問
- 素材集
まとめ
今回はロゴ、コーポレートサイトのリニューアルのご紹介とサイト制作のお話をさせていただきました。
このリニューアルを機に、さらにたくさんの方に虎の穴ラボという会社を知っていただき、
虎の穴ラボが携わっているサービスについて知っていただく機会になればと思います。
（おまけ）虎の穴ラボデザインチームのご紹介
デザインTでは、とらのあな通販やFantiaといった大規模サービスのUI/UXデザインから、各種関連サービスのWebサービス/Webサイトのデザイン・実装まで幅広く携わっています。
インハウスデザイナーではありますが、多様なサービスに携わる機会があり退屈しない環境があります。
デザインという領域にとどまらず、企画や運用、WordPressを活用したサービス開発まで、広い裁量をもって仕事を行うことができます。
現在Webデザイナー職を募集しているので、少しでも興味をもっていただけたらカジュアル面談などからぜひご検討ください❤️
採用情報
虎の穴ラボでは一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。
toranoana-lab.co.jp
