【Unit4 ブログリレー5日目】

こんにちは、Unit4の西川です。JavaScript が好きです。別にJavaScriptに精通しているわけではないです。

今日は言語化の話をしたいと思います。そしてエンジニアですがデザインの話もしようかと思います。

「1つ上の行、絶対猫の画像の前に動かした方がいいよ！」
「それはどうして？」

……という話です。

1. はじめに
- 「なんとなくこっちの方が良い」
- 「なんとなくこっちの方が良い」を丁寧に言っただけ
2. 言語化とは
3. デザインの4つの基本原則
4. 言語化をする
5. 「なんとなくこっちの方が良い」からの脱却
- 同じ内容を示す文章は近接させた方が読みやすいよ！
We are Hiring!

1. はじめに

いきなり主語が大きいですが、エンジニアは言語化が大事です。
仕事の上では書いたコードにレビューが入ります。その際に自分で書いたコードの説明ができないと、レビュアに指摘を受け「絶対こっちの方がいいのに……」と思いつつも（よほど我が強くない限りは）反論できず従う、ということが頻発します。
または、自分がレビュアの際に「こういう処理にした方が良くなるのに……」と思いつつも説明できず、そのまま通してしまう（もしくは議論にならず空中戦になる）ということが頻発します。

とはいえ、自分の書いたコードを説明できないエンジニアはいないでしょう。なぜならコードは文章なので、最初から言語化されています。変な話、書いてあるコードの処理を読むだけで説明はできてしまいます。

では、デザインなどの見た目の話になってくるとどうでしょう。皆様は、次のどちらの画像の方が「見た目が良い」と感じますか。

おそらく大抵の人が「右の方が良い」と答えるでしょう。
ただし、「ではそれはどうして」と聞かれると言葉に詰まるかもしれません。私は詰まりました。そうして出た言葉がこれです。

「なんとなくこっちの方が良い」

よくわかりませんね！すみません。
上記の例ほど極端ではありませんが、実際に開発の現場でも同じような事例がありました。その際、私は次のように言語化しました。

「なんとなくこっちの方が良い」を丁寧に言っただけ

やはりよくわかりませんね！すみません。
受け手がよくわかっていない、ということは言語化できていないということです。
ではまず言語化とは何かについて考えていきましょう。

2. 言語化とは

調べると色々と定義が出てきますが、私は「自分の考えていることを相手に伝わるような言葉に変換すること」だと考えています。
つまり、自分の考えを自分の言葉にするだけでは足りず、相手に伝えるまでがセットだということです（伝える相手がいないか、自分に向けてであれば、前者のみで十分ですが）。

では、先ほどの「なんとなくこっちの方が良い」を言語化するにはどうしたら良いでしょうか。
私の考える言語化は次のプロセスを踏むため、とりあえずは「なんとなくこっちの方が良い」を自分がわかる言葉に変換する必要があります。もちろん、できるのであれば最初から相手に伝わる言葉にするのが良いですが、今回は段階を踏んでいくこととしましょう。

自分の思考 --(translate)--> 自分の言葉 --(translate)--> 相手に伝わる言葉

それでは、先ほどのデザインの違いを自分がわかる言葉に変換していきます。
幸い、よくある事柄というものにはすでに名称が付いているものです。まずはそれを見ていきましょう。

3. デザインの4つの基本原則

聞いたことがある方も多いかと思いますが、デザインの基本原則とは次のことを指します。
具体的な使い方などはデザイン関連の書籍などを読むのが良いのですが、この記事でも言葉として利用したいため、軽く触りだけ説明いたします。

近接（Proximity）
整列（Alignment）
反復（Repetition）
対比（Contrast）

1. 近接（Proximity）

近接とは関連する要素を近づけさせ、1つのまとまりとしてグループ化させて見せる、ということです。
エンジニア的に馴染み深いのは、フォームのタイトル、入力欄、エラー文を近づけさせる、ということでしょうか。それぞれの項目が近くにあると、説明文がなくとも感覚として「この入力欄は名前の入力欄なんだな」「このエラーは名前の入力によるものなんだな」とわかるはずです。

2. 整列（Alignment）

整列とは関連する要素の（開始、終了などの）位置を揃えることで、ページ上の要素に一体性を持たせる、ということです。
エンジニア的に馴染み深いのは、それこそ Hatena Blog の記事ページとかかもしれないですね。記事本体に関連する要素の並びと、ブログ全体に関連する要素の並びが整列されているので、このページには2つのカテゴリがある、とパッと見ただけでわかるはずです。

3. 反復（Repetition）

反復とはデザイン上のある特徴（視覚的要素）を同じように繰り返し表示することで、ページに一貫性を持たせる、ということです。
エンジニア的に馴染み深いのは、X（旧 Twitter）のポストなどでしょうか。アイコン、アカウント名、アカウントID、日付、ポスト本文、画像（リンクプレビュー）の位置、全てが統一されていて、1ポストがどの範囲であるか一目でわかるはずです。

4. 対比（Contrast）

対比とはデザイン上の異なる要素に対して何らかの明確な差（大きさや太さ、色など）をつけることによって、閲覧者の目を引くように仕向けたり階層構造を明らかにする、ということです。
エンジニア的に馴染み深いのはコンソールに出力されるエラー文などでしょうか。エラー文が赤色で表示されていると、すぐに該当箇所が発見できるはずです。

4. 言語化をする

さて、それぞれの原則を示す名称がわかったところで、私の書いた「なんとなくこっちの方が良い」を修正してみます。
次のようになりました。

- タイトルで設定されてる文字列より中身の文字列がデカいのが違和感あるので h5 くらいの方がいいかもて気がしました。
- 強調したいなら class で大きめに空白入れると頭が勝手にセクション分けてくれるので多分読みやすいです。
+ タイトルと見出しにコントラストをつけてください。
+ 見出しと内容は近接させた上で余白を入れてください。

「コントラスト（対比）」も「近接」も、言葉を知っていれば問題ないと思いますが、全員が全員知っているわけではありません。
先述したように、言語化は相手に伝えるまでがゴールです。そのため、上記の言葉を相手に伝わる言葉に変換する必要があります。

この「相手に伝わる言葉」というのが厄介で、誰でも知っているような平易な言葉にした場合は言葉の意味が多すぎて正確に伝わりませんし、かといって専門用語を使うとそれはそれで伝わらない可能性があります（上記のように！）。

そのため、短い言葉で伝える場合は、相手に伝わる具体性の高い言葉を見極める必要があります。
相手に伝わる言葉を見極めるには、その人のバックグラウンドを知るのが良いです。バックグラウンドを知れば、ある程度知っている言葉の予想がつくためです。

しかし、面識のない相手に伝えないといけない場合もあるかと思います。その場合は、手短に伝えることは諦め、伝わるであろう具体性の高い言葉を使った上で、その言葉をさらに具体的に落とし込めるように補足するのが良いでしょう。
例えば、「フロントエンド」という言葉をはじめて聞く方向けに、「アプリでユーザが直接触れる画面」というように伝えたり、「アプリの画面だよ。この（スマホなどを見せながら）見えてるところ」というような伝え方をするようなイメージです。

さて、上記を意識して、先ほどの「修正版：なんとなくこっちの方が良い」をさらに直してみます。

- タイトルと見出しにコントラストをつけてください。
- 見出しと内容は近接させた上で余白を入れてください。
+ タイトルと見出しの差を明確にするため、タイトルのサイズより見出しのサイズを小さくしてください。
+ 見出しと内容を互いの距離が5px程度になるまで近づけて、できたまとまりの上に20px程度の余白を入れてください。

いかがでしょうか？
先ほどのものより、具体的に何を行えば良いか想像できる文章になったかと思います。