FLATサイトをリニューアルしました

Category：

2015年から4年ぶりにFLATサイトをリニューアルしました。
コーポレートサイトリニューアルは、Webトレンドの変化とビジネスの転機の2つのタイミングがあると考えています。

Web制作トレンドの変化

Web制作会社として時代に適した自社サイトを作ることを大事にしてます。
Webサイトは流行が顕著で新しい手法が爆発的に流行ります。
7-8年経ったサイトは、どこかで見たことがある陳腐化されたデザインとなってしまいます。

古い時代のデバイスに適した解像度のサイトは、
今見ると小さく表示されてしまい、使いづらいものとなってしまっています😢

自社ビジネスの転機

制作会社ものさすさんが平均的なサイトリニューアル周期のデータを調査されたそうです。

BtoB 企業のコーポレートサイトのリニューアル周期についてヒアリングした結果は、「平均6.4年」という想像以上に長いものでした。
リニューアル周期は「平均6.4年」 BtoB 企業のコーポレートサイト事情| ものさす monosus

会社のステージやビジネス展開によっても、伝たい内容が変わってきます。

制作トレンドの変化とビジネスの変化が重なり、
投資コスト以上のリターンが見込める、リニューアルタイミングはおおよそ５年周期くらいと考えます。

今回のリニューアルのポイントは以下の3つです。

1.サービス・採用ページ、アニメーション追加

リニューアルのタイミングで新しくコンテンツを追加しました。
「エンジニアチームのFLAT」という
イメージををわかりやすくお伝えするため、カテゴリごとにイラストを作成し、
活き活きしたアニメーションを付けています。エンジニアポーズをキメてる姿🕺🏻

Web制作を受託したい：サービス紹介ページ追加

コーディング受託と並行して、提案から実装までのWeb制作をはじめました。
エンジニアとしての知見を活かして、投資コストに見合うサイト提案を行い、
大手企業の制作で積み重ねた高い実装技術を持つチームが制作をいたします。

人材を採用したい：ビジョン、採用ページ追加

FLATは小さくて強いチームを作りたく、仕事に対して感覚の合う仕事仲間と出会いたい。
FLATの仕事哲学を表したエンジニアの行動指針と採用ページを公開しました。

サイト公開でお問い合わせと採用に変化が起こるか、とても楽しみです！😳

2.デザインシステム作成

FLATサイトはXdのUIキット「Wires jp」をガッツリ使い、
デザイナ不在のチームでも長期運用ができるよう、デザインシステムを作成したいと考えました。
デザインはWires jpの開発メンバーでもあるハマダさんに依頼しました👨🏻‍💻

ディレクターがWires jpを使用してワイヤーフレームを作成し、デザイナーがそこに色や書体を整えてデザインデータとして育てていくことができます。
Wires jpを使い倒せばウェブデザインはもっと楽しい！ – Adobe Blog

ワイヤー制作がスピーディ

ワイヤー制作でもキットを活用して、スピーディに制作できました。
基本的なパーツは揃っているので組み合わせてページを作っていき、
必要な要素はオリジナルで作成しました。

デザインシステムを利用すれば
マークアップエンジニアでも美しいワイヤーが効率的に作れます！！🤗 楽しい

FLATサイトのXdデザイン一部

3.開発用WordPressテーマをバージョンUP

FLATサイトを制作しながら、モダン制作ワークフローに対応できる
スクラッチと組み合わせる前提のオリジナルWordPressテーマを作りました。

ここ数年でブラウザが進化し、CSSは使えるプロパティが増えました。
フルスクラッチのJavaScriptで実装していたリッチな表現がCSSのみで可能となりました。

JavaScriptはフレームワークが充実し、シームレスに遷移するSPA開発が盛んになり、
FLATでもサイトにVue.jsのUIを実装することが増えました。

リッチな演出が普通のサイトにあたりまえに実装される時代に合わせて、
制作のコストを減らしクオリティに集中するためのワークフローが詰まっています。

ご説明が長くなってしまいましたが、FLATリニューアルサイトが無事公開できました。
今後、サイトで使った技術をクライアントワークにも活かしていきたいです。

今回のサイトは以下メンバーで制作いたしました。
最高のサイトです、ありがとうございました😀

Design ハマダナヲミ
Illustration ヤマムラユウイチ（CYCLE）
WordPress サトウハルミ（FLAT）
Develop サトウハルミ（FLAT）
JavaScript 荻野晋徳（FLAT）
Animation きむらあつとし（FLAT/lopan.jp）
Director サトウハルミ（FLAT）
Thanks 中川隼人、後藤（FLAT）