暦注ハンドブック

伝統的な「暦」のイメージを大切にしつつ、現代のライフスタイルに馴染む「和モダン」な世界観を構築しました。

配色設計

信頼感を表す「濃紺（#2d4059）」をベースに、吉日や豊かさを象徴する「金色（#d4af37）」をアクセントに使用。背景には和紙のような温かみのあるオフホワイトを採用し、長時間見ても疲れないコントラスト比を実現しています。

書体選び

見出しには格調高い「明朝体（Serif）」を、本文には可読性の高い「ゴシック体（Sans-serif）」を使い分けることで、情報のメリハリと読みやすさを両立させました。

洋書の目次を模したナビゲーションや、辞書のように引けるタブ切り替えなど、書籍の閲覧体験をWeb上で再構築しました。

書籍風メニュー

ハンバーガーメニューは、ベージュの背景にローマ数字（I, II...）を配した「目次」スタイルを採用。スタガードアニメーションで優雅な開閉動作を実現しています。

情報整理

「六曜」「選日」などの用語集はタブ切り替えで、FAQはアコーディオンで整理。膨大な情報をコンパクトに収納し、快適な読み心地を提供します。

「結婚」「金運」などの目的別ガイド（シーン別ガイド）において、スマホアプリのような快適な操作性を提供しています。

UX設計

CSS Scroll Snap を活用し、カード単位でピタッと止まる気持ちの良いスクロールを実現。PC向けにはマウスドラッグでのスクロール操作もJavaScriptで補助し、デバイスを問わず快適に閲覧できます。

視覚誘導

「Scroll ➔」というアニメーション付きのヒントを表示し、横にコンテンツが続いていることを直感的に伝えています。

サイトの目玉となる「2026年のNo.1最強開運日」を、他の要素とは一線を画すデザインで強調しました。

装飾技術

CSSの linear-gradient で微細なグラデーション背景を作り、box-shadow で浮遊感を演出。疑似要素（::before）を使って背景に巨大な「★」マークを薄く配置し、奥行きと特別感を表現しています。

構造化

FlexboxとGridを組み合わせ、日付、曜日、吉日タグ（天赦日・一粒万倍日など）をバランスよく配置。レスポンシブ対応でスマホ表示時も崩れないレイアウトを組んでいます。