1
/
5

アナログとデジタルの融合。模様に触れてメロディを奏でるホリデーカード。

こんにちは。フェンリルでディレクターとして働いている佐々木です。

フェンリルでは、毎年年末にお世話になっている方々に向け、オリジナルのホリデーカードを制作してお届けしています。

〈これまでに制作したホリデーカードはこちら〉

アニメーションが六角形の窓を 優しく灯すカード | フェンリル
透け感の異なるカード カードは透け感にこだわった作りに。カード中央の六角形の窓は擦りガラスのような質感を目指し、映像コンテンツが美しく透けるように調整。カードを通すことで、液晶...
https://www.fenrir-inc.com/jp/about/card-animation/
光と音で彩るツリー。幻想的な世界がひろがるホリデーカードをデザインしました! | フェンリル
こんにちは。デザイナーをしている新卒2年目の松井です。梅雨の季節ということもあってジメジメした日が続きますが、この時期は意外と好きだったりします。雨音が心地よかったり、紫陽花の美しい姿を見ること...
https://www.wantedly.com/companies/fenrir/post_articles/329743


フェンリルのデザインストーリーでもホリデーカードについての記事を公開しています。

模様に触れて メロディを奏でるカード
アナログとデジタルの融合で、新しい体験を 触れると温かな質感が得られる紙と、驚きやワクワクが起きるスマホ。私たちが普段別々に接している両者の良さを組み合わせたプロダクトです。こ...
https://www.fenrir-inc.com/jp/about/card-kanaderu/

今回は制作の裏側について、より詳しくご紹介します。

ホリデーカードで伝えたいこと

ホリデーカードは毎年、デザインに携わるスタッフ間でアイデアを出し合い、コンペ形式で企画内容を決定しています。2022年は私の案が採用され、「アナログとデジタルを掛け合わせ、触れた手に思いを伝えるホリデーカード」を制作することになりました。

私は元々印刷物のデザインを手掛けていました。そのため、デジタル領域の技術が目まぐるしく進歩している今、改めて「紙」を使って表現できることはないか、紙のもつ良さを見直したいという思いを抱いていました。

今回の企画では、特有の手ざわりや温もりを感じられる紙と、今や生活に欠かせないデジタルデバイス、双方の良さを生かしたいと考えました。

この二つを掛け合わせ、今までにない体験を提供することで、「アナログ」「デジタル」それぞれの価値を改めて意識するきっかけになれたら。そんな思いがこの企画の発端です。

模様に触れて、メロディを奏でるカード

実際に完成したホリデーカードがこちらです。

(カードの模様を指で円を描くようにぐる〜っと触ると……次々に光と音が加わり、ホリデーシーズンを連想させるメロディが完成します。)

指で触れ続けることで新しいメロディに出会う。まるで楽器を演奏しているかのような感覚で、心のままに楽しめるカード。私たちはこのカードを「kanaderu」と名付けました。

そうですよね、「なでる…かなでる…」で駄洒落です! このような遊び心も、今回の制作チームにとっては大切な要素の一つでした。

触りたくなるカードを作る

人が手に取って触れてみたくなる模様とは? 制作メンバーでアイデアを出し合いながら、試行錯誤を繰り返しました。

(微調整も含め100種類ほどのデザイン案を作成して検証しました)

見る人の想像力が働き、「こんなことができそう」というおおよその予測ができてしまうような単純なモチーフでは、スマートフォンと組み合わせたときの驚きが少なくなってしまいます。

「これから何が起こるのだろう」と思わず触れてみたくなり、それでいてホリデーシーズンらしさのある模様を検討し、最終的に雪の結晶をモチーフにしました。

(加工サンプルを作成。最終の意匠は0.1mm単位で何度も調整を重ねました)


模様の手触りを追求する

この雪の結晶のデザインは、見た目の美しさだけでなく、触れて音楽を奏でるという、動きの道標でもあります。雪の結晶を象徴する六角形をベースに、途切れなくずっと触れ続けられるように中心に円形を配置しました。

(加熱型押し加工で、独特の透けた質感が生まれます。良い手触りが生まれました)


用紙は「パチカ」という独特の触感のある用紙を使用。印刷会社と何度も試作を繰り返し、理想の手触りを追求しました。美しい透明感が出るか最後まで不安がありましたが、印刷会社の職人の技術と情熱によって、理想のデザインを見事に実現していただきました。

(完成したデザイン。ずっと触れていても飽きないように、点線やギザギザ、触感を楽しめるさまざまな形を模様に取り入れました)


(重ねて持ちやすいようにカードの四隅に丸みを。押さえやすいようにトムソン加工で六角形の穴をあけました)


パッケージのような台紙

熱を加える加工によるカードの湾曲を軽減するため、厚紙の台紙にパッケージのようにセットした状態でお届けしました。

(台紙からカードを取り外すと、台紙に書かれた説明文とQRコードが現れます)

繊細なカードを固定するために、2点のスリットは線の切り込みでなく、3mmの楕円形にしました。楕円のスリットを入れることで、まるで遊んだ後のおもちゃをおもちゃ箱にしまうように、カードの使用後も元通りセットしやすくなりました。

カードをデジタルと掛け合わせ、ユーザーの操作によってはじめて「色」が生まれるように、カードは無彩色であることを徹底しました。

「聞こえてくる」メロディを作る

模様に触れると流れ出すメロディは、日頃フェンリルのデザイナーとして活躍し、音楽制作を得意とするメンバーに協力を依頼しました(すごいですよね!)。

彼は3年連続でホリデーカードを彩るメロディの作曲を担当しています。今回はメロディが主役のカード。特に高い完成度が求められました。触れるにつれて静から動へと盛り上がっていく音、冬を連想させる神秘的な音、ずっと聞いていられるような心地の良い音……とても素敵なメロディが完成しました。

(音の増える仕組み。雰囲気の異なる音で、同じメロディの印象を変化させました)

このカードで目指したのは、指で触れて楽器を奏でるような体験を届けること。そのため、音楽の果たす役割はとても重要でした。

触れ続けると音が出る仕組み

ここでは「kanaderu」を再現するためのウェブコンテンツについてご紹介します。

このウェブコンテンツの作成は、ディレクション、デザイン、そしてエンジニアリングにも精通しているメンバーが担当しました(これまたすごい!)。

(六角形に触れたままもう一方の指で別の箇所に触れることで音が鳴ります)

円を描くように模様の上を指でなぞる動作は、実際に「指で円を描く」という動作を読み取っている訳ではありません。

画面の左右2つの領域を指が移動することで、「触れ続けている」とを判定し、また領域内の上下の動きを読み取ることで、時計回りか反時計回りかを判定しています。

つまり、円を描くように指を動かさなくても、左右の領域を往復するように動かし続けていればメロディを奏でることができます。

メロディをコレクションする

できるだけ長くユーザーに触れていただき、メロディを聴いてもらいたい。しかしユーザーが、触れて楽しいだけで、遊び方の正解が分からない、と感じてしまうことは避けたい。

この二つの課題を解決するために、メロディをコレクションするという、ゲーム性を取り入れることにしました。

(全部で何曲あり、どこまで奏でることができたのかが表示されます)

実績画面には、反時計回りでも音を奏でることができるということに自然に気が付いてもらえるように、テキストでヒントを表示し、雪の結晶のバッジの回転方向にも演出を加えています。

すべてのメロディを奏でることができたら、その証としてメッセージが表示されます。

意図した触り方をしてもらうために

しかしこれらのメロディやゲームで遊んでもらうためには、ユーザーに、制作者が意図した操作をしてもらう必要があります。

端的な説明で、簡単に操作を理解してもらえるように、社内のさまざまな部署のメンバー協力を仰ぎユーザーテストを繰り返しました。

当初「これで操作方法を理解してもらえるだろう」、と極力操作説明を省いたシンプルなものにしていました。しかし制作者の意図に反し、初めてカードに触れたメンバーたちの頭上には「?」が......。

イラストとテキスト、アイコンを組み合わせることで、視覚的に理解しやすい操作画面を作りました。

デザインと技術で、ひとつのプロダクトを作り上げる

つまずいてはメンバー同士で解決策を出しあい、ブラッシュアップを繰り返しました。この体験をお届けできたのはプロジェクトメンバー全員の協力と情熱あってのものです。私は、久しぶりにデザイナーとして手を動かしたことで、やっぱりデザインは楽しい! と再認識することができ、また、苦労した分、貴重な学びが数多くありました。

デザインと技術で多くのハピネスをお届けしたいと考える私たちは、ホリデーカード制作においてもその姿勢で取り組んでいます。来年のホリデーカードもお楽しみに!

Invitation from フェンリル
If this story triggered your interest, have a chat with the team?
フェンリル's job postings
4 Likes
4 Likes

Weekly ranking

Show other rankings
Like 佐々木 史昭's Story
Let 佐々木 史昭's company know you're interested in their content