依頼内容
アウトドアブランドを運営するROOT株式会社様より、新規アウトドアブランドサイトの制作をご依頼いただきました。
アウトドアデザインユニット・Lock様が手がける「OUTDOOR MONSTER」というブランドの公式サイトを、クライアント様と協業で立ち上げるプロジェクトになります。
今回は既存のブランド・キャラクターのイラストがあることから、その世界観を活かしたサイトデザインを制作すること、運用・管理がしやすいWebサイトを制作することが求められました。
ラフ作成〜トンマナ設計
本プロジェクトでは、デザインの方向性を検討する段階として、トンマナの異なる2案を制作しました。
A案：イラストのタッチ・世界観を重視した構成
全面的にイラストを使用し、キャラクターの独自性や世界観の魅力が伝わることを重視した案です。
販売促進を前面に押し出すのではなく、ブランドやキャラクターが持つ世界観を丁寧に表現することを目的としています。
B案：アウトドア用品との関連性を重視した構成
アウトドア用品との親和性が直感的に伝わるよう、写真要素を中心にしつつ、イラストを部分的に取り入れた案です。
ファーストビューで商品ジャンルが明確に伝わるため、グッズの販売促進に適した構成としています。
また、より具体的にイメージをすり合わせるため、各案に対して複数のカラーバリエーションも展開しました。
検討の結果、今回はキャラクターの世界観や独自性を重視した「A案」に決定いたしました。
カラー設計では、Lock様のロゴマークに使用されている赤色を採用し、ボタン等のアクセントに使用することで、ブランドイメージとの一貫性を担保いたしました。
また、本サイトの世界観を成立させるうえで、イラストは最重要要素のひとつでした。
今回はLock様に描き下ろしていただけることになったため、弊社側でサイト内で使用するイラスト素材の一覧と参考資料を事前に整理してご共有いたしました。
デザイン制作
＜ボタンUI＞
UIは、描き下ろしイラストのテイストと馴染むように、ボタンやサムネイルを線で囲むデザインを採用。
またメニュー領域は、どの画面でも一貫してイラストの質感が伝わるよう、紙のような風合いを感じるベースを敷き、サイト全体の手触りを揃えました。
＜キャラクターを生き生きと見せる演出＞
キャラクターや世界観を「ただ見せる」のではなく、ページを回遊するたびに楽しさが続くよう、細かな演出と配置ルールを設計しています。
・CSSアニメーションを用いて、キャラクターに飛び跳ねたり左右に揺れるモーションを加え、閲覧して楽しいサイトとなるように
・「時折キャンプに行きたくなる気持ち」を想起させるため、木や花などの自然物イラストをランダムに配置。その中にモンスターを紛れ込ませることで、見つける楽しさを作る
・どのページにいても自然の中にいる気分が続くよう、各ページのヘッドには山と空のイラストを採用
・ページTOPへ戻るボタンには、キャラクターがひょこっと覗き込むような配置にし、操作導線の中にも遊び心を組み込む
実装
＜CMSを用いたコンテンツの更新＞
複数のキャラクター、商品の情報をサイトに掲載するため、クライアント様側で管理・運用のしやすい構造を考え、WordPressを構築いたしました。
今回のサイトではキャラクターや商品の情報が複数のページで連動して表示されるため、WordPressの管理画面上でキャラクターと商品の紐付けが行えるような仕様にいたしました。
アウトドアブランドサイト OUTDOOR MONSTER COLLECTION
