オリジナルスマホケース作成アプリdecocom（デコカン）iPhone・Android全機種対応

Overview

decocom sells made-to-order smartphone cases that customers design themselves in a mobile app by uploading photos of idols, pets or family. The brand sits in a bright, Japanese-retail "Kawaii Pop" register: a white canvas, magenta and cyan accents lifted from the logo gradient, and product mockups (iPhone 16 Pro dressup) doing the selling. The emotional response is anticipation and personal delight rather than luxury.

Voice is friendly, direct and benefit-led, using short declaratives and numeric proof points (1,980円〜, 600機種, 最短5営業日, 15年の実績). Copy addresses the fan (推し活) directly and mixes polite です/ます with exclamation marks sparingly. Example sentence: "写真をアップするだけでOK！国内工場製造で、最短5営業日にお届けします。"

Colors

Primary (#ff4eb8) is the signature magenta used on the hero primary CTA (今すぐデザインをはじめる) and key links (--color_link #f2379b). It is applied as a 135deg gradient from #ff4eb8 through #d159d5 to #4ec9ff on hero CTAs, and it marks every interactive affordance. Secondary (#4ec9ff) is the cyan end of the logo gradient, used for highlights, gradient terminals and status accents, with #87e7ff as its dim variant. Tertiary (#6366f1) supports informational highlights and secondary emphasis.

Body text is #333333 on #ffffff; section subheads and captions drop to #666666. Surfaces step from #ffffff through #f7f7f7 and #f0f0f0 for cards and panels; never use pure black for large areas, reserving #000000 only for the sticky bottom app-download bar. Gradient rule: limit magenta-to-cyan gradients to CTAs a

Typography

The type system pairs a system sans stack for display (-apple-system, Noto Sans JP) with the Japanese UI face 游ゴシック体 for body and labels. Display H1 is 48px at weight 800 with -0.02em tracking and 62.4px line height, delivering a heavy, poster-like hero. Section headlines drop to 36px / 700 with 57.6px line height. Body runs 16px / 500 at 25.6px line height (1.6), which keeps dense Japanese copy readable. Use weight 600 only for button and label text, and apply letter-spacing 0.02em to 12px labels on tinted badges for legibility.

Layout

The page uses a fluid grid capped at a 1200px container with 24px gutters and 12 columns on desktop; mobile collapses to a single column with 16px side margins. Sections are separated by lg (24px) spacing between blocks and 2xl (40px) between major sections. Whitespace is generous around the hero, which pairs a left text column with a right product carousel. Spacing tokens follow an 8px rhythm: xs 8px for icon gaps, sm 12px inside chips, md 16px for list rows, lg 24px for card padding.

Elevation & Depth

Depth is conveyed with restrained drop shadows rather than glass. Level 1 (sm) for inline chips: 0 1px 3px 1px rgba(0,0,0,.1). Level 2 (md) for product cards and image frames: 0 2px 8px rgba(0,0,0,.1), 0 4px 8px -4px rgba(0,0,0,.2). Level 3 (lg) for hovered list cards: 0 2px 4px rgba(0,0,0,.05), 0 4px 4px -4px rgba(0,0,0,.1). The sticky bottom app-download bar uses a solid #000000 fill with a soft elevated shadow to separate it from content.

Shapes

Shape philosophy is Soft Pop: generous, friendly radii that echo phone-case curvature. Buttons use a 50px pill radius (rounded.lg) on primary CTAs and 12px on secondary actions. Cards and image frames use 20px (rounded.md), inputs 16px (rounded.sm), and category badges are fully round (9999px). The large radius keeps the UI consistent with the rounded product silhouettes it sells.

Components

Action Elements Primary CTA is a 48px-high pill (50px radius) filled with the magenta-to-cyan gradient, white 16px / 600 label text, and 14px 24px padding. On hover it shifts to primary-fixed-dim (#ffa6dc) over 250ms ease-in-out and nudges down 2px with translateY(2px). A moving shine sweep (`is-style-btn_shiny`, 3s infinite ease-in-out) runs across it. Secondary buttons use surface-container fill with 12px radius and move to surface-container-high on hover.

Containers & Surfaces Product and content cards use surface-container-lowest with a 20px radius and md elevation. On hover, background moves to surface-container-high and elevation steps to lg with a 250ms transition. Padding is 24px (lg).

Inputs & Interaction Inputs are white (#ffffff) with a 1px solid rgba(206,209,213,.

Do's and Don'ts

**Do**

• Do use the magenta primary (#ff4eb8) and its gradient only on CTAs, links and focus states.
• Do lead with numeric proof points (1,980円〜, 600機種, 最短5営業日) set at weight 800 in headlines.
• Do keep body copy at 16px / 25.6px to preserve Japanese line rhythm.
• Do use 50px pill radius for primary CTAs to match the rounded product silhouettes.

**Don't**

• Don't use pure black for large surfaces; reserve #000000 for the sticky app-download bar.
• Don't apply the magenta-to-cyan gradient to body text or large decorative blocks.
• Don't introduce glassmorphism or heavy blur; elevation here is plain drop shadow.
• Don't mix more than two accent hues (magenta and cyan) in a single component.