B&Hデザイナーが語る・LIGの新ロゴ&Webサイト制作裏話

B&Hデザイナーが語る・LIGの新ロゴ&Webサイト制作裏話

Mako Saito

Mako Saito

LIGブログ編集長代理のまこりーぬです。

2022年6月、LIGはCI(コーポレート・アイデンティティ)を刷新し、ロゴやWebサイトを全面リニューアルしました。このプロジェクトはブランドコンサルティング会社のB&Hさんに伴走いただいています。

今回はB&Hのアートディレクター富田さん、デザイナー長尾さんに改めてお時間をいただき、ロゴ・Webサイトの制作過程や見どころを語っていただきました。デザイナー目線でのCIリニューアル裏話、ぜひご覧ください。

ico B&H Art Director / Designer 富田 良祐(TMY)さん2014年よりB&Hに参加。ブランドのビジュアル・デザインプランニングから制作までを担当。アートディレクション、UIデザイン、グラフィック、パッケージデザイン、プロダクトデザイン、フォトグラフィなどの分野で活動。
ico B&H Designer 長尾 佳歩(Kaho)さん1998年生まれ奈良県出身。大阪のデザイン会社にて数年働いた後、2020年にB&Hに参加。UIをメインにグラフィックデザインも行う。趣味はフィルムカメラ、レコード、映画。

「LIG、めちゃくちゃ変わったね」

まこりーぬ:2022年6月21日、ようやく新しいWebサイトをリリースできました。この日は新生LIGがスタートした日であり、1年にわたるB&Hさんとのプロジェクトが完了した日でもありますね。

リリース当日、「LIG、めちゃくちゃ変わったね」とSNS上でたくさんの反響をいただき、「あぁ、自分たちは変わったんだな」とハッとしました。デザインは半年以上前にできあがっていましたし、直近はデバッグ作業のために穴のあくほどサイトを見ていたので、変貌した自覚が不足していましたね(笑)。

TMY:我々が携わるプロジェクトは長期にわたるものが多いので、私も毎回同じような感覚ですよ(笑)。

まこりーぬ:リニューアル前後1ヶ月で数字を比較すると、PVは129%増加しました。新しくなったWebサイトを見にきてくださった方が多かったのはもちろんのこと、指名検索やダイレクト流入が一気に伸びたせいか、ブログ全体の検索順位も一時的に向上しています。

また、BtoBのお問い合わせも123%増えています。「DX with Global Team」と大きく掲げたことで、まだ数件ではありますがDX推進部門からのお問い合わせがありました。それにWeb制作等の既存事業もありがたいことにお問い合わせが増えています。おそらく「LIG」を想起してもらうきっかけを作れたからですね。

TMY:今回は大胆にCIを変更したこともあり、さまざまな影響が出るだろうと構えていましたが、PVもお問い合わせもポジティブな結果なようでなによりです。

まこりーぬ:このリニューアルは、自社だけではやり切れなかったと感じています。伴走してくださったB&Hさんには感謝の気持ちでいっぱいです。新しくなったロゴやWebサイトには伝えきれていない見どころがまだまだたくさんあるので、今日は改めてお話させてくださいね。

大胆、だけど丁寧な佇まい

まこりーぬ:まずはロゴについて。こちらはアートディレクターのTMYさんに作っていただきました。どのようにしてこのアウトプットにたどり着いたのか、過程をぜひ教えていただけますか。

TMY:ロゴの作り方って、クリエイターそれぞれで結構違うんですよね。私の場合は、制作過程の約半分をリサーチに費やします。なかでもクライアントが持っている “美意識” を理解するのに時間をかけますね。

美意識は、おもに「経営者が好きなブランド」から探っていきます。たとえばLIGさんの場合はPatagoniaやJeepが挙がっていました。これらブランドの背景を調べ上げていくと、LIGさんの好きなトーンが次第に見えてきます。

TMY:ちなみにロゴを作り出す前、ブランド戦略立案のためのワークショップのなかで、「LIGは競争戦略ではなく、生存戦略をとってきた」という話が出ていました。LIGさんにとって事業運営とは、いかにして他者に勝つかが重要な “スポーツ” ではなく、いかにして自己を生存させるかが重要な “アウトドア” に近いということです。

これはゴウさん(LIG創業者/現会長)が長野県野尻湖周辺の雄大な自然環境のなかで生まれ育ったことにも、無意識的にアウトドアブランドを好んでいることにも通じます。哲学とバックグラウンドと美意識が、すべてつながっているんですよね。

まこりーぬ:表面的なリサーチではなく、対象を根底から理解しようとする姿勢は、B&Hさんの強みの一つですね。

TMY:こうしたリサーチを踏まえつつ、いざロゴに落とし込むうえで重視した要素は2つです。1つは “アウトロー” 。自分たちのスタイルを成り立たせることで生存しようとする大胆さ、力強さを表現しようと考えました。

もう1つは、“誠実さ” 。「おもしろブログ」という印象とは裏腹に、LIGさんは「生存するために、自由であるために、仕事に対して厳しくあろう」という考えを根底に持っています。この誠実さとアウトローとミックスさせたい、という思いで試行錯誤しました。


TMY:ロゴの初案は、“自由を掴む姿” をモチーフに作っています。ただゴウさんからフィードバックをもらい、「頭で考えすぎて小難しくしてしまったな」と反省しましたね。グリップの意匠を用いて “掴む” を表現しようとした結果、線が細くなり、本来伝えたい大胆さが薄れてしまっていたんです。

そこで2回目の提案は、伝えたいことを絞りました。

TMY:線を極端に太くして、どっしりとした佇まいに。かつ細かなグリッドを用いて形作りました。そのおかげで、力強さがあるわりに丁寧な印象を与えられているのではないかと思います。

まこりーぬ:2回目の提案でほぼ確定しましたね。いままでもずっとこのロゴだったような気がするほど、すっかりLIGになじんでいると感じます。

TMY:そう思ってもらえて嬉しいですね。このロゴが与える印象は間違っていないと私自身確信していますし、長く使っていただけるものになったのではないかと思います。

根っこが見え隠れするバランス

まこりーぬ:WebサイトのヘッダーやOGPなど、要所要所でロゴが動くのも特徴的ですよね。この動くロゴはどのようにして生まれたのでしょうか。

TMY:ベンチマーク企業の1つに手書き風のロゴがあり、「我々も一度作ってみよう」と試してみたのが最初のきっかけでした。いざ手書きのロゴを並べてみると、制作会社らしいモノ作りの空気を漂わせながら、会社が変革していくさまを表現できるのではないかと感じましたね。

まこりーぬ:我々のルーツはWeb制作にありますし、いくらDX支援に舵を切ってもクリエイターが多数在籍する企業であることに変わりありません。この手書きロゴは、そんなLIGの手触り感とすごく合っているなと感じましたね。

TMY:それはよかったです。今回のプロジェクトはバランスが絶妙でしたよね。クリエイター色が強すぎるとコンサルティング会社としての信頼感が生まれませんし、アウトドアブランドのようなトーンに寄り過ぎると先進的なDX企業感が出ない。

まこりーぬ:かなり難しいさじ加減でしたが、B&Hさんには本当にうまく融合いただいたと感じています。おかげさまで、どこの馬の骨かもわからないDX支援会社ではなく、「LIGが長年培ってきたクリエイティブ力を活かしたDX支援会社」であることを表現できたのではないかと思います。

「おもしろさ」をアニメーションに込めて

まこりーぬ:続いて、Webサイトについてお伺いします。ものすごい量のデザインをパワフルにご担当いただいたのは、若手デザイナーのKahoさんですね。さっそくですが、注力したポイントをぜひ教えていただけますか?

Kaho:1つは、ブログページです。LIGブログは業界で有名ですし、ブログのUIデザインは私にとって初チャレンジだったので、プレッシャーも不安も大きかったですね。国内外の参考サイトを100以上は見漁りました

Kaho:なかでも見出し等のフォントのジャンプ率には気を遣いました。もともとあった装飾をすべてとっぱらい、シンプルで読みやすく、かつ美意識に合ったものを作ろうと試行錯誤しました。

まこりーぬ:ブログは影響範囲が大きく安易に改修できないという事情があったのですが、今回のリニューアルを機に一気に見直しができて編集部としても嬉しい限りです。ごちゃごちゃしていた見た目がスッキリしましたね。

Kaho:もう1つ注力したのは、アニメーションです。DX支援企業として先進的なイメージを持ってもらうためには、アニメーションのおもしろさが肝になると考えました。「自己帰属感(※)」をキーワードにたくさんの参考を引っ張ってきて、ゴウさんとディスカッションしながら詳細を詰めていきました。

※自己帰属感……PCやスマホのUIにおいて、利用者による操作と、画面上の対象物の動きが一致し、あたかも身体の延長のように感じる感覚。(コトバンクより

Kaho:コーディングを担当いただいたLIGのづやさんと外部パートナーの東倉さん(@oneslocus)には、かなりの数の検証をご一緒させていただきました。私自身アニメーションへの理解が深まる機会となり、とてもありがたかったです。

TMY:今回はWebGLを採用していることもあり、動作が重くならないようにも注意を払いました。このあたりも東倉さんに大きくサポートいただきましたね。

まこりーぬ:東倉さんは間違いなくスーパーエンジニアでしたね(涙)。度重なるアニメーションの検証、横から見ていてめちゃくちゃ大変そうでしたが、こだわり抜いていただいたおかげでとても気持ちのよいサイトになりました。

せっかくなので、Kahoさんの推しアニメーションもぜひ教えていただけますか?

Kaho:ローディング時のアニメーションはぜひ見ていただきたいですね。「LIFE IS GOOD」が縮まって「LIG」になる、という社名の由来を表現しました。絵コンテを書いたり、XDでプロトタイプを作ったりと、かなり詳細までこだわっています。

Kaho:あとは事業ページに遷移するときのアニメーションも見どころです。5つの事業それぞれにカラーを割り当てているのですが、その事業カラーを見てくれた人にどうやって印象づけようかと、色・文字の出方を何パターンも繰り返し検証しました。


まこりーぬ:それぞれユニークな動きをしますよね。アニメーションの有無でここまで完成度が変わるんだな、と感動しました。

クライアントとイーブンな関係を

まこりーぬ:たくさんの見どころをご紹介いただきありがとうございます。最後に、コーポレートブランディングに携わるうえでお二人が大事にしていることを教えていただけますか?

Kaho:ミーティング等できちんとコミュニケーションをとりながら、クライアントの美意識を取り入れてデザインしていくこと、ですね。納得いくCIを作るためには、一緒に議論して作っていくことが大事なんだな、とLIGさんのプロジェクトを通じて改めて感じました。

まこりーぬ:完全に強面なゴウさんに対しても終始臆せずコミュニケーションをとっていたKahoさん、カッコよかったです!

TMY:B&Hでは「自分がどう考えているか、決裁者に伝えられる人間にならないといけないよね」という考えのもと、入社1年ちょっとのKahoさんにもかなり多くのことを任せています。その甲斐あって多くのことが身についているのかもしれませんね。

まこりーぬ:すばらしい教育方針ですね。TMYさんが大事にしていることもぜひ教えていただけますか?

TMY:話して、聞いて、相手に共感しながら、一緒に考えていく。クライアントとそういう関係性を築きたいと思っています。なので形式上「提案する」と言いますが、提案している感覚はあまりないんですよね。

ブランドコンサルティング会社として、「こうあるべき」と押し出す強さは必要です。しかし傲慢に自分の意見を押しつけるのは違う。クライアントと我々の考えがイーブンであることが理想です。

まこりーぬ:なるほど。今回のプロジェクトは相手がB&Hさんだったからこそ、「丸投げ」でも「言いたい放題」でもなく、お互いにいい議論ができたのではないかと思います。プロ意識の高いみなさんと一緒にお仕事をさせてもらい、私自身も非常によい刺激を受けました。

これからは事業活動を通じて、B&Hさんが一緒に作ってくださったCIを浸透できるよう頑張りますね。本日は本当にありがとうございました!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

Mako Saito
Mako Saito LIGブログ編集長 / 人事部長 / 齊藤 麻子

1992年生まれ。2014年九州大学芸術工学部卒業後に採用コンサルティング会社へ新卒入社。法人営業から新規事業推進、マーケティング業務に従事したのち、2018年にLIGへ。2023年にLIGブログ編集長、2024年に人事部長に就任し、現在は自社のマーケティング・人事業務を担う。副業ではライターとして活動中。あだ名は「まこりーぬ」。著書『デジタルマーケの成果を最大化するWebライティング』(日本実業出版社)

このメンバーの記事をもっと読む
LIG CI Renewal Project 2022 | 6 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL