T r i R o u l e t t e

実制作

Summary:モバイルファーストお出かけルーレットサイト    

Type:WebSite

https://clarenet.co.jp/column/kensyu/20240927_travel/

ルーレットアニメ

概要

気軽に訪れる大阪お出かけルーレット。企業実習先で実習生企画としてルーレットページを2名で制作。WF作成、HPデザイン作成、プレゼン資料作成を担当いたしました。

コーディング、ライティング作業はもう一名が担当。 PCファーストでコーディングを進めており、レスポンシブが間に合わず実際のサイトではPCバージョンのみ。

ターゲット

社会人男女20代〜30代。20代には新しい体験を、30代には懐かしい体験を提供。

デザインテーマ

休日のお出かけのわくわく感とゲーム感覚で楽しめるサイト。

プレゼン資料デザイン案ページ

ルーレットプレゼン資料

プレゼン資料URL

デザイン

色はわくわく感をイメージしたポップな3色でまとめており、デザインは旅行雑誌のような親しみやすさとお洒落さをイメージして作成いたしました。またルーレットのボタンにはポップなイメージやスマホゲームと相性の良いクレイモーフィズム(粘土っぽい3dデザイン)を採用し、ぷっくりとして、思わず押してみたくなるようなボタンをイメージしています。

POINT

お出かけのワクワク感を演出し没入感を高めたいという思いから、FVゆっくりとドアをフェードアウトさせて、まるでドアが開いてこれから外に出かけるようなデザインを意図し制作いたしました。

また制作期間が短い事もあり、FVとルーレットページは近年よく見かけるモバイルファーストのデザインを採用しました。

ルーレットデザインSP
振り返り

個人的な振り返りとして、デザインや案出しには苦戦はしたものの、企業実習先の方々よりご好評を頂けたことがうれしく思いました。反省点としては、下層ページのデザインが詰めきれなかった事と、モバイルファーストデザインについてコーダーの方と認識の違いがあり、デザインと動作の相違があるというところです。ルーレットページについてもJava Scriptでの実装をイメージしておりましたが、GIFアニメーションで再現していただき、様々な実装方法があると勉強になりました。

今後はペース配分を考え、全体のバランス感を意識してデザインに取り組む事と、コーダーの方と仕事をする上では、WFの時点で明確にコードを表記、相談するなど早めの対応を意識して制作に取りかかりたいと思います。

制作時間

デザイン考案(8時間)

デザインカンプ作成(20時間)

プレゼン資料作成(3時間)  デザイン詳細ページ以外のライティング除く

使用ツール

Photoshop    Illustrator    figma

PCデザイン

ルーレットPC

下層ページデザイン

ルーレット下層

Works