「魔法部」 ブランドサイトのつくりかた
今回より、Webサイトの制作方法を実際の案件を通してお伝えする「Webサイトのつくりかた」シリーズをスタートします！
Webサイトは目的や狙いによって制作方法はさまざま。いざつくろうとすると...
・制作の進め方がわからない
・企画のアイデアがまとまらない
・どんなデザインが良いか判断できない
・アニメーションが考えられない
など、わからないこともたくさん出てきますよね。
このシリーズでは、そんな「実際どのように制作しているのか」という疑問を、制作を依頼される方・制作を担当される方の参考となるように、弊社の制作実績を通してお伝えしていきたいと思います。
第一回目は、魔法の世界観が魅力的なファッション・雑貨ブランド「魔法部」ブランドサイトのつくりかたをご紹介いたします。
01. 魔法部とは
魔法部
https://www.felissimo.co.jp/mahoubu/
「魔法部」とは、通販会社のフェリシモから新しく生まれたファッション・雑貨ブランドです。コラボワンピースや魔法陣が描かれたポーチなど、魔法の世界に入り込んだようなかわいいアイテムがたくさん！
商品の中には持ち手付きのビーカーも...👀
SNSやニュースサイトで取り上げられ、「こんな商品が欲しかった！」「サイトがかわいい！」と話題になりました。たくさんの方に魔法部を知っていただけた結果、新規のお客様との接点も増え、担当者さまにも大変喜んでいただくことができました。
そんな魔法部ブランドサイトの案件概要とクレジットはこちら👇
🖥 案件概要
目的：新ブランド「魔法部」の認知獲得・理解促進
ターゲット：魔法やファンタジーに憧れた大人女子
サイトタイプ：ブランドサイト
制作期間：約2ヶ月半
URL：https://www.felissimo.co.jp/mahoubu/
👨💻 クレジット
クライアント：株式会社フェリシモ
プロダクション：MEFILAS
ディレクション：原田 大地
デザイン：神杉 遥介
プログラミング：金納 達弥
イラスト：mikemori（フリーランス）
魔法部のサイト制作は、写真をメインにしたサイトにしたいというオーダーからはじまりました。それがなぜ、イラストメインで構成されたファンタジーでかわいいサイトとなったのかを、実際の制作の流れを通してご紹介していきます！
02. はじまり
長年お付き合いのあるフェリシモの担当者さまから、新ブランドのサイト制作をご相談をいただきました。今までの実績と成果への期待からご指名いただけたとのこと…！
お打ち合わせは、クライアントと弊社ディレクターの原田とで行い、下記のオーダーをいただきました。
✋ オーダー
・魔法やファンタジーに憧れた大人女子がターゲット
・ターゲットに届くように話題化させたい
・魔法部がどんなブランドなのかを理解してもらいたい
・Webサイトは写真主体のデザインにしたい
お打ち合わせでは、商品ラフの確認や推し商品、担当者さまの想いやサイトデザインのイメージなどを共有していただきました。写真のイメージをお伺いすると、レースやフリルを好むような女の子をイメージした商品撮影やイメージ撮影を想定しておられるとのことでした。
お話を聞くにつれ、ディレクターの原田は魔法部の世界観を表現するには、写真とは違う表現のほうが良いのでは？と考えはじめていました。
👨💻 ディレクター：原田
ターゲットが「魔法やファンタジーに憧れた大人女子」だったため、アニメや漫画的表現のほうがターゲットに響くイメージがありました。
こうして、オーダーの整理を行いつつ企画案の検討に移りました。
✏️ つくりかたポイント
・オーダーを鵜呑みにせず目的に対して最適な表現を模索する
03. 企画
フェリシモとのお仕事では、カタログのトーンを参考にしてサイトのデザインを作成する場合がありますが、今回はWeb限定ブランドのため、Webサイト側で世界観をつくる必要がありました。
👨💻 ディレクター：原田
商品の幅が広い印象だったので（魔法少女をイメージさせる可愛いパスケースがあったり、魔女っぽいイメージのビーカーや紅茶があったりなど）、世界観を統一させるには、モデル写真などのリアルなイメージを出すよりも、ターゲットにとっては馴染みが深く「魔法の世界」をイメージしやすい、ファンタジーなイラストでまとめたほうが、より魔法部の世界感を強められると考えました。
ここからイラストを主体とする表現案をさらに詰めていきました。
👨💻 ディレクター：原田
最初は、イラスト”だけ”で世界観を作る方向を目指していました。「だけ」というのは、テキストや写真は一切使用せず、イラストのみを使ったデザインで訴求するWebサイトです。そこまで振り切っても良いと思った理由は、テキストがあればあるほど、ファンタジー感が薄れてしまうためです。今回の主目的は新ブランドの認知だったため、ブランドサイトでは世界観を堪能してもらうことを優先したいと考えていました。
この提案を具体化するために、ビジュアルデザインが得意なデザイナーの神杉をメンバーに加え、魔法部の世界観をWebサイトでどう表現するかブレストしました。
「魔法陣」「幻想的」といったキーワードを洗い出したり、ターゲットに近いふたりの奥さまにヒアリングしたり、SNSでリサーチをかけたり、魔法少女のイラストを見たり…
ありとあらゆるイメージから方向性を探りました🔮
色々と調べた中で、コンセプトにある「もしもあの物語に出てくるような魔法が使えたら」「昔、魔法少女に憧れていた大人になった女性」から、「憧れ」や「懐かしさ」というポイントに着目しました。
「魔法部」を表現するには「魔法」だけではなく、これらを組み合わせるほうが “ 魔法部らしさ ” が出るのではないかと考え、「魔法」×「ノスタルジック」×「エモーショナル」の組み合わせで提案することを決めました。
ただ、ここからが大変でした。この方向性に合うイラストレーターさんがなかなか見つかりません…。この条件にピッタリ合う人なんているのか...？と思いながら、SNSを駆使して探しました。
👨💻 ディレクター：原田 ＆ デザイナー：神杉
Twitter・Instagram・Pinterestを中心にイラストレーターさんを探しました。テイストが合いそうな方をフォローして、その方がシェアしている方をフォローして…と枝葉のように広げるような形です。また、お付き合いのあるイラストレーターさんや絵師さんに聞いたりしました。知名度や実績などは関係なく、今回の世界観を表現できる人という条件で探しました。
このまま見つからないかも...と少し弱気になりながらも探し続けた結果、この人だ！と思えるイラストレーターさんを見つけることができました。しかも、ポートフォリオを拝見すると、魔法使いのイラストがあるという奇跡…！！
ぜひmikemoriさんにお願いしたいという話になり、さっそくTwitterのDMでご依頼内容や世界観をご連絡したところ、快くご依頼を承諾していただくことができました！
こうしてまとめた提案内容を、ディレクターの原田が企画として仕上げます。方向性をより具体的にイメージしてもらうために、イラストのトーンやWebサイトのワイヤーフレーム（画面構成）を提案資料にまとめてご説明させていただきました。
お送りした資料はこのような感じ👇
（守秘義務の関係上、詳細はぼかしております 🙇♀️ ）
📃 提出資料
・イラストの方向性の説明資料
・PC/スマートフォンのワイヤーフレーム
・見積書
・スケジュール
イラストメインで情報量も限りなく削ぎ落とした案をご提案した結果、フェリシモでは写真をメインにしたサイトが多く、情報量の少ないサイトの前例がないため、最初はクライアントから不安の声が上がりました。
しかし、世界観づくりの考えに共感いただけたことや、新しい挑戦を行うことへの熱意が伝わった結果、コンセプトと商品写真の掲載を条件にイラストメインで進めることで合意を得ることができました。
こうして、Webサイトの方向性が確定しました！
✏️ つくりかたポイント
・提案は実施すべき理由を論理的かつ想いをのせて伝える
・アイデアはメンバーと意見を出し合い精度を高める
04. デザイン
ここからいよいよデザインのお話です。
まず、イラストのモチーフを決めるところからはじめました。世界観や演出・アニメーションについても考えながら、メンバー同士でコミュニケーションを取りつつ、アイデアを出していきます。
👨💻 デザイナー：神杉
まず「魔法」という単語から連想できるモチーフを洗い出しました。「フクロウ」「魔法学校」「魔道書」「黒猫」など魔法から連想できるモチーフと、「空飛ぶクジラ」「ペガサス」など世界観にマッチしそうなファンタジーなモチーフの二軸で出しました。モチーフを洗い出して精査した後、それぞれのポージング・動きはどうするかなどを話していきました。
イラストレーターさんもブレストに参加いただき、「鍵」や「鏡」などのモチーフをご提案いただきました。
こうして選定したモチーフとイラストの方向性をお伝えしてイラストを作成していただきました。
ラフの段階からクオリティーが高くて驚きました😲
Webサイトとして使用するためのサイズ調整や気になった箇所をフィードバックして調整を進めつつ、Webサイトのデザインに取り掛かりました。
まず、サイトの体験設計として魔法の世界に迷い込んだユーザーを魔法使いが案内するというストーリーを用意して、ワイヤーの構成をもとにデザインを組み立てていきました。
👨💻 デザイナー：神杉
サイトの世界観は、テーマの「魔法」×「エモーショナル」×「ノスタルジック」からぼんやりとイメージを膨らませ、メンバーとの議論を重ねて構築していきました。全体を通してほぼイラストだけでデザインするのは不安もありましたが、個人的にも新しい挑戦で良い経験となりました。
使用するイラストの数が多くなると、バランスを保つことが難しくなるため、不安定な見た目にならないように調整をしていきました。
👨💻 デザイナー：神杉
自分がデザインするときの感覚の話ですが、ページのセンターに支点を置いたときに、左右どちらにも傾かずピタッと静止するようなバランスを目指しています。（下図参照）
例えば「少し右に傾くので左側の雲を若干大きくして、重心を左に寄せようかな」みたいな細かいモヤモヤをつぶしていくのですが、今回の案件はイラスト数が多かったため、想定していた以上に苦行でした…！
左の方が不安定なのが伝わりますでしょうか…？
他にも、世界観をより感じさせるために、これだ！という色に出会うまで調整を繰り返しました。
👨💻 デザイナー：神杉
どこか懐かしいファンタジーな魔法の世界観を出すために、ピンクとブルーの色使いはデザインが出来上がる直前まで微調整を繰り返しました。
こだわりの水色とピンクのグラデーション！
商品の配置バランスや雲の密度など、細かい社内ブラッシュアップを繰り返してデザインを提出。事前に方向性を摺り合わせていたため、大きな変更もなく無事OKをいただけました。
✏️ つくりかたポイント
・見た目の前に体験設計（ストーリー）を考える
・要素が多いデザインは重心を決めてバランスを整える
・世界観を表す表現は徹底的に細部までこだわる
05. プログラミング
プログラミングに入るため、エンジニアの金納がチームに合流し、ミーティングで下記の内容を共有しました。
・案件の概要
・デザインの意図
・アニメーションの案
・演出アイデア
企画やデザイン段階でまとめていた演出案をエンジニアに伝えて、より良い表現・実現可能かを打ち合わせの中で確認していきます。
どのように確認するかというと…
🙋♂️ ディレクター：原田
「魔法の世界に迷い込んだような没入感をつくりたいので、全体的にパララックスで奥行きを出して、各イラストも動かしたいです」
👨💻 エンジニア：金納
「全体をパララックスにしてしまうと動作が重くなりすぎて体験性が落ちるので、印象を強めたい部分だけ視差効果をいれましょう。あと、サイトの雰囲気を考えて、イラストはGIFアニメーションにしましょう」
といった形です。最初はできるかどうかで考えず、理想形でアイデアを出し合い、イメージを膨らませてから実現性を探ることで、より良い演出を模索するようにしています。
ちなみに、今回のサイトではたくさんGIFアニメーションが使われています。コマ数分のイラストをイラストレーターさんに描いていただき、ディレクターの原田がPhotoshopでGIFアニメーションを作成しました。動きはサイト全体のアニメーションやバランスを見ながら調整しつつ、出来上がった素材をエンジニアの金納に共有し、プログラミングを進めていきました。
👨💻 エンジニア：金納
開発環境は gulp/sass/babel/webpack などで構築し、実装の効率化を図っています。アニメーションは、パフォーマンスを高めるためにCSSメインで行い、タイムラインなどが必要な複雑なところにはGSAPを、背景のかけらにはPixi.jsを使用しました。アニメーション以外は普通のHTMLとCSSです！
ユーザーにより魔法の世界に没入してもらうため、細かいアニメーションにもこだわりました。今回、特に調整に時間がかかったポイントが2点ありました。
👨💻 エンジニア：金納
ひとつ目がページトップにホバーした時に風が強くなるところ。ホバーしてから段階的に風が強くなり、魔女がページトップへ戻る動きに繋げられるように調整しました。
今から魔法を使うのかな？とワクワクする演出に...！
👨💻 エンジニア：金納
ふたつ目がトップに戻ったときに魔女が出てくるタイミング。露骨に魔女が帰ってきたなぁと気がつくタイミングではなく「おっ、魔女が帰ってきてる」と薄っすら脳内で処理できるタイミングにしています。
さりげなさがちょうどいい🧙♀️
そんな、動きにこだわるエンジニアの金納ですが、実はアニメーションを苦手としているようで....
👨💻 エンジニア：金納
アニメーションの気持ち良さについては、ひとりでは自信が持てないので、毎回案件のメンバーと一緒に見て調整を繰り返しながら、しっくりくるスピードとイージングを決めています。個人的にアニメーションの気持ちよさは”オカルトの類”だと思っているので、あまり理詰めでは考えていません。
チーム内でのアニメーションの調整は、ディレクターやデザイナーが「あと0.1秒早くしてイージング度合いを強めに」などと具体的に依頼することもあれば、「もう少しふわっとさせよう」といった漠然とした内容を全員でブラッシュアップすることもあります。
例えば、今回のマウス追従の演出も、魔法の世界観を強めるために「魔法っぽいキラキラ要素を入れよう」という意見から生まれたものです。
カーソルを動かすと、キラキラが！
👨💻 エンジニア：金納
マウス追従について調査している中で「動くJavaScript」というサイトを見つけて、テンションが爆上がりしました。昔懐かしいサイトのあきらかに過剰なアニメーションに対して、なぜか実家感みたいなノスタルジックな感情を抱いたので、騒がしさも過ぎれば有りにならないかな、という期待もあり、マウス追従にキラキラを入れることにしました。古典的な遊び要素をいれたことで世界観を強められたので良かったです。
演出がたくさん入り、イラストとの相乗効果でワクワクするようなサイトになりました。演出で特に苦労したのは背景のかけらの技術選定でした。
👨💻 エンジニア：金納
背景でかけらが舞っているんですが、かけらのレイヤーがイラストの間（下図参照）にあるため、背景色が入る動画は使えず、GIFは荒さが目立ち、Animated PNGはコマ落ちしてしまったため、結局WebGLで実装しました。インタラクティブな要素が少ないため、WebGLはオーバースペック感がありますが、透過のかけらレイヤーを実現するためにやむを得ず…（世界中のPCにもっと上等なGPUを積みたい）
3つのレイヤーの中央で「かけら」を動かしています。
✏️ つくりかたポイント
・理想形でイメージを膨らませてから実現性を探る
・気持ちの良い動きと動作の軽快さの両立を目指す
・表現に最適な技術を使い分ける
06. ブラッシュアップ
全体のプログラミングが終わった段階で、メンバー全員でテストアップを確認しながら、ブラッシュアップ作業に入ります。
普段なら顔を合わせながら行いますが、コロナ禍により全員がリモート勤務だったため、今回はオンラインで実施しました。Slackで通話しながら、画面共有でブラウザの挙動を見つつ、気になる点を随時その場で意見交換していきます。
リモートでのブラッシュアップ作業はあまり行ったことがありませんでしたが、ディレクター・デザイナー・エンジニアともスムーズに進められたと好評でした。
👨💻 ディレクター：原田
ディレクターという職種柄、外部パートナーのデザイナーさんやエンジニアさんとやり取りすることが多いので、特にやりづらさは感じなかったです。画面共有しながらあーでもないこうでもないと、逆にリモートではない時よりも密に連絡を取れていたかもしれません。
👨💻 デザイナー：神杉
小さなことですが、ビデオ会議をする際、画面共有でテストサイトを見ながら、同時に別画面で検証をして調整内容をすぐにエンジニアさんに共有できたりするので、その辺はスピーディに動ける印象がありました。
👨💻 エンジニア：金納
アニメーションなどの細かい調整はリモートでは厳しいと思っていましたが、案外スムーズに進みました。オンラインで常に会話しながら調整できたので、実際に集まって行う場合と比べて大きな違いはないと思います。3時間ぐらいがあっという間に過ぎました。
気づいた点があれば随時Slackで相談し、オンラインで打ち合わせができない時は、各自がアニメーションサンプルを作成して共有しながら、完成度を高めていきました。
例えば、ページトップに戻るアニメーションは、デザイナーの神杉が簡単なアニメーションサンプルを用意していました。
こちらを元にブラッシュアップしていきました！
こうしてメンバー全員のこだわりが詰まった、魔法部の世界が体験できるWebサイトができあがりました！
✏️ つくりかたポイント
・細かく意見交換を行い修正と確認を繰り返す
・演出案はメンバー全員で考える
07. 公開
こうして出来上がったサイトをクライアントに納品して公開したところ、公開直後から多くの反響をいただくことができました！ディレクター原田の投稿にもたくさんの反応をいただき、ありがとうございます。
フェリシモの新ブランド「魔法部」のオフィシャルサイトの企画・ディレクションを担当させていただきました！
— Daichi Harada / MEFILAS Inc. (@Daichi_666) May 20, 2020
可愛い商品とイラストだけで構成した不思議で少し懐かしい魔法の世界観をつくりました。
制作陣一同、魔法少女の気持ちになって制作しました。https://t.co/JeUwbJtnd4 pic.twitter.com/1ntmbF40Qe
魔法部の担当者さまからコメントを頂戴しましたので、この場を借りてご紹介させていただきます。
🧙♀️ 魔法部担当者さま
「魔法部の世界観を伝えたい」とお伝えしたものの、デザインについては着地点の見えない中でのスタートでした。ですが、ラフが上がってくるたび、社内では歓声があがるほど。ブランドのコンセプトやターゲットについて深く理解いただき、オーダー以上の創意工夫をしていただけたことが大変心強く感じました。続く第二弾の魔法部サイトもどのように制作いただけるのか今から楽しみです！
今回の案件は、「魔法部がどんなブランドなのかをWebサイトを通して理解してもらう」ことを関係者全員で目的共有し、「イラストを通して世界観をターゲットに訴求する」という戦略で目的達成を目指しました。
その結果、オーダーであったブランドの話題化や新規顧客の獲得を達成することができ、クライアントや多くの方々に喜んでいただけるWebサイトをつくることができました。
今回は「魔法部」のブランドサイト制作を通して、Webサイトのつくりかたをご紹介しました。
それでは、次回の更新もお楽しみに！
MEFILASでは、クリエイティブでユーザーの心を動かし、目的を達成するWebサイトを制作しています。
■ お仕事のご依頼やご相談
Web制作のご依頼やご相談がございましたら、お気軽にお問い合わせください。
https://mefilas.com/contact/works.php
■ 採用応募
MEFILASのメンバーとともにクリエイティブなWeb制作に挑戦したい方を募集しています。
https://mefilas.com/recruit/
■ パートナー募集
Web制作をサポートいただけるパートナーを募集しております。
https://forms.gle/krviW8sjUysj97T39
この記事が気に入ったらサポートをしてみませんか？