UI/UX改善 2020/09/15

ノムリッシュ翻訳サイトのUI・UXデザインを検討してみた⓶翻訳機能編

この記事でわかること

本記事では、ノムリッシュ翻訳サイトのUI・UXデザインのうち翻訳機能に焦点を当てて解説します。グーグル翻訳風の左右分割フォームとダミーテキストによるUX改善の工夫、翻訳レベル1〜4の設計思想、ユーザーが共同で用語登録できる仕組みまでを分析しており、Webサービスのデザイン改善事例を探している方に役立つ内容です。

さてさて今回は前回のファーストビュー編から続いてサイトのメインである翻訳機能について検討していきます。どのような機能か楽しみですね。ではでは☆彡

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

前回はこちら

記事のポイント

グーグル翻訳風・左右分割フォームのUI設計分析
ダミーテキスト活用によるUX向上の具体的手法
翻訳レベル1〜4の設計思想と表現の広がり
ユーザー共同の用語登録によるサイト鮮度維持の仕組み
専門特化コンテンツをシンプルに届けるデザイン方針

【メディア領域　ノムリッシュ翻訳サイトのUI・Uxデザインサイトを検討してみた】
【メディア領域　ノムリッシュ翻訳サイトのUI・Uxデザインサイトを検討してみた】②翻訳機能編
【さらにCVR向上を検討している方へ】

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

⓶翻訳機能編

【翻訳フォーム】

.png?alt=media&token=217b739c-435e-48e9-9a41-e2f657731e31)

【翻訳例】

.png?alt=media&token=1c6c7848-3558-4b9a-b4b0-4afc32ecbecd)

.png?alt=media&token=4dcfc6cf-118e-4a8c-9f24-c7158dd3ba67)

.png?alt=media&token=ec13322e-2a66-4f49-bc08-72ab943f539e)

.png?alt=media&token=cdae0d2c-041f-4c3f-807d-e7cbcfacb7d1)

さてこちらが翻訳フォームとなっています。

グーグル翻訳のように左側に入力すると右側に翻訳されるようになっていますね。

入力初期にダミーテキストが用いられており、入力の際どのようにしたらいいか分かりやすくなっています。このようにサンプルを置いておくことはUXを向上する際しばしば用いられる戦略となっており、妥当なデザインですね。

翻訳レベルは1-4まであり、より高度なノムリッシュ語へと翻訳されます。ラグーン語はノムリッシュ語と属性は類似していますが、意識高い系は別の領域の言語ですので混ぜるべきか問われます。（意識高い系で翻訳すると意識高い系翻訳ページへと飛ばされます。）

オプションでは「普通に翻訳」・「登録単語のみ」・「自動補完のみ」の三項目があります。翻訳にこだわりがある場合は変えてみるといいでしょう。

使用感としては、翻訳するたびに異なる結果が出るため精度は微妙な所がありますが、あくまで雰囲気を楽しむという点では十分だと思います。

同一用語を各レベルに合わせて翻訳しましたがレベルが上がるにつれ高度になっていますね。ここまで表現を膨らませることが出来るのは一種の言語として成立しており関心しますね（笑）

【ページ下部・スクロール】

.png?alt=media&token=667ee0f2-bd7a-4d34-bab5-48036d40da0a)

画面下部には注目のノムリッシュ語等があり、現代のトレンドワードがノムリッシュ翻訳されています。「マゾ」が「物理属性吸収」と翻訳されているあたり、ノムリッシュの世界観を壮大に象徴されていますね。

言語登録に関して、目まぐるしく情報が変動している現代においてはどうしてもオーナーだけでは管理することが困難となっています。そこで誰でも用語を登録できるようにしており、サイトが錆びれないようにデザインされています。ユーザーと共同して運営を行うことは攻略サイトとかにもよく行われることで、ユーザーの居心地のよい環境を提供することが求められます。例えば同じラーメン屋でもインセンティブのある（味が好み、対応が神、清潔）方が選ばれます。サイト内でも如何に使い勝手がいいか、リピーターを獲得するか等が検討されます。

【メディア領域　ノムリッシュ翻訳サイトのUI・Uxデザインサイトを検討してみた】②翻訳機能編

今回は翻訳機能を検討しましたがいかがでしょうか。特定のユーザーに向けたある意味専門性を帯びたサイトですので、内容的にはコアだったかもしれません。ただデザインとしては至ってシンプルな形態となっており分かりやすいと思います。

他の機能も時間があれば検討していきたいと思いますが今回はこのあたりで。

繰り返す、過ちのように第二幕のエンカウントで/~~~

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

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

.png?alt=media&token=6fac6d20-75dc-4594-995c-4bfe039e2f8b)

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

LPOコンサルティング：https://leango.co.jp/consulting/lpo/

この記事の監修者

平井翔吏

株式会社LeanGo 代表取締役CEO / Dejamプロダクトオーナー

CVRを改善するノウハウを体系化するプロフェッショナル。

株式会社リクルートホールディングスに新卒入社、ゼクシィのUXデザインを担当。累計250件以上の施策を実施しCVR改善を140%達成。タグ検索の開発やゼクシィ花嫁割のリブランディングなどのプロジェクトオーナーとして事業を推進した。

株式会社LeanGoを設立。CVR改善ツールDejamのプロダクトオーナー。運用型LPOやセグメントCVRなど独自のメソッドを構築、PDCAハンドスピナーをはじめとするプロモーションも実施している。日本最高峰のダイレクトマーケティングカンファレンス「ダイレクトアジェンダ2025」「ダイレクトアジェンダ2026」のAgenda awardにて2連覇。

【2026年最新】Webサイト改善会社おすすめ13選｜タイプ別の選び方と費用相場を徹底比較