現場感
日本にあるブラジル系・日本のブランドや企業では、SNSは動いていても、次の行動、差別化、問い合わせ導線が曖昧なケースがあります。
CASE · 自社ブランド
Paloma Albieri
このサイトは、ポジショニングのためのプロダクトとして設計しました。SNS、戦略、技術が一つの流れとして機能することを、サイト体験そのもので示しています。
SNS + 技術現場リサーチ問い合わせ導線
プロジェクトの考え方
私たちは自分たち自身が一番大きなクライアントです。投稿、サイト、問い合わせをつなぐと言うなら、まず自社ブランドでその方法を証明する必要があります。
リサーチ
設計前に見たこと。
顧客の判断
誰が実行するのか、どんな経験があるのか、どのツールを使うのか、なぜ投稿だけではないのかを、問い合わせ前に理解できる構成にしました。
信頼の証明
見た目だけではなく、IT、製造現場、運用での経験を前面に出すことで、技術的な信頼を伝える設計にしています。
デジタル行動
Instagram、紹介、検索、WhatsAppなど、入口は一つではありません。そのため、文脈、サービス、使用ツール、問い合わせを自然に辿れる流れにしました。
デザインシステム
編集的で、技術的で、直接的。
セリフ体の強い見出し、UIとしての構造、赤いアクセントを組み合わせました。一般的な代理店サイトではなく、戦略と実装力を持つ個人ブランドとして見えることを重視しています。
Ink
oklch(.14 .01 270)
Paper
oklch(.985 .003 60)
Rose
oklch(.93 .055 10)
Shock
oklch(.68 .24 8)
プロセス
どう開発したか。
01
ポジショニング
最初に、投稿からサイトまでつながるオンライン導線という中心メッセージを決めました。これが見出し、サービス、技術的証明、問い合わせ導線を決めています。
02
ページ構成
ヒーロー、実績につながるプロフィール、サービス、ハイブリッドなスタック、Instagram、問い合わせフォームの順に、読み進めやすい構造にしました。
03
体験とインタラクション
スクロール表示、ホバー、読み進みの感覚、連絡方法を選べるフォームなどを入れ、人が使うページとしての手触りを作りました。
04
実装
Next.js、TypeScript、Tailwind、PT/JP対応、sitemap、robots、Netlify Formsを使い、今後のケース追加にも対応できる構成にしています。
ツール
このケースを支えるスタック。
戦略 & コンテンツ
現場リサーチ編集方針導線設計CanvaFigma
デザイン & UI
Design systemFrauncesInter TightTailwindMotion
技術
Next.jsReactTypeScriptnext-intlNetlify
問い合わせ & 分析
Netlify FormsWhatsAppInstagramSEOSitemap
結果
Paloma Albieriは単なる個人ブランドではありません。これは生きたメソッドです。戦略、コンテンツ、技術が問い合わせへの流れ.
このケースは、約束をサイト自体で証明しています。戦略、編集方針、ビジュアルシステム、技術スタック、コンバージョンを一緒に設計しました。
自分のプロジェクトも相談する