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

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

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

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

01 / 概要

目的・役割・挑戦

目的

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

役割

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

挑戦

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

02 / プロセス

デザインプロセス

調査・要件整理

2020年初頭

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

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

UIデザイン・Handoff

2020年

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

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

03 / フロー

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

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

例：初回訪問者の導線

正常系（Positive Flow）

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

異常系（Negative Flow）

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

04 / 学び

得られた知見

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

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

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

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

05 / 成果

成果・インパクト

レスポンシブ対応

100%

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

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

納期

On-time

納期通り納品

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

06 / ギャラリー

ビジュアルギャラリー

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

ツール

FigmaAdobe XD

← すべての作品を見る

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

Dribbble ↗