はじめに

このたび、株式会社TOKIONさんが「WordPress」と「Shopify」が一体となったメディアをリリースするとのことで、共通かつ分離独立したユーザー管理基盤として「Auth0」の導入のお手伝いをしました。

株式会社TOKIONは、WWD JAPAN（https://www.wwdjapan.com/）を発行する株式会社INFASパブリケーションズと、アパレルブランドを展開する株式会社ジュンが合同で設立。同名のデジタルメディア「TOKION」を主体に、雑誌、EC、そして2020年7月に東京都渋谷区の「ミヤシタパーク（MIYASHITA PARK）」内にコンセプトショップ「TOKION the STORE」をオープンし、多角的に展開しています。デジタルメディアでは、メディアと EC が融合した「メディア・コマース」サービスを展開。コンテンツで商品の背景やストーリーを伝え、そこからECサイトへ遷移し商品を購入できるという新しい体験をユーザーに提供。日英バイリンガルサービスで、世界各国へ日本のカッティングエッジなカルチャーを届けています。

（左上から時計回りに）株式会社necco阿部、株式会社necco夏井、西岡由美（mimi）、株式会社TOKION 櫻井 雅弘、株式会社Serverless Operations 堀家 隆宏

今回はZoomインタビューにて、メディア制作に関わったみなさんに制作時のエピソードや導入後の成果などをお聞きしました。

【お話をうかがった方々】
・櫻井 雅弘 様（株式会社TOKION）デジタルディレクター、システム、サービス、マーケティングなどデジタル全般の責任者。INFASパブリケーションズでも、WWD JAPANのデジタル全般を担当していた。

・西岡 由美（mimi）様フリーランスデザイナー。ウェブデザインを中心に、自らコーディングも行う。

【ファシリテーター】
・阿部 文人（株式会社necco） ブランディングデザイン会社neccoのCEO・クリエイティブディレクター・デザインエンジニア。Serverless Operationsのロゴ制作やウェブサイト制作など、ブランディング全般を担当している。

【文章・編集】
・夏井 ひとみ（株式会社necco） 

導入の概要

【導入サイトURL】
TOKION様のメディア＆ECサイト（https://tokion.jp/）

【導入したサービス】
・Auth0
・画像最適化CDNの導入
・静的ホスティング環境構築

【導入前の課題】
新たにTOKIONメディアを立ち上げるにあたり、Auth0やAWS、WordPressが採用された。TOKION社内にはこの領域に詳しいメンバーがおらず、外部のパートナーによる支援が必要だった。

【導入・制作メンバー】
株式会社TOKION：コンテンツ制作、開発PM、Shopify開発株式会社Serverless Operations：Auth0導入、画像最適化CDN、静的ホスティング環境構築
西岡 由美（mimi）：サイトデザイン、WordPress開発
株式会社FRACTA ：Shopify開発

【Serverless Operationsが行なったこと】

■Auth0導入

WordPress及びShopify上での認証認可の仕組みとして、Auth0を導入。Auth0が公式で出しているWordPressのプラグインをベースにして開発を行った。

WordPressへのログイン時にShopify側にも同時にログインをする機能を主に開発。ShopifyのMultiPassログインという機能を使い、WordPressにログイン済みのユーザーでShopify側にも自動でログインを行うことで1つのサイトとしてログイン・ログアウトをできるようにした。

Auth0導入の成果
認証周りのカスタマイズが必要最低限で済み、セキュリティ的にも非常に強固な仕組みを作ることができた。

■画像最適化CDN構築 

webpフォーマットへの自動変換や画像サイズ変換の機能を有したCDNを構築。サイトのパフォーマンスの最適化を目的として開発を行った。webp形式の画像フォーマットに対応しているブラウザからのリクエストに対して画像のフォーマット変換を行う機能や、画像のwidthを表示サイズに最適にリサイズするという機能を備えている。変換処理自体はAWS Lambdaで実装を行い、その後ろにあるS3バケットに保存しつつリクエストに対するレスポンスを返すという仕組みを構築した。

画像最適化CDN構築の成果
サイトのコンセプト上、1ページに表示される画像の数はかなり多いが、その表示パフォーマンスとしては十分ストレスのない速度にすることができた。

■静的ホスティング環境構築

タイアップ案件用に静的なHTMLをホスティングする仕組みを構築。運用に合わせて以下のような機能をLambda@edgeで実装した。

• SFTPでユーザディレクトリごとにファイルをアップロード
• 表示確認用にディレクトリごとにBasic認証を追加できる
• 各ディレクトリのindex.htmlに自動でリライトされる機能

静的ホスティング環境構築の成果
制作会社とのコミュニケーションがスムーズになり、確認から公開へと進めていけるようになった。

メディア（WordPress）とコマース（Shopify）に、共通かつ分離独立してログインできる仕組みとして「Auth0」を選択。

TOKIONさんのメディアコマースをみなさんで制作されたそうですね。櫻井さん、まずはTOKIONについて詳しく教えていただけますか。

櫻井（以下、敬称略）：TOKIONというメディアは1996年、プリント（紙）の発行物として創刊しました。
90年代半ばの日本といえば、海外のカルチャーが大きくもてはやされる時代でした。そのなかで東京では、「裏原宿」など世界で勝負できる新しいカルチャーシーンが生まれたんですよね。
TOKIONはそういった「日本のカルチャーを世界に向けて発信していく」という志のもと創刊し、ロゴの変更など紆余曲折ありましたが2006年まで発行しました。

裏原ブーム、なつかしいですね。伝説的ブランドやショップが次々と登場した印象があります。今回のタイミングでデジタルとして復刊しようと思ったきっかけは何ですか？

櫻井：具体的なきっかけは、「宮下公園に店舗を構えられるかもしれない」という話が出てきたことですね。社会的背景にも後押しされました。このタイミングで紙（雑誌）とデジタルメディアを立ち上げるのはリスクが大きく、反対に、もっとも大きなチャンスでもあります。プレッシャーもありますが、何かに導かれたような気がして、復刊を決断しました。

デジタルメディアにコマースをつけたのはなぜですか？

櫻井：以前から、メディアが物を売ることについてどんな可能性があるかを考えていました。私が前に担当していたWWD JAPANは、業界誌という背景もあり、扱う情報が限られています。CMと報道との中立性をどう担保するかを考えると、ここで物を売ることに対して簡単には踏み切れませんでした。
コンテンツを作るというのは、物の魅力を理解して伝えることです。それにもっとも適しているのがTOKIONだと思ったんです。

Serverless Operationさんにお仕事を依頼されたきっかけは何でしたか？

櫻井：以前、WWD JAPANのときにServerless Operationsさんと一緒に仕事をしていました。そのときと同様のプロダクトを使ってTOKIONを作ることになり、今回も堀家さんにお願いすることにしました。

ECサイトにShopifyを選んだ理由を教えてください。

櫻井：会社としても事業としてもECサイトを開発するのは初めてだったので、「まずは出来のいいパッケージに乗っかっちゃおう！」という発想だったんです。WWD JAPANでBtoCの話やオムニコマースの特集を組んだこともあり、あまりカスタマイズをせずにそのまま使えるShopifyを選択しました。

そのときすでにAuth0を使うことが見えていたのでしょうか？

櫻井：メディア（WordPress）とコマース（Shopify）を一体となった体験として提供するために、共通かつ分離独立したユーザー管理基盤を求めていました。そのどちらにもログインできるものはAuth0だろう、という認識でしたね。以前、WWD JAPANで会員管理がロックされてやりにくい時期があったので、ひとつのサービスに依存するのは危ないという思いもありました。

今回、メディアとコマースを分離してみていかがですか？

櫻井：メディア側とコマース側で、これからやることを自由に選択できるのがいいですね。メディア側の接触目的だけで認証するにはベネフィットがなく、反対に、売ること主体でShopifyだけで始めてしまったら、メディア側で行き詰まってしまいます。今の時点で分離されて解放されているので、気持ちが軽いという感覚があります。

共創のメリットは、それぞれが専門家目線で的確な判断やアドバイスができること。

今回はTOKIONさんはじめ各分野のスペシャリストが、全員で一緒に手を動かしながら「共創」されたと伺っています。具体的にどんな風に進めていきましたか？

櫻井：今回のプロジェクトの要求をどのような形で実現するのか、開発要件の整理からご一緒しました。堀家さんとは従前のおつきあいから気心知れた中でしたので、ざっくばらんに相談するところからはじまり、スペシャリストとして対応・検討・開発をお願いするところまで、私たちのチームの弱い部分をサポートしていただきつつ、高い専門性を提供いただきました。

mimi（以下、敬称略）：基本的に私はフロント側でWordPress周りの実装を、Serverless OperationsさんはAuth0の連携部分をはじめとしたバックエンド側を、という形で実装を進めました。途中からデザインと実装を並行して進め、双方向からのフィードバックを反映していきました。

共創という進め方で、良かった部分はどのようなところですか？

櫻井：豊富な経験から、理想と現実のギャップというか、最初の一歩をどのように踏み出すべきか示唆いただけたことは大きかったと思います。雑誌としては復刊ですが、デジタルメディアとしては全く0からの立ち上げで、とかくやりたいことが膨らみ過ぎるものですが、その優先順位づけや、予算・スケジュールを見越した現実的な落とし込み部分でのご助言は大きかったと思います。

理想と現実のギャップとは、具体的にどのようなものでしたか？

櫻井：今回、開発に携わらない部署から「ひとつのコンテンツにお客さまからアクションがあったときに、ソーシャルメディアのようにTOPページの順番を変えたい」「コンテンツ側とブログ側で同じ検索結果を出したい」など、要望がいくつか出てきました。
それがたとえ難しい要望だったとしても、エンジニアはつい「やらなきゃ」というマインドになってしまうんですよね。
私も開発プロジェクトの経験が豊富なわけではないので、おぼろげながらに整理しようとしましたが、現実的に厳しいことが多々ありました。
そこを堀家さんに冷静にご意見いただき、「これは無理ですね」「この機能は後からつければいいですよ」と、正直にお話いただけたので大変助かりました。

堀家：要件を3行くらい読んだら、「できる・できない」がなんとなく判断できます。櫻井さんがおっしゃった「ソーシャルメディアの連動によって記事を並び替える」という機能をつくるには、この構成とこの構成を組み合わせて作るから○カ月かかるよな…と、だいたいわかるんです。
機能を追加することで多くの時間を要する場合、まずはTOKIONさんがやりたいことをシンプルに完成させて、あとから少しずつ肉付けしていく。それが作る側の最適解。
Serverless Operationsの立場から、そういった提案や線引きについてアドバイスさせていただきました。

デザイン制作ツールとして共同編集可能なFigmaを、フロント実装にはWordPressテーマのSnow Moykeyを採用し効率化。

次にデザインについてお伺いします。mimiさん、今回のどのようなツールや手法を軸に制作しましたか？

mimi：デザインツールはFigmaを導入させていただきました。今後外部に提供する予定のデザインレギュレーション資料も、Figmaのみで管理・更新しています。プロジェクト・タスク管理はBacklog、ソース管理はGitHub、CIもGitHub Actionsを使用しました。連絡・通知はSlackで、ドキュメントもBacklogのWikiを主に、開発に特化した内容はGitHubのWikiに整理しています。

私たちneccoもFigmaを使っていますが、複数人でリアルタイムで共同編集ができるので本当に便利ですよね。

mimi：そうなんですよね！Figmaの使用歴は2年ほどですが、受託で、クライアントさんにも手を動かしていただく形で、この規模のデザインワークに利用するのは今回が初めてでした。それに合わせてワークフローの考察・改良などを行えたことが個人的に大きな収穫でした。

mimiさんが作ったTOKIONさんのサイトデザイン、すばらしいですね。余白を大胆に使っていて、記事を読ませたいという思いが伝わってきます。デザインするうえで櫻井さん側からどんな要望がありましたか？

mimi：褒めていただきありがとうございます！これは私ひとりではなく、TOKIONチームのみなさんとのやりとりがあったからこそ、できあがったデザインです。そう言っていただけると恐縮してしまいます…。
「大胆」というキーワードは、まさに櫻井さんから最初にもらっていたんですよ。ほかにいただいたキーワードは、「クール」「エッジ」「写真を大きく」「縦スクロール」「ツイッター感」などでした。
また、「メディアは見るものではなく読む価値のあるもの」「アーカイブ性がある」「時間の経過で劣化しない」「いつ読んでも価値の落ちない記事」という熱い言葉もいただいていました。
それから、日本語だけでなく英語でも読ませる必要がありました。この先、言語を増やす可能性も高いというお話でしたので、それを制限しないデザインを考えました。難しかったです〜（笑）。

それは確かに難しいですね。僕も10言語くらいのサイトを作った経験がありますが、言語によって単語の長さが違うので、デザインがかなり変わってきますよね。言葉によって変化することのないデザインを考えられたんだと思います。

mimi：ありがとうございます、今でもうまくいってるか自信がないのですが…。写真もしっかり見せたいけれど「読ませる」ことが大事だったので、タイトルと大きい写真をどうつなげるか、櫻井さんたちと話し合いながら進めていきました。

櫻井さん、はじめてデザインの完成形を見た感想はいかがでしたか？完成形というよりも、Figmaでやりとりしながら制作過程を見ていましたか？

櫻井：そうですね。mimiさんから「こんな感じですか？」「こんなパターンだとどうですか？」などとご相談いただき、都度Figma上で確認しながら進めました。リアルタイムにデザイン進行に伴走させてもらう経験はこれまでなかったので、一緒に創り上げるという感覚がより濃く感じられました。

mimiさんはフロントの実装もされましたよね。Snow Monkeyを採用したとお伺いしましたが、今回感じたことはありますか？

mimi：実装スケジュールを考えると、イチからつくる余裕がなかったため、WordPressの既存テーマであるSnow Monkeyを採用しました。アップデート時にテーマ側で対応してくれるので、今後のアップデートがすごく楽になると思います。つねに最新状態を保てるのは大きなメリットですね。
また、WordPressの編集機能であるブロックエディタの利点をなるべく活用していただけるよう構成しました。TOKIONさん側からは、「既存のエディタより分かりやすく使いやすい」という声も既にいただいていてホッとしてます。

櫻井さん、ブロックエディタの感触はいかがでしたか？

櫻井：日常的な記事の登録は編集部がおこなっていますが、小一時間くらい説明して、あとはみんな勘で触ってできるようになりました。非常に使いやすいですね。WWDでは採用していないので、後ろめたい気持ちです（笑）。

専門家として意見をぶつけあいながらコミュニケーションをとり、お互いの距離を縮めることができたことが何よりの収穫。

最後に、みなさんで一緒に制作した感想を教えてください。

櫻井：先ほどもお話しましたが、Serverless Operationsさんもmimiさんも、その道の専門家。どちらも、自分の専門領域に対して正直であることに助けられました。
私は昔、ブランディング制作会社に所属していたことがあります。当時は顧客のニーズをなるべく実現しようと、内部に負担をかけてしまうことがありました。しかし今回、発注側・事業側に立ち、それはよくないことだと実感しました。

mimiさんはいかがですか？

mimi：堀家さんと一緒だと笑顔が絶えないんですよね。もちろんAuth0やサーバーレスの権威であることは間違いないのですが、人間的に安心して相談できるので、とてもやりやすかったです。
あら、堀家さん笑っていらっしゃいますが本当ですよ。素直に受け取ってください！

堀家さんすごく恥ずかしそうですね。

堀家：褒められると、つい裏があるんじゃないかと疑っちゃうんですよ（笑）。

mimi：先ほど櫻井さんもおっしゃっていましたが、私も制作側として、思っていても言えないことが多々ありました。でも先に堀家さんが先制パンチを打ってくれるので、「これは言っていいんだ！言った方がむしろいいのかも？」と教えられる場面が多くありました。
今回は特にユーザー目線を忘れないように気をつけたので、いろいろ生意気を言わせてもらっちゃいました。

堀家さんは「このチームで共創できてよかったな」と思ったことはどんなことでしょうか？

堀家：先ほど櫻井さんもおっしゃっていましたが、私もデザインに関して、アウトプットしか見たことがなかったんですよ。今回は制作過程を見ることができて楽しかったです。
櫻井さんとは、TOKIONに対するこだわりが強く感じられたので、距離がさらに縮まりました。それって、一緒に仕事していくうえで大変重要な部分なんです。ゼロからイチをつくるのは本当に大変で、それぞれコミュニケーションを取りながら進めていく必要があります。その土台がしっかりできました。

櫻井さん、これから実際に運用されていくと思いますが、どんな成果を見込んでいますか？

櫻井：今回の初期開発を経て、今後メディアコマースとして必要なサービスや機能が一貫したブランド体験の中で提供できるであろうことをとても楽しみにしています。
またまだ構想段階ではありますが、これから新たなシステムやサービスの展開を視野に入れています。その基盤として十分に活用させていただけるものをお作りいただけたと思います。

TOKIONさんの新たな展開、期待しています。みなさん、このたびはありがとうございました！