WORKS
熊野マリンスポーツ推進委員会
ビーチマリンスポーツフェスティバル in ATASHIKA
制作ジャンル
- Webサイト
制作期間
3ヶ月
担当
- リサーチ
- デザイン
- コーディング
使用技術/ツール
- Figma
- Adobe Illustrator
- Visual Stduio Code
- HTML
- CSS
- Sass
- BEM
- JavaScript
- WordPress
- ChatGPT
- Google Form
使用フォント
- Noto Sans JP
備考
-
トライデントコンピュータ専門学校
Webデザイン学科進級展展示作品
発表資料も併せてご覧ください。
三重県熊野市で開催されるマリンスポーツ大会「ビーチマリンスポーツフェスティバル in ATASHIKAのサイト制作を行いました。
概要
このイベントは熊野市のマリンスポーツ認知度向上のために開催されています。しかし、認知度向上という名目にも関わらず、周知方法は地元メディアと一部のSNSのみ。
マリンスポーツの目線でも熊野の魅力を知っている、 知って欲しい自分にとってはあまりにも勿体無い状況であり、 この機会にマーケティングの勉強も兼ねて、 熊野市町おこし協力隊とタッグを組むという形で本大会の認知度向上及びサイト制作に関わらせていただくこととなりました。
Point1
「サイトの存在目的」を考えて制作したサイト
このサイトの目的は「大会の参加者を増やすこと」です。
そのためには大会の参加者の情報が必要不可欠でした。
しかし今までの大会参加者の情報は名前のみ。より詳細な参加者の情報を集めることから始めました。
今大会は「他の大会を出し抜く」という目的ではないため、競合は設定していません。
アンケートは記述式/マーク式の2種類を用意しました。
記述式アンケートも共に行なった理由は「参加者との会話によって生の声を聞くため」です。
このアンケートにより参加者の具体的な属性や参加理由などを取得できたことで、リアリティのあるペルソナ、KPI/KGIの設定が可能となりました。
これらを設定できたことで、サイトの目的を明確にし、最終的な着地点をクライアント側と相談しながら作業を進めることができました。
Point2
真の顧客へ向けたデザイン
サイト制作側の顧客はクライアント（依頼側）であり、その意向を最大限反映しています。ですが、実際にサイトを閲覧する人（真の顧客）は誰なのか、「見ている人に熊野の魅力が伝わるか」を考えてデザインを行いました。
配色
サイトの配色は以下の通りです。
このカラーは独断ではなく、先述したアンケートの「熊野市のイメージカラーは何か」という質問の回答と実際に熊野市で体験したシーカヤックとSUPからのイメージを踏まえてクライアントと選定しています。
ベースカラーは熊野市の太平洋、メインカラーは太平洋の波飛沫、アクセントカラーは熊野市の名産のみかんからサンプリングをしています。
トップページの中央部〜下部にかけては背景色にグラデーションをかけており、これは沿岸部から外洋にかけて深い青に染まっていく、熊野の海を表現しています。
情報設計
情報の整理にも心がけています。
クライアント側から「お知らせや追加情報の即時更新を可能にしてほしい」という要望があり、WordPressを用いたサイト構築を行っています。
ただ更新したものを表示するだけであれば良いというわけではなく、カテゴリーごとに分けることで、求めている情報の迅速な確認が可能になると考え、トップページのお知らせ表示セクションはJavaScriptを用いたタブ切り替えによって、情報の取捨選択を可能としました。
カテゴリーも色別表示を行っており、一目で判別できるようにしています。
キャッチコピー
サイト内のキャッチコピーの制作も担わせていただきました。
メインのキャッチコピー「いざ、太平洋へ」
「いざ、鎌倉へ」という、行動を起こす時、人を奮い立たせる時に使用されている慣用句からサンプリングをしています。一度は聞いたことのあるような文言にすることで、記憶に定着しやすくしています。
「太平洋」という文言はアンケートの大会参加理由として多くあった「太平洋を漕ぐことができる」という大会の特徴をわかりやすく表しています。
リードコピー①「誰とでも、どんな人でも」
本大会は幅広い年齢層、初心者から世界大会出場の上級者までが参加できる大会です。この魅力が一目で伝わるようにしています。
年齢層は小学生から80歳までと非常に幅広く、どんな人でも挑戦していただきたいという思いがあります。
リードコピー②「ハンパない、熊野の絶景」
ハンパないという言葉は私は若者言葉だと思っています。参加者アンケートを分析するに、年齢層は40歳以上が60％を占めていました。ベテランの方々だけではなく若者にもぜひ来てほしい、そんな思いを込めて「ハンパない」という言葉を使用しました。
Point3
Webを学んだ1年の集大成としたサイト
デザイン
元々デザイナーになりたくて入学をしているので、デザインには自信がありました。 しかしそれはただ自信があっただけで、現実はそうではありませんでした。思うようにベクターも引けない、色合いもおかしい。デザインの4原則「整列/近接/反復/対比」もまともにできていなかったと思います。そんなことはもう1年生の秋で終わり、この制作期間中に毎日1サイト、合計70サイト近くを分析・言語化してまとめたことで、デザインの４原則がどれだけ大切かを学びました。この経験をこのサイト制作/ポートフォリオ制作に活かしています。
コーディング
4月に入学し、その時初めてHTML,CSSに触れました。最初は要素を中央に寄せるプロパティなども全くわからず、強引なコーディングをしていました。ですが勉強していくにつれ、構造を頭の中でイメージできるようになり、BEM及びSassの活用もすることによってスピーディーなコーディングが可能となりました。基本的なコーディングが早くなった分、JavaScriptや難解なCSSのコーディングに時間を割くことができたと思います。
マーケティング
大学では経営学部でマーケティングを専攻していました。ですが学んだことを活かす機会もなく、活かすことのできる会社にも就職できず、「学んだ意味があったのか」という状態でした。ですがこのサイト制作が「自分が持っているマーケティング知識を実践できる場所」でした。大学時代の知識はほとんど抜けているのでもう一度マーケティングについて勉強、マーケティング検定2級資格を取得することで、「自分の持っているマーケティング知識の見える化」を行い、その時に得た知見を具体的にはマーケティングリサーチやペルソナの設定やKPI/KGIの設定という形でこのサイト制作に活かしています。また、現在ネットマーケティング検定についても勉強中(2/11受験)です。