文法とUI、つなげるデザイン

こんにちは、Gaji-Labo UIデザイナーの今西です。

プロダクトのUI設計を検討していく中で、デザインの抽象化することをどう使っていくかについてよく考えています。
そのプロセス自体の言語化はとくにデザイナー以外も巻き込んでいくためにどう使うか、さらにはそれをうまく伝えられるかも重要だと考えています。

今回は一見関係ないようにも思える「言語学習」と「UIデザイン」の意外な共通点から、UIデザインの裏の考え方を書いてみたいと思います。

言語学習のルールとUIデザインの原則

言語を学ぶ上で、私たちは文法や語彙といったルールを学んでいきます。

たとえば、英語では主語と動詞の変化が一致しなければならない、日本語では主語は省略できる、といった規則です。これらは言語を正しく使いこなし理解していくための基礎となる知識です。

他の言語においても、ある文の意味を捉えようとする際に主語と述語、目的語を整理していくのは考え方として変わりません。

一方、UIデザインにもさまざまなルールや原則が存在します。

たとえば、情報の階層構造を視覚的に明確にする、一貫性のあるデザイン言語やトーン＆マナーを用いる、などです。

これらの原則は、ユーザーがUIを認識しスムーズに操作できるようにするために役立てられています。

文法とUIデザインの共通点

ここで考えたいのは「主語・述語・目的語」という概念です。

文法では、主語が行動の主体、述語が主語の動作・行動、目的語が動作の対象、を表します。この概念は、UIデザインにおいても重要な役割を果たします。

たとえば、UI画面上にあるボタンをクリックしてステータスが変更できる場合、整理すると次のような文がそれぞれ行われると考えられます。

• ユーザーがボタンを押す　UI上で起こること
• システムがデータのステータスを変える　実行されること

UI上で行われるのは ユーザーが（主語）ボタンを（目的語）押す（述語）ことですが、それらは システムが（主語）データのステータスを（目的語）変える（述語）ことに繋がります。

この2つのできごとをつなげるのがUIデザインと考えてます。

システムが行うことをそうとは見せずにユーザーにとってユーザーが主体でオブジェクトへのアクションとすることがユーザーとシステムをつなげるインターフェイスの役目です。

そのため、誰がどうするかと、何が行われるのかの主体と目的とアクションを整理する必要があるのです。

このように文法的な構造を意識することで、UI設計を論理的に構造化できます。また、主語と目的語と動作を明確することで、ユーザーへUIの意図やコミュニケーションすることを伝える道すじを考えることができます。

最後に

言語学習とUIデザインは、一見異なる分野ですが、共通する部分が多く存在します。

文法として習ったものの主語や述語は、UIデザインにおいては「何が」「どうなるのか」のオブジェクトとアクションとして捉えることができます。この考え方はより効果的な情報伝達や直感的な操作を実現するために役立ちます。

デザインや要件のルールや原則をうまく使うだけでなく、構造化のルールを取り入れるのがUIデザイン検討につながります。

日本語ではあたりまえになりすぎて、文を噛み砕くにも意識しない文法は、ほかの言語の文を読み解く際に構造を意識することを思い出させてくれます。ものごとの見方を少し変えてみるヒントにもなります。

言語学習のようにひとつのものを構造化して理解する考え方は、UIデザイナーにとっても貴重な資産となっていくでしょう。

Gaji-Labo Culture Deck