ランディングページ · Webデザイン

BNI Syariah — ランディングページデザイン

ランディングページ · Webデザイン

インドネシア大手イスラム銀行BNI Syariahのランディングページをデザイン。銀行のサービスと価値観を明確に伝え、信頼感と清潔感のあるWebプレゼンスを構築することを目的としました。

目的

→イスラム銀行の信頼感あるWebプレゼンスの構築
→サービス・商品を見込み客にわかりやすく伝える
→明確なCTAと直感的なナビゲーションでコンバージョンを促進

役割

→ランディングページのUIデザイン
→視覚的階層とレイアウト設計
→コンポーネントデザインとスタイルガイド
→フロントエンドへのDesign Handoff

挑戦

⚡規制情報とクリーンなビジュアルデザインのバランス
⚡金融機関向けのビジュアル言語で信頼性を構築
⚡デジタルに慣れたユーザーから初めての訪問者まで、幅広い層への対応

デザインプロセス

調査・要件整理

2020年初頭

インドネシアの銀行ランディングページの競合分析を実施し、ステークホルダーからコンテンツ要件を収集しました。

·競合分析（BCA・Mandiri Syariah・BSI）
·コンテンツ要件の収集
·ターゲットオーディエンスの定義

UIデザイン・Handoff

2020年

ヒーローセクション・商品カード・プロモバナー・FAQ・レスポンシブモバイルレイアウトを含むランディングページ全体をデザイン。Figmaで仕様書付きで納品しました。

·明確な価値提案を持つヒーローセクション
·商品・プロモカードデザイン
·FAQセクションデザイン
·モバイルレスポンシブレイアウト
·アノテーション付きFigma納品

ユーザーフロー — 初回訪問から口座開設まで

初回訪問者を認知から口座開設意向まで誘導するランディングページを設計しました。

例：初回訪問者の導線

✅ Positive Flow （正常系）

1ヒーローセクションへ着地 → 明確な価値提案
2商品概要へスクロール → サービスを確認
3プロモセクションを読む → オファーで関心を喚起
4CTAをクリック → 口座開設ページへ遷移

❌ Negative Flow （異常系）

✕商品が分からない → FAQセクションで解決
✕口座開設に踏み切れない → 実績・プロモで後押し
✕モバイルユーザー → レスポンシブレイアウトで情報損失なし

学び・得られた知見

金融プロダクトで最重要の制約は「信頼感」

色・タイポグラフィ・レイアウトのすべての選択が、美しさだけでなく信頼性の強化に貢献する必要がありました。

情報の階層がコンバージョンを左右する

ヒーローからCTAへの明確な視覚的階層が認知負荷を下げ、意図した行動へとユーザーを誘導しました。

成果・インパクト

📱

100%

レスポンシブ対応

モバイルファーストデザイン

すべてのレイアウトをモバイルファーストで設計し、デバイスを問わず一貫した体験を提供。

✅

On-time

納期

納期通り納品

スコープとスケジュール内で完全なデザインを納品し、クリーンな納品ドキュメントを提供。

デザインギャラリー

🖥️

Web Dashboard

7 screens

Homepage — HeroHome

Homepage — Section 2Home

Homepage — Section 3Home

Promo SectionPromo

Promo DetailPromo

FAQ SectionFAQ

All ProductsHome

📱

Mobile App

9 screens

Mobile — Home

Mobile — Products

Mobile — Promo

Mobile — Detail

Mobile — Navigation

Mobile — Info

Mobile — Explore

Mobile — Savings

Mobile — Financing

さらに多くの作品はこちら

Dribbble ↗