こんにちは！applemint 代表の佐藤です。今回は台湾発、ユーザーの心を掴む、魅力的なデザインのウェブサイトをご紹介します。
「心を掴むデザインのウェブサイト」と言っても、定義はさまざまです。美しいデザイン、わかりやすい導線、表示が速いなどなど。見る人によっても変わります。どんなに綺麗でも、男性向け商品のサイトを女性らしいデザインで作ったら、響かないですよね。
では、何が大事かというと、「ブランディング」です。
価格帯から成る想定ターゲットにアプローチするブランドサイトとして、秀逸な台湾のウェブサイトを、世界のウェブデザインアワードの権威、Awwwardsに入賞 /ノミネートしたものから2つピックアップします。
Contents
1. 可不可熟成紅茶 KEBUKE Tea Co.
KEBUKEは台北市だけでも39店舗（2022年1月現在、公式ウェブサイトより）ある有名な紅茶のドリンクスタンドです。台北ではドリンクスタンドが散見されますが、その中でも一際おしゃれなブランドイメージを確立しているのがKEBUKEではないでしょうか。
それもそのはず、KEBUKEには「デザインの視点から紅茶を広める」というコンセプトがあるんです。一杯30NTD〜70NTDのお手頃価格なドリンクなので、想定ターゲット年齢は幅広いですが、商材や味を考慮すると女性の割合が多そうですね。
グリーンがかったネイビーの背景色に、ゴールドを思わせるベージュを重ねるカラーリング、フォントは明朝体（セリフ体）が使われています。紅茶の発祥である17世紀頃の英国のトラディショナルな雰囲気が出ています。
デザインとユーザビリティの両立
このサイトはBtoCがメインだと想定されますから、スマホで見てみましょう。
このサイトに訪問するユーザーの目的で一番多いのは店舗検索と推察されますが、ファーストビュー内に地図が表示されているため、ハンバーガーメニュー（右上の≡）をタップせずとも、スクロールで店舗検索導線に乗ることができます。
こちらもニーズが多いであろうドリンクメニューの閲覧は、右利きの女性が最もタップしやすい右下に配置されています。デフォルトの視線の動き（左上→右上→左下→右下とZ型に動く）だけでサイトの全容が把握できるのが良いところです。
心をくすぐるアニメーション
KEBUKEのサイトはアニメーションが可愛いです。やっぱりBtoCサイトでは重くならない程度にアニメーションがあるとUXが向上しますよね。私がこのウェブサイトで最も好きなのが、ローディングアニメーションです。
中央ロゴ上のアニメーションに注目してください。読み込みが完了するとローディングの進捗が「熟成」に切り替わってからページが表示されます。「熟成紅茶」の「熟成」とかけられていて言葉選びもおしゃれだなと思いました。
2. THORA
こちらはTHORA社のELFという小型空気清浄機のコーポレートサイト兼ECサイトですね。28,000NTDなので、結構高級品です。想定ターゲットは上のイメージどおり、高収入で身だしなみや持ち物に気を遣う40代くらいの男性でしょう。
このサイトの何がすごいかというと、“魅せる”コンテンツおよびブランディングです。
”魅せる”ブランディング
まずサイトを訪問すると、デスクトップ、モバイルともに全画面でビデオが再生されます。上のYouTubeが短くまとめられたものですが、車内とオフィスで空気清浄機を使っていて、空気清浄機のデザイン、サイズ感、想定利用シーンがその時点でわかるんですね。
小型の空気清浄機あるいは新しい電子製品を探している潜在顧客（自社の商品は知らないものの、存在を知れば購入の可能性がある顧客）の方が見たら、ファーストインプレッションでガッチリと心を掴まれるのではないでしょうか。
また、ウェブサイトに掲載されている写真のサイズが大きく、高画質。読み込みに少し時間がかかるのですが、表示されると「めちゃめちゃ綺麗…！！」と思わず声が出ます。綺麗です。語彙が消失するくらいにはハイクオリティです。
キャッチコピーで”魅せる”
ビジュアルに力を入れるブランディングのためか、テキストが少ないのも特徴ですね。上の図はトップページの一部ですが、このように「魅力的な精品で、あなたの健康を守る。」といったようなキャッチコピーが散りばめられています。
個人的に好きだったのが、英語版の最新ニュース（プレスリリース）のタイトルです。
「2021年にあなたが持つべき唯一の贅沢品は、綺麗な空気です」。痺れますね〜。こうしたブランディングで最も著名なのは、おなじみApple社ではないでしょうか。繁體中文版のCTAの文言がappleと同じ「進一歩了解」でしたので、より一層想起されました。
ご紹介した2つのウェブサイトは、どちらもAwwwardsという同じウェブデザインコンペティションで入賞した素晴らしいデザインのウェブサイトですが、毛色が全く違います。これらのデザインが響く方と、響かない方がいらっしゃると思います。
「デザインが違う」と言ってしまえばそれまでですが、想定ターゲット（ペルソナ）やユーザーがウェブサイトを利用するシーンの違い、ひいてはそれらをきちんと定義していることから、このような大きなデザインの差が生まれるんです。
ユーザーにとって魅力的なデザインを作るには、その前段階の情報が非常に大切です。applemintではこうした情報から、「ユーザーの心を掴むウェブサイト作り」を心がけております。お問い合わせは下の欄の「お問い合わせ」ボタンからどうぞ！
applemintへのご相談やご連絡はこちらから！
