NK — UI/UX Design Works

Reign of Dragons

株式会社ドリコム

2013 ~ 2015

「Reign of Dragons」というタイトルのゲームにおいて、UIデザイン、フロントエンド、進行管理を担当しました。

このゲームは、「GREE」と「mixi」で展開されている『ドラゴン×ドライツェン』を基にしており、新たに制作された海外向けのタイトルです。プレイヤーは竜王の血を引く戦士として、世界の終焉を食い止めるために最強のドラゴンを集め、真の竜王を目指すカードバトルゲームです。ネイティブアプリならではの要素として、プレイヤーの操作による迫力ある攻撃演出や爽快なスピード感、BGMやサウンドエフェクトが盛り込まれています。

このゲームは全米で売上げランキング最高10位を獲得しました。
https://gamebiz.jp/news/93033

BATTLE

制作日

2013年8月

時間

8日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人

ユーザー同士のバトルページのデザインを担当しました。

ページには自分のカードやデッキ、狙うアイテム、スタミナなどの情報が表示され、相手のカード情報とバトル開始ボタンが主な構成となっています。バトル自体には独自の演出があり、勝負結果も同様の構成が使用されています。ただし、負けた側のカードの透明度が上がるように工夫されています。
当初はcssのフィルターでモノクロを使用したかったのですが、当時のiOS(Safari)では対応していなかったため、代替案を検討しました。

GUILD

制作日

2013年9月

時間

12日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人

ギルド情報ページの新規作成を担当しました。
このページでは、ギルドメンバーの詳細や構成などが確認でき、ギルドの隠し部屋にいるようなイメージが演出されています。
ページは横スクロールにより次のメンバーに切り替わり、自動再生も可能です。
英語のテキストが長いため、デザインにおいてもテキストの充実度に注意が払われました。

GUILD CLASS

制作日

2013年9月

時間

4日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人

個別のギルドクラス(レベル)の詳細ページを制作しました。
ここでは、ギルドの属性タイプやレベルなどの詳細情報を確認できます。
デザインでは、ギルドの部屋にアイテムを載せているようなイメージを演出しています。情報が限られているため、ビジュアルを大きくし、余計なスクロールを減らしファーストビューに情報を収められるように工夫しました。

TOURNAMENT of DRAGONS

制作日

2013年10月

時間

10日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人

トーナメントバトルのイベントページを制作しました。
ここでは、ゲージや自分のランキングを表示する際の演出にこだわりました。特にカードを斜めに配置して躍動感を出すことで、バトルの熱気を感じさせるデザインとなっています。また、バトル開始ボタンもステータスによって3種類程度作成し、ユーザーエクスペリエンスに配慮しました。

ALCHEMIST'S RESOURCES PACK

制作日

2013年11月

時間

6日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人

「錬金釜」のトップページを制作しました。
このページでは、不要なアイテムを錬金して新たなアイテムを獲得できるシステムを紹介しています。
初回訪問時には概要が表示され、2回目以降にはアイテム一覧などが確認できるように設計されています。

ORDEAL OF REMINISCENCE

制作日

2013年12月

時間

6日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人


レイドボス討伐イベントページを担当しました。

このページは、定期的に行われるイベントで、季節の行事に合わせてデザインされています。画像が通常のイベント時のものであることが記載されていますが、具体的なデザインの詳細や季節ごとのアレンジが想像できるような説明となっています。

カタログツール作成

制作日

2014年

時間

20日

担当

UIデザイン , コーディング

URL

-

ツール

Photoshop, html, css, JavaScript

担当人数

1人

デザインパーツをノンデザイナーでも容易に配置できるようにカタログ化し、これによってディレクター、エンジニア、デザイナーのそれぞれの工数を削減し、柔軟な対応が可能になりました。

このカタログ機能は社内で非常に好評で、四半期ごとの社内表彰制度で「デザイナー賞」を受賞しました。