Skip to main content

Terminal_image

「コマンドラインを打つ」という体験

黒い画面に緑色の文字が走る。コマンドを入力するとシステムが返事をする。この光景は、映画のハッキングシーンや開発者のデスクトップとして誰もが一度は目にしたことがあるでしょう。プログラマーにとってはターミナル(端末)は日常の道具ですが、デザイナーやクリエイターにとっても「黒い画面に光る緑文字」という美学は独特の魅力があります。

無料HTMLテンプレート『TERMINAL(ターミナル)』は、まさにその黒い端末画面をポートフォリオサイトに変換したテンプレートです。ページを開くとフリッカー(明滅)しながら起動し、ASCII アートの「Hello」がお出迎え。名前は「$ whoami」コマンドの結果として表示され、プロフィールは「$ cat bio.txt」の出力として読める。作品は「$ ls -la ./works」で一覧表示され、クリックするとVimエディタ風のモーダルで開きます。

無料WebテンプレートをDL

 

デザインの特徴とこだわり

走査線エフェクト ― ブラウン管モニターの記憶

画面全体にうっすらと横縞の走査線オーバーレイが重なっています。これはブラウン管(CRT)モニターの表示特性を再現したもので、極めて細い水平線が画面を覆います。「この画面は液晶ではなくブラウン管で見ている」という錯覚を促すような演出です。

ASCIIアートの歓迎 ― テキストで絵を描く

ヘッダーにはアスキーアート(テキスト文字だけで形を作るアート)で「Hello」と描かれています。プログラマー文化ではASCIIアートは古くからの伝統で、READMEファイルの冒頭やログイン画面の飾りとして使われてきました。この小さな遊び心が、「ここにはプログラマーの美意識がある」と訪問者に伝えます。

コマンドプロンプト形式の情報表示

すべての情報は「コマンドの入力→システムの応答」という形式で表示されます。ピンク色のプロンプト「guest@portfolio」、青色のパス「~/users/admin」、そして入力コマンドの白文字。この3色の組み合わせが情報の構造を視覚的に伝え、実際にターミナルを操作しているような錯覚を与えます。

Vim風のモーダル ― 開発者が最も愛するエディタ

作品をクリックすると開くのは、緑色のステータスバーが上下に走るVimエディタ風のモーダル。上部バーにはファイル名と「[READ ONLY]」の表示、下部バーには「– VISUAL MODE –」の表示と「[X] CLOSE」ボタン。開発者が毎日見ているあの画面が、画像ビューアーとして機能しているのです。

 

こんな方・こんな用途におすすめ

エンジニア・プログラマーのポートフォリオ

コードを書く人間にとって、ターミナルが自分のポートフォリオになっているのは「究極の自己紹介」です。プログラミングのスキルが、サイトの存在そのもので証明されます。

セキュリティ・インフラエンジニアの名刺代わり

CTF(ハッキングコンテスト)のプロフィールサイトや、セキュリティ系の個人サイトとしても説得力抜群。黒い画面がそのまま技術者としてのアイデンティティを表現します。

テック系イベント・ハッカソンの告知ページ

ハッカソンやテックカンファレンスの告知ページとしても、ターミナルの演出は強い個性を発揮します。参加者がエンジニアであれば、サイトを開いた瞬間に「ここは自分の居場所だ」と感じるでしょう。

 

カスタマイズのヒント

テキストカラーの変更でテーマを切替

デフォルトのグリーンは最もクラシックなターミナル色ですが、アンバー(琥珀色)に変えると「もっと古い端末」の雰囲気に、白にすると「モダンなターミナルエミュレータ」のような印象になります。

READMEテキストエリアの活用

「$ cat readme.txt」というコマンド形式で表示されるフリーテキストエリアでは、スキルセットやプロジェクト解説、技術メモなどをターミナル風に掲載できます。リスト形式の記述もそのまま反映されます。

 

まとめ ― コマンドひとつで、自分を表現する

『TERMINAL』は、「コードを書く人のためのコードで作られたデザイン」です。走査線、ASCIIアート、コマンドプロンプト、Vimモーダル。すべてが「この画面の向こうに、技術を愛する人間がいる」と静かに語っています。

→ デモサイトのプレビューはこちら

 

【AI×HTMLでWeb制作を効率化】無料Webテンプレート「EYANCA」は、商用・個人を問わず自由にご利用いただけます。デザインのベース構築や、AIを用いたコーディング学習の素材として、ぜひお役立てください。また、本記事の内容に共感いただけましたら、SNS等でのシェアやWebサイトでのご紹介も大歓迎です。

無料WebテンプレートをDL


トミナガハルキ

グラフィックデザイナー/AMIX 代表。独学でデザインを学び、パッケージメーカー→美容系ベンチャー→家庭用品メーカーでのデザイン・広報運営を経て独立。現在は小さな事務所を拠点にASOBOAD等のサービスを運営し、ロゴ・パッケージ・広告物を中心に制作しています。著書『#ズボラPhotoshop 知識いらずの絶品3分デザイン』は各カテゴリでベストセラーを獲得。2020年Adobe Creative Residency選出。ブログでは、10年以上の実務から学んだことや働き方のヒントを等身大の視点で発信しています。