海の中へ、フックの科学へ。
触れてもらうことで、らしさを伝えるブランドサイト。

釣具業界で、他がやっていないことを盛り込みたい

フィッシングフックブランド「Fookism」のWebサイト制作を担当しました。全体の進行とアートディレクションに加え、写真撮影・3Dモデリング・モーションのディレクション、Webデザインから実装まで一貫して手がけました。

FookismのWebサイトを見る

クライアントから伺ったのは、「釣具業界で、他がやっていないことを盛り込みたい」というご要望。そこで、フックそのものを主役に据え、水中を思わせるビジュアルや操作に反応する演出、製品を立体的に見られる仕組みなど、ブランドに興味を持っていただくための工夫を重ねました。

商品コンセプトを、デザイン全体で表現

Fookismが展開するのは、釣りに使うフック（釣り針）です。海水・淡水それぞれの釣りに向けて、形状やサイズの異なる製品をラインアップしています。小さな道具でありながら、形や細部にそれぞれの特徴がある。その違いやこだわりに目を向けてもらうことを、Webサイトの入り口として考えました。

ロゴデザインとブランドコピー「Science fishing hooks」は、クライアントが用意されたものです。Webサイトでは、このコピーに込められた商品のコンセプトをデザインの軸に据えました。釣りの舞台となる水中の風景に、フックの形を捉えるワイヤーフレームの表現を組み合わせ、自然と向き合う釣りの世界に、科学や精密さを感じさせる視点を重ねました。

フックの各部を解説する見せ方や、自分で形状を確かめられる3D表示にも、その考え方をつなげています。コンセプトを言葉として掲げるだけでなく、色づかい、ビジュアル、情報の見せ方、操作したときの体験を通して、サイト全体で表現しました。

ブランドの世界へと誘う、導入のデザイン

サイトを開くと、黒い背景に炎のロゴが現れ、そこから水中の世界へと移ります。ブランドの第一印象をつくる導入として、ロゴの動きと画面のつながりを検討しました。

短い導入にも、比較と検証を重ねて

ロゴのアニメーションは、複数のパターンを制作。クライアントからご要望いただいた動き方やアニメーションの長さを再現するため、試行錯誤を重ねました。ロゴの現れ方や炎の揺らぎ、動きの強さを見比べながら、ブランドの印象に合う表現へと調整しました。

実際のサイトでは、水中の世界へつなぐ導入に

炎のロゴから水中のビジュアルへ。サイト全体の流れの中で見せることで、ブランドの世界へと誘うオープニングに仕上げました。

ロゴに続いて現れるのは、水面から光が差し込む水中の風景。フックを大きく配置し、釣りの道具の中では小さな存在であるフックに、まず視線が向かう構成にしました。

水中の雰囲気を感じられるよう、泡がランダムに現れる演出も加えています。操作に反応する波紋とともに、海の中を思わせる空間を表現しました。

操作に応える波紋で、水とのつながりを感じる

画面に広がる波紋は、見る方の操作に合わせて生まれます。PCではマウスの動きに、スマートフォンではタッチやスクロールなどに反応する仕様です。

水を感じさせる表現を、背景だけでなく操作したときの反応にも取り入れました。操作に応じて変化する画面を通して、ブランドらしさが自然と伝わることを目指しました。

形へのこだわりを、立体で確かめられるように

フックの特徴を紹介する部分には、3Dモデルを回転・拡大して見られる仕組みを設けました。

曲線や針先、角度によって変わる形の見え方など、平面の写真だけでは捉えにくい部分も、自分で動かしながら確かめられます。製品への関心を、細部への理解につなげるための工夫です。

世界観から、製品を知るための情報へ

製品ページでは、海水・淡水などのカテゴリーを切り替えて商品を探せるようにしました。気になる商品を選ぶと、一覧の上に詳細画面が開くモーダル表示を採用。フックの画像やカラー、サイズ表を確認し、閉じると一覧に戻れるため、ページを行き来せずにほかの商品も見比べられます。

詳細画面は白い背景で情報を整理し、ブランドの世界観を楽しむ場面から、商品の特徴を具体的に確かめる場面へとつないでいます。

また、公開後はお客様ご自身で商品を追加できる仕様にしました。見る方の探しやすさに加え、商品が増えていくことを見据えた運用のしやすさも考えています。

「他にはない」を、ブランドらしい表現に

今回大切にしたのは、新しい演出をFookismらしさにつなげることです。水との関わりを感じさせる波紋、フックを主役にしたビジュアル、形を確かめられる3D。それぞれの工夫に、ブランドや製品を伝える役割を持たせました。

進行からデザイン、実装まで一貫して担当することで、見た目と動きを併せて検討し、細部を調整しています。

「他がやっていないことを盛り込みたい」という思いを受け止め、何を印象に残し、どう関心を深めてもらうかまで考える。一本のフックを入り口に、ブランドの世界を体験できるWebサイトを目指しました。