ウェブサイトリニューアルしました

2007年8月以来、13年ぶりに自社サイトをリニューアルしました。
13年ぶりということもあって、たくさんこだわって制作したので、すこし解説したいと思います。

こだわりポイント（１）デザイン

こだわりポイント（２）アニメーション

名刺の世界観をそのままウェブサイトにするということで持ってきた波とサーファーを動かしました。まず波ですが、セクションの区切りで波を少し重ねてアニメーションさせました。
サーファーも名刺と同じように登場させました。

今はCSS、JavaScript、SVGといったものでアニメーションを実装していますが、昔はFlashでアニメーションを作っていました。といった話を知っている人も徐々に少なくなっているかと思います。

こだわりポイント（３）音

画面右にスピーカーアイコンがあります。アイコンをクリックすると、波の音、虫の声、楽器の音をONにすることができますので、ぜひ音を鳴してみてください。

波の音は稲村ケ崎で録りました。稲村ケ崎は七里ガ浜の隣のビーチで、すぐ横に国道134号線が通っていて車が走る音が入ってしまうのですが、たまたま車が少ない夜中に録って波の音だけが綺麗に録れたデータがあったのでそれを使いました。

虫の声は自宅の近くで録りました。昼に録ったので車の音との戦いとなりました。車がいない隙を狙って録音しました。

メロディはラブドラムという楽器です。ラブドラムはスチールパンにちょっと似た感じの鉄の楽器なのですが、バチでなく手で叩いて音を鳴らします。ThinkSpace鎌倉の岩濱サラさんに演奏してもらいました。2024年の春に行われた鎌倉ワーケーションウィークの中で稲村ケ崎公園で行われた瞑想のプログラムがあったのですが、そこで演奏してくれたサラさんのラブドラムの音がとても印象的だったので、お願いして録音させてもらいました。何種類かずつの単音と旋律がランダムに流れるようにしています。

こだわりポイント（３b）音を途切れさせない

新しいウェブサイトでは、ページ遷移にpjaxという技術を採用しました。普通のウェブサイトは、ページ遷移するときに、普通はページ全体が書き換えられるのですが、ヘッダやフッタはそのままに、コンテンツ部分だけ読み込むようになっています。ページ遷移時の読み込みが早いといったメリットがあったりするのですが、なぜpjaxを使うことにしたかというと、音を取り入れたからなのでした。

波やラブドラムのBGMを流すアイディアは素晴らしかったのですが、ページ遷移をすると音が途切れてしまうという問題が発生してしまいました。そこで採用したのがpjaxという技術でした。pjaxのおかげで音が途切れなくなって、ページ遷移が軽くなり、ページ遷移するときのアニメーションをいれることもできました。

ユーザーのアクションなしに音を再生することができないので、音に気付いてもらえるようにコントローラーを少し動かして注意を惹くようにしました。

こだわりポイント（４）素材は買わずに地産

イラストも、トップページのメインビジュアルの背景の海の水彩も自分の手で作りました。
以前、ウェブサイトで音を鳴らしたとき、音は購入したものを使ったのですが、今回は地産にこだわりたくて、全て地元で録りました。

おまけ）スマートフォン対応

今さら、という感じですが、スマートフォン対応いたしました。お客さまにはスマートフォン対応が必要と言っておきながら、自社サイトはスマートフォン対応をしていませんでした。ようやく対応しました。

リニューアル記念プレゼント

ウェブサイトのリニューアルを記念して、ビーチサイドワークスから出版した写真詩集「BeachsideDays」をプレゼントします。詳しくは以下の記事を参照してください。