読みもの

Web制作や保守に関する読みものを掲載しています。

サイトリニューアルの裏側のお話

  • コラム

これまでとんでもなく適当に運用してきたMay9のサイトですが、Tumblrにログインできなくなったためリニューアルしようと決意してから幾星霜……。時間がない、仕事取れてるし必要ある?と散々自分自身に駄々を捏ねてきましたが、ようやくリニューアル完了と相成りました。

重い腰を上げるに至ったのは、近年発展が目覚ましいAIの技術を活用するにあたっての実験場としての意味合いがかなり大きいです。ということで、本サイトのリニューアルの裏側をまとめたいと思います。

新サイトをどのようにするか

リニューアルをするにあたって、単純にガワのリプレイスとするのではなく、何を伝え、そのために何をするのかを整理するところから行いました。

これまで具体的に述べてこなかったコンセプトをちゃんと伝える

キャリアのなかで担当した案件のなかで「どうしようこれ…」と依頼側も制作側も頭を抱えることがある案件の比率がまあまああり、その度にこの局面を打開するための方法論を探るようなことが多いキャリアでした。「どうしようこれ…」にはいろんなパターンがあるんですが、そのなかでも重要なのは最終的にバトンを握って走る人間が落ち着くこと、という当たり前すぎることに気づいたのが屋号を決めるきっかけのひとつでした。

少し話は変わるのですが、幼少期に大きなお寺がある地域で育ったのですが、ああいうお寺では観光向けに胎内めぐりというアトラクションが設置されています。場所によってルールは様々なのですが、明かりのない暗闇のなか、迷路のようになっている(と言われる)通路を右手を右側の壁について歩いていくと、やがて出口近くに錠前があり、それに触ると極楽浄土へ行ける、というものです。
ただ、この暗闇に踏み入っていく時はおそろしく、中で不安になる人も多いアトラクションです。「どうしようこれ…」からくる不安、現場で起きるパニックの心理的構造に似たものを感じていました。

…という話がやがて屋号やコンセプトにつながっていくのですが、この話、これまでどこにもしたことがなかったんですよね…。
そしてこの通りのことを事業としてやっていますが、やや伝わりづらいコンセプトでもあるという難点があります。意図通りに伝わるか、という不安はありましたが、今回はこれまで押し出していなかったこのコンセプトを前に出すかたちで作るぞ!という意気込みで制作をすることにしました。

まだ出会っていないクライアント候補の方が、マッチしていると感じられるサイトにする

フリーランスになってから10年以上が経ちましたが、相変わらず上記に書いた当初のコンセプトに沿ってお仕事をしています。

それなりの数になった制作実績は、「どうしようこれ…」「どうしたらいいんだ…」のお声からお客様や制作のお声がけをいただいたみなさんと共に歩んだ軌跡であり、わたしがこれまでに関わった制作実績をわかりやすく掲載することは、同様のことで悩まれている方にとって依頼をしてみようというきっかけになるのではないか、と考えました。
これまで関わった全案件を、可能な限りアーカイブした状態での公開を目指しました。

AIを使ったWordPressサイト構築方法の模索

AIを使用してWordPressサイトを構築する方法論はあるのでしょうが、SNSを賑わせるのは「AIに指示をしただけでこんなことができた」という結果の開示がほとんどです。
ポン出しでしかできない、人間による管理に耐えられないサイトができてしまう、フルサイトでしかできない/クラシックでしかできない、デフォルトテーマ依存、権利関係のコントロールが効かない、など運用に耐えうるサイトを作るうえでクリアにする必要がある内容が多岐に渡って存在します。それらをすべて無視して出力されたものを指して十把一絡で「できた」と主張することはプロフェッショナルの仕事に値しません。

今回は、WordPressサイトの制作をお請けする際のフローに載せられるAI活用方法を模索し、Webディレクターさんやアートディレクターさんと連携して制作する場合を仮定したアセットで制作を行ってみました。

AIの項目はこうやってお伝えしない限りわからない部分ですよね(笑)
こういう模索や研究は実際に動かすサイトでやらないといけないけど、クライアントワークとしてやるわけにはいかない部分なので、その意味での実験台として大変勉強になりました。

やるぞ!

最終的な作業分担はこのようになりました。

デザインも含めてAIに一気通貫で作ってもらうのが最近の流行りかとは思いますが、デザインを自分でやりたかった(シンプルにデザインって楽しいので…)のと、デザインデータありきでの構築案件が業務的に多いのもあり、そのデモンストレーションも兼ねてこのような分担にしました。

コンセプトを伝える:
イラストを描いてもらおう

コンセプトを伝える方法として、今回はビジュアルで伝える方向で進めることにしました。
というのも、コンセプトが実際ビジネスとして提供しているサービスの側から見た時に伝わりづらい話をしている節があり、これをそのまま言葉だけで伝えると「なんのはなし?」感が増してしまうところがあるためです。
それらを視覚的に整理し、イラストに落とし込んでもらうことで、テキストとして読むと「なんのはなし?」感があることでも、スッ…と入っていってくれるのではないか、というのが今回の狙いでした。

それにあたり、今回はイラストレーターの副島あすかさん(Webサイトはこちら)にご助力いただきました(ありがとうございます!)
依頼にあたっては上記の「なんのはなし?」感があるコンセプトをそのままお伝えし、とても素敵なイラストに仕上げていただきました。

トップページのメインビジュアルとして使用させていただいているイラスト。
Webサイト作るって本当になにをどうしたらいいの…?という途方に暮れている感を出すべく、状況が変わったことでいつもの風景が見慣れない深い森の中のようになってしまった…という感じのイラストを描いてもらいました。
May9についてのページで使用させていただいているイラスト。一緒に行くことで、不安な風景を脱することができ、いつもの風景の方へたどり着けることを示唆しているようなイラストにしてもらいました。実際にお仕事をしていても、これくらいわーい!感があるシーンが多いのでビジュアル化してもらうことで自分がやっていることの本質を再認識することができた気がします。
描いていただいたイラストをAIに学習させないようにするためにどうすべきかを考える

今回はイラストが届いた後の工程でAIを利用するシーンがあったため、イラストの権利を守るために工夫しながら制作を進めました。

  • AIの学習設定をオフにする(大前提)
  • AIが閲覧するFigma上ではイラストが入る部分をイラストが入るのと同じ大きさのダミー画像(灰色ベタのjpg)に差し替えておく
  • AI側で構築後、わたしが手動でイラストを書き出しし、差し替えを行う

これ以外にもこうするといいよ!という情報があれば教えてもらえるとうれしいです。一緒にサイトを作り上げていくみなさんの権利をしっかり守れるようになりたいので…!

まだ出会っていないクライアント候補の方に見つけてもらうために:
事例を入れよう

まだ出会っていないクライアント候補の方に見つけてもらえるとすれば、これまでの制作実績の方向性や依頼の背景にシンパシーを感じて依頼していただけるのではないか、と考え制作実績をしっかり掲載することにしました。

しかし、本当にどうかしているのですが、全部の案件をちゃんとアーカイブしているところが手元にはなく、これを機にちゃんとこれまでの制作案件をまとめるぞ…!としたため、このサイトに載っているのが今わたしが把握できている過去の制作案件リストとなっています。(きっと駆け出しの方とかだと、ちゃんとこれまでにお請けした案件数とかをちゃんと数えているんだと思うのですが、制作が並行したり、長期の保守や更新サポートをしているものだったり、スポット対応だけしたものがあったりとなってくると、さすがにもう数えきれず…。)

ChatGPTくんとの壁打ち時に、それ100件あるとは言い切れないでしょw 的な応答を受けてペショ…となってしまった回。

実際は100件以上あったのですが、全件入れてから公開とすると公開がしばらくできなさそうだったので、嘘にならないように100件ちょいまで登録したところでサイトを公開するぞ!とすることにしました。ですので、まだこれから未登録のものをこっそり追加していきます。

実績を掲載するにあたって、お手伝いした案件のなかでも自分の制作事例として象徴的であったり、ぜひ見てもらいたい部分がある案件をフィーチャーしてご紹介できるような作りにしました。掲載許可をいただいたクライアントのみなさま、ありがとうございました!
こちらも、今後ゆっくり追加していく予定ですので、お楽しみに…!

AIを使ってWordPressサイトを作る:
構築方法をゼロから模索する

今回は、以下の実現をターゲットとし、作業全体のやりかたを模索し制作を行いました。

  1. これまでWordPressサイトの運用を行ってきた人が運用を行いやすいサイトにする
    • AIポン出しあるあるのAIを繋がないと更新や修正ができないサイトにはしない
    • これまでのスキルセットが活きるWordPressサイトにする
    • オリジナルテーマではなく、既存テーマをカスタマイズして制作する
  2. 人が作業を行うことを優先しすぎてAI側での作業負荷が高くなり、AIの使用量が膨大にならない作り方をする
    • AIと人とが協業し、相互に作業を行った場合でも同じ手順で作業のバックアップや巻き戻しが可能な作りにする

具体的にどのようにProjectを組んでいるかなどは一旦今回はおいておくのですが、全体としての構成としてはこのような感じであれこれ繋いで制作を行いました。

このなかで一番大変だったことはFigma MCPの接続上限がタイトすぎることでしょうか…!
最初はスターターでやっていたのですが、あっという間に上限が来るのでプロフェッショナルのDevシートを追加してみたりとあれこれ工夫が必要で大変でした。最終的にAIが読む用のキャッシュを作って基本的にはそちらを参照してもらい、ローカルキャッシュが読めなかった時やFigmaデータの更新時のにキャッシュ作成時にのみFigma MCPサーバーを繋いであれこれしてもらうかたちで制作を進めました。

構築に関しては基本的に今回はわたしは全くコードを書かないことにして進めていましたが、運用上問題になる箇所やセキュリティ的に問題が出そうな箇所などもあったので、コードを読む時間はまあまあありました。構築することだけを考えた制作能力でいうとAIはとても優秀なのですが、長期的な運用を行う際に気をつけないといけない箇所など、これまで言葉にされて記録されてこなかった箇所に対する対応力は低めなので、そこの部分の知見の提供をわたしが担っているような感じです。

確認にあたってはコードベースでの確認も行っていますが、ADRを始めとしたドキュメント化をしながら制作を進めていて、ドキュメントを読みながら実装上の作業調整や運用時のボトルネックになる箇所の確認などができたのはかなりよかったと思います。コードは最終的な決定事項の集積ですが、各ドキュメントは決定までのプロセスも含めて残ります。日本語で読めるところも全体把握をする上でかなりありがたポイントでした。自分で作業する時ではサボりがちな部分なので、ここに関してはAIと協業する上でのいいところだと感じました。

完成してみて

イラストを依頼したのがかなりよかった

イラストを描いていただくぞ!と資料をまとめたり、こういうことを伝えていきたいんですとお話を聞いてもらうこと、といったプロセスを通して、改めて自分が何をしていて何をしようとしているのかというのを確認することができました。

更に、そこからイラストに落とし込んでもらったことも、今回の制作ではかなり大きなポイントだったと思います。自分で描く(=主観)のではなく客観でまとめてもらうことで、視点をぐるりとお客さん側に回すことができたと言いますか。
そして副島さんのイラストがまたとんでもなく素敵なのが制作をがんばるぞ!の大きなモチベになりました。重ねてにはなりますが、副島さん、イラスト制作をご担当いただきありがとうございました!

これまでの制作物の多さに、あらためて自分でびっくりした&感謝ァ…

100案件くらいあるやろ!のノリではじめたのですが、実際入力してみて、本当だったんだ、100案件…!という気持ちになってしまいました。過去の制作物やご依頼いただいた時のやりとりのメールを見ながら、これだけの数の案件をおまかせいただいていたということに驚くやら、ありがたいやらでデータ入力をしながらだいぶ心が忙しかったです。

改めまして、これまでわたしを選んで依頼してくださった全てのクライアントのみなさま、ありがとうございました。これからもどうぞよろしくお願いします。

運用が必要なWebサイトの制作はまだまだAIがすべてを奪いきれなさそう

だいぶ効率的にはやっているつもりではあるんですが、人間という不確定要素モリモリの存在が運用するサイトという前提条件を必須にすると、AIが奪える作業の範囲がだいぶ削られそうだな?という印象はありました。正直、もっとAIが担う幅が広いのかなと思っていたので、(事例手入力の労力を差し引いても)想定よりはわたしの手がかかった印象です。

クライアントワークとして制作する場合は、そのサイトでやりたい情報発信のかたちはさまざまかとは思いますが、まだまだ更新運用を人間側が行う比率が高いままだと思うので、Web制作のすべてをAIが奪えるのかな~というところとしてはそこまではまだ難しいような気はしたのですが、果たしてどうなるんでしょうね。

他方で、情報の取り扱いにシビアであったり、さまざまな事情でAIを利用できない環境の人もたくさんいらっしゃると思うので、そういったみなさん向けにAIレスでの制作の質の向上も行っていきたいな~と思いました。

今後について

ちゃんと整理していなかったがために全件入っていない事例をこれから追加するのはそれはそれとして、このサイトで今後どのような情報発信をしていきたいか、ということを表明して終わろうと思います(未来の自分への戒めのために…)

インタビューをしたい

これまで一緒にお仕事をしてきたみなさんや、お仕事を依頼してくださったクライアントのみなさんにお話を聞いてまわりたいぞ…!と考えています。

クライアントのみなさんへのインタビューは、マーケティング的にはお客様の声的な意味合いが多いのだとは思いますが、今お話をお伺いしたいなと思っているみなさんの感じ的にきっとそうはならないんだろうな、というところもあるおもしろコンテンツになるのではと思っています(と、書いてしまえるくらいみなさん個性豊かでゆかいなお客さんたちなのです)。素敵なみなさんのことをもっと知っていただける機会になればうれしいですし、わたしがお手伝いしているみなさんのビジネスを紹介することにもつながるといいなあと思っていたりします。

クライアントのみなさんのみならず、お仕事をご一緒することが多い天才アートディレクターさんや天才デザイナーさんなどのインタビューも行いたいです。天才を見ると(何食って生きたらこうなるんやろ…)と思ってしまうタイプなので、たぶん最近食べたおいしいものの話はマストで聞いてしまうとは思うのですが…。事例として掲載している案件や独自に取り組まれているプロジェクトのお話なんかも聞いていけたらと思っています。

とても大変だと思うけどやりたいなあ。やるぞ!(やれるか!?)

技術情報やコラムを書きたい

どういうことなの!?という状況に遭遇することが多いお仕事なので、大変だったことやわからなかったことをちゃんと整理して書き留めておくぞ、というコンテンツをちゃんと見えるかたちで出していきたいな、と思っています。シンプルにわたしが忘れっぽいので過去と未来のわたしを救うために書き留めておく、という側面もあるのですが…。

技術情報とコラムという切り分けでいいのかはわかりませんが、人の役に立ちそうなことはちゃんとドキュメント化して人の役に立てるといいよね、という程度のノリでやっていけたらと思っています。


ということで、今回のリニューアルに関するいろいろのお話でした。
当初予定は年内公開を目指していたので、ペース配分含めかなりいい感じにできたのではないでしょうか。

Web制作のご依頼やご相談はお問い合わせよりお気軽にお声がけくださいませ!