見出し画像

#魔法部 フェシリモ #1日1サイトレビュー



【概要】

株式会社フェシリモより「大人のための魔法で、あなたに勇気とときめきを。」をコンセプトに活動を始めた『魔法部』。その魔法部が販売してる「毎日にときめきと勇気が必要なあなたのための魔法を感じるアイテム」を紹介しているランディングページサイト


【ターゲットと目的】

・ターゲットは魔法部が魔法部員として提示している「魔法に憧れる少女の気持ちを持った大人たち」。主に忙しい毎日に心が折れそう、いつもと同じ日常に退屈している20〜30代の女性と考えられる

・毎日を頑張って生きている大人たちにファンタジーの世界みたいな魔法を感じてもらいたいという思いから、魔法をモチーフとしたアイテムを持ち、「今日はいつもより強くいられそう」「何気ない時でもなんだかときめく」という気持ちになってもらうこと(最終的な目的はアイテムの購入)を目的とする


【印象】

・主にピンク、紫、水色の配色でファンタジーを感じさせられる

・魔法っぽい配色、可愛らしいイラストでターゲットとなる成人女性が少女時代に憧れた魔法やアニメを思い出すような印象のデザイン


【構成】

・全体の構成は、メッセージ、アイテムの紹介、ショップブログ・ショップガイド・SNS公式アカウントのアイコン

・魔法部のコンセプトを伝えてからメインであるアイテムの紹介をしている


【メインビジュアル】

・フルスクリーン

・魔法の国や魔女、月、雲などがあり、空の上にいるような可愛らしい、ファンタジーなイラスト

・大きな月のイラストの上にロゴっぽい書体で魔法部と表示

・魔女のスカートが揺れたり、本がめくれていたり、枯れ葉のようなものが飛び交っていたり、風を感じるようなアニメーションが使われている

・左右には少し余白があり、魔法っぽい呪文のような文字が常に流れている


【コンテンツ】

・I型レイアウト

・上から下にかけて物語が続いてるようでコンテンツ間にあまり区切りがない

・カーソルを動かすとカーソルの後にキラキラとした輝きの残像が現れる。また、「気になるアイテムの鍵を開けて」というコンテンツを超えた瞬間、煙のようなイラストが出て、カーソルが鍵のイラストに変わる→演出が細かく、女性の乙女心・少女心をくすぐる

・アイテムの紹介コンテンツを過ぎるとカーソルは煙に包まれ、本来のカーソルの矢印に戻る

・アイテムの紹介コンテンツではアイテムについている鍵穴のカーソルを合わせると鍵穴が大きくなる、鍵が開くようなマウスオーバーをする

・アイテムの背景にゴージャスな額縁や魔法陣のようなイラストがあり、徹底的に魔法の世界のような演出になっている

・メッセージの文章やショップブログ・ショップガイド・SNSアイコンのコンテンツは整列されているが、アイテムの画像は整列していない

・サイトの左右、コンテンツの間などの余白にはイラストがふんだんに描かれている。アイテムとイラストの区別がつかなくなる


【文字組み】

・アイテムの紹介の本文(14px)とフッター(11px)は-apple-system

・それ以外の文字は画像フォント(和文は丸ゴシック、欧文はスクリプト体のような装飾書体

・メッセージの本文は行間がかなり広く、一行の文字数が少なく、ゆったりと読める


【カラー】

・ベースカラーは白(#ffffff)

・メインカラーは少し白が混じったピンク(#ffd1ea)

・アクセントカラーはイラストの水色と紫

・ファンタジー、魔法を連想させるような配色

・全体的に白が少し混じった色のトーンのため、派手にならずにまとまっている

・白が混じった色やグラデーションなどで少しぼんやりとした印象


【レスポンシブ】

・サイトの左右の呪文が流れている余白が省略されている

・画面の幅の関係上、イラストの表示される範囲が狭くなっている


【サイトを通じてどのように目的を達成しているか】

目的:毎日を頑張って生きている大人たちにファンタジーの世界みたいな魔法をモチーフとしたアイテムを持ってもらい、強い気持ちやときめいた気持ちになってもらうこと→最終的な目的はアイテムの購入

・アイテムのモチーフに合わせて、少女時代に見ていたアニメの世界や憧れていた魔法・ファンタジーの世界を表したイラストやデザインでターゲットの乙女心をくすぐる

・サイトの可愛らしいイラスト世界観で少女心を取り戻してもらう→コンセプトを見て共感してもらう→アイテムを見て気になったものは詳細ページに飛ぶ→購入という行動をしてもらうような動線になっている


スクリーンショット 2020-05-23 15.44.31

スクリーンショット 2020-05-23 15.44.41

スクリーンショット 2020-05-23 15.44.51

スクリーンショット 2020-05-23 15.45.03

スクリーンショット 2020-05-23 15.45.08

スクリーンショット 2020-05-23 15.45.17

スクリーンショット 2020-05-23 15.45.23

スクリーンショット 2020-05-23 15.45.32

スクリーンショット 2020-05-23 15.45.38

スクリーンショット 2020-05-23 15.45.50

スクリーンショット 2020-05-23 15.46.00

スクリーンショット 2020-05-23 15.46.04


この記事が気に入ったらサポートをしてみませんか?