今、あらためてウェブサイトとは

23/07/07

福岡でウェブサイトの制作をされているBRICKHOUSE代表のヤッキーさんこと、焼山さん。私がウェブの世界へ興味を持ちはじめたころに、色々と温かくサポートしていただいたスーパー師匠です。ウェブの世界とは奥深く、シンプルに見えて全くそうではないと気づいたときには先は長いと痛感するばかりですが、そんなときに聞く焼山さんのお話は、いつも気づきがあってハッとさせられることばかり。いつか改めて取材をさせていただきたいという念願がようやく叶って、2年前に竣工したばかりの新築オフィスにおじゃましました。後半は、ウェブ講習会となってしまいましたが…。今回も、たくさんの気づきと発見があるお話でした。

プロジェクト詳細はこちら

 

-こちらのオフィス構想は、いつごろからあったのですか?

焼山(ヤッキー)さん:おぼろげには、たぶん6~7年前ですかね。

-そのときはどんなことを考えられていたのですか?

焼山(ヤッキー)さん:泊まれるオフィスをつくりたいというのはありました。遠方から来られたお客さんや友人が泊まれる場所があったらいいなと。あとは、まぁ、一生作業したいと思っているので、篭れる洞窟感も求めていたかもです。

-中尾さんとの出会いは、このプロジェクトがきっかけでしたっけ?

焼山(ヤッキー)さん:そうですね。土地が決まったタイミングで友人に相談したら中尾くんを紹介してくれて、っていうのがはじまりだったかな。ただ、そこからはわりとゆっくり進行して2年くらいかけて作ったから、完成したのは2021年3月末です。この春でちょうど3年目を迎えます。

-こだわりポイントを教えてください。

焼山(ヤッキー)さん:僕の薄い研究結果として「建築は天井を高くしとけばどうにかなる!?」というのがありまして(笑)なので、ポイントは「天井を高くした & 漆喰で白い洞窟を作った」ですかね。あ、そもそもここは、某有名ハウスメーカーさんの建築条件付きの土地だったんです。ハウスメーカーさんも優しくて、スタジオモブさん&Achtトシさんとのチーム設計施工を快く引き受けてくださったんですよね。おかげさまで、最先端の耐震機能を有するモダンな木造建築が誕生しました。

天井を上げる方法としては、友人からのアドバイスで「基礎は下げられる」ことを聞いていましたのでギリギリまで下げたのですが、そうすることで収納も確保できたし、ビルトインのエアコンも導入することができました。2階は中尾くんにもアイデアを出してもらって、高さに制限があるなかでも天井が高くなるように、寺子屋をイメージした格子の梁を出してもらって、完成しました。

-1階と2階で雰囲気に違いがあるのも面白いですね。階段もまた素敵で。

スタジオモブ中尾:正面に見えている部分はオリジナルで制作させていただきました。1つ1つの要素がプロダクトとしての存在感をもち、塊として散りばめることで統一感をつくっています。その延長上に、家具・アート・植栽・照明が作品として在るという考え方です。

焼山(ヤッキー)さん:全面漆喰にしたのもよかったですね。匂いを吸収したり調湿したりという機能面のメリットもありますし、何よりもこの空気感は、壁紙では実現できなかったと思います。漆喰の施工については田川産業さんが尽力してくださって、八方ちらしという技法らしいのですが、一見フラットに見えるけど少し斜めから見ると光の陰影を感じられると思います。

焼山(ヤッキー)さん:家具は、Achtトシさんがこの照明を中心に全体のバランスをみながらセレクトしてくださいました。これを吊るそうというのが決まっていたので、構造壁も取らなくていいねということになりまして。

-この壁が照明のデザインを活かしてくれていますね。空間に対してのサイズ感もピッタリです!

焼山(ヤッキー)さん:あとトイレも思い出深くて。当初の設計だと、洗面のところで頭を打ってしまう事態が発生してて、それを中尾くんがうまいこと納めてくれてね。縦長にレイアウトすることで頭を打たないように工夫してもらいました。もともと、トイレはそこまで場所を取りたくなくて、その分室内を広くしたいというのがあったから、結果的に最小限のトイレ空間になったのはよかったね。

中尾:そうですね。ワインセラーも納まってくれましたね。

焼山(ヤッキー)さん:ワインにこだわりがあるわけじゃないんだけど、ワインセラーがあると民度が上がるからいいよね(笑)

中尾:(笑)

-ウェブのことも聞きたいのですが…

焼山(ヤッキー)さん:どうぞどうぞ。

-BRICKHOUSEのサイトの冒頭に「情報の分解と構築をデザインします」とありますが、分解と構築とはどういう意味ですか?

焼山(ヤッキー)さん:クライアントさんのやりたいことや課題を聞けるだけ聞いて、分解して、100の情報を1に構築するのがウェブサイトだと思っています。

-最後の「1」が、構築ってことでしょうか?

焼山(ヤッキー)さん:そうですね。こちらの言いたいことを詰めすぎるとユーザーは離れてしまうので、情報としては「1」からスタートさせて徐々に扉を開けながら最後に「100」へ辿りつく、くらいの感覚ですね。

-今の時代に、ウェブサイトの存在意義って何だろうと改めて考えることがあったのですが、ヤッキーさんはどのように考えていらっしゃいますか?

焼山(ヤッキー)さん:集客だと思います。企業の理念を伝えるとかブランド力を上げるとか、色々あると思いますが、ウェブサイトに求められるのは「集客」かなと。

-それは、新規顧客の集客という意味でしょうか?

焼山(ヤッキー)さん:ウェブは基本、新規でいいと思いますよ。一度、クライアントさんになってもらえればタッチポイントはたくさんあると思うので。

-メディアサイトとはまたちょっと違う…?

焼山(ヤッキー)さん:メディアサイトでもコーポレートサイトでも、集客のためにすることは、出会ってくださるユーザーさんやクライアントさんにとって有益な情報が更新されているかです。世の中にいる新規のお客さんと繋がりつづけるために、ウェブの世界にSEO目的じゃない有益な情報を更新しつづけることが大切なんですね。めちゃくちゃ大変ですが!涙

-メディアであれば、新しい記事を作成しながら情報を更新できると思うのですが、固定された情報が主になるコーポレートサイトなどは、情報更新が難しいのかなとか…。

焼山(ヤッキー)さん:人のニーズは変わらないので、例えば「4年前はこうだったけど、今はこうです」みたいな情報だったら、情報更新もしやすくて発信しやすいとかはありますね。

-「今、その情報がほしい人」に対して、新しい情報を届けつづけるってことですね。

-これからの時代、「検索行動」そのものが減っていきそうな気がしていますが、そうすると「ウェブサイトで集客を狙る」というというのも難しくなってくるのでしょうか。

焼山(ヤッキー)さん:AIがいろんな情報をもとに人間に情報を提供していくとしても、そのAIが参照するのは「ウェブサイト」なので、検索結果の4位以下のウェブサイトは不要になるかも…。恐ろしい時代です。だからこそ、より一層SEOというか、AIRO(AI Recommend Optimization)の必要性が高まっていると思います。SGE(Google Search Generative Experience)という新たな検索結果も出ましたし。

-ちなみにそれは、テクニカルSEO?それともコンテンツSEOですか?

焼山(ヤッキー)さん:テクニカルSEOを施しておかないとコンテンツSEOで頑張っても伸びにくいと思います。コンテンツを作るのはとても大変なので、テクニカルSEOで基礎代謝を上げておく必要があるんじゃないかと。

-なるほど…。ただ、テクニカルSEOがしっかり施されているウェブサイトって、そんなにないんじゃないかとも思うのですが…。

焼山(ヤッキー)さん:テクニカルSEOの定義は広いので施されてないところがないのではなく、そのレベルに偏りがある感じですかね。構造化マークアップなど基礎的なことはあるのですが、なかでも、大規模サイトであっても「PageSpeedInsightsでモバイルパフォーマンス90点を超えられるかどうか」が全てだと思っています。たくさんの画像や動画、WebFont、GTMがあるWEBサイトであっても、です。

全てはGoogleにモバイルIndex優良判定をもらい、クライアントさんの情報更新が集客につながるようにすることが大切ということですね。最新の言語であるAstro や Qwik などで作るJamstackなWEBであれば、それらが可能になります。特に、CloudFlare Pagesはホスティグサーバーとして最高です!全世界が泣いていますw

-ウェブサイトを制作するときに必要な「スキル上位3つ」を挙げるとすれば、何でしょうか?

焼山(ヤッキー)さん:スキル上位3つというか、その前に、概念ですかね。「それ、AIでよくない?」になる世の中でどんなスキルでAIと戦うのかという。SEOに弱くともWEBは無料でAI生成できる時代なので、「AIで生成するより集客や効果出せるよね?」というチームにしか対価を払う必要がなくなります。なので、「エンジニア」であるならば、SEOに強い言語を学び追いつづけること、「クリエイター」を仮にノーコード系とするならば、ノーコードソフトやAIでの制作や生成スキルが必要になるでしょう。

-「情報設計」ってまず大事かなと思っていて、コード書く書かないの前に求められる重要な能力なのかなと思っています。ただ、情報設計ができたとしてもデザイン力がなければ形にはできないわけで。例えば打合せのときに、言語レベルだと合意していてもビジュアル化すると「ちょっと違う」ってなったりとか、さらに実装の段階でイメージと変わってきたりとか。

焼山(ヤッキー)さん:基本的には全部できた方がいいですよね。コードは書けた方がいいし、コードが書ければ「企画段階での内容がどれくらいのボリューム感になるのか」「(難易度含めて)実現できるのか」みたいな話もできるので。この辺はヒヤリングの流れとして、区切りがないイメージです。

-全部できる人って…、なかなかいないですよね?笑

焼山(ヤッキー)さん:(笑)でも、広義でいう「デザイン」って、そういうことかなと思います。ウェブデザインに限らず、100から1にする作業が「デザイン」だと思うので。その感覚でヒヤリングしているのであれば、再現性を持たないといけない。そうなるとウェブサイトの場合、コードが書けた方が再現性は高まります。

-なるほど。その上で、求められる「3つのスキル」を挙げるとすれば…?

焼山(ヤッキー)さん:①スキル、②要約力、③は感性ですかね。感性はセンスとも言われるかもしれないけど、もうちょっと泥臭いUX周りの感覚というか、この中にデザインも入ってくると思います。スキルの中には、プログラミング言語の他に「ウェブマーケティング」も重要です。集客を求められるので、まずはWEBのニーズを理解して、クライアントさんとの接続ポイントを探っていき、コンテンツ化していく感じです。ここで鍵となるのが、逆引きとオリジナル性です。

-「100の情報を1にする」というのは、キーワードを絞るということですか?

焼山(ヤッキー)さん:いえ、もっと感性的な話で、クライアントさんの想いの丈を全部聞いて「1つに簡潔にまとめる」ことです。押し売り営業になりがちな熱い想いを、情報の受け手の気持ちになって、即座に噛み砕き一撃で添える感じかな。

-それは「コンセプト」とはまた違うのでしょうか?

焼山(ヤッキー)さん:コンセプトも入っていると思いますよ。

-ウェブサイトをつくるにあたって、コピーや写真などの素材を提供してもらうと思うのですが、そのときのポイントって何かありますか?

焼山(ヤッキー)さん:一番の理想は、ウェブサイトが既にできていて「ここにこれくらいの文字量で刺さる言葉を入れたいです」とか、アタリの写真が入っていて「こういうふうに気持ちを高揚させたい」とか、できあがっているものに対して、最適解をもらうのがいいと思います。

-素材をアップデートする感じでしょうか?

焼山(ヤッキー)さん:そうそうそう。じゃないと、撮る人もどんな雰囲気の写真がいいのかが分からないですからね。素材がこないとウェブができない、みたいになると後手後手になっちゃいます。

-あるあるです…。ウェブサイトをつくるときにはもう、ヤッキーさんの中で全体像が見えているのですか?

焼山(ヤッキー)さん:主要なページをつくって、それを見ていただきながら修正して、落ち着いたら他のテンプレートをつくって情報を流し込んで、完成。基本的には実装しながらつくるので、FigmaやPhotoshopなどでの画像的なラフは作らないです。いきなりコーディングから開始します。

-ラフがなくても、クライアントさんから「ちょっと違う」ってならないということですよね?

焼山(ヤッキー)さん:クライアントさんと一緒に作ってるから戻しはないですね。要望を聞いて、論点を1まで要約した上で「こんな感じですけどどうですか?」って意見を聞きながらその場で修正して進行させていきます。だからブレることはないですね。そういう点でもコードが書けるという「スキル」が重要になってきますよね。

-クライアントさんが「何が分からないのかが、分からない」ってことはないですか?

焼山(ヤッキー)さん:分からないことは、100を集めるヒヤリングのときに聞いてるんだと思います。

-めちゃくちゃ聞いているってことなんですね。

焼山(ヤッキー)さん:そうですね、めちゃくちゃ聞いていると思います。それは、最終形を見据えて聞いているので、ウェブマーケティングも必要に応じて確認しながら「こういうキーワードがありますけどどうですか?」という感じで。

-ウェブマーケティングがないサイトは、ないってことですね。

焼山(ヤッキー)さん:そうですね、集客をしないサイトはないってことなので。ちなみに、最初の手書きラフはこんな感じです。ここまで書いたらもう実装しちゃいます。

-え!これラフ(というかほぼメモです…)ですか?打合せしながら書いてるってことですよね?

焼山(ヤッキー)さん:ホワイトボードで書いてますね。ここまで終わったら、実装です。

-ここまで来るのが(大変)…。でも、全部に理由があるから「迷う」とかではないんでしょうね。

焼山(ヤッキー)さん:そうなんですよ。こういうお題があって、こんな感じで人がきて、ここら辺で離脱するからここまでには情報を入れないといけない。

-ああ、そういうことか。離脱も考えた上での情報設計ってことですね。

焼山(ヤッキー)さん:第一に「技術」、次に「ユーザー目線」、最後にフィードバックからの改良。こういうところも泥臭くやり続けると「効果」が出るので、クライアントさんと喜びながら仕事ができて「やったぜ〜っ」となるわけです。ウェブサイトは、しぶとい愛でできています(笑)

-愛…。それはとっても共感します。今日はたくさん講義をありがとうございました(笑)

焼山(ヤッキー)さん:こちらこそ、インタビューありがとうございました。スタジオモブ大好きです!

 

編集後記
いつのまにか、単独ウェブ講座になってしまいましたが…(スミマセン)ウェブサイトの存在意義って何だったっけ?という原点を考えていたところに、ヤッキーさんの言葉一つひとつが飛んできて、改めて「ウェブサイトを通して何を提供するのか」を見直すきっかけになりました。ヤッキーさんに追い付くことは超難問ですが、だけどもう少しかみ砕きながら今できることを丁寧に真摯に向き合って、目の前のプロジェクトに邁進したいと思います。ヤッキーさん、ありがとうございました。モブ一同、大好きです!笑