コーポレートサイト公開中
neptay.com
自社のコーポレートサイト。メディア、テクノロジー、クライアントサービスをひとつのシステムに、10言語・2つのカラーモードで。
制作の舞台裏
システムをひと目で。
ライトモードとダークモードのホームページ、ブランドパレット、文字サイズの階層、そしてサイトが対応する10の言語。
概要
Webサイトは、クライアントやパートナーが最初に目にする場所です。クライアントワークと同じ基準で、Neptayのすべての事業を紹介しています。
ブリーフ
- 課題
- 2つの部門とクライアントサービスを持つメディア＆テクノロジー企業を、ひとつの明快で信頼できるブランドとして伝えること。
- 制約
- 10言語（うちひとつは右から左）と、2つのカラーモード。
- 解決策
- トークンベースのデザインシステム。ひとつのパレット、大きなタイポグラフィ、グレーのパネル、そして黄色のマーカーをひとつ。
Neptay Media & Technology Servicesは、メディアとテクノロジーの会社です。サイトでは、2つの部門とクライアントサービスを、ひとつの明快なブランドとして紹介しています。
デザインシステムは、ブランドパレットを土台にしています。2つの明るいニュートラル、2つのダークトーン、そして黄色のアクセントをひとつ。ひとつのトークンセットで、標準のライトモードとダークモードの両方を制御します。サイト上のインターフェースはすべてコードで描いているため、プロダクトと常に足並みがそろいます。
サイトは、ひとつのコンテンツレイヤーから10言語で配信されます。右から左に書くアラビア語、そして日本語も含まれます。レイアウトは論理プロパティで組んでいるため、きれいに左右反転します。ルーティング、メタデータ、hreflang、構造化データは、すべてのページで言語に対応しています。
アプローチ
最初から最後まで貫いた、3つの原則。
主役はタイポグラフィ
大きく詰めた見出しと、落ち着いたトーンのリード文。2トーンの見出しひとつで、アイデアとその文脈を伝えます。文字でできることを、アイコンに任せることはしません。
アクセントはひとつ、目印として
ブランドイエローは、アクションと強調の目印です。ボタン、ハイライトしたフレーズ、小さな四角。それ以外はすべてインク、グレーのパネル、細い罫線で構成しています。ライトモードでもダークモードでも同じです。
モーションは演出ではなく、確認
コンテンツは初めて表示されるときに定位置へと浮かび上がり、タイルはホバーでわずかに持ち上がります。訪問者が動きを減らす設定にしている場合は、すべてのアニメーションが止まります。
成果
このサイトがもたらすもの。
ローカライズ
10言語
英語、トルコ語、ドイツ語、スペイン語、フランス語、ポルトガル語、ロシア語、アラビア語、日本語、中国語。すべてのページにhreflangを設定しています。
レイアウト
左から右へ、右から左へ
アラビア語では、別のスタイルシートではなく論理プロパティによって、レイアウト全体が左右反転します。
カラー
ひとつのパレット、2つのモード
5つのブランドカラーをトークンとして適用。標準のライトモードとダークモードを、どのページでも切り替えられます。
システム
ひとつのトークンセット
すべてのページ、2つのカラーモード、10の言語が、ひとつのデザイントークンを共有しています。
技術スタック
- Next.js 15
- React 19
- TypeScript
- CSSデザイントークン
- Geist
- Vercel