見出し画像

【プロジェクト裏話】 welzo コーポレートサイトリニューアル

PANORAMA_Inc.

こんにちは！
PANORAMA Inc. 広報担当です。
今回は株式会社welzo様のコーポレートサイトリニューアルプロジェクトについてのお話です。

Works Information

◎Client

株式会社welzo

◎Website

https://www.welzo.co.jp/

◎Date

2023.1.5

◎Job

Web Design / Development

◎Credit

PRODUCE：Takumitsu Omata
DIRECTION：Hiroki Kaburagi
ART DIRECTION & MOVIE：POOL inc.(Agency)
DESIGN：Nagisa Kubo / Shogo Yamada
DEVELOPMENT：Yusuke Okui / Ryuji Yoshida / Satoshi Teraoka

welzo様についてのご紹介

welzo様は本拠地である九州を中心に事業展開している、農業資材や家庭園芸用品、肥料や飼料の原料などを扱う専門商社です。 食・農業を通して、持続可能な社会と人々の暮しを豊かにする商品やサービスを提供しています。 また、社内外のビジネスパートナーと共創し、ITやAIの技術を活用しながら、日本が直面する課題にも積極的に取り組んでいます。

案件のはじまり

welzo様は、もともとは「ニチリウ永瀬」という社名でしたが、 創業 100 年を迎えたことによる全社を挙げたリブランディングを進める一環で、 コーポレートサイトのリニューアルプロジェクトが始まりました。

「welzo」への社名変更も今年の1月1日に実施され、 そちらに合わせてリニューアルしたコーポレートサイトもローンチとなりました。
なお、弊社が参画した経緯としましては、昨年春頃に代理店であるPOOL様からご紹介をいただいいたことがきっかけです。POOL様にはアートディレクションと動画制作で入っていただき、welzo様、POOL様、弊社と3社で力を合わせながらプロジェクトを進めていきました。

企画・構成

まず本プロジェクトを始めるにあたりまして、当時のコーポレートサイト（ニチリウ永瀬の時代）を分析し、課題の抽出を行いました。 その結果、以下の課題が見受けられました。

1.デザイン:年商300億円の企業規模が伝わっていない
2.コンテンツ:何をしている企業か伝わっていない
3.サイト幅:古い会社に見える

こちらの課題を踏まえ、改善策としては以下のような方針を策定しました。

  • 大手企業のように情報を整理する。 商社の見せ方を念頭に置きつつも、イノベーションしていく感じも表現したい。

  • 企業のスケール感が伝わるように、事業の規模感が分かる数字は目立つように見せる。

  • 採用情報は若年層を考慮して、見せ方を他コンテンツとはガラッと変える。

これらをもとに、サイト全体の方針を設計していき、 グローバルな企業であることや規模感の大きさをユーザーに伝わるようにすることで、 今よりもwelzo様の知名度を向上させて、新規取引先の拡大や新規人材の獲得にも繋げていくことをゴールに設定しました。

デザイン

まず初めに

デザインに入る前に、welzo様がどういった企業か、どのような色を持っているか、どのような「らしさ」があるのかなどを調査しました。
welzo様からいただいていた以下のキーワードやご意見についても、なぜそれらなのかということを深掘りしていきました。

  • グローバル感・規模感

  • イノベーション

  • 人の温かみ

  • 国内大手商社のTOPの見せ方

調査した上で、改めてキーワードに落とし込み、今回のリニューアルサイトのコンセプトを策定していきました。
キーワードとコンセプトは以下です。

コンセプトを元に、「普遍的でスタンダードなコーポレート感を出していく」と方針を定め、welzo様の「らしさ」をどのようにデザインに落とし込んでいくかを念頭に置きながら、リファレンスサイトを集めてご提案しました。

3案のデザインについて

コンセプトとリファレンスサイトから、方向性についてwelzo様・POOL様と認識を揃えた上で、以下の3案のデザインを制作しました。

左からA案、A’案、B案

A案 -
普遍的でスタンダードなコーポレートサイトのデザインでありながら、関連するシーンを大胆に見せ、ファーストインプレッションで印象づける案。

A'案 -
A案ベースではあるが、キービジュアルの方向性が違う案。

B案 -
芽から花へ成長する様を3Dで表現。
革命と発展性を3Dで表現し、新しい技術を用いることでwelzo様のスケール感も連想させる案。

welzo様からは、B案も好評ではありましたが、企業の目指す方向性を考慮すると「A案が良い」と仰っていただき、本サイトのデザインの方向性が決まりました。

デザインのポイント

全体的には余白を大きく取ることで情報を分かりやすくし、シンプルさや安心感などの印象を与えています。

また、ちょっとした遊び心として、スクロールなどに使用している矢印は、植物の葉と茎をモチーフに有機的な印象になるよう作成しています。

そして、上記の角丸の“加減”についても、welzo様に相応しい角丸はどのくらいかを何度もPOOL様と確認して調整・制作しました。
こういった細かいところにもこだわっています。


TOPページを作る上で悩んだ点としては、SDGsのセクションでした。TOPページ全体をデザインしたところでこのセクションを追加されたいというご要望があり、それまでのデザインに馴染ませる方法なども試した上で、思いきり他と違うトーンにしようと考えました。
シンプルながらキーワードを立たせたことで、SDGsへの取り組みをユーザーに印象づけています。

SPでは、下部固定のメニューを採用しました。
意図としては、親指が届き片手で操作しやすいこと、アイコンと日本語を入れることでWebに慣れない方にも分かりやすくなることを狙いとしてデザインしています。

実装者との連携

今回こだわったのが、スプラッシュ演出やTOPのグラデーションです。

実装者には、どんなグラデーションにしたいか、Apple MUSICアプリにあるグラデーションの参考を送った上で色を指定しお願いしました。
初見からとても良い印象だったのですが、何度か細かいFBをし、やりとりしていくうちにどんどん良くなっていきました。

スプラッシュ演出は動画でイメージを作ることもありますが、今回は絵コンテで作成しました。
イージングや細かいつなぎの部分などは実装者にお任せしたのですが、初見の時点で完璧すぎて何も言うことがないくらいの完成度でした。

デザインまとめ

制作規模が大きかったため、チーム全体で密にコミュニケーションを取って進めました。そのおかげで連帯感が増し、チームみんなが高いクオリティにしようと結束している姿を感じました。その姿を見て普遍的なデザインでも今まで以上に良い物にしたいと次々と欲が出てきた結果、細部までこだわりを反映したコーポレートサイトを制作することができました。

実装

実装フェーズでは、構築開始前に少し時間があったので、アニメーションのプロトタイプを作成し、デザイナーに確認してもらい方向性を決めつつ、構築が始まったらスムーズに作業を行なっていけるようにしました。

以下が作成したプロトタイプの動画です。ぜひご覧ください。


工夫したポイント

コーポレートサイトということで、WebGLなどのアニメーションがサイトを重くしてはいけない、アニメーションに注目してしまうことで情報が入ってこないサイトにはしたくないと思い、軽さやさりげなさを意識して実装しました。

TOPページのキービジュアルのアニメーションは、現在の画像と次の画像をmixさせてアニメーションさせていますが、canvasの解像度を見た目に変化がないくらいまで下げ、フレームレートも違和感がないくらいに落とすことで負荷を軽くしています。 また、アニメーションしていないときはレンダリングも止めています。

TOPページのAbout Usセクションのグラデーションは、色々試すうちに解像度を思いきり下げても見た目が変わらないことに気がついたので、windowサイズの10分の1くらいのサイズで描画しています。フレームレートもキービジュアルと同様に下げています。

用いた技術

スプラッシュアニメーションはSVGのpathを変形させるために、flubber2というライブラリを使用しました。
別のサイトでLottieを使用した経験がありますが、動作が重かった印象があり、別のライブラリを探していました。
もともとd3.jsのSVGモーフィングでパスが反転したり、アニメーションがジャンプしてしまうのが気に入らず、それを解決するものとして作られたようです。
使い方がシンプルで、d3.jsを使わずに、gsapと組み合わせたりして使うことができるため、今後のサイト制作でも使用していきたいと考えています。

構築の進め方

今回のサイトは37ページほどあり（英語も含めると64ページ）、比較的規模が大きいものでした。
構築期間が短めのスケジュールだったため、多言語化の仕組みづくりや処理の共通化など、効率よく進める方法をいろいろと模索しました。
 3名のエンジニアで作業を分担し、終盤は余裕のある人からブラッシュアップ作業を行なっていくなどをして、完成度を高めていきました。

公開

そうして、2023年1月に本サイトはローンチしました。
ローンチしてしばらくしてから、welzo様のもとに、ある会社から「ステキなサイトですね！うちもそうしたいです」というお声が届いたと伺い、弊社としても大変嬉しく思います。

また、事業関連のお問い合わせ件数は2023年1月〜6月で約10倍以上に増え、サイトの閲覧者数は約3倍以上に増えたそうで、数値としてもリニューアルの効果を感じていただくことができました。（前年同期間と比較）

その他、デザインギャラリーにも複数掲載いただきました。
弊社で確認できているものを以下にご紹介します。
https://muuuuu.org/
https://webgl.souhonzan.org/
https://io3000.com/

welzo様・POOL様からのコメント

＜welzo様＞
弊社の社名変更に併せ、リブランディングの観点からHPを改修しました。
我々welzoの「新しい種を植えよう」というブランドコンセプトにマッチした仕上がりとなり、社内外で好評でした。
営業取引や採用募集にもつながり効果を実感しています。

＜POOL様＞
PANORAMAチームはデザイン性の高さ、そして提案力が優れており、welzo様の案件もクリエイティブチームの想像を越えるサイトが完成しました。
またデザイン力だけでなく、進行管理や予算管理などプロジェクトのマネジメント力も優れたスタッフが多く、いつも安心して、いろいろな案件を任せられるので助かってます。ありがとうございました！


いつもPANORAMA note記事をお読みいただき、ありがとうございます。

PANORAMAは、最適なコミュニケーションを提案・創造できるクリエイティブカンパニーとして世の中に本物を伝える存在でありたいと考えております。

【お仕事のご相談やご依頼】

お仕事のご相談、料金の見積もり依頼などお気軽にお問い合わせください。
https://pnrm.co.jp/contact/

【パートナー募集】

一緒に働いていただけるメンバー、パートナーを募集しております。
https://pnrm.co.jp/contact/
【リクルート】
世の中の様々なトレンドが好きで、本質的にクリエイティブと向き合い、共に成長し合えるメンバーを募集しております。
https://pnrm.co.jp/recruit/

この記事が気に入ったらサポートをしてみませんか？