画面の基盤Frontend
画面づくりも、行き当たりばったりに作ると「ページごとに色や形がばらばら」になります。松葉は、どの画面を作ってもブランドの配色・書体・形が自動で当たる土台（デザインシステム）を先に用意しました。あわせて、既製の画面部品 55 種を 1 つずつ精査して採否を判断し、スマートフォンでアプリのように使える PWA にも対応しています。
このページは「アプリの見た目」の話です。 いまご覧いただいているこの資料自体の見た目（紙色・明朝の見出し）とは別物で、松葉アプリ本体に適用するデザインの土台を説明しています。アプリ側は角丸の形なども、この資料とは別の値を使います。
色や形を 3 段階で管理するDesign tokens
ブランドの色や形は、画面の部品に直接「#0E7C75」のような生の値を書き込むのではなく、3 段階（生の値 → 意味づけ → 部品への適用）に分けて管理します。こうすると、たとえば主役の色を変えたいとき、1 か所を直すだけで全画面に反映されます。
松葉の和モダンな見た目: 主役色は鴨の羽色のような Teal（#0E7C75）、強調色は オレンジ（#FF8D44）。見出しは明朝体（Shippori Mincho B1）、本文はゴシック体（Noto Sans JP）、英数字は Inter を使い分けます。角の形は、右下だけ少し長く伸ばした「6px 6px 16px 6px」という、和の意匠を思わせる非対称の角丸で統一しています。
既製の画面部品 55 種を、1 つずつ精査Fifty-five components
画面部品は、広く使われている部品集（shadcn/ui）を出発点にしました。ただし「入れたまま使う」のではなく、55 種すべてを 1 つずつ確認し、ブランドに合うよう手を入れるか、そのまま採用するか、不採用にするかを判断しました。
部品集の全コンポーネントを 1 つずつ確認。
手を入れずブランドに馴染むもの。
配色・角丸・日本語表示などを調整。
要件を満たせず、自前実装に切替。
スマホ対応と、最新仕様への追従PWA & latest spec
画面の土台は、スマートフォンでアプリのように使える PWA（Progressive Web App。ホーム画面に追加して、アプリのように起動できる Web の仕組み）に対応しています。また、土台に採用した Next.js・React は更新の速い技術のため、最新仕様特有の注意点を踏まえて実装しました。
PWA 対応: スマートフォンで「ホーム画面に追加」すると、松葉のアイコンとブランド色で、通常のアプリのように全画面で起動します。通信が切れたときには専用の案内画面に切り替わる仕組みも入れています。
最新仕様への追従: 採用した Next.js 16 / React 19 は、従来と書き方が変わった部分があり、知らずに従来の書き方をすると不具合になる箇所がいくつもあります。そうした注意点（書体の当て方、画面更新の書き方など）を 1 つずつ確認しながら、最新の推奨に沿った実装にしています。新しい技術を「とりあえず使う」のではなく、落とし穴を把握した上で採用しています。
正直な注記: 整えたのは、あくまで画面づくりの「土台」です。実際の各画面（ログイン後のダッシュボード、ファイル一覧、共有リンクの発行画面など）は、この土台の上に今後の開発で作っていきます。土台が整っているため、どの画面を作っても自動的にブランドの見た目に揃います。