この記事について

今回ご紹介するのは、埼玉県越谷市でフリースクールを運営し、不登校・ひきこもり支援に取り組まれている、特定非営利活動法人 越谷らるごさまのWebサイトリニューアルです。

6歳から大人まで、誰もが「居場所」だと感じられる場を運営されている越谷らるごさま。
社会的な常識にとらわれることなく、「自分らしく生きる」ことを何よりも大切にされています。

そんな越谷らるごさまの想いや姿勢を丁寧に汲み取り、ゴールを達成するために、カズミアのスタッフが一丸となって制作に取り組みました。

今回はデザインに加え、イラスト制作もお任せいただき、さらにサイトの“肝”となるアニメーションにもこだわっています。

このブログでは、そうした制作の裏側や、制作を進める中で私たちが大切にしてきたことをお伝えしていきます。

 

ご相談のきっかけと、リニューアルの第一歩

すでにWebサイトをお持ちでしたが、
「イラストをメインにした、あたたかみがあり、想いが伝わるサイトへリニューアルしたい」と検討されていたとのことでした。

イラストを中心としたページ制作を得意とする会社を探される中で、弊社を見つけてくださり、お問い合わせをいただいたことが、今回のご縁のはじまりです。

4月上旬、理事長の鎌倉さまと事務長の加納さまが弊社にお越しくださり、代表の萩原と私を含む4名で打ち合わせを行いました。

越谷らるごさまが大切にされていることや、リニューアルにかける想いを、時間をかけて丁寧にお話しくださったことが印象に残っています。
また、パンフレットや各種資料もお持ちいただき、越谷らるごさまへの理解を深めるうえで、大きな助けとなりました。
いただいた資料にはすべて目を通しながら、想いや背景を受け取ることを心がけました。

弊社からも「こんなページがあるとよいのでは」といったご提案をさせていただき、その後、正式にお手伝いさせていただくことが決まりました。

今回は、これまで私が携わってきたサイトの中でも、特にページ数が多く、規模の大きなリニューアル案件でした。
正直なところ、不安がなかったわけではありません。

しかしそれ以上に、

「越谷らるごさまの想いに応えたい」
「なんとしても、このリニューアルを成功させたい」

そんな気持ちが、強く心にありました。

制作を始めるにあたり、4月下旬には埼玉県越谷市にある越谷らるごさまを訪問させていただきました。

オンラインでの打ち合わせが当たり前になった今だからこそ、私はお客さまと直接お会いし、同じ空間でお話しすることを大切にしています。
同じ空気を共有するからこそ感じ取れること、実際に足を運ぶからこそ見えてくることがあると考えているからです。

訪問時にはヒアリングに加え、フリースクールの見学もさせていただきました。

一人でゲームをしたり、楽器を弾いたり。
仲間と談笑したり、公園へ遊びに出かけたり。

越谷らるごさまが掲げる「自分らしく過ごす」という言葉が、日常の中で自然に体現されていることを、肌で感じる時間でした。

また、鎌倉さまや加納さまが、お子さまを「指導する」のではなく、そっと見守る姿勢も、とても印象的でした。

「百聞は一見にしかずとは、まさにこのことだな」

そんなことを考えながら、帰路についたことを今でもよく覚えています。

 

チームで進めた、制作の流れ

ここからは、制作フローを時系列でご紹介します。

ヒアリング内容の整理

訪問時にお聞きしたこと、感じたことは、記憶が鮮明なうちにまとめるようにしています。
メンバー共有後も確認・編集がしやすいよう、Googleスプレッドシートを活用しました。

 

キックオフ

訪問を終えてすぐ、制作に関わるメンバーへの共有を行いました。
シートを共有するだけでなく、自分の言葉で伝えることを大切にしています。

また、訪問時に撮影させていただいた写真もあわせて共有し、メンバーそれぞれがイメージを膨らませられるようにしました。

 

方向性のご提案

ヒアリング内容をもとに、サイトリニューアルのコンセプトを作成しました。

目的は何か。
ターゲットは誰か。
越谷らるごさまの強みはどこにあるのか。

さまざまな角度から検討を重ね、方向性を固めていきました。

今回はイラスト制作もお任せいただいていたため、ラフ制作に入る前に、まずはコンセプトを言語化し、ご提案しました。

越谷らるごさまからは「風」をテーマにしたい、というご要望をいただいていました。
そこで、「風」を軸にイメージを膨らませていきました。

風は、嬉しい時も、悲しい時も、どんな時でも、誰もが感じるものです。
髪を揺らしたり、涙を乾かしてくれたり、洗濯物を乾かしてくれたり。
木々が揺れるのも、風があるからこそ。

いつも私たちのそばにある「風」と、越谷らるごさまらしさをどのように掛け合わせて表現するか。
チームで何度も検討を重ねました。

 

イラスト制作

まずは、メインビジュアルにも使用するイラスト制作から進めていきました。

コンセプトで検討したポージングを、ラフとして具現化していきます。

固まったラフを、メインビジュアルとしてどのように見せるか。
配置やバランスも含めて検討を行いました。

制作の過程では、事務長である加納さまからもフィードバックをいただきました。

手書きでわかりやすくまとめてくださり、そのクオリティの高さに驚かされました。
スタッフ一同、感激と驚きの連続でした。
ありがとうございました。

着色についても、事前にトーンのイメージを共有したうえで進行しています。

ラフから着色に至るまで、日々すり合わせを重ね、現在のメインビジュアルが完成しました。

 

ページ構成の検討

どのページに、何を、どの順序で載せるのか。
こちらもイラスト同様、コンセプトを軸に検討を重ねました。

今回は、メインビジュアルで越谷らるごさまらしさを表現し、その流れで考え方や姿勢を伝えたいと考えていました。

越谷らるごさまには、明確なルールがなく、どんな時も自分らしく過ごすことができる「自由」があります。
勉強を強いられることもありません。

その一方で、入会後にイメージとのギャップを感じ、退所される方がいらっしゃることも、ヒアリングでお聞きしました。

反対に、越谷らるごさまのコンセプトに強く共感された方は、千葉県や茨城県など、遠方から電車を乗り継いで通われているそうです。

だからこそ、ページの冒頭で、越谷らるごさまの考え方や雰囲気をしっかりと伝えることを意識し、構成を組んでいきました。

次に、5つの事業を優先順位をつけて紹介し、お知らせへとつながる流れとしています。

お知らせについては、毎月開催されている引きこもりやそのご家族を対象とした会の情報が多くなることを想定し、メインビジュアル下に「今後の予定」エリアを設置しました。

目的やターゲット、実際の利用シーンを考慮しながらブラッシュアップを重ね、越谷らるごさまからのフィードバックをもとに調整を行いました。
最終的に確定した構成がこちらです。

同様の考え方で、下層ページ（より詳しい情報を掲載するページ）の構成も検討していきました。

 

デザイン制作

先に完成したメインビジュアルのイラストと構成をもとに、デザイン制作を進めました。

どのフォントが合うか。
縦書きにするか、横書きにするか。
視線の流れは自然か。

一つひとつ検証を重ねながら、形にしていきました。

デザインA案

デザインB案

事業紹介の写真は、あえて不均一な形とし、越谷らるごさまの「いろいろな生き方があっていい」という考え方を表現しています。

5つの事業はそれぞれ色分けし、トップページ下の「今後の予定」やお知らせエリアでも、直感的にわかりやすくなるよう工夫しました。

また、トップページ内の「フリースクール りんごの木」紹介部分に使用しているイラストは、事務長である加納さまに描いていただいたものです。

前述の通り、加納さまはとても素敵なイラストを描かれます。
「ぜひ、加納さまにイラストを描いていただき、ページ内で使用させていただきたい」
そう考え、ご相談したところ、快くご快諾くださいました。

全体のバランスを見てガーランド風のデザインとし、そこにイラストを落とし込んでいます。
越谷らるごさまの日常が感じられる、素敵なイラストです。
ご協力いただき、ありがとうございました。

 

アニメーションの検討

デザインが完成した後は、具体的なアニメーションの検討に入りました。

今回のテーマである「風」をもとに制作を進めてきたからこそ、どの要素を、どのタイミングで、どのように動かすのかを細かく詰めていきました。

メインビジュアルについては、愛用しているiPadのノートアプリを使い、風の向きを手書きで書き込みながら検討しました。

秒数についても、世の中にあるさまざまなWebサイトを参考にしながら、「どのくらいの動きが心地よく感じられるか」という感覚をすり合わせて調整しています。

 

実装・システム開発

デザインとアニメーションが固まった後は、実装フェーズへと進みました。

ブラウザ上での見え方を確認しながら、PC・タブレット・スマートフォンと、あらゆる端末でデザイン通りに表示されるか、アニメーションのスピードは適切か、といった点を細かくチェックしていきました。

公開直前まで、最後の最後まで調整を重ねています。

 

越谷らるごさまからのフィードバック

制作開始前は対面での打ち合わせが中心でしたが、制作開始後は、日々のやり取りをテキストで行うことが多くなりました。

一方で、制作物のフィードバックについては、オンラインで会話をしながら進めています。
制作の意図をお伝えし、その場でフィードバックをいただく。
必要に応じて双方で持ち帰って検討し、あらためて調整する。
このサイクルで、制作を進めていきました。
多い時には週に数回、打ち合わせのお時間をいただきましたが、その分、越谷らるごさまと弊社の認識をしっかりとすり合わせることができ、スムーズな進行につながったと感じています。
特にアニメーションは細かな調整が必要だったため、画面共有を通じたイメージ共有は、最適な方法でした。

「一緒にものづくりをさせていただいている」
そんな実感を持ちながら、毎回ワクワクして打ち合わせを行っていました。

 

ディレクターとして大切にした3つのこと

ディレクターとして意識したことは多々ありますが、ここでは特に大切にしていた3つをご紹介します。

 

進行管理

大前提ではありますが、周囲の協力なくしてページ制作を進めることはできません。
イラストレーター、デザイナー、フロントエンドエンジニアなど、関わるすべてのメンバーの稼働スケジュールを念頭に置きながら、依頼や調整を行いました。

また、長い夏休みを終えた9月は、学校に行きづらくなるお子さまが増える時期でもあります。
それに伴い、フリースクールを検索する方が増えることを想定し、8月中のリニューアル公開を目標に、制作スケジュールを組み立てました。

制作が進むにつれ、アニメーションや下層ページを中心に、表示面で調整が必要な箇所が増えていきましたが、8月中の公開は必須。
時には遅くまで作業をしたり、お盆休みをずらして業務を行うこともありました。

夏の暑さにも負けないくらい、集中して向き合う日々が続きました。

 

メンバーとの連携

前述の通り、制作においてはメンバーとの連携が欠かせません。
進捗の把握や制作物へのフィードバックなど、日々さまざまなやり取りが発生します。

そんな中で、常に意識しているのが
「自分の当たり前は、相手の当たり前ではない」
ということです。

特にテキストでのコミュニケーションは、表情や空気感まで伝えることが難しく、認識のズレが生じやすくなります。
そのため、可能な限り参考になるイメージを添えたり、テキストの場合は「少し言い過ぎかな」と思うくらい丁寧に記載することを心がけました。

また、メンバーの士気を高めることも、ディレクターの大切な役割だと考えています。
制作の過程で越谷らるごさまからいただいた前向きなフィードバックはすぐに共有し、同じ方向を向き、熱量を持って取り組んでもらえるよう意識しました。

 

お客さまとの密なコミュニケーション

制作そのものを行うのは弊社ですが、その過程においては、お客さまのご協力が不可欠です。
方向性のすり合わせに始まり、制作物へのフィードバックなど、二人三脚で制作を進めていきます。

お客さま側で「こうしたいな…」という思いが浮かんだときに、遠慮せずお伝えいただける関係性であることも、とても大切だと考えています。

すべては、よりよいものづくりと、未来に向けた価値をつくるため。
越谷らるごさまとは、テキストやオンラインでの打ち合わせを通じて、常に密なコミュニケーションを図りながら制作を進めてきました。
いつも丁寧に向き合ってくださった鎌倉さま、加納さまには、心より感謝しています。

 

制作の中で、特に向き合った課題

今回のリニューアルは、これまでにお手伝いさせていただいたWebサイト制作の中でも、特に規模の大きなプロジェクトでした。
その分、検討事項や調整が必要な場面も多く、一つひとつ丁寧に向き合いながら進めていく必要がありました。

なかでも重要な役割を担っていたのが、「風」を表現するイラストとアニメーションです。
イラスト制作までは比較的スムーズに進行しましたが、アニメーションについては、細かな調整を重ねる必要がありました。
想定していた速度より速く感じたり、ほかのイラストと重なってしまったり、
イメージしていた動きとわずかに違っていたり。
一箇所を整えると、別の箇所に調整が必要になる──そんな場面も少なくありませんでした。

また、アニメーション以外にも、下層ページの表示調整といった課題も発生しました。
PCのデスクトップサイズ（1920px）では問題なく表示されていても、ノートサイズ（1440px）ではわずかにズレが生じるなど、細部まで確認と調整を重ねていきました。

8月中の公開を目標としていたこともあり、お盆の時期にはスケジュール的に緊張感のある場面もありました。
しかし、こうした状況だからこそ大切にしたのが、「一人で抱え込まないこと」です。

前述の通り、この制作は複数のメンバーが関わるチームで進めています。
ディレクターとして状況を整理し、必要なタイミングで適切に相談し、力を借りる。
それが結果的に、品質を高め、よりよいものづくりにつながると考えています。

課題が生じた際には、メンバーと一つひとつ向き合いながら対応し、アニメーションや表示面の調整も無事に解消することができました。

全力で駆け抜けた8月後半。
支えてくれたメンバーには、改めて感謝の気持ちでいっぱいです。

 

制作を通じて感じたこと

最初はまっさらだったプロジェクトが、少しずつ形になっていく。
制作過程では大変なこともありましたが、目に見えて変化していく様子に、喜びを感じながら進めていきました。

すべてが形となり、無事に公開を迎えた瞬間は、嬉しさと安堵の気持ちでいっぱいになりました。
同時に、「たくさんの方に、越谷らるごさまの想いが届くといいな」と感じていました。

また、公開後も越谷らるごさまがWebサイトを日々育ててくださっていることにも、大きな喜びを感じています。
Webサイトは完成して終わりではなく、育て続けることで、本来の目的を果たしていくものだと考えています。
ブログやお知らせの更新を通じて、価値ある情報が積み重なり、サイトが「資産」として育っていく。
私たちが土壌を整え、種をまいた場所で、越谷らるごさまが丁寧に花を咲かせてくださっている──そんなイメージです。
日々更新を続けてくださっていることで、メインビジュアル下に配置した「今後の予定」エリアも、本来の役割を果たしています。
このエリアが、サイトを訪れた方の役に立っていれば、これほど嬉しいことはありません。

 

越谷らるごさまからいただいた声

越谷らるごさまから、制作過程や完成したWebサイトについて、声をいただきました。

制作過程では、こちらの思いや要望を細やかに受け止めて、丁寧に反映してくださいました。文書だけではなく、対面やオンラインでの聞き取りにも何度も快く応じてくださいました。中根さんの顔を見てお話しすることで、私たちの気持ちが伝わっていることを実感して、いつも安心することができました。

今回は、温かい色合いと質感で、見た人たちが少しほっとできるようなホームページにしていただきました。「風」というテーマもいろいろな方法で表してくださり、私たち自身も、見るたびに笑顔になってしまいます。

見る方からは「いいホームページができたね」と言っていただいています。イラストや全体の柔らかい雰囲気に、越谷らるごらしさを感じていただけているようです。

制作に関わるすべての過程で、越谷らるごさまと同じ方向を向きながら進められたこと、そして完成後も前向きなお声をいただけたことは、私たちにとって大きな励みとなりました。

温かいお言葉を、本当にありがとうございます。

越谷らるご様のホームページ制作事例はこちら

 

これからも大切にしていきたいこと

ディレクターとして、まだまだ学ぶことの多い日々ですが、変化の激しいWeb業界の中で、お客さまにとって本当に価値のあるものを届けられるよう、日々向き合っています。

Webサイトの裏側には、必ず制作に至る背景や目的、そして届けたい相手が存在します。
それらを丁寧に読み解き、お客さまの 「これを叶えたい」という想いを、かたちとして実現できるディレクターでありたいと考えています。

今回お手伝いさせていただいた越谷らるごさまのWebサイトのように、イラストやデザイン、動きといった表現を通じて、伝えたいメッセージがしっかりと届く。
そのための土壌を整えることが、ディレクターとしての役割だと感じています。

また、制作は決して一人では成り立ちません。
デザイナー、イラストレーター、フロントエンドエンジニアをはじめ、それぞれの専門性を持つメンバーが集まってこそ、「叶えたい」が実現します。

関わるメンバーへのリスペクトと感謝を忘れず、チームの力を最大限に引き出しながら、これからもものづくりに向き合っていきたいと考えています。

このブログを通じて、カズミアの制作の裏側や、ものづくりに対する姿勢が、少しでもお伝えできていれば嬉しいです。

 

想いを、イラストやデザインで伝えたい方へ

今回ご紹介した越谷らるごさまのように、
「想いを大切にしながら、きちんと伝わるWebサイトをつくりたい」
「イラストやデザインで、自分たちらしさを表現したい」
そんな気持ちをお持ちでしたら、どうぞお気軽にご相談ください。

カズミアは、お話を伺いながら、一緒に考えるところから制作を始めています。