「ノーコードはここまで来た」。話題を呼んだ、鯛のないたい焼き屋「OYOGE」公式サイトを徹底解剖！

犬飼さん、本日はよろしくお願いします。早速、自己紹介をお願いします。

よろしくお願いします。デザイナーの犬飼 崇（いぬかい たかし）といいます。

元々はグラフィックからスタートし、途中からWebデザインもやるようになりました。STUDIOを本格的に使うようになったのは、2〜3年前のワークショップに参加したのがきっかけです。

これまでに制作した代表的なSTUDIOサイトとしては、以下があります。

m-paperflower.studio.site
フラワークリエイションチーム「mimosa」が手がけるPAPER FLOWERのサイト

ishigami.studio.site
STUDIO DESIGN AWARD 2020にもノミネートされた、プロダクトデザイナー・石上大輔さんのポートフォリオサイト

Twitterでの飛び込み営業から始まったプロジェクト

「OYOGE」のサイトは、どんな経緯で制作されたのですか？

Webを本格的に始めてから、企業のコーポレートサイトやサービスサイトを制作する機会がほとんどで、仕事の幅を実店舗のサイトにも広げたいと思い、SNSで飛び込み営業を始めたのがきっかけです。

こちらからDMでお声がけするんですが、突然送ってもお返事がなかったり、「今ちょっと考えてないです」というお断りがほとんどな中、

もともとSNSで気になっていたOYOGEさんに連絡を入れたらすぐに「いいですよ、会いましょう」と返事が返ってきたんです。

SNSから始まったご縁だったんですね！

そうなんですよ。ところが、会って色々話してみると、そもそもオーナーの渡辺さんはその時、Webサイトの必要性を特に感じておらず、コストをかけた分のリターンがないだろうと考えていて。

「せっかくデザイナーですと連絡をくれた方が気になるし、会って損なことはないはずだから、こういう時は会うようにしている」とのことで、そのままお互いデザインの話で盛り上がり、その日は「じゃあ何か機会があれば連絡ください」と別れました。

するとなんと翌日に電話がかかってきて、「やっぱりWebサイトを作ろうと思います！」とのことで。面白いですよね。

その心変わりは、なかなか珍しいパターンに感じますね！犬飼さんとのトークが心を動かしたのでしょうか。

いやあ、こんな体験僕もなかなかないです。嬉しい驚きでした。

そうやって始まったのが、今回のOYOGE公式サイト制作プロジェクトです。

特徴的なロゴやイラスト、店舗設計を含むVI（ビジュアルアイデンティティ）周りは既に完成されていて、元にすべきイメージ部分はできあがった状態でのスタートでした。

今回は写真が重要になると渡辺さんと話し、撮影はbird and insectさんにお願いしました。僕は既存のVIとbirdさんの写真をもとに、Webサイトの企画から実装までを担当した形です。

みんなの中にある「OYOGEらしさ」の表現。サイト作りで大切にしていたこと

制作を進める中で一番心掛けたのが、「OYOGEらしさ」を最大限に活かすことです。

というのも、このOYOGEの世界観をプロデュースしたオーナーの渡辺さんは、いろいろな分野に対して鋭い感性を持った方なんです。

打ち合わせを重ねる中で、デザインに関しても高い目線を持っている方だと実感する場面が多く、「この人の思いを活かせば、間違いなくいいものができる」と確信したので、今世の中が感じている「OYOGEらしさ」をいかに素直にWebサイトに落とし込むかに集中してデザインすることができました。

実際の制作スケジュールはどんなものだったんでしょうか？

着手が1月の末頃で、設計、素材撮影、実装等を経て4月の上旬にサイトを公開。 その間渡辺さんと定期的にZoomで話し、一緒にサイトを作り上げていきました。

まずはワイヤーフレームの案をベースに、どんなボリューム感でOYOGEのストーリーを伝えていくかを検討するところからスタート。ある程度固まったらデザインカンプをAdobe XDに起こして、それからSTUDIOに実装するという流れですね。

デザインは他のツールで完成させてから、STUDIOで実装というフローをとられるんですね。

そのつもりでいるんですが、実際にSTUDIOに入れると、どんどんデザインもその場で変わっていきますね。

ブラウザで表示してスクロールすると、受ける印象って全然変わりますし、レスポンシブ対応しようとしたときにより適切な構造が見えてきたりもするので、良いサイトにするために、動かないデザインカンプに捉われすぎないよう意識しています。

アニメーションの構造と発想法

今回のサイトは、印象的なアニメーションが随所に仕込まれていますが、そういった「動き」の部分はどの時点で発想されるんでしょうか。

僕の場合、一旦動きは想定せずにデザインを進め、アニメーションに関しては、組み途中で思いつきで試したものをそのまま採用したり、一通りレイアウトを組み終えてから動きをつけていきます。

今回のサイトのアニメーションも、ほとんどが最初のデザイン段階ではなかったものです。

ページ表示時のアニメーションは、とても印象的でした。
トップページの動きはどうやって作っているんですか？

トップページ訪問時は、

1. 背面に固定した飾りレイヤーにハッシュタグのグラフィックが出現

2. 飾りレイヤーが消える（透明度0に）

3. 最後にトップページのデザインが出現（透明度１に）

という動きが、順番に全部で5秒ほどかけて起こるように設定しています。

親子ボックスそれぞれに現れる→消える役割を持たせ、２種類の異なるグラフィックが順番に表示される効果を実現

こういった長めのアニメーションには欠点もあって、ページ遷移して戻ってくるときも、表示に同じだけの時間がかかってしまうんですよね。

結局インパクトを重視してアニメーションを残しましたが、この辺りの体験設計には頭を悩ませました。

他のページに移動するときの動きもとても素敵でした！

そうですね、「OYOGE's story」ページ（/about）を表示する際のアニメーションも、ボックスの重なりを工夫して奥行きを演出しています。

赤い塗りを設定したボックスの子ボックスとして画像、孫ボックスとしてタイトルのテキストボックスを設置し、それぞれが時間差で現れるよう、遅延設定をずらしています。

親子ボックス間で表示に時間差をつけることで、奥行きを感じるアニメーションに

動画の入れ方にも一工夫こめて

OYOGE 's storyページでは、シンプルな塗りの背景と動画背景の両方が楽しめる表現も、とてもうまく機能していますね。

実は、反響をいただく中でもあの動画に触れる人があんまりいなかったので、そんなに見られてないのかなと思ってたんですよ。

タネはすごく単純で、白くなったり、映像になったりする動画を背景に固定して自動・ループ再生しているだけなんですけど、面白い効果ですよね。

最初は、スクロールに連動して背景が切り替わっているように錯覚しました。今までにない工夫ですね！

当初、この切り替えアイデアはファーストビューに使う予定だったんです。OYOGEのトレードマークである、白地にオレンジのたい焼きイラストのグラフィックを印象付けたかったんですけど、動画も使いたかったんですよね。

この二つは普通は両立しないんですけど、それをどう実現するかというところで、イラストを眺めているといきなり映像が出てくる作りにできたら面白いなと。

お気に入りのアイデアだったので、塗り/映像切り替えのアイデアをダミー動画で再現してプレゼンし、急遽映像も撮影することになりました。

とても面白い発想だと思います！映像自体も、OYOGEのイメージにぴったりでとても素敵ですよね！

世界観出てますよね！ところが、ファーストビューを「ピコピコ動くイラスト（現行のもの）」と「背景切り替え動画」どっちにするかという最終判断のところで、スタッフの女の子たちがみんな「ピコピコの方がいい」と言うんです。で、これはレディーファーストだということで今のデザインに落ち着きまして（笑）

でもいい動画なのでどこかに使いたくて、現在の「/about」ページに持って行ったという経緯がありました。
結果動線設計としてもうまくまとまったので、よかったかなと思っています。

「デザイン力」の研鑽の時間を、STUDIOが作ってくれる

でもごめんなさいね、正直、今回すごく「ここまでできるのか」という反応をいただいているんですけれども、「いや普通にできるだろ」と思っちゃうところがあるんですよね。

これは全く僕が皆さんに比べてすごくできる奴だという話ではなくて、実際、使ってる技術って標準的なものばかりなわけですよ。

ここまで質の高い工夫をたくさん盛り込むやり方は、誰でもできるものではないと思いますが…！

とはいっても、コードを書いて複雑なことをしているわけではなくて、本当に小さい工夫が積み重なって、複雑に見えているだけなんですよね。

ここまで表現ができるのは、ストレスなく、自由度高く、やりたいと思った工夫を形にできるSTUDIOというツールのポテンシャルのおかげだと感じています。

本当、STUDIO、知人にも結構薦めたりしているんですよ。

おすすめまでありがとうございます！どんどんSTUDIOでデザインが民主化されていくと素敵ですよね。

あ、でも、STUDIOってなんでもできるだけに、「STUDIOができる＝デザインができる」ではないなと思ってるんですよ僕。

なので、少し偉そうな言い方になっちゃうかもしれないけど、コーディングや周辺技術の勉強に充ててた時間をSTUDIOが短縮してくれた分、みなさんもっと色々なデザインを試して、クリエイティビティの部分を磨くことに時間を使ってみて欲しいなって思いますね。

そしたら多分、これからもっと色んな面白いものが出てくると思うので、それをとても楽しみにしています。

なるほど。とても説得力があります！

あと思うのは、もっと色んな業界のデザイナーにSTUDIOを使ってほしいですね。紙もののグラフィックやインダストリアル、プロダクトを専門にやってきた方達とか。

これだけSTUDIOが技術面の敷居を下げてくれたのであれば、多分領域をまたいで参入できちゃうと思うので、思いも寄らない視点から、Webに新しい良いものをどんどん生み出してくれるようになったら面白いなと思っています。

大好きな「パティシエ」に寄り添うデザイナーに

最後に、今後犬飼さんはどういった活動を展開されていくのでしょうか？

もちろん今まで通りウェブデザイン・制作も続けていくのですが、一つ野望があるとすれば、僕、ケーキが大好きで、昔からパティスリーのサイトを作りたいんですよね。
パティシエという人たちは僕にとってスーパースターで、彼らに会って、想いをヒアリングし、ウェブサイト制作という形で関わりを持つことが夢なんです。

でも、飛び込み営業の話でもあった通り、なかなかタイミングやニーズが合う方と出会えていないのが現状で。

なので、この記事がもしウェブサイト立ち上げを検討しているパティスリーの関係者さんの目に留まったら、是非Twitter DMででもご連絡をお待ちしています。

素敵な野望ですね！想いをかっこよく可視化してくれるデザインパートナーをお探しのパティスリー関係者様、ぜひよろしくお願いします！
犬飼さん、今回は色々と貴重なお話をお聞かせいただき、本当にありがとうございました！

● OYOGE

六本木ミッドタウン前に店舗を構える、「鯛のないたい焼き屋」。
定番ラインナップは、イワシ、アジ、アサリの粒あんクリームチーズフレーバー！
住　所：東京都港区六本木7-13-10 TOMASビル1階102号室
営業日：月曜日〜日曜日10:30〜23:00