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アシスタントと共創するメタポートフォリオサイト
HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト
HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト
HARUKA meta-PORTFOLIO: AIアシスタントと共創するメタポートフォリオサイト