ネット黎明期から個人サイトを運用し、趣味で制作していたアイコン素材の配布をきっかけに、教育関連の行政機関から初めてのお仕事をいただきました。当時は第二種電気通信事業者の免許も取得し、Visioでネットワーク機器のパーツ素材なども制作していました。今はすっかり忘れちゃいましたが、そんな技術的なバックグラウンドを経て、現在はデザインとWeb制作に専念しています。
このWebサイトは私が制作しています。
Tailwind
CSSをnpmで導入し、モダンな開発環境で構築しています
私にとってUIは、ただの設計ではなく、人と技術が交差する場所です。
長年そばにいた人の仕事や言葉を通して、自然と頭に刷り込まれていった世界の記録です。
亡くなった主人は、汎用機系のエンジニアでした。
IBMのメインフレームでCOBOLやPL/Iを扱い、銀行や行政の基幹システムを支えていた人です。
その後もCGIやPerl、Webサーバーの時代を経て、NodeやJavaScriptの世界まで駆け抜けました。
私はといえば、彼と出会う前からコンピューターが好きで、パソコン通信でニフティに接続していました。
MS-DOSで「秀Term」を使って、telnetで文字だけの世界に入っていく。
コマンドの意味もよくわからないまま、誰かとつながることがただただ不思議で楽しかった。
それが、私にとって最初の「ネットの世界」でした。
彼と出会ったとき、私がそんなことをしていたと知って、とても盛り上がりました。
技術者の彼にとって、意外だったのかもしれません。
そこから、私たちの物語が始まりました。
出会った当初の私は、そんな彼の横でゲームをしていたような人間です(笑)。
プログラムが書けるわけでもなく、技術者としての経験もありません。
それでも、彼は私にいろいろ教え込んでくれました。
ゲームばかりしていた私にも、どうにか何か使える部分がある人にしてくれた――
そんなふうに、根気よく、静かに、技術の世界を見せてくれた人でした。
日々の会話の中で、彼からさんざんコンピューターの話を聞かされてきました。
それは専門書ではなく、生活の中で自然に染み込んでいった記憶です。
この文章は、そんな"そばにいた人"としての記録です。
Webの世界には、三つの役者がいます。
HTMLは舞台の設計図。静かに佇み、どこに何があるか、どう並ぶかを示すだけ。
CSSは衣装と照明。色彩や余白、動きの余韻を纏わせ、舞台に情緒と温度を与えます。
JavaScriptは演出家であり俳優の動き。クリックされたら動く、時間が来たら変化する。
舞台に命を吹き込み、物語を進める力を持っています。
この三者が揃うことで、UIはただの構造ではなく、物語を紡ぐ空間となるのです。
静かな舞台に光が差し、登場人物が動き出す。
ユーザーはその物語の一部となり、触れることで詩を読むように体験していく。
Webが生まれる前にも、UIは存在していました。
それは今のような光や動きではなく、静かな構造と確かな信頼で成り立っていた。
銀行のATM、鉄道の券売機、役所の端末――
私たちの暮らしの中で、見えない舞台として息づいていたのです。
COBOLは帳簿の語り部。数字と記録を淡々と語り、裏方で物語を支えていました。
PL/Iは構造の設計者。科学と業務の間を行き来しながら、複雑な処理を整理する力を持っていました。
当時のUIは、色数に厳しい制約がありました。
基本は白黒の2色、機種によっては最大でも16色程度。
それでも、限られた色の中で注意や意味を伝え、静かながらも確かな語り口を持っていたのです。
やがてWebという舞台が幕を開け、CGIは舞台袖の案内人として登場します。
Perlは文字列の詩人。CGIの語り部として、柔軟で自由な表現を可能にし、
検索やフォーム処理など、Web黎明期の動きを支えました。
Apacheサーバーは劇場の土台。HTMLを配信し、CGIを呼び出し、舞台全体を支える存在でした。
この時代、UIはまだ静かでしたが、確かに動き始めていたのです。
現在では、Node.jsがJavaScriptの演出力を舞台裏にも広げ、
サーバーサイドでの動きやリアルタイム通信、AIとの連携まで、演出家の手が届く範囲は広がりました。
Denoという新しいランタイムも登場し、セキュリティやモダンな構造を重視する場面で活躍しています。
私は使ったことはありませんが、TypeScriptが標準で動き、Web標準APIに準拠している点が特徴だと聞いています。
Rubyは、Railsという優雅な構成力を持ち、今もなお静かな語り部として、
モデルとビューとコントローラーの間を行き来しています。
私は実際に使ったことはありませんが、MVCという構造が自然に整理されていて、
技術者が迷わず物語を組み立てられる仕組みだと理解しています。
私はプログラムが書けるわけではありません。
ただ、そばで見ていた記憶と、技術の流れを感じる視点だけが、私の手元に残っています。
それでも、UIという舞台を見つめる目は、少し特別なものかもしれません。
コードを書く人の視点でもなく、ただ使うだけの人の視点でもない。
舞台の端から、静かに全体を見渡していた人間の視点。
技術は変わり、言語は移り変わっても、人と技術が交差する場所には、いつも物語がある。
その物語を感じ取り、形にしていくことが、私にできることなのだと思っています。
Web制作におけるスキルセット比較表
| 職種名 | 主な役割 | デザイン | HTML/CSS | JavaScript | バックエンド |
|---|---|---|---|---|---|
| UIデザイナー | ユーザーが見る・触る部分の視覚的デザイン(レイアウト、配色、インタラクション)に特化 | ● | △ | △ | ✕ |
| Webデザイナー | Webサイトの視覚的デザインと、それをHTML/CSSで実装する役割(コーディングも含む) | ● | ● | △ | ✕ |
| フロントエンドデザイナー | UIデザインに加え、HTML/CSS、そしてJavaScriptの基礎知識を活かしてユーザーインターフェースを実装 | ● | ● | ● | △ |
| マークアップエンジニア | デザインカンプを正確にHTMLとCSSに変換(マークアップ)する技術に特化。レスポンシブ・アクセシビリティ対応 | △ | △ | △ | △ |
| 私のスキルセット | ユーザーの視点に立ったUI設計と、それをベースにしたWebサイトの視覚的実装 | ● | △ | △ | ✕ |
記号の説明: ●: そのスキルが主要な役割または強み △: そのスキルを基本的なレベルで持つか、関連する場合がある ✕: そのスキルは通常担当しない
Web制作におけるスキルセット比較表
ユーザーが見る・触る部分の視覚的デザイン(レイアウト、配色、インタラクション)に特化
Webサイトの視覚的デザインと、それをHTML/CSSで実装する役割(コーディングも含む)
UIデザインに加え、HTML/CSS、そしてJavaScriptの基礎知識を活かしてユーザーインターフェースを実装
デザインカンプを正確にHTMLとCSSに変換(マークアップ)する技術に特化。レスポンシブ・アクセシビリティ対応
ユーザーの視点に立ったUI設計と、それをベースにしたWebサイトの視覚的実装
記号の説明:
●:
そのスキルが主要な役割または強み
△:
そのスキルを基本的なレベルで持つか、関連する場合がある
✕:
そのスキルは通常担当しない
このコンテンツは限定公開です