本文へ移動
DESIGN VOCABULARYデザインスタイル図鑑

← 検索結果へ戻る

STYLE PROFILE

ターミナル／CLI風

Terminal / CLI

文字による操作画面を取り入れた表現です。等幅の文字、行単位の情報、カーソルなどを使い、コンピューターを直接操作する印象を作ります。

ターミナル／CLI風のスタイル見本
見本はこの図鑑のためにAIで生成した画像です。

ターミナル／CLI風の代表配色例

色コードと役割をまとめてコピーできます。
背景（#17201E）とのコントラスト比
色役割比文字に使う目安
#D4E2D9文字と構造12.42:1本文の文字にも使える
#77B892主色7.17:1本文の文字にも使える

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

ターミナル／CLI風のプロンプト例

ターミナル／CLI風でデザインしてください。等幅文字を行ごとに並べる構成、文字と背景を分ける限定的な配色、入力位置を示す棒や四角のカーソルを取り入れてください。

ターミナル／CLI風の主な視覚的特徴

  1. 等幅文字を行ごとに並べる構成

    同じ幅の文字を升目のようにそろえ、命令と結果を1行ずつ積み重ねます。端末とコンピューターが文字の流れでやり取りしてきた仕組みが、そのまま画面の形になっています。

  2. 文字と背景を分ける限定的な配色

    暗い背景に明るい文字を置くなど、文字色と背景色の組み合わせを中心に配色します。Windows Terminalの配色の設定にも、背景色と文字色の項目があります。

  3. 入力位置を示す棒や四角のカーソル

    次の文字が入る位置を、縦棒や下線、塗りつぶした四角のカーソルで示します。Windows TerminalやmacOSのターミナルでは、このカーソルの形を設定で選べます。

ターミナル／CLI風が向いている成果物

  • 等幅文字と行単位の表示でログや状態値を整列し、技術情報を確認する画面にまとまりを与えられる。

  • カーソルや限定配色の文字画面を全体の規則にし、開発者の活動や技術企画の特徴を示せる。

ターミナル／CLI風とは

ターミナル／CLI風は、文字の命令でコンピューターを操作する画面をもとにした表現です。CLI（コマンドラインインターフェース）は、利用者が打ち込んだ命令を受け取り、その命令を実行する仕組みを指します。ほとんどの環境には、命令を受け付けて実行するシェルが何らかの形で備わっています。

初期の効果的な入出力装置の1つは、キーボードと印字装置を備えたテレタイプでした。その後、印字装置はブラウン管の画面に置き換わり、DECのVT100のような端末が広く使われました。1978年に登場したVT100は、送られてきたデータを画面に書き出すだけの「ダム端末」で、VTシリーズの端末は600万台以上売れました。

端末とコンピューターは文字の流れでやり取りし、この基本の仕組みは、技術が進んだ後もすべてのコマンドラインと端末に受け継がれています。のちに端末は画面上のウィンドウで動くアプリに置き換わりましたが、昔の端末装置と同じ基本の働きをしています。マイクロソフトは、コマンドライン用の等幅フォントCascadia CodeをWindows Terminalと一緒に開発しました。Windows Terminalには、走査線とにじんだ文字の縁で古いブラウン管の画面を再現する試験的な設定が加えられました。

見分けるときは、次の点を確かめてみてください。

  • 等幅の文字が行ごとに並んでいる
  • 文字と背景が、少ない色ではっきり分けられている
  • 入力位置に棒や四角のカーソルが置かれている

これらが揃っていると、ターミナル／CLI風の特徴を持っていると言えるでしょう。

実例を見る

Google画像検索で「ターミナル／CLI風」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。

出典

名称・説明・主な視覚的特徴と「ターミナル／CLI風とは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）

見た目の特徴が2つ以上重なるスタイルを、最大4件表示しています。2件に満たないときは、印象や成果物の近いものを加えて2件にしています。