インタフェースって結局なんなのかを、エンジニア視点で語ってみる

もうかれこれ十数年？数十年？プログラマ/エンジニアとして働いてきてたのですが、ここ数年で UIデザイナ、UX系の方、データアナリストの方などとも話す機会が多くて、色々と刺激を受けています。

そんな中で 「インタフェース」 という言葉、というか、概念が１つの肝になっている感を受けたので、自分なりにまとめてみます。

・・・

さっそくの蛇足： 「インタフェース vs. インターフェース vs. インターフェイス」

カタカナ語は何を使ってくれてもいいです 笑

ですが、一応 "JIS B3000" という規格で下記のようにカタカナ表記が書いてありますので、技術系文章では "インタフェース" が正しいという都市伝説ではあります。

インタフェース  - システムの構成要素間の機能的・物理的な相互関連（JIS Z 8115 参照） - 対応英語：interface

・・・

本題の前にインタフェースの例文

わたしがパッと思いつく インタフェースがつく言葉たちです。

・ API - Application Programming Interface - プログラムが別のプログラムを呼び出す時の仕様。 ※ むかしはSystem Callと区別するためにAPIって言ってた気がしますが今は暗黙的に Web API を指すことが多いですかね。

・HMI - Human Machine Interface - 人と機械の境界となるデバイスなど。

・GUI/CLI - Graphical User Interface / Command Line Interface - いわゆるマウスとアイコンなどを使ったグラフィカルな操作。 黒い画面と称されるコマンドライン/プロンプトを使った操作。

・UI - User Interface - ユーザとシステムとをつなぐ仕組み。 暗黙的にはグラフィカルなデザインそのものを指すことが多い気がする。

・VUI - Voice User Interface - 音声を使ってユーザとシステムとをつなぐ仕組み。

なんとなくインタフェースと言うと画面デザインとかと直結しそうですが、いわゆるグラフィカルなものはここでは GUI や UI だけです。 あとはすべてグラフィカルな要素を含んでいません。意外ですね。

さてインタフェースとは何か？

英単語的な解釈
Inter + Face。 Inter(間)の + Face(面) 。何かと何かの間にある面。境界面。

Wikipedia より
インタフェース（英: interface）は、ものごとの境界となる部分と、その境界でのプロトコルを指す。

いや、まさに、ここにある通りなんですが、 少しだけ自分なりに大事だと思うポイントを2つ。

１．ものごとの境界となる部分（面）

つまりインタフェースは境界面です。 インタフェースには "界面" という日本語訳もあるくらいです。

ここで大事なのは 「境界面」 であるということ。 「境界」というのは厚みがなく（厚みがゼロ）、実体がなく、何かと何かの間に概念として存在するものです。
ポイントは「概念として存在していて実態を持っていない」ことです。

雑談： 前に絵の勉強をしていたときに、対象物の角の部分に線を引いたら 「それは陰影の異なる平面と平面がぶつかって線を認識しているだけ。実際にはそこには線はない」 と先生に諭されたことがありました。 境界とはそういうことです。

２．境界でのプロトコル

インタフェースはプロトコルです。プロトコルもわかりづらい言葉ですが、主にコミュニケーション上での慣習やルール のことです。 「もしもし」「はい、○○です」 みたいな受け答えもそうですし、神社での神様とのコミュニケーションである「二礼二拍手一礼」とか、×をクリックするとウィンドウが閉じる、とか、コミュニケーションにおいてこうあるべき、という約束事のことをプロトコルと呼びます。
ここでのポイントも、境界はプロトコル、あくまで単にルール・約束事であって実態を持っていない、ことです。

雑談：インターネット等でよくみる HTTP は Hyper Text Transfer Protocol の略でハイパーテキストをやりとりするためのプロトコル（通信のルール）という意味です。仕様もそんなに複雑じゃないので自分でサーバを作ることもクライアントを作ることもできます。（つまりHTTPはプロトコルであって実装ではないです。）
これらのプロトコルが共用語として世界中に公開されているおかげで、世の中の人が（理想的には）等しくインターネット上のさまざまな有益な情報にアクセス可能になっています（理想的には）。

あらためて、つまり、インタフェースとは？

例えば、人がスマホを操作するときのルール・約束事、です。 封筒✉みたいなアイコンはメールを意味し、アイコンをタップすればメールアプリが立ち上がる。

例えば、クライアントとサーバとのやり取りに関するルール・約束事、です。 通信はHTTPSで行って必要な情報はJSONでサーバに送信する。 サーバは処理結果をJSONで返す。

例えば、日本人同士は日本語でしゃべる。 各国から人がきたときは英語でしゃべるというルール・約束事です。

このような ルール・約束事、言い換えると、仕様 がインタフェースの正体です。

通信に使うHTTPSをどうやって実現しているか （Javaで作るか、JavaScriptで作るかなど） はインタフェースではありません。 あくまでHTTPSを使ってどういうJSONをやりとりするか、どういう会話をするかといった、ものごとがやりとりするためのルール・仕様 がインタフェースです。

少し本題から離れますが、仕様（Spec）であるインタフェース を定義して、どうやって実現するかの設計（Design）をして、それを実装（Implement）するというのがエンジニアのお仕事です。

エンジニアのわかる言葉で表現すると上のようになります。

では、何が混乱するのか？

今までの議論で言うと、画面に出す仕様だけを決めて、どのようなグラフィックにするか？ つまり、アイコンの色は赤が良いか青が良いか、みたいな表現については、デザイン（設計）であってインタフェースではない、と言えます。

ただ、そう言い切りたいところなのですが、そうはいきません。

信号🚥 の色が赤いか青いかはそのこと自体に意味がしっかり根付いてしまってますし、天気のアイコンである 雲⛅ や 晴れ☼ や、リストの上にあるものは重要で下にあるものは優先度が低いなどの概念も世の中に根付いてます。

なので、グラフィックデザイン、つまりは、どういうデザインにするか・どう表現するか、ということ自体が約束事・仕様・ルール、つまり、インタフェースに直結してしまうのです。

エンジニアが 「インタフェースを決める」 というと、プロトコル・仕様（Spec）を決めることを指すのに対して（下図 左）、UIデザイナが 「インタフェースを決める」 というとグラフィックデザインを決める ≒ AB間 BC間のプロトコルとBの機能自体 を決める（下図 右） を指すことが多いといった齟齬が起きてくるのです。

・・・

話が発散してきたので、結局なにを言いたかったというと、同じ言葉を使っていても背景が異なる人は別の意味で使ってるよ、良い悪いではなくお互い歩み寄って理解しあいましょう、という当たり前のことでした 笑。

・・・

とはいえ... デザイナという汎用的な名前をうばったUIデザイナはちょっとずるいと思ってます。 システムデザインをする人だってデザイナなんだけど...

・・・

あくまでこれは、ある分野に特化した人間が、ある特定の偏った見方で見たときの考え方になりますので、同意・異論いろいろあると思います。明日になったらわたしの考え方もかわってるかもしれません。それでも、もし何か思うことありましたら気軽に 「スキ」「コメント」 など残してくれるとHappyです。