モノサスの核となるサービスのひとつ、CODING FACTORY のサービスサイトが、12年ぶりにリニューアルしました。

ガラッと雰囲気の変わったサイトでは、サービスの情報にとどまらず、自分たちの姿勢やメンバーのことまで、盛りだくさんのコンテンツにして紹介しています。

リニューアルで大事にしたのは、今の自分たちを伝えること。そして、お互いに共感し合えるパートナーを大切にしてともに仕事をしていきたいという想いです。

どのような経緯でこのサイトができたのか、制作に携わった4人に話を聞きました。

参加メンバー

編集：杉本恭子

全員で考えていることを確認できたワークショップ

中嶋
CF（コーディングファクトリー）のサイト、すっかり雰囲気が変わりましたね。12年ぶりのリニューアルと聞きましたが、きっかけはなんだったんですか。

龍田
リニューアルの話は何度も出ていたものの、自社サイトってつい後回しになりがちというか。やりきれずにいたんよね。2020年にモノサスの体制が変わったタイミングで改めて、ちゃんと予算をとってやりきろうってことになって。課題はたくさん見えていたから。

中嶋
見えていた課題は、どういうものだったんでしょう。

龍田
一番大きかったのは、「コーディングの代行屋さん」としてのサイトだったこと。制作を代わりにやりますっていう、CF当初からのサービスをわかりやすく打ち出していたけど、今ってそういう感じではなくなってきていて。実態も違えば、メンバーの意識も、お客さんとの関係も違う。コーディング代行屋さんじゃないなら、なんなんだ？っていうところが、いちばん大きなテーマだったかな。

松原
料金表が出てましたが、仕事も複雑になってきて、実際の内容も対応できる金額も変わってきてましたよね。

リニューアル前のWebサイト

龍田
リニューアルが動き出したのは、2020年の6月頃。会社の体制が大きく変わってすぐに新型コロナウイルスの感染拡大が始まって、コミュニケーションが分断されて。リニューアル関係なしに、これは一度みんなで話そうってことになって。ファシリテーターの青木将幸さんに入ってもらって、CFに関わるメンバー全員がオンラインで集まるワークショップをやったんよね。

松原
自分が仕事で大切にしていることやCFの強みなどを、グループにわかれて話して、全体に共有してというのを繰り返しました。全員が集まるっていうのは、初めてだったかもしれません。

ワークショップの様子。左上が、あらゆるジャンルの会議ファシリテーションを行っている青木将幸さん

龍田
すごく空気のいい感じのワークショップやったんよ。昔って営業、制作、チェックとか、役割ごとに意識が分断されがちなところがあったんだけど、この辺りから、目に見えてそれがなくなってきた感じがした。

中嶋
みんなが考えていることを話したら、その後の関係が変わっていったんですね。

龍田
話してみたら、お互いに考えてたことが近いってことがわかった感じかな。CFって当初は画一的というか、決まった形の中で進めるってところがあったけど、今はそうではなくて。それぞれのお客さんに向き合って、一緒につくっているって話がけっこう出てきて。みんな同じようなことを言ってるのが印象的やったね。

松原
案件で関わる人と話すことはあっても、全員がいる場で改めて言葉にできたのがすごく良かったと思います。コミュニケーションが薄れているなかで、気持ちがもう一段上がり直すような感覚がありましたね。

町山
モノサスの体制が変わったことで、あのワークショップ以外にも、部門の壁をなくしていこうっていういい流れがありましたよね。私が入社した頃と比べると、すごく仕事がしやすくなってるのは感じます。

自分たちのことだから、自分たちで考える

中嶋
ワークショップは、リニューアルにどう活かされていくんですか。

龍田
出てきたキーワードをそのままにせず、さらに話していく分科会を何度か開催して。ワークショップや分科会は、拡散の場なんですよ。それを集約しながら、どういうコンテンツがあるといいか、サイトの構造やコンテンツを考えるのは僕が進めました。

意識していたのは、多様性であったり、メンバーのことを知ってほしいっていう部分。それを実現させるためのコンテンツや原稿は、どういうものなのかっていう部分はけっこう考えましたね。あとは、CFは10年以上前からやっているサービスなので、歴史や流れを踏まえて考えるのも大切なポイントでした。

中嶋
大きなテーマである「コーディング代行屋さんから、なにになるのか」という部分は、どう進んでいったんですか。

龍田
そこが一番大変やった。ここにいるメンバーと数名でプロジェクトチームをつくって、コンセプトを言葉にしていったんだけど。

小野木
まずはみんなでエッセンスを出し合って、グルーピングして、そこからキーワードを並べて。たくさん言葉が出てきたなかで、コピーラッシュっていうのかな。わーっと出して、しっくり来るものを絞っていって。っていう作業を週に1回、数週間かけてやりましたよね。

龍田
長かったね。方向性はすぐにみんなしっくり来ても、それを言い表すのにぴったりな言葉を探すのに時間が必要で。

出てきたコピーライト案の一部。最終的に全員で決めたのが「YOUR CODING PARTNER.あなたのプロジェクトに、共感しあえるメンバーを。」

中嶋
時間をかけてこれだけ丁寧に、それも１人が考えるのではなく、みんなで出し合いながらって、なかなか手間のかかることですよね。この進め方って、クライアントのWebサイトをつくるときにも踏む過程なんですか。

龍田
ここまで手間をかけられないことのほうが多いかな。スケジュールもあれば予算も決まっているなかで、なかなかね。自社サイトだからこそ、フルで考えられたっていうところはあると思う。この経験は、今後の案件にも活かしていきたいね。

デザインとコーディングの挑戦

中嶋
新しいサイトのデザインを見たとき、意外だけどすごくいいなと思ったんです。今までのモノサスとかCFでは見なかった色味だなって。

小野木
コンセプトを決めていくのと平行して、デザインを考えていくワークショップをやりました。最初は「CFっぽい雑誌は？」「CFっぽい建物は？」などいくつかの問いかけに対して、各々イメージに近いものを並べてみたんです。言葉で頭に入っているものと、視覚的なものは違うなっていうのがあって。

ひとつの絵に対して、どうしてそれを選んだのかキーワードにしてもらう。それをグルーピングしていくと「シンプル」とか「あたたかみ」みたいな言葉が多く見えてきて。遊び心がありつつも親近感があるようなキーワードが残ってきたんだよね。

松原
「シティーポップ」っていう言葉が私と町山さんから出てきたのは、おもしろかったですね。

龍田
これやってなかったら、もっと色の濃いサイトになってたと思う。

中嶋
言葉から、形や色にしていったんですね。

小野木
そう。ここからムードボードをつくって共有するところまではけっこうスムーズで。その先、実際のファーストビューをつくるまでが大変でした。「YOUR CODING PARTNER.」って言葉に合わせて人を入れたい。「構築や設計」みたいなことも感じ取れるといい。幾何学な感じはロジカルで、浮遊感もあるのもよさそうとか。いろんな要素を考慮して、ようやくこの形になりました。

最終的にまとまったトップページのデザイン

龍田
小野木くんが出してきたデザインに対して、めっちゃ細かいところを町山さんが戻してた気がする。

町山
そうでしたね。この線は立体的すぎるとか、この部分は色を薄くとか。意見を汲み取って調整していただいて。この感じ、すごく気に入ってます。

小野木
あとはイラストが大変でした。

中嶋
どのページでもたっぷりイラストが使われていますよね。全部小野木さんがつくったんですか。

小野木
はい。コロナ禍で写真素材を集めにくいっていうのもあって。あとは自社サイトあるあるみたいに、中途半端に終わらせたくないなと思って。ワークショップから段階を踏んで、みんなの貴重な時間を集めてつくっているサイトなので、イラストがどんなに多かろうとがんばろうって。やりきれてよかったなと思います。

龍田
あまりにも多いから、ここいらないんじゃない？って提案したところもあったけど。結局全部やりきったよね。

全員参加のワークショップで出てきた言葉をまとめたページ

中嶋
コンテンツが決まり、原稿やデザインができていって。その後のバトンを受け取ったのは、モノサスタイランドの現地コーダーたちと制作を進めていく町山さんですね。

町山
はい。コーディングに関しては、せっかく自社サイトなので、新しい技術を取り入れようということになりました。案件だと時間も予算も決まってるし、わざわざ難しい技術を使うことはないんです。コーダーのなかには「ちょっと飽きていたけど、今回の案件があったからがんばれた」というメンバーもいて。やってみてよかったです。

中嶋
どんなことを試したんですか。

町山
たとえば普通のサイトって、URLを開いたら、そこで初めてレンダリングが始まるんです。読み込んでページを構成するための、見た目を構築する作業がWebブラウザ上で起きる。今回のCFサイトには、アクセスしたときにはレンダリングが終わった状態のページがパッと表示されるようになっています。

中嶋
言われてみれば、どのページもすぐ表示されますね。

町山
あとは最近アップデートされたGoogleの検索にまつわるアルゴリズムに対応するためにもNext.jsという技術を使ってみました。世界的にも人気があって、まだわたしは実案件で担当したことがなかったのですが、やってみたいと思っていたんです。どういう壁があるのか経験できたのは力になりましたね。

毎日でも見たくなる、自分たちのサイト

中嶋
全員でのワークショップから始まって、コンセプトづくりやデザイン、コーディングまで、ずっと挑戦を盛り込んできたプロジェクトだったんですね。みなさま改めて、お疲れさまでした。公開してみて、手応えはどうでしょう。

町山
気づいてもらえるかわからないんですけど。シームレスで、無意識に気持ち良さが感じられるサイトができたと思うんです。そういう仕事ができたのは嬉しいですね。真鍋さん（モノサスのCDO)は、いろんなものを見ているから厳しい指摘をすることが多いんですけど、手放しで褒めてくれたのにはびっくりしました。「あの真鍋さんが！」って。

龍田
同感です。

小野木
自社サイトって、つくったあと、なんだか気恥ずかしくなっちゃうことがあるんですよね。だけど今回のサイトはそれがない。毎日でも見られるくらい、気に入ってます。

松原
メンバー紹介のなかに、お互いを紹介し合うコメントがあるのがいいですよね。デザインも好きで。今、私はCFニュースを旧サイトから移行する作業を続けているんですけど、更新するのも楽しいです。

中嶋
みなさん、自分たちのサイトをべた褒めですね。

龍田
僕は全コンテンツいいと思ってますけどね。強いてあげると実績の見せ方と、できることマップの部分は気に入ってます。CFって基本、制作会社さんから依頼されてWebサイトをつくることが多い、黒子の立場なんよね。僕らがこのサイトをつくりましたって言えないっていうところがあって。自分たちの仕事、スキルの部分を外の人に見てもらうにはどうしたらいいかをすごく考えました。どんな仕事をしているか見えると、お客さんにもわかりやすいしね。

実績の積み重ねを並べたページ

中嶋
制作メンバーにとってもうれしいページになりそうです。私個人的には、ワークショップで出てきた言葉が反映されているという「仕事への向き合い方」のページが好きです。

龍田
私たちについての3ページは、めちゃくちゃいいと思いますよ。今回のリニューアルって、Webサイトを通して問い合わせ数を増やしたいっていうよりも、共感し合えるお客さんと出会いたいっていうのが大きいんですよね。CFのこと、自分たちのことを全部表現できたので、このサイトを通して一緒にやりたいって思ってくれる方とつながって、仕事をしていきたいと思っています。

今のCODING FACTORYがよく見えるサイトになりました。
ぜひ一度ご覧ください！
CODING FACTORY