レッスン4:ユーザーインターフェース(UI)の要件策定sumi

レッスン4:ユーザーインターフェース(UI)の要件策定

1. 語彙(Vocabulary)

語彙 読み方 意味 例文(英訳併記)
画面遷移 がめんせんい Screen transition 保険料の算出から申し込み完了までの画面遷移を設計します。
(We will design the screen transitions from premium calculation to application completion.)

リンクが切れているので、画面遷移できなかった。

画面遷移時に、
エラーが発生してしまいました。

視認 性 しにん せい Visibility 高齢のユーザーにも配慮して、フォントサイズや色の視認性を高めました。
(We enhanced the visibility of font sizes and colors for the consideration of elderly users.)

雪が降ったので、
信号機の視認性が落ちて、交通事故が起きた。

車の窓ガラスに汚れがたくさんあったので、視認性が悪かったです。

導線 どうせん User path / Flow 見積もりから契約まで、スムーズなユーザー導線を確保する必要があります。
(We need to ensure a smooth user flow from the quotation to the contract.)

ランディングページから決済ページまでの導線がよくないので、お客様の獲得ができていなかった。

売上を上げるために加入導線を改善する必要があります。

必須項目

<>任意項目にんい

ひっすこうもく Mandatory fields 住所と電話番号は、申し込み時の必須項目です。
(Address and phone number are mandatory fields at the time of application.)

必須項目をたくさん作り過ぎると、申し込みを途中でやめてしまう人が多い。

必須項目に記入しないとページを送信することができません。

直感的な ちょっかんてきな Intuitive マニュアルを読まなくても操作できる直感的なデザインを目指しています。
(We are aiming for an intuitive design that can be operated without reading a manual.)

アイフォンは直感的な操作を実現した最初のスマホです。

直感的なことですけれども、彼は意味が分からなかった。

「・・・」が設定を意味するとは普通、分からない。


2. 敬語(Honorifics)

敬語 読み方 意味 種類 例文(英訳併記)
お目にかかる

お目は、相手の目を丁寧に表現している。
かかるは、視線の中に入って来ることを意味している。

おめにかかる To meet 謙譲語 明日、顧客のUI担当者にお目にかかる予定です。
(I am scheduled to meet the customer’s UI representative tomorrow.)

「お目にかかって、光栄(こうえい)でございます。」

偶然にも、お目にかかってしまいました!

存じ上げる ぞんじあげる To know (a person/thing) 謙譲語 その件については、担当の佐藤様もよく存じ上げております。
(Mr. Sato, who is in charge, also knows that matter well.)

すみませんが、
その欠陥(けっかんdefect)については、存じ上げておりませんので、後ほど、ご連絡いたします。

血管けっかん

存じ上げている事であれば、問題ないと思いますが、存じ上げていない事があれば、教えてくださいませ。

仰せの通り おおせのとおり As you say 尊敬語 仰せの通り、入力フォームの項目を減らして簡素化しました。
(As you say, we reduced the items in the input form to simplify it.)

仰る通り=すぐ、回答する時に使う。

トランプ大統領の周囲は仰せの通りという人しかいない。

マネジャーさんは結構厳しいですので、仰せの通りと言うしかない。

ご足労をおかけします ごそくろうをおかけします Sorry for making you travel 丁寧表現 遠方(えんぽう)より
ご足労をおかけしますが、明日の打ち合わせをよろしくお願いします。
(I am sorry for making you travel from afar, but I look forward to tomorrow’s meeting.)

「ちょうど、東京に行く用事があるので、そちらに顔を出しますよ。」
「え、ご足労をおかけします。」

わざわざ、ここまで来ていただいて、ご足労をおかけしました。

恐縮ながら きょうしゅくながら I’m afraid that… / I’m sorry but… 丁寧表現 恐縮ながら、そのボタン配置はガイドラインに沿っていないようです。
(I’m afraid that the button layout does not seem to follow the guidelines.)

恐縮ながら、
そのご指摘は誤解に基づいていると思います。

恐縮ながら、夜遅い時間まで働くと、体調が崩れてしまうと思います。

体が不調になる


3. 会話(Dialogue)

パターン1:クライアントのオフィスを訪問しての打ち合わせ

アルビンド:本日はご足労をおかけします。UIの最終案を持ってまいりました。

クライアント:ありがとうございます。アルビンドさんに直接お目にかかるのを楽しみにしていました。

アルビンド:こちらこそ。今回、申し込み画面の視認性を大幅に改善しました。

クライアント:確かに、以前より文字が読みやすくなっていますね。

アルビンド:ありがとうございます。直感的な操作ができるよう、導線も見直しました。

クライアント:ただ、この必須項目のマークが少し小さい気がします。

アルビンド:仰せの通りです。目立つ色に変更し、入力を忘れないように工夫(くふう)します。

パターン2:社内デザイナーとのフィードバック会議

アルビンド:作成していただいた画面案を拝見(はいけん)しました

デザイナー:ありがとうございます。全体的な画面遷移はどうでしょうか。

アルビンド:スムーズだと思います。ただ、恐縮ながら、このボタンの配置について一点懸念点があります。

デザイナー:どの部分でしょうか?

アルビンド:戻るボタンが 次へボタンのすぐ隣にあると、誤操作が起きやすいと存じます

デザイナー:なるほど。佐藤マネージャーも同じことを仰っていましたか?

アルビンド:はい。マネージャーも、ユーザーのミスを防ぐ(ふせぐ)設計が必要だと存じ上げております。


【English Translation】

Pattern 1: Meeting at the Client’s Office

  • Arvind: Thank you for taking the time to meet with me today. I have brought the final UI draft.
  • Client: Thank you. I was looking forward to meeting you in person, Arvind-san.
  • Arvind: Likewise. This time, we have significantly improved the visibility of the application screen.
  • Client: Indeed, the characters are much easier to read than before.
  • Arvind: Thank you. We also revised the user flow so that intuitive operation is possible.
  • Client: However, I feel that this mark for mandatory fields is a bit small.
  • Arvind: It is exactly as you say. I will change it to a prominent color and make sure users don’t forget to fill it in.

Pattern 2: Internal Feedback Meeting with a Designer

  • Arvind: I have looked at the screen draft you created.
  • Designer: Thank you. How are the overall screen transitions?
  • Arvind: I think they are smooth. However, I’m afraid I have one point of concern regarding the placement of this button.
  • Designer: Which part is it?
  • Arvind: I believe that if the ‘Back’ button is right next to the ‘Next’ button, accidental operations are likely to occur.
  • Designer: I see. Did Manager Sato say the same thing?
  • Arvind: Yes. I know that the manager also believes a design that prevents user errors is necessary.