ノムリッシュ翻訳サイトのUI・UXデザインを検討してみた➀ファーストビュー編

ホーム » サイト改善事例 » UI / UX改善 » ノムリッシュ翻訳サイトのUI・UXデザインを検討してみた➀ファーストビュー編

UI / UX改善

dejamブログ運営局 2020年09月10日投稿

…やぁ、ここであったが百年目だね…今回はノムリッシュ秘されし真実と生きる元老院のUIUX錬成を検討していく…まるで異界＜ビヨンド＞にある虚の中でのようによ（訳こんにちは。今回はノムリッシュ翻訳サイトのUIUXデザインを検討していきます。）

ノムリッシュ語の由来は通称FFのキャラクターデザインを携わったクリエイターの野村哲也の世界観を指し独特なストーリーやセリフなども「ノムリッシュ語」と呼ばれるようになったそうです。最近ではFF7のリメイク作品も話題となっており、皆さんもシリーズのいずれかをプレイはしたことがあると思います。

今回は日本語をそのような厨二とも言い難い独特なノムリッシュ語へと翻訳できるサイトがあるということですのでPCデザインの方でリサーチしていきたいと思います。

racing-lagoon.info（https://racing-lagoon.info/nomu/translate.php）

【メディア領域　ノムリッシュ翻訳サイトのUIUXデザインを検討してみた】

①ファーストビュー編

ファーストビュー

さてファーストビューですが、画面上部には様々な機能がセットとして並べられていますね。ビジネッシュは所謂意識高い系（MTGのアジェンダしといて）、福本語は所謂カイジ系（圧倒的感謝っ・・・！）へと翻訳するものです。ネームメーカーは入力した名前をノムリッシュネームへと翻訳するものです。

皆さんにとってアイキャッチ⁻目線が止まるエリアはどのあたりでしょうか？このデザインでは画面下部、特にノムリッシュ翻訳に注目されると考えられます。理由としては画面スペースの配分において下位の3つ（お知らせ、翻訳、検定）がサイズが大きく純粋に視界に入りやすいことと、人は画面中心を見る傾向があるためです。

しかしながらデザインに無駄が多く改善点が多く見られます。このサイトでのメイン目的は翻訳機能であり、それぞれの翻訳ページへと導くことがデザインとして求められます。

それらを踏まえて主な改善点は3つあります。

1：それぞれの翻訳ページのデザインを明確化

1に関してメイン機能は「ノムリッシュ翻訳」・「ノムリッシュ検定」・「福本語翻訳」・「ビジネス語翻訳」の4つであり、これらの4つの機能をはっきりと主張する必要があります。すなわちファーストビューにおいて、より良くアイキャッチをされやすいようにします。要は情報にメリハリをつけましょう。

2：翻訳機能がどのようなものかを一目で理解する

2に関して例えばノムリッシュ語がどのようなものか、FFを知っていたとしても初見にとっては分からないと思います。そこで一言程簡潔にどのようなものかメッセージを記しておく必要があります。「ノムリッシュ語は日本語をFF風に翻訳できます」と記しておけばそれだけである程度理解することが出来ます。

3：ページへのアクションボタンを視覚的に分かりやすく導入する

3に関してはアクションボタンがどこか分かりにくいため統一してボタンを導入する必要があると考えられます。その際それぞれの機能に則したボタンデザインをすると雰囲気的にも味わうことが出来ると考えられ促進要因になります。

これらを踏まえて簡潔に構図としてデザインしたのが下記になります。（あくまで視認性に考慮した上でのサンプルですので本格的にフォントや色、ロゴなどにこだわるとキリがないので割愛します）

本格的にデザイン・編集したい方はAdove XDを使ってみてはいかがでしょう

https://www.adobe.com/jp/products/xd.html

Before

After

PCデザイン画像を導入すると少しスペースをとってしまうので、次回翻訳機能の使用感の方を検討していきたいと思います。

皆さんも実際にそれぞれの翻訳機能を試してみてはいかがでしょう。

racing-lagoon.info（https://racing-lagoon.info/）

閲覧圧倒的感謝っ・・・！

次回：https://cxbottle.com/users/idearahppy/nNVJrTimt6Oz7t3xrtzR

【さらにCVR向上を検討している方へ】

【CX BOTTLE】を運営しているビーンズでは直帰率改善やLPOに使える具体的でCVRを改善する確度の高い施策を毎月提案する事業を行っています。

初回の打ち合わせでは無料でサンプルの提案を受けとれますので試しに利用してみてはいかがでしょうか。

ビーンズ：https://leango.co.jp/beans

dejamブログ