『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについて

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay11です！
昨日は「8th Wall Web新機能『Curved Image Targets（曲面画像認識）』を試してみる」という記事でした！

8th Wall Web新機能「Curved Image Targets（曲面画像認識）」を試してみる

今回は2020年10月から約1ヶ月間、新江ノ島水族館様にて開催された「えのすい七五三デジタルフォトフレーム」のデザイン制作についてご紹介します。

※クライアント様からは実績掲載OKの許可をいただいております。

「えのすい七五三デジタルフォトフレーム」って何？

新江ノ島水族館をイベント期間中に来場された3歳、5歳、7歳のお子さまとそのご家族向けに、七五三のフォトフレームと一緒に写真を撮って楽しめるイベントです。

館内に設置されたポスターのQRコードを読み取って、手持ちのスマートフォン・タブレットから七五三の特設サイトを開くと、すぐに写真撮影ができます。

※イベント開催期間は終了しています。(2020年10月19日～11月23日)

早速、完成したデザインからお見せします。
今回はサービスのメインとなる「トップ画面」「フォトフレーム画像」についてご紹介します。

↓3種のフォトフレーム画像

では、完成に至るまでの制作の流れを説明していきます。

制作手順１：ひたすら参考デザインを集める

クライアント様から頂いた、企画概要の資料やスケジュールを確認後、
先方のイメージに合いそうなデザイン資料をひたすら集めます。

この手順に力を入れる理由は、何も参考にするものがないと、自分の得意なレイアウトや好きなデザインテイストに無意識に引っ張られてしまうためです。

制作手順2：ラフデザインを数パターン作成

今回 デザインをしながら意識したことは、「正月っぽいデザインにならないよう、ぱっと見で七五三だとわかるデザイン」でした。

以下のデザインはまだ探り探りの状態ですね。
出来るだけデザインに大きな違いが出るよう、2~3パターン作っていきます。

・デザイン左：実際に写真を撮るのは大人(両親)なので、ちょっとカッチリした感じを意識。

・デザイン右：もっと子供らしく、色味やイラストを足してカラフルにしたもの。

デザインの方向性を決めるのが目的のため、細部はまだ作り込みません。
最終的に提出した第一稿は、以下の３案にしました。

制作手順3：先方からのフィードバック & 修正

第一稿のデザインに対して、先方からフィードバックを頂きました。
要約すると 以下の3点です。

確かに・・おっしゃる通りです・・。
七五三感が出ることばかりを考えていて、水族館らしさが欠如してしまいました。。

青色や魚影の要素を加えて修正します。

---

そして修正した案がこちらです。
背景に波を足したり、各ボタンにそれぞれ違った和柄模様を入れました。

また、ボタンのレイアウトは「縦並び・横並び」の2種類にして再度提案します。

スマホで閲覧した時のイメージ画像も提出しました。

制作手順4: フォトフレームデザインの作成

再度、先方からフィードバックをいただきつつ、トップ画面はA案に決まりました。

さて、次はフォトフレーム画面の作成に移ります。

今回のイベントでは、年齢によってフォトフレームに登場する動物の種類が異なる仕様となっています。
・３歳用フォトフレーム：カピバラ
・５歳用フォトフレーム：ペンギン
・７歳用フォトフレーム：ウミガメ

理由は、新江ノ島水族館様に 同じ歳のカピバラ、ペンギン、ウミガメがいるからとのことです。私も自分と同じ歳の生き物たちと写真撮りたいです。

先方にカピバラのポーズ、イラストの雰囲気、構図など確認しながら進めます。
ちなみに、このカピバラのイラストはフリー素材サイトからお借りしています。
(↓提出した資料イメージ)

その後もフィードバックを頂きながらイメージが固まったら、イラストを作成していきます。

制作手順5: 生き物イラストの作成

先方からご提供いただいた写真素材の中で、今回はこの写真を参考に作成していきます。

写真の上から、パスを使って 輪郭を丁寧に書いていきます。
今回は少しデフォルメの形にして、可愛さも持たせたかったので、少し体に丸みを持たせるようにします。(おしりの輪郭など)

色もつけて、どんどんパスで書きます。
今回は和の印象も持たせたかったので、線の太さに強弱をつけて筆で書いたような印象にしたいなと思いました。

ハイライトを入れていきます。ハイライトも全てパスです。
色味は写真からカラーピッカーツールで取り、全体のバランスを見ながら彩度を変えたりして調整します。

イラストができました。

それをフォトフレームに入れ込んで、カピバラフレームは完成です。

また、パスツールついでにいうならば、生き物イラスト以外にも和柄模様のパターン素材などもパスで作成しています。(↓画像右上の矢模様。フレーム内の水雨模様内に使用しています)

もちろん有料素材を使うことも可能ですが、生き物のポーズや色味、表情などどんなクライアント様からの要望がきても応えられるように、できるだけ素材は作るようにしています。

あとはペンギン、ウミガメもイラストを同じように作成して 3つのフォトフレーム画像が出揃いました。

3つのフォトフレームデザインについて気をつけていることは、
背景がカメラになるため、どんな背景が来てもデザインが埋没しないようにすることです。

まとめ

以上、今回の記事では『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについてご紹介しました。

今回のデザイン作成を含め、全てのデザイン時に心掛けていることは主に以下のポイントです。

デザインの初期案、完成形のBefore / Afterも載せておきます。

WebARを自分で作りたくなったら？

今回の「えのすい七五三デジタルフォトフレーム」はオリジナルで制作していますが、「WebARを自分でも作ってみたい…！」という方にオススメなのが、
『palanAR (パラナル)』です！

Web制作の知識がなくても、コードを書かずに直感的な操作でARを作成することができます。

他にも、WebARでフォトフレーム写真撮影が楽しめる『TOBIRA (トビラ)』も開発していますので、ぜひスマホから体験してみてください！