この記事は食べログアドベントカレンダー2025の17日目の記事です🎅🎄。

プロローグ：自己紹介

みなさま、ご機嫌いかがでしょうか。食べログ デザイン部のshiraishiwataruです。

私は主に食べログデザイン部に軸足を置いて活動しており、コーディングメインのデザイン職から海外版食べログの実装・デザイン担当を経て、現在はデザイン部にてタイアップ関連のディレクションをしております。

このカカクコムという会社に新卒で入社し、食べログに所属してから間もなく15年が経とうとしています。15年。赤ん坊が義務教育を終える年月です。

気づけば、社内で「Web業界初の新卒から終身雇用を目指す男」などという、冗談とも本気ともつかないジョークを飛ばす古参兵となってしまいました。

しかし、長く同じ場所にいるということは、それだけ「地層」を見続けてきたということ。泥臭い手作業の時代から、AIがコードを書く現代まで。この巨大なサービスの裏側で、一体どのような「地殻変動」が起きていたのか。

本日は、そんな昔語りにお付き合いいただきつつ、食べログのデザイナーが今、AIという新たな武器を手にし、どのような景色を見ようとしているのかをお話しできればと思います。しばし、お耳（お目？）を拝借。

第1章：2012年の大転換 〜「黄色いサイト」から「ツカエルウツワ」へ〜

喧騒の「黄色いサイト」

時計の針を2012年まで戻しましょう。当時の黄色い食べログをご記憶の方はいらっしゃいますでしょうか。もし覚えておられるなら、あなたは立派な古参ユーザー。ありがとうございます。

2011年 食べログ画面キャプチャ

当時のサイトデザインは、一言で言えば「賑やか」でした。ブランドカラーである黄色を全面に押し出し、所狭しと情報が詰め込まれている。

それはそれで活気があり、「Web 2.0」黎明期の熱量を感じさせるものではありましたが、食べログ内では新コンテンツの展開、店舗向けサービスの開始、そして掲載店舗数や口コミ件数の爆発的な増加により、インターフェイスの保守性・拡張性が課題になり始めました。

さらに、外の世界でも潮流の変化が起きていました。グラデーションを多用した「スキューモーフィズム」から、情報の整理を優先する「フラットデザイン」への転換期。新しいデザイントレンドの産声が、遠くから微かに聞こえ始めていたのです。

内なる爆発と、外からの波。 この二つの要因により、食べログはWebサイトのフルリニューアルという荒海へ乗り出すことになります。そして、そのデザイン更新の責任者として白羽の矢が立ったのが、当時入社して間もない、のちにデザイン部 部長となる”iさん”でした。

「ツカエルウツワ」という革命

”iさん”が掲げた新しいデザインコンセプト。それが「ツカエルウツワ（使える器）」です。

カカクコムのミッション、食べログが持つサービスコンセプトやビジョン、ユーザーからのイメージ調査の結果等をすり合わせて策定されたものです。

「食べログの主役は、料理画像・店舗情報・ユーザーの口コミをはじめとしたコンテンツである」「UIは、それらを邪魔せず、引き立てるための黒子（器）に徹するべき」

この思想のもと、黄色一色だった賑やかなデザインは、白を基調としたシンプルで洗練されたものへと刷新されることになりました。このデザインコンセプトとトンマナは、アップデートを繰り返されつつ、現在の食べログにも引き継がれています。

2012年 食べログ画面キャプチャ

デザインパーツも整理

もう一つの課題であったインターフェイスの拡張性・保守性を持たせるため、デザインの構造化も行いました。

• Visual Sample： ページレベル
• Layout: ページの骨組みを定義
• Asset: Partsの集合体 店舗カセットなど
• Parts: 最小要素
• Material: 上記に含まれない画像素材

という5階層へ分解し整理・再定義。このフルリニューアルを機に、今では当たり前になっている「デザインシステム」「コンポーネント指向」を導入しています。

デザインコンポーネントの思想については詳しい記事がたくさんあるのでこちらでは言及しませんが、この構造化、パーツ毎のデザイン定義の策定が礎となり、のちのCSS設計（命名規則）や、新規メンバーのオンボーディング効率化に劇的な効果をもたらしたことは言うまでもありません。

・・・

しかし。コンセプトがいかに美しくとも、それを実装するのは、泥まみれの「現場」でございます。

液体のりの中を歩くような日々

Web制作現場に目を向けてみると、2012年当時、SassやSCSSは日本ではまだあまり普及しておらず食べログでも導入されていませんでした。Sublime Textのようなモダンエディタも一般的ではなく、私たちを含む多くのコーダーは秀丸エディタやEclipse、vim等で格闘していました。

数千行、いや数万行にも及ぶ「素（ピュア）のHTML/CSS」を素手で書いていたわけです。変数は使えませんから、カラーコードを修正するとなれば、全ファイルを対象に「grepで置換」をかけ、置換漏れがあればデザインが崩れます。

サイトリニューアルの実装に要した期間は約1ヶ月半。今思えば、素晴らしい「ツカエルウツワ」というコンセプトを実現するための技術的な武器が、圧倒的に足りていませんでした。1か所修正してはブラウザで確認し、崩れを見つけてはまた修正する。その歩みは、まるで「液体のりの中を歩いている」かのようなもどかしいものでした。

自分の実力不足も当然あったと思いますが「もっと効率的に実装したい」「もっとインタラクションにこだわりたい」と思い描くイメージに、手が、ツールが、追いつきませんでした。

そして迎えたリニューアル当日の夜。すべてのページの目視確認を終え、達成感と同時に小さな違和感も私の胸に残りました。「作業内容に対して、時間と労力をかけすぎているのではないか？」「クリエイティブの本質ではない部分で、HPやMPを削りすぎていないか？」

この時の「もどかしさ」は、後の私、そして現在のチームが「AI」へと傾倒していく原動力となったのです。

第2章：進化しても受け継がれるDNA

ガラケーからスマホへ

2012年のPC版フルリニューアルという大仕事を終え、祝杯を挙げたのも束の間。WEB業界には次なる“ビッグウェーブ”が押し寄せていました。4Gサービスの開始と、スマートフォンの爆発的な普及です。

当時、スマホ対応していないサイトをiPhoneで見るとどうなるか、覚えている方もいらっしゃるでしょう。指でピンチアウトしなければ文字が読めないPCサイト。さらに、iPhoneはAdobe Flashをサポートしていませんでした。当時食べログのPC版トップページに使用されていた「全国地図のアニメーション」はAdobe Flashだったためスマートフォンで見るとリンク切れのような表示に。

これはいかん、ということで私たちはすぐさま、スマートフォン版（SP版）サイトの立ち上げに着手しました。

食べログでSP版サイトがリリースされたのは2012年の夏。PC版リニューアルから、立案を含めて2ヶ月半程度のスピード感でのリリースでした。

まずはレストラン検索機能のみに絞りスモールスタート、週2回というサイクルでデザイン・UIレビューと修正を繰り返し、矢継ぎ早に「マイページ」などの機能を追加しています。

明快なデザインコンセプトと、パーツレベルまで定義されたデザイン構造。これらのベースがあったおかげで、実装ルールの策定やアセット作成に時間を浪費することなく、「スマホという小さな画面で、いかに快適なUXを提供するか」という、本質的な議論にリソースを全振りしスピード感をもってUI開発に臨めました。

もっと甘い果実が欲しくなる

ここで少し、当時の「開発現場の裏側」についても補足させてください。実はこの2013年頃を境に、食べログデザイン部の武器（実装環境）も劇的な進化を遂げています。

それまでの「素手でCSSと殴り合う」原始的な戦い方に別れを告げ、SCSSとCompassが導入されました。さらに、BEMをベースにした命名規則を採用し、CSSをオブジェクト指向的に管理する運用がスタートしました。これにより、第1章で触れた「デザインのコンポーネント化」と「コードの実装」がかみ合い、システマチックに、かつスムーズにページをリリースまで持っていける体制が整ったのです。

「伝説の勇者」がいなくても戦える組織へ

スタートアップや急成長中のサービスには、得てして「伝説のデザイナー」や「伝説のエンジニア」といったスーパーマンが存在し、その個人の馬力でプロダクトを牽引しているケースがままあります。食べログにも「黎明期を支えた伝説のデザイナー」や「守護神と呼ばれる伝説のエンジニア」がいました。しかし、組織やサービスが拡大すれば、いつか「個人の力」だけでは限界が来ます。

2012年のあの日。 コンセプトをわかりやすい形で言語化し、デザインをシステム化した瞬間。それは、大げさに言うと、食べログデザイン部が、個人に依存するフェーズを終え、「仕組み」で戦う組織へと脱皮した瞬間でもあったのかな、と振り返って感じます。

第3章：15年目の大変革 〜AI EXCELLENCE〜

あの頃の「わくわく感」が帰ってきた

さて、ここからが本題です。「こんなことがあったね」で終わってしまってはただの昔話です。私が伝えたいのは、「あの頃の苦労が報われる時が来たんじゃない？」ということです。

かつて一つ一つのクラス名を置換したりして素晴らしいコンセプトを実現するために「液体のり」の中で もがいていた時間。月日が経ち、制作環境やツールは進化して、一定程度楽にはなったけど、そもそもコードを書くという作業を人間がやる必要があるのか、などとも感じ始めてもいました。そういった各フェーズで感じた「もどかしい時間」を、AIは吹き飛ばしてくれそうです。

デザイナーが「創る」ことに集中できる世界

枝葉の議論や初歩的な疑問が、独自に作り上げられてきたデザインシステムやAIによって解消され、デザイナーは純粋なクリエイションに時間を割きやすくなったと感じています。具体的に、現時点でデザイン部がAIをどう活用しているか。いくつか事例を紹介します。

事例1：AIによるUI/UXレビュー支援

デザインのレビューは重要な仕事の一つです。しかし、その時間が「ガイドラインと色が違う」「余白がおかしい」といった、いわば「間違い探し」に費やされることがありましたが、今は違います。

Figmaと連携したAIが基本的なガイドラインチェックを瞬時に行ってくれます。さらに、ページのターゲットや目的を伝えることで、そぐわない可能性のあるUIを指摘してくれます。「間違い探し」や「初歩のフィードバック」はAIの仕事。 よりハイコンテキストな「このUIで、ユーザーの心は動くか？」「体験として心地よいか？」といったレビューに集中できるようになりつつあります。

事例2：デザイナー × Cursor

エンジニアと同様、ほとんどのデザイナーがAI搭載のエディタ「Cursor」を使っています。これまで、「ここにリッチなアニメーションを入れたいけど、実装難易度が高そう」とか「この動きを試したいけど、JS作成をエンジニアに頼むのは気が引けるな…」と諦めていたアイデアも、今では、AIとペアコーディングをして形にしています。

事例3：ルーチン作業の軽減

現在私はディレクター職なので表計算ソフトを使うことが多く、スケジュール作成やリスト管理作業などをAIにマクロ化してもらい自動化するようにしています。地味ですが、チリつもです。浮いた時間は「もっとAIを活用できないか試行錯誤するため」に使っています。

エピローグ：また、祭囃子が聞こえてきた

最後に、少しだけ個人的な話をさせてください。

皆さんは、『ウェブ進化論』（梅田望夫 著）という本をご存知でしょうか。2006年に出版され、「ネット社会が地殻変動を起こし、リアルな世界もひっくり返るぞ」と予言した名著です。当時大学生だった私は、この本に感化され、HTMLもろくに分からないままホームページビルダーを使ってWebページを作り、世界に向けて公開しました。その時感じた、静かな興奮。「これから世界が変わるんだ」まるで大きなお祭りが始まる前夜のような、あのワクワク感を今でも覚えています。

あれから15年。日々の業務に追われ、いつしかあのワクワク感も「仕事」という日常の中に埋もれかけていましたが、今、AIの登場によって私は再びあの頃の祭囃子を耳にしています。

・・・

食べログデザイン部には、UIデザイン、ビジュアルデザイン、コーディング、ディレクションといった様々な業務があり、ジェネラリストからスペシャリストまで多才なメンバーが在籍しています。

全員が全ての業務をこなすのは難しいかもしれませんが、AIの活用によりその職能の壁は徐々に溶け始めています。コーディングが苦手なデザイナーも、絵が描けないディレクターも、AIの手を借りれば、自分の頭の中にあるイメージを形にできる。

ツールやスキルによる制限が減り、AIが無数の提案をしてくれる中、「何を作りたいか」「どう表現したいか」「どこまでこだわりたいか」・・といった、作り手の意思が大切な時代に突入しています。

「テクノロジーで外食体験を変える」「ユーザーのために最高の器を作る」私たちが15年間守り続けてきたこの軸を、これからはAIと共にピカピカに磨き上げていこうと思います。

もし一緒に、この大AI時代の最前線で最高の器作りに挑戦してみたいという方がいましたら、ぜひ採用サイトからご連絡ください！

明日は カスタマーサービス部の池田さんの「食べログカスタマーサービスの責任者が語る、食べログ「口コミ」20年の歴史」です。お楽しみに!

株式会社カカクコム すべての求人一覧

https://hrmos.co