2020年12月11日
デザイン
『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについて
![『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについて](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/ogp.jpg)
![『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについて](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/ogp.jpg)
目次
はじめに
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay11です!
昨日は「8th Wall Web新機能『Curved Image Targets(曲面画像認識)』を試してみる」という記事でした!
今回は2020年10月から約1ヶ月間、新江ノ島水族館様にて開催された「えのすい七五三デジタルフォトフレーム」のデザイン制作についてご紹介します。
※クライアント様からは実績掲載OKの許可をいただいております。
「えのすい七五三デジタルフォトフレーム」って何?
新江ノ島水族館をイベント期間中に来場された3歳、5歳、7歳のお子さまとそのご家族向けに、七五三のフォトフレームと一緒に写真を撮って楽しめるイベントです。
館内に設置されたポスターのQRコードを読み取って、手持ちのスマートフォン・タブレットから七五三の特設サイトを開くと、すぐに写真撮影ができます。
※イベント開催期間は終了しています。(2020年10月19日~11月23日)
早速、完成したデザインからお見せします。
今回はサービスのメインとなる「トップ画面」「フォトフレーム画像」についてご紹介します。
↓3種のフォトフレーム画像
では、完成に至るまでの制作の流れを説明していきます。
制作手順1:ひたすら参考デザインを集める
クライアント様から頂いた、企画概要の資料やスケジュールを確認後、
先方のイメージに合いそうなデザイン資料をひたすら集めます。
この手順に力を入れる理由は、何も参考にするものがないと、自分の得意なレイアウトや好きなデザインテイストに無意識に引っ張られてしまうためです。
参考デザインを集める時の手順
(1) クライアント様のコーポレートサイトのデザイン、過去に開催されたイベントのデザインを集める
→どういうデザインが好まれていそうか、また今回なら「新江ノ島水族館らしさ」はどういうデザインかを知るため
(2)WEBデザインに限らず、チラシ、年賀状、ゲーム、バナー、アプリ、和柄パーツ素材など、参考になりそうなものはジャンルを問わず探す
(3) 画面ごとのレイアウト、色、模様、など参考にしたいパーツごとに参考画像を分けていきます。
↓今回は画像一覧が見やすいようにあえて分けていません
制作手順2:ラフデザインを数パターン作成
今回 デザインをしながら意識したことは、「正月っぽいデザインにならないよう、ぱっと見で七五三だとわかるデザイン」でした。
以下のデザインはまだ探り探りの状態ですね。
出来るだけデザインに大きな違いが出るよう、2~3パターン作っていきます。
・デザイン左:実際に写真を撮るのは大人(両親)なので、ちょっとカッチリした感じを意識。
・デザイン右:もっと子供らしく、色味やイラストを足してカラフルにしたもの。
デザインの方向性を決めるのが目的のため、細部はまだ作り込みません。
最終的に提出した第一稿は、以下の3案にしました。
制作手順3:先方からのフィードバック & 修正
第一稿のデザインに対して、先方からフィードバックを頂きました。
要約すると 以下の3点です。
フィードバック
・3案とも七五三色が強く水族館で行うイベント感が無い
・背景の色合いは水色~青の淡い色で、魚影など入れて水族館らしさを出したい
・ボタンや文字などは背景に溶け込まないようはっきりとした色合いにして欲しい
確かに・・おっしゃる通りです・・。
七五三感が出ることばかりを考えていて、水族館らしさが欠如してしまいました。。
青色や魚影の要素を加えて修正します。
そして修正した案がこちらです。
背景に波を足したり、各ボタンにそれぞれ違った和柄模様を入れました。
また、ボタンのレイアウトは「縦並び・横並び」の2種類にして再度提案します。
スマホで閲覧した時のイメージ画像も提出しました。
制作手順4: フォトフレームデザインの作成
再度、先方からフィードバックをいただきつつ、トップ画面はA案に決まりました。
さて、次はフォトフレーム画面の作成に移ります。
今回のイベントでは、年齢によってフォトフレームに登場する動物の種類が異なる仕様となっています。
・3歳用フォトフレーム:カピバラ
・5歳用フォトフレーム:ペンギン
・7歳用フォトフレーム:ウミガメ
理由は、新江ノ島水族館様に 同じ歳のカピバラ、ペンギン、ウミガメがいるからとのことです。私も自分と同じ歳の生き物たちと写真撮りたいです。
先方にカピバラのポーズ、イラストの雰囲気、構図など確認しながら進めます。
ちなみに、このカピバラのイラストはフリー素材サイトからお借りしています。
(↓提出した資料イメージ)
その後もフィードバックを頂きながらイメージが固まったら、イラストを作成していきます。
制作手順5: 生き物イラストの作成
先方からご提供いただいた写真素材の中で、今回はこの写真を参考に作成していきます。
写真の上から、パスを使って 輪郭を丁寧に書いていきます。
今回は少しデフォルメの形にして、可愛さも持たせたかったので、少し体に丸みを持たせるようにします。(おしりの輪郭など)
色もつけて、どんどんパスで書きます。
今回は和の印象も持たせたかったので、線の太さに強弱をつけて筆で書いたような印象にしたいなと思いました。
ハイライトを入れていきます。ハイライトも全てパスです。
色味は写真からカラーピッカーツールで取り、全体のバランスを見ながら彩度を変えたりして調整します。
イラストができました。
それをフォトフレームに入れ込んで、カピバラフレームは完成です。
また、パスツールついでにいうならば、生き物イラスト以外にも和柄模様のパターン素材などもパスで作成しています。(↓画像右上の矢模様。フレーム内の水雨模様内に使用しています)
もちろん有料素材を使うことも可能ですが、生き物のポーズや色味、表情などどんなクライアント様からの要望がきても応えられるように、できるだけ素材は作るようにしています。
あとはペンギン、ウミガメもイラストを同じように作成して 3つのフォトフレーム画像が出揃いました。
3つのフォトフレームデザインについて気をつけていることは、
背景がカメラになるため、どんな背景が来てもデザインが埋没しないようにすることです。
まとめ
以上、今回の記事では『えのすい七五三デジタルフォトフレーム』のデザイン作成フローについてご紹介しました。
今回のデザイン作成を含め、全てのデザイン時に心掛けていることは主に以下のポイントです。
デザイン時のポイント
- ・とにかく参考デザインを集める!
-
・デザインのキーワードを常に意識する!
→今回なら「水族館・七五三・子ども」 - ・クライアント様からの要望+αを意識する
- ・デザイン全体の統一感を大事にする。そのために自分で作れる素材は1から作る!
デザインの初期案、完成形のBefore / Afterも載せておきます。
WebARを自分で作りたくなったら?
今回の「えのすい七五三デジタルフォトフレーム」はオリジナルで制作していますが、「WebARを自分でも作ってみたい…!」という方にオススメなのが、
『palanAR (パラナル)』です!
Web制作の知識がなくても、コードを書かずに直感的な操作でARを作成することができます。
他にも、WebARでフォトフレーム写真撮影が楽しめる『TOBIRA (トビラ)』も開発していますので、ぜひスマホから体験してみてください!
Figmaのお仕事に関するご相談
Bageleeの運営会社、palanではFigmaに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
1
0
関連記事
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/Artboard-Copy-98.1-300x179.png)
2022年6月14日
Figmotionの使い方
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/02/stacked-steps-haikei-7-300x179.png)
2022年2月25日
palanXRサイトリニューアルの流れをご紹介します!
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/stacked-steps-haikei-5-300x179.png)
2021年12月21日
FigmaでGIFを作成する!
![デザイナー目線のChakra UI](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/chakraogp-300x179.jpg)
2021年12月15日
デザイナー目線のChakra UI
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/eyecatch-300x179.png)
2021年12月12日
Figmaのライブラリの使い方
![](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/figmastudy-1-300x179.png)
2021年12月8日
社内のFigma勉強会について紹介します!
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ![palanar](https://bagelee.com/wp-content/themes/bagelee/img/palanar/palanar_img.png)
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
![eishis](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2017/06/bagel-150x150.png)
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
![yamakawa](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/01/icon-150x150.png)
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
![はらた](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2018/12/f1efe970cfdfeb37a1e64ccc1ae16ede-120x120.png)
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
![kobori](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/09/1.png)
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
![sasai](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/11/panda-rect-s-150x150.jpg)
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
![damien](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2019/12/mone_svg-150x150.png)
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
![ゲスト bagelee](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/01/normal-copy-5-150x150.png)
ゲスト bagelee
![かっきー](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/kaki-150x150.png)
かっきー
![まりな](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/02/nyan-e1612854591162-150x150.jpg)
まりな
![suzuki](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/icon_yoko-150x150.png)
suzuki
miyagi
![ogawa](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/moldiv-150x150.jpg)
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
![いわもと](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2020/12/0b2bc228d70e0486ad56488e01f5d92e-150x150.jpg)
いわもと
デザイナーをしています。 好きな食べ物はラーメンです。
![kobari](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/06/IMG_20191105_135518_713-150x150.jpg)
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
![shogokubota](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/08/image0-9-150x150.jpeg)
kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya
![aihara](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/10/symbol-150x150.png)
aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。
![kainuma](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/11/IMG_1659-150x150.jpg)
Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
![sugimoto](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2021/12/Untitled-150x150.jpg)
sugimoto
asama
ando
iwasawa ayane
![oshimo](https://bagelee.s3-ap-northeast-1.amazonaws.com/wp-content/uploads/2022/06/tulips-g3b120453e_640-150x150.jpg)
oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!