shutto翻訳 開発者インタビュー「使いやすさが高評価！ shutto翻訳のUI開発にかける思いとは」

求人募集中！ 自信を持って業務に取り組める職場環境を提供しています！

イー・エージェンシー（以下、eA）では、複数の自社プロダクトの開発・販売を行っています。その中でも、リリースから6年経ち、操作性と導入の手軽さでユーザーからも高い評価を受けているshutto翻訳。開発当時から「ユーザーを迷わせない」ことを大切にしていました。
そんな「shutto翻訳」の開発にはどんな思いが込められているのでしょうか？　開発者である草野（システムエンジニア）と原田（UI/UXデザイナー）のインタビュー、ぜひご覧ください。（※インタビューは2019年に行われたものです）

2017年のリリース以来「直感的に使える！」「操作性が快適！」など、お客様から高い評価を頂いている「shutto翻訳」。2019年の「ITreview Grid Award 2019 Spring」では、WEBサイト翻訳ツール部門でユーザーによる【満足度】と【認知度】の双方が優れた製品として「Leader」のアワードを受賞することとなりました。

–　「ITreview Grid Award 2019 Spring」で「Leader」のアワードを受賞しましたが、一報を聞いたときはどうでしたか？

草野：うれしかったです！　お客様からの評価が開発者としていちばんの喜びですので。

原田：ほんとうにうれしいですよね。たくさんのコメントもありがたかったです！　コメントの内容もとても参考になりました。

–　「shutto翻訳」とは、どのようなサービスですか？

原田：「shutto翻訳」は、世界100言語以上に対応しているWEBサイト翻訳・多言語化ツールです。2017年にリリースし、おかげさまで多数のお客様に導入していただいています。

とくに、他社の翻訳ツールにはない「shutto翻訳」独自の「コンテンツ編集機能」がご好評いただいています。

–　開発のコンセプトはどのようなものでしたか？

草野：既存の業務が忙しくて翻訳まではなかなか手が掛けられないというお客様や、翻訳専任の担当者がいらっしゃらないようなお客様に、気軽にサイトの国際化をしてもらいたい！

「サイトの国際化」という言葉には、お客様の先にいる海外のユーザーに向けてWEBサイトを最適化させたいという意味を込めています。このコンセプトのもと、開発プロジェクトはスタートしました。

–　「サイトの国際化」を、しかも「気軽に」という点で、どのような部分を工夫しましたか？

草野：まずは、使っていただくお客様がどのような方なのか？　WEBサイト自体は外部の制作会社が作ったとしても、運用は社内でされていることも多いと思います。そんなとき、HTMLやCSSの知識がないお客様でも簡単に操作できるようにする、というのは常に頭にありました。

その上で、日本語を他の言語に翻訳すると、たいてい他の言語の方が長くなるんです。そうすると、翻訳したことによってレイアウトが崩れたりするということがよく起こります。そういうことがすぐに想定できましたので、その崩れたレイアウトを、元の日本語のページを触らなくても簡単にレイアウト調整できる機能は必要だなと、開発当初から考えておりました。それが、他社のツールにはない「shutto翻訳」だけの「コンテンツ編集機能」の開発につながりました。

–　「shutto翻訳」独自の「コンテンツ編集機能」は使いやすさに定評がありますが、機能面・デザイン面でどのような工夫がされているのでしょうか？

草野：自動で翻訳されると、先ほども話しましたが、日本語よりも他の言語の方が長くなるケースがほどんどで、どこで文章が改行されるかわからないんです。そのほか、画像の上にのったテキストがズレてしまったりということが発生したり、レイアウトの調整が必要になってくるんです。こういった場合に「コンテンツ編集機能」を使っていただくととても便利です。

お客様によく言ってもらえるのは、サクサク動いて、操作が軽いと。細かい使い勝手にこだわって作りました。でも、独自のUIを設計するのは、うまくやらないと結構難しいんです。

原田：UIのデザインで工夫した点としては、画面を左右に2分割して、左をプレビュー画面、右を編集画面として、つねに現状を確認しながら編集できるように設計しています。

編集した結果は即時にプレビューでき、さらに、今どこを編集しているかがわかりやすくなるように、枠組みを付けて強調したり、マークアップしたり、とにかくユーザーを迷わせないということを意識してデザイン設計しました。できるだけ画面を広く使ってもらいたいので、メニューを開閉式にしたりもしています。

編集できる項目としては、色・文字サイズの変更や、要素の表示/非表示の切替が可能ですし、より詳しいお客様には、CSSやHTMLを直接編集していただくことも可能になっています。

–　「独自のUIを設計するのは、うまくやらないと結構難しい」とのことでしたが、開発段階で苦労した点などありましたか？

草野：そうですね。ユーザーが、複雑な機能をどう理解しやすいものに設計できるか、何度もユーザビリティテストを行って、理解可能な機能・UIとなるように、改良を重ねましたね。

原田：そうでしたね～。テストを通じてたくさんヒントをもらって、それを何度も何度も調整しましたね。

草野：ユーザビリティテストを通じて作った機能もありましたね。編集対象がはじめは個別ページだけだったのが、ヘッダ・フッタは共通編集できるようにしたほうが良いねとか、表示/非表示は見やすい場所におきたいねとか…。たくさん、開発ヒントにつながりましたね。

原田：他に苦労した点としては、ステータス管理の複雑さをどれだけわかりやすくできるか。つまり、一つ一つの操作をする時点で何を意識してもらえれば良いかというのは、いちばん時間を掛けましたね。

ダッシュボート…編集画面…と、ユーザーがどのようなフローをたどって、翻訳ステータスにたどり着けるか、何度も検証と再現を繰り返し、取捨選択していった記憶があります。でもこれは、草野がすぐに再現してくれたので、検証がスピーディにできたんです。スモールチームでの開発の利点ですね。

草野：そうですね。デザイナーと直接2人3脚で開発したことで、機能とUIをかなり緻密に調整できたと思います。そのおかげで、「shutto翻訳」ならではの使いやすさが実現できているのではないでしょうか。

–　開発の裏話みたいなものはありますか？

草野：これは実現には至らなかったのですが、画像内の文字の多言語化も一度トライしました。画像内の文字をAIで認識して、文字部分を背景色で塗りつぶし、自動で翻訳される文字を上に載せて画像化するという…。笑
こちらは、もう少し技術が進歩したら実現するかもしれません。

原田：これ、できたら面白かったよね。笑

–　今後のビジョンを聞かせてください。

草野：WEBを多言語化するという機能については、今できていると思います。

今後は、WEBを見てくれる海外のユーザーに対して、WEBサイトを売り込む、それによって、WEBオーナーであるshutto翻訳のお客様にメリット提供できることをトータルでサポートするツールにしていきたいと思っています。

例えば、海外から問合せが来た時に対応できたり、海外のお客様にメール送信できたり、中国のサイトに登録できるなど…。単に、文字を翻訳するだけでなく、このツールを使っていただくことで、ちゃんと海外で事業展開できるものにしていければ良いなと思っております。

–　最後にお客様へのメッセージをお願いします！

草野：今後も、お客様にとって、便利で使いやすい機能の追加、拡張を順次リリースしてまいりますので、引き続きご愛顧ください！よろしくお願いします。

原田：これからも、引き続き使いやすいUIを目指していければと思いますので、よろしくお願いいたします。まだご利用いただいてない方は、是非一度無料トライアルで「使いやすさ」をお試しください！

無料トライアルをご利用いただき、shutto翻訳の使いやすさを是非実感してください！

▰在宅勤務・全国内フルリモートOK！shutto翻訳開発エンジニア募集中！▰

recruit.jobcan.jp Webアプリエンジニア（翻訳自社プロダクト開発）

イー・エージェンシー 東京都千代田区

募集要項をみる

▰採用サイトで、もっと先輩社員を知る！▰

▰在宅勤務・全国内フルリモートOK！エンジニア募集中！▰

▰当社代表取締役が創業時のこと、会社への想いを綴っています▰