2025年10月、LIGの20周年を記念した特設サイトが公開されました。
3D球体のメインビジュアル、ワープで歴史を辿る演出、AIが生み出したBGM——。リリース後は社内外から反響をいただき、ギャラリーサイトへの掲載やクライアントからの声も届きました。
でもその裏側には、「大義を作る」というゼロからのスタート、CTO(のパソコン)が気づかせてくれた致命的な問題など、一筋縄ではいかなかった場面も……。
今回は、20周年記念サイトの制作を担ったディレクター・デザイナー・フロントエンドエンジニアの3人に、プロジェクトのはじまりからリリースまでの舞台裏を語ってもらいました!
|
|
LIG ディレクター リコグラフィックデザイナーとしてキャリアをスタート。月刊発行数30万部弱の地域情報誌のディレクターを兼務。その後Webディレクターに転身。制作会社に6年間従事し、業種を問わず数多くのディレクションを担当。2023年3月にLIGへ入社後はブランディング/CI/VIなどの上流工程を経験。コーポ、採用、メディアサイトなどの制作やサイト保守など幅広く担当。明るくて元気。2023年度LIG「元気で賞」受賞。👉️メンバーページ |
|---|
|
|
LIG デザイナー なつ2014年に東京の制作会社にてキャリアをスタート。Webサイトデザイン・フロントエンド・ディレクションの経験を積みながら、制作会社を2社経てLIGへジョイン。現在はデザイナーとして様々なサイトのUI設計・デザイン制作をおこなう。👉️メンバーページ |
|---|
|
|
LIG フロントエンドエンジニア いとしゅん大学卒業後、アパレル業界へ就職。その後SIerの経験を経て、Webコーダー兼デザイナーへ転身。Webアニメーションやグラフィカルな表現に情熱を注ぎ、デザインとコーディングのスキルを磨く。2023年にフロントエンドエンジニアとしてLIGに入社。アニメとマンガが好き。👉️メンバーページ |
|---|
きっかけは大山さんの一言「20周年だし、サイト作ろうか」
——そもそも、20周年記念サイトを作ろうとなったきっかけは何だったんですか?
——そこからすぐ動き出した?
——チームはどうやって組んだんですか?
——社内プロジェクトだと、リソース確保自体が難しそうですよね。
「大義」がない!社内プロジェクトならではの壁
——プロジェクトが動き出して、最初にぶつかった壁は何でしたか?
——クライアントワークとは違う種類の難しさがあったんですね。
▲プロジェクト企画書の一部
——工数やコスト感も、自分たちで決めないといけなかったんですか?
——意思決定のフローも手探りだったと聞きました。
「LIGらしさ」って何?コンセプトの迷走と発見
——大義が定まって、いよいよコンセプト作りに入っていったわけですね。
みんなの「らしさ」に寄り添いつつ、でもちゃんと引っ張っていけるだけの方向性は示さないといけない。そのバランスがすごく難しかったです。
——最終的にはどんな要素を軸にしたんですか?
▲「LIGらしさ」3つの柱
——そして最終的にこちらのコンセプトに決まったわけですね! 固まるまで、どれくらいかかりましたか?
▲最終的に決まったコンセプト
大きなダメ出しがあったわけじゃないんですけど、見せるたびに「ここの言い回しはちょっと違うかな」とか、少しずつ違う角度の意見が返ってくるので、ブラッシュアップの回数が多かった。最終的には全社の朝会で共有するところまでもっていきました。
——今振り返って、コンセプトの進め方で「こうすればよかった」と思うことはありますか?
デザインから実装へ。「チーム」で作り上げたビジュアル
——コンセプトが固まって、いよいよデザインに入っていったんですね。
——それは大きな違いでしたか?
——最初からこのビジュアルだったんですか?
▲初期のファンシーなデザイン
——「見たことあるもの」にはしたくなかった、という話もありましたよね。
——メインビジュアルの球体には、どんな意味が込められているんですか?
▲球体が歴史をたどるストーリーになっている
——メインビジュアル下のヒュ〜って過去にワープする演出のところですよね?
▲いとしゅんさん渾身のワープ表現
Three.jsと戦った日々。づやさんのパソコンが教えてくれたこと
——ここからは技術面の話を聞いていきたいです。あの3D表現は何を使って作っているんですか?
——それをあえて選んだ理由は?
——技術的にこだわったポイントがあれば教えてください。
——画像に差し替えてるっていうのは、どういうことなんですか?
▲複数の屈折処理がされているリッチバージョン
ただ、それがとにかく重くて。複数の屈折処理を同時に走らせるとスペックの低い端末ではサイトが止まるレベルだったので、途中で処理を追加して、端末によっては屈折した状態の球体をそのまま画像として書き出して、平面に貼り付けて立体風に回してるんです。
——(スペック低めの自PCを見ながら)え、これ画像なんですか? ぜんぜんわからない……
——他にもパフォーマンスのための工夫はあるんですか?
——この軽量化の裏には、づやさんのそれはそれは厳しいレビューがあったと聞きましたが……。
——CTOなのに(笑)。
——ここまで作って、詰んだと。
——またサイトを見る目が変わりますね……! でもリリース前に気づけてよかったのかも。づやさんのパソコンに感謝ですね(笑)。
もったいないから、みんなで作りたい
——サイトにBGMが入っていますが、あれはどういう経緯で?
——AIで作曲したんですか?
——イメージの指定というと?
ループ可能なインストゥルメンタル曲。コンセプトは「2010年代の宇宙叙事詩的な映画音楽の、現代的で技術的な再解釈」。 荘厳なパイプオルガンのようなシンセサイザー、宇宙の真空を思わせる深いドローン、そして広大で空気感のあるリバーブがサウンドの核となる。 曲は以下の構成で展開する: ・序盤 (0:00~): 静寂の中から、荘厳なオルガン風パッドと、低く響く宇宙的なドローン(ドゥォオ〜ン)だけで静かに始まる。 ・展開 (0:20~): 希望を感じさせるミニマルなピアノのメロディーと、薄く漂うエモーショナルなストリングス(ヒュォーーン)が加わる。 ・推進 (0:45~): 90BPM前後の、クリーンでミニマルなエレクトロニック・ビートが入り、穏やかな前進感を生み出す。 ・遊び心 (1:10~): シンセの断片を細かくカットアップした、機械的でリズミカルなスタッターエディット(トゥルルルトポポポポプププ)を隠し味として加える。壮大さを壊さないよう、洗練された音色で控えめに。 ・高揚 (1:35~): ドローンとストリングスのレイヤーを増やし、圧倒的なスケール感と品位のある高揚感を演出。ただし音数を増やしすぎず、空間を保つ。 ・ループへ: ビートとカットアップ要素が静かにフェードアウトし、パッドとドローンの残響が次のループへとシームレスに繋がる。 禁止事項: ボーカル、派手なEDMドロップ、トラップ風のハイハット、コミカルな効果音、急な展開や停止は含めないこと。
——ロゴのコンペも社内で実施したそうですね。あれはどういう意図で?
LIG20周年ロゴ制作裏話「Good」に込めた感謝の20年
リリースの瞬間。づやさんのねぎらいと見守り会
——いよいよリリース。づやさんの最終レビューはどうでしたか?
——プライベートに割り込む勢い(笑)。それくらい忙しい中で、レビューの反応はどうでしたか?
——大山さんのレビューもあったそうですね。どんな反応でした?
——そしてリリース当日。どんな気持ちでしたか?
▲リリースのお知らせについたSlackのスタンプ。社内からもたくさんのうれしい反応がありました!
——リリースを終えての率直な気持ちは?
——周年記念プロジェクトはまだ続いていると思うので、ぜひ今後の展開についても教えてください!
——ちなみに、この座談会の内容をさらに深掘りするイベントもあるとか?
「やりたい」と「できる」はどうすり合わせる?LIG周年サイト制作から考える連携力|3/25(水)20時〜@オンライン
さいごに
社内プロジェクトの舞台裏には、クライアントワークとはまた違うリアルがありました。大義がないところからのスタート、見えないコスト感との戦い、「LIGらしさ」をめぐる迷走——。それでも3人が口を揃えて言っていたのは、「このチームだったからやれた」ということ。
妥協せず意見を言い合えたこと、熱量が全員同じだったこと、そしてそれぞれの専門性を信頼し合っていたこと。完成したサイトの裏側には、そんなチームの姿がありました。
周年サイトをあらためて眺めてみると、球体ひとつ、ワープ演出ひとつに込められた意味が見えてきて、きっと少し違った体験になるはずです。
20周年サイト記念「夜のお茶会」開催します!
この座談会の内容をさらに深掘りするオンラインイベント「夜のお茶会」を3月25日(水)に開催します。リコさん、なつさん、いとしゅんさんが登壇者となって、記事では話せなかった裏話もたくさんお話しいただく予定です! 仕事終わりにふらっと、ぜひご参加ください!
「やりたい」と「できる」はどうすり合わせる?LIG周年サイト制作から考える連携力|3/25(水)20時〜@オンライン