Y.Kanoプロフィール

プロフィール写真

Webとの出会い

ネット黎明期から個人サイトを運用し、趣味で制作していたアイコン素材の配布をきっかけに、教育関連の行政機関から初めてのお仕事をいただきました。当時は第二種電気通信事業者の免許も取得し、Visioでネットワーク機器のパーツ素材なども制作していました。今はすっかり忘れちゃいましたが、そんな技術的なバックグラウンドを経て、現在はデザインとWeb制作に専念しています。

アイコン

このWebサイトは私が制作しています。
Tailwind CSSをnpmで導入し、モダンな開発環境で構築しています

舞台の端から、UIを見つめて

私にとってUIは、ただの設計ではなく、人と技術が交差する場所です。
長年そばにいた人の仕事や言葉を通して、自然と頭に刷り込まれていった世界の記録です。

記憶のはじまり

亡くなった主人は、汎用機系のエンジニアでした。
IBMのメインフレームでCOBOLやPL/Iを扱い、銀行や行政の基幹システムを支えていた人です。
その後もCGIやPerl、Webサーバーの時代を経て、NodeやJavaScriptの世界まで駆け抜けました。

私はといえば、彼と出会う前からコンピューターが好きで、パソコン通信でニフティに接続していました。
MS-DOSで「秀Term」を使って、telnetで文字だけの世界に入っていく。
コマンドの意味もよくわからないまま、誰かとつながることがただただ不思議で楽しかった。
それが、私にとって最初の「ネットの世界」でした。

彼と出会ったとき、私がそんなことをしていたと知って、とても盛り上がりました。
技術者の彼にとって、意外だったのかもしれません。
そこから、私たちの物語が始まりました。

出会った当初の私は、そんな彼の横でゲームをしていたような人間です(笑)。
プログラムが書けるわけでもなく、技術者としての経験もありません。
それでも、彼は私にいろいろ教え込んでくれました。
ゲームばかりしていた私にも、どうにか何か使える部分がある人にしてくれた――
そんなふうに、根気よく、静かに、技術の世界を見せてくれた人でした。

日々の会話の中で、彼からさんざんコンピューターの話を聞かされてきました。
それは専門書ではなく、生活の中で自然に染み込んでいった記憶です。
この文章は、そんな"そばにいた人"としての記録です。

UIという舞台

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という舞台を見つめる目は、少し特別なものかもしれません。
コードを書く人の視点でもなく、ただ使うだけの人の視点でもない。
舞台の端から、静かに全体を見渡していた人間の視点。

技術は変わり、言語は移り変わっても、人と技術が交差する場所には、いつも物語がある。
その物語を感じ取り、形にしていくことが、私にできることなのだと思っています。

Skill Map

Web制作におけるスキルセット比較表

UIデザイナー

ユーザーが見る・触る部分の視覚的デザイン(レイアウト、配色、インタラクション)に特化

デザインスキル:
HTML/CSS実装:
JavaScript実装:
バックエンド連携:

Webデザイナー

Webサイトの視覚的デザインと、それをHTML/CSSで実装する役割(コーディングも含む)

デザインスキル:
HTML/CSS実装:
JavaScript実装:
バックエンド連携:

フロントエンドデザイナー

UIデザインに加え、HTML/CSS、そしてJavaScriptの基礎知識を活かしてユーザーインターフェースを実装

デザインスキル:
HTML/CSS実装:
JavaScript実装:
バックエンド連携:

マークアップエンジニア

デザインカンプを正確にHTMLとCSSに変換(マークアップ)する技術に特化。レスポンシブ・アクセシビリティ対応

デザインスキル:
HTML/CSS実装:
JavaScript実装:
バックエンド連携:

私のスキルセット

ユーザーの視点に立ったUI設計と、それをベースにしたWebサイトの視覚的実装

デザインスキル:
HTML/CSS実装:
JavaScript実装:
バックエンド連携:

記号の説明:
: そのスキルが主要な役割または強み
: そのスキルを基本的なレベルで持つか、関連する場合がある
: そのスキルは通常担当しない

デザインノート

このコンテンツは限定公開です