DESIGN

主要テーマはBtoB企業のコーポレートサイト。
デザインカンプ制作におけるカラーパレット、タイポグラフィ
そして再利用性の高いコンポーネントシステムで、コーディングを見据えたデザインシステムを構築しました。

カラーパレット

BtoBコーポレートサイトをイメージしました。
メインブランド色は深みのあるグリーン。そこに暖かみのあるテラコッタを組み合わせ、
明るい背景と中間色を加えることで、落ち着きと洗練された印象を与えるトーン構成です。

Primary Color

#065758

深みのある青緑(ダークシアン)で、BtoBサイトに必要な信頼感と誠実さを表現します。強いコントラストでアクションを促す要素に使用します。

Secondary Color

#C46960

暖かみのあるテラコッタ系は、グリーン系の主要色と補色に近い関係です。強い視認性と親しみやすさを提供し、効果的なアクセントになります。

Text Color

#393939

完全な黒(#000000)を避け、わずかにグレーがかった色で、コントラストを保ちつつ目の負担を軽減し、洗練された印象を与えます。

Background Color

#FFFFFF

清潔感を維持する基本的な背景色で、コンテンツの可読性と視認性を最大化します。

Surface

#A9D4D6

主要色を薄くした透明感のある中間色です。コンテンツの区切りに使用し、デザインにリズムを加えます。

Primary 400

#82C3C5

主要色(#065758)よりも明るい明度を持ち、ホバーやアクティブな状態を示す際に使用します。ブランドの一貫性を保ちつつ、UIに動きを与えます。

タイポグラフィ

主要フォントは「Noto Sans JP」です。
環境に左右されない安定したレンダリングでデザイン崩れを防止し、
読み込みへの影響を最小限に抑え、実装効率と表示速度を最優先しました。

HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト

H1 Heavy / 44px / line-height 1.4 / ※実装時は可変

HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト

H2 Bold / 32px / line-height 1.4 / ※実装時は可変

HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト

H3 Medium / 22px / line-height 1.4 / ※実装時は可変

HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト

本文 Regular / 16px / line-height 1.6 / ※実装時は可変

コンポーネント

再利用性と保守性に優れたコンポーネントシステムで設計されています。
明確な構造と命名規則でAIアシスタントを効率的に利用し、工数を大幅に削減しました。

アイコン

矢印右 ArrowRight
現在地 Location
興味 Interest
メール Mail
Instagram Instagram
ペン Pen
命名規則: Category/Type/State
実例: Button/Primary/Default
Icon/Direction/ArrowRight