ノムリッシュ翻訳サイトのUI・UXデザインを検討してみた➀ファーストビュー編
目次
…やぁ、ここであったが百年目だね…今回はノムリッシュ秘されし真実と生きる元老院の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を改善する確度の高い施策を毎月提案する事業を行っています。
初回の打ち合わせでは無料でサンプルの提案を受けとれますので試しに利用してみてはいかがでしょうか。
関連記事も読む
-
EFOツールGyro-nとは?主な11の便利機能や導入するメリットも紹介
EFOとは? EFOとは「Entry Form Optimization」を略した言葉で、日本語では「入力フォーム最適化」と訳すことができます。EFOの目的は、Webサイトにある入力フォームを訪問者に対して最適化すること 続きを読むdejamブログ運営局 2022年05月11日投稿 -
sincloを導入する5つの効果|料金プランや充実した主な機能も紹介
sincloチャットボットツールとは sinclo(シンクロ)チャットボットツールとは、プログラミングなどの作業不要で導入できるチャットボット型のWeb接客ツールです。Webサイトに訪れたユーザーに対して、対面での接客の 続きを読むdejamブログ運営局 2021年11月09日投稿 -
Optimizelyとはどのようなツールか|ABテストの作成方法手順も
Optimizelyとはどのようなツールか Optimizelyとは、サイト最適化に有効であるABテストが簡単に実施できるツールです。これまでABテストでは多くの部署や人が必要でしたが、Optimizelyは特別なコーデ 続きを読むdejamブログ運営局 2021年11月09日投稿 -
formrunが持つ特徴や導入メリットは?使い方もあわせて解説
フォーム作成ツール「formrun」とは フォーム作成ツール「formrun」は、フォーム作成だけではなく、問い合わせ対応・状況の確認やメール対応まで、フォームに関わる業務をワンストップで管理できるツールです。 コードの 続きを読むdejamブログ運営局 2021年11月09日投稿 -
「BOTCHAN EFO」とは|利用料金や活用シーンについても紹介
EFOツール「BOTCHAN EFO」とは EFOとは、Entry Form Optimizationの略で、入力フォーム最適化を指します。Webサイト上での問い合わせに対して、ユーザーが個人情報などを入力しなければなら 続きを読むdejamブログ運営局 2021年11月09日投稿