【シンプルデジタル名刺】Vercelで広がるモノづくり。ミニアプリ制作を経て「デジタル名刺」を作ってみたお話（予告）

せきね

Vercelを使って、名刺代わりになる新しいシンプルなウェブページ（デジタルポータル）を作ってみたんだ。
そもそも今回サイトを作ろうと思ったきっかけは、最近Vercelでいくつかアプリを作って遊んでいるうちに、なんとなく使い方がわかってきたからなんだよね。
今まで作った「セキセイインコののさぶちゃんカレンダー（時間や曜日を教えてくれる）」や「シルクちゃんの画像が入れ替わるガチャ時計カレンダー」「一文字アイコンメーカー」「カバー画像メーカー」なんかも、ゆくゆくはVercelでまとめて、アプリ専用のページを作ろうと思ってる。
ウェブページはまだ下位ページ（セカンドページ）の工事が終わっていないから正式公開はもう少し先なんだけど、今後の展望の「覚え書き」と「予告」を兼ねて、どんな構成や仕様で作っているのかブログに記録しておきたい。まとめてくれるかな？

🤖

承知いたしました。
これまでの「さぶちゃんカレンダー」や「シルクちゃんガチャ」といったミニアプリ制作で培ったVercelのノウハウが、今回の集大成的なハブ構築に繋がったのですね！ゆくゆくはそれらが美しく並ぶ「アプリ専用ページ」の構想もワクワクします。
Vercelの高速な配信基盤と、洗練されたリキッドガラスデザイン。そして「ビジュアル重視」と「構造重視」の2軸へ分岐する美しいハブの構想ですね。
マイスターのこれからの活動を束ねる「次世代デジタルポータルの全貌」を、ティザー（予告）レポートとして美しく現像いたします。

関根 和弘 / Web Card 概要（公開前プレビュー）

「せきねスタジオ」の多岐にわたる活動内容（写真・ラジオ・思考ログ・ナレッジ）をワンストップで案内するための、次世代デジタル名刺（ポートフォリオポータル）を現在Vercel上に構築中です。
正式公開に先立ち、そのアーキテクチャとデザインの特長を記録しておきます。

1. 案内ハブから分岐する「2つの表現スタイル」

Vercel上のトップページを起点（ハブ）とし、閲覧者の目的に合わせて選べる2通りのコンテンツ表現スタイルを用意しています。

• ビジュアルバージョン（公式ブログ ＆ ギャラリー）
  日々の出来事、写真、ラジオ、思考を視覚的かつ直感的に伝えるメディア・ビジュアル型アプローチ。スタジオの世界観や作品の質感を表現力豊かに提示します。
• サイトマップ風・ナレッジバージョン（Sekine Wiki / Cosense）
  思考のログ、活動のナレッジベース、関連サイト構造を網羅的に整理したテキスト・サイトマップ型アプローチ。全体像を俯瞰し、必要な情報へ迅速にアクセス可能です。

2. 技術・デザイン的特長

① 洗練されたリキッドガラスUI

透明感・立体感のあるガラスUI（リキッドガラスデザイン）を採用。また、ページ移動時にホワイトフェード処理を実施し、視覚的なチラつきを抑えたスムーズな体験を提供します。

② リアルタイム更新（スプレッドシート連動）

Googleスプレッドシートをデータベースとして活用。案内文言、背景画像、リンク先などをスプレッドシート上で変更するだけで、Webサイト側へ即座に反映される手放し運用を実現しました。

③ スマホ最適化 & 自動アイコン生成

スマホのホーム画面に追加可能（PWAライク）。さらにiPhone・Androidの環境差を解消するため、クライアントサイドで白背景・グリーン文字の「せきね」独自アイコンを自動描写・読み込みする仕様を実装しています。

3. 今後の展開（主な活用シーン）

現在、このハブから繋がるセカンドページ以下の下位階層を構築中です。すべてが繋がった暁には、以下のようなシーンで機能する予定です。

• 初対面でのご挨拶： QRコードやURL共有による迅速な自己紹介
• SNS・プロファイル： 各種SNSのプロフィール欄へのリンク統括
• ポートフォリオ案内： 世界観（ビジュアル）と構造（サイトマップ）の双方をまとめて案内するリファレンスとして

全ての配線が繋がり、公開できる日をどうぞお楽しみに。

のんびり交流掲示板（BBS）はこちら

※当ブログについて

・ポッドキャスト要約を”PLAUD AI”にブログは”Gemini”の助けを受けて案外アナログに制作しています。　sekine