2020年12月11日

デザイン

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

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

目次

  1. はじめに
  2. 「えのすい七五三デジタルフォトフレーム」って何?
  3. 手順1: ひたすら参考デザインを集める
  4. 手順2: ラフデザインを数パターン作成
  5. 手順3: 先方からのフィードバック & 修正
  6. 手順4: フォトフレームデザインの作成
  7. 手順5: 生き物イラストの作成
  8. まとめ

はじめに

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

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

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

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

ogp.jpg (391.5 kB)

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

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

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

ベーグリー記事用.jpg (2.1 MB)

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

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

資料_2 (1).jpg (2.2 MB)

↓3種のフォトフレーム画像
image.png (481.8 kB)

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

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

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

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

参考デザインを集める時の手順

(1) クライアント様のコーポレートサイトのデザイン、過去に開催されたイベントのデザインを集める

→どういうデザインが好まれていそうか、また今回なら「新江ノ島水族館らしさ」はどういうデザインかを知るため

(2)WEBデザインに限らず、チラシ、年賀状、ゲーム、バナー、アプリ、和柄パーツ素材など、参考になりそうなものはジャンルを問わず探す

(3) 画面ごとのレイアウト、色、模様、など参考にしたいパーツごとに参考画像を分けていきます。

↓今回は画像一覧が見やすいようにあえて分けていません

スクリーンショット 2020-12-01 15.45.09.png (3.1 MB)

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

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

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

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

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

スクリーンショット 2020-09-18 17.30.58.png (372.1 kB)

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

資料_1.jpg (1.4 MB)

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

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

フィードバック

・3案とも七五三色が強く水族館で行うイベント感が無い

・背景の色合いは水色~青の淡い色で、魚影など入れて水族館らしさを出したい

・ボタンや文字などは背景に溶け込まないようはっきりとした色合いにして欲しい

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

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


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

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

資料_2.jpg (1.7 MB)

スマホで閲覧した時のイメージ画像も提出しました。
資料_3.jpg (1.2 MB)

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

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

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

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

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

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

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

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

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

スクリーンショット 2020-12-01 17.55.07.png (2.9 MB)

写真の上から、パスを使って 輪郭を丁寧に書いていきます。
今回は少しデフォルメの形にして、可愛さも持たせたかったので、少し体に丸みを持たせるようにします。(おしりの輪郭など)
スクリーンショット 2020-12-01 17.58.06.png (2.1 MB)

色もつけて、どんどんパスで書きます。
今回は和の印象も持たせたかったので、線の太さに強弱をつけて筆で書いたような印象にしたいなと思いました。
スクリーンショット 2020-12-01 17.58.50.png (1.2 MB)

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

スクリーンショット 2020-12-01 18.00.jpg (252.2 kB)

イラストができました。
スクリーンショット 2020-12-01 17.59.jpg (86.8 kB)

それをフォトフレームに入れ込んで、カピバラフレームは完成です。
img-frame.jpg (724.1 kB)

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

もちろん有料素材を使うことも可能ですが、生き物のポーズや色味、表情などどんなクライアント様からの要望がきても応えられるように、できるだけ素材は作るようにしています。
スクリーンショット 2020-12-01 18.32.42.png (92.0 kB)

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

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

まとめ

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

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

デザイン時のポイント

  • ・とにかく参考デザインを集める!
  • ・デザインのキーワードを常に意識する!
    →今回なら「水族館・七五三・子ども」
  • ・クライアント様からの要望+αを意識する
  • ・デザイン全体の統一感を大事にする。そのために自分で作れる素材は1から作る!

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

資料_1.jpg (1.2 MB)

資料_1 (1).jpg (931.2 kB)

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

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

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

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

Figmaのお仕事に関するご相談

Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

きうち

きうち

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP