M.Camin Portfolio

ポートフォリオの入り口として、単なるリンク集ではなく「カードをめくる」という物理的なインタラクションを取り入れました。

工夫点

CSSの `transform: rotateY` と `perspective` を組み合わせ、滑らかで重厚感のある3D回転を実現。ホバー時の浮遊感や発光エフェクトで、高級感のある世界観を演出しています。

UX

PCでは「めくって詳細を見る」、スマホでは「タップして直接遷移する」というように、デバイスの特性に合わせて操作ロジックを切り替え、ストレスのない体験を提供しています。

iframe技術を用いて、独立した機能を持つカレンダーウィジェットをカードの中に埋め込みました。

技術

`postMessage` APIを使用し、親ウィンドウ（ポートフォリオ）と子ウィンドウ（カレンダー）間で通信。カードを閉じた時に日付をリセットするなど、状態管理を連携させています。

デザイン

六曜や旧暦、吉日（一粒万倍日など）を自動計算するロジックをJavaScriptで実装。和紙のような質感と縦書きのタイポグラフィで、和モダンな雰囲気に仕上げました。

「落ち着き」と「品格」をテーマに、色彩設計を徹底しました。

配色

深みのあるエメラルドグリーン（#012B28）をベースに、シャンパンゴールド（#E8D3A8）をアクセントに使用。文字の可読性を保ちつつ、高級ホテルのようなラグジュアリーな空間をWeb上で表現しています。

フォント

欧文には「Cinzel」、和文には「Noto Serif JP」を採用し、繊細で美しいセリフ体の組み合わせで知的な印象を与えています。