「コマンドラインを打つ」という体験
黒い画面に緑色の文字が走る。コマンドを入力するとシステムが返事をする。この光景は、映画のハッキングシーンや開発者のデスクトップとして誰もが一度は目にしたことがあるでしょう。プログラマーにとってはターミナル（端末）は日常の道具ですが、デザイナーやクリエイターにとっても「黒い画面に光る緑文字」という美学は独特の魅力があります。
無料HTMLテンプレート『TERMINAL（ターミナル）』は、まさにその黒い端末画面をポートフォリオサイトに変換したテンプレートです。ページを開くとフリッカー（明滅）しながら起動し、ASCII アートの「Hello」がお出迎え。名前は「$ whoami」コマンドの結果として表示され、プロフィールは「$ cat bio.txt」の出力として読める。作品は「$ ls -la ./works」で一覧表示され、クリックするとVimエディタ風のモーダルで開きます。
デザインの特徴とこだわり
走査線エフェクト ― ブラウン管モニターの記憶
画面全体にうっすらと横縞の走査線オーバーレイが重なっています。これはブラウン管（CRT）モニターの表示特性を再現したもので、極めて細い水平線が画面を覆います。「この画面は液晶ではなくブラウン管で見ている」という錯覚を促すような演出です。
ASCIIアートの歓迎 ― テキストで絵を描く
ヘッダーにはアスキーアート（テキスト文字だけで形を作るアート）で「Hello」と描かれています。プログラマー文化ではASCIIアートは古くからの伝統で、READMEファイルの冒頭やログイン画面の飾りとして使われてきました。この小さな遊び心が、「ここにはプログラマーの美意識がある」と訪問者に伝えます。
コマンドプロンプト形式の情報表示
すべての情報は「コマンドの入力→システムの応答」という形式で表示されます。ピンク色のプロンプト「guest@portfolio」、青色のパス「~/users/admin」、そして入力コマンドの白文字。この3色の組み合わせが情報の構造を視覚的に伝え、実際にターミナルを操作しているような錯覚を与えます。
Vim風のモーダル ― 開発者が最も愛するエディタ
作品をクリックすると開くのは、緑色のステータスバーが上下に走るVimエディタ風のモーダル。上部バーにはファイル名と「[READ ONLY]」の表示、下部バーには「– VISUAL MODE –」の表示と「[X] CLOSE」ボタン。開発者が毎日見ているあの画面が、画像ビューアーとして機能しているのです。
「緑×黒」のありがちな配色を、あえて少し外している
ターミナル風と聞くと「真っ黒な背景に蛍光グリーン」を想像しますが、このテンプレートはそこをあえて少しだけ外しています。背景は純粋な黒ではなく、ほんのり青みがかった暗いダークカラー（GitHubのダークモードに近い色）。文字も毒々しい蛍光グリーンではなく、少し落ち着いた緑にしています。
理由は2つあります。1つは、純黒×純緑だと目が痛くなって長くは読めないこと。もう1つは、いかにも”昔のハッカー映画”的なクリシェ（ありがち表現）になって、かえって安っぽく見えてしまうこと。トーンを一段整えるだけで、「古い再現」ではなく「今どきのターミナルエミュレータ」のような洗練に変わります。
緑も実は1色ではなく、メインの明るい緑・枠線や補足に使う暗めの緑・プロンプトのマゼンタ（ピンク）と、役割で色を分けています。この濃淡があるから、全部同じ緑で塗るより情報が整理されて見えます。さらに作品一覧は、開いた瞬間に全部出るのではなく、上から1つずつ順番に現れます。本物のターミナルでコマンドの結果が行ごとに出力されていく様子の再現です。カーソルもフェードせず、カチッカチッと点滅する。こうした細部の積み重ねが、”本物っぽさ”を作っています。
こんな方・こんな用途におすすめ
エンジニア・プログラマーのポートフォリオ
コードを書く人間にとって、ターミナルが自分のポートフォリオになっているのは「究極の自己紹介」です。プログラミングのスキルが、サイトの存在そのもので証明されます。
セキュリティ・インフラエンジニアの名刺代わり
CTF（ハッキングコンテスト）のプロフィールサイトや、セキュリティ系の個人サイトとしても説得力抜群。黒い画面がそのまま技術者としてのアイデンティティを表現します。
テック系イベント・ハッカソンの告知ページ
ハッカソンやテックカンファレンスの告知ページとしても、ターミナルの演出は強い個性を発揮します。参加者がエンジニアであれば、サイトを開いた瞬間に「ここは自分の居場所だ」と感じるでしょう。
正直に言うと、これは”万人向け”ではありません
このテンプレートは、刺さる人にはとことん刺さる代わりに、万人受けはしません。そこが魅力でもあるのですが、選ぶ前に一度だけ立ち止まってほしいポイントがあります。
それは「サイトを見るのが誰か」です。閲覧者がエンジニアや技術好きなら、黒い画面の世界観は最高の共通言語になります。一方で、技術にあまり馴染みのない一般のクライアントや、幅広い層に向けた窓口にしたい場合は、コマンド形式の表示が少し取っつきにくく見えることもあります。受注の入口として使うなら、相手の顔を思い浮かべて選ぶのがおすすめです。
また、このテンプレートは作品数がそれほど多くない人に向いています。点数が多い・長い説明文を載せたいという場合は、同じ技術系でももう少し読みやすい NEON や、整然と並ぶ INDEX のほうが扱いやすいかもしれません。”自分の見せたいもの”と”見せ方”が噛み合っているかを基準に選んでみてください。
カスタマイズのヒント
テキストカラーの変更でテーマを切替
デフォルトのグリーンは最もクラシックなターミナル色ですが、アンバー（琥珀色）に変えると「もっと古い端末」の雰囲気に、白にすると「モダンなターミナルエミュレータ」のような印象になります。
READMEテキストエリアの活用
「$ cat readme.txt」というコマンド形式で表示されるフリーテキストエリアでは、スキルセットやプロジェクト解説、技術メモなどをターミナル風に掲載できます。リスト形式の記述もそのまま反映されます。
色は数本の変数で、まとめて管理している
画面の色は、コード冒頭の数本の設定（背景・メインの文字色・暗めの文字色・カーソル・プロンプトの強調色）でまとめて管理しています。なので「緑をアンバー（琥珀色）にしたい」「白いモダンなターミナルにしたい」と思っても、ほとんどこの数か所を書き換えるだけで、文字も枠線もカーソルも一斉に変わります。
ひとつコツがあって、メインの文字色を変えるときは、セットで”暗めの文字色”も同じ系統に変えるのがおすすめです。この2色は「目立たせる色」と「控えめな色」という濃淡のペアで使っているので、片方だけ変えると濃淡のバランスが崩れてしまいます。一方、プロンプトのマゼンタは差し色なので、ここは別系統のまま残しても成立します。
AIに頼むなら「ターミナルの配色をアンバー系に変えて。メインと暗めの文字色は同じ系統で濃淡をつけて、プロンプトの差し色は残して」と伝えると、雰囲気を保ったまま色だけきれいに変わります。
まとめ ― コマンドひとつで、自分を表現する
『TERMINAL』は、「コードを書く人のためのコードで作られたデザイン」です。走査線、ASCIIアート、コマンドプロンプト、Vimモーダル。すべてが「この画面の向こうに、技術を愛する人間がいる」と静かに語っています。
