SmartOrdee 紹介LP

このLPは、飲食店向けQRコードオーダーシステム「SmartOrdee」を紹介するためのページです。 人手不足や業務効率化に課題を抱える経営者に向けて、サービスの機能や魅力を分かりやすく伝え、無料トライアルや資料請求へ繋げることを目的としています。

• Webデザイン
• コーディング
• LP

SmartOrdee LPへ

プロジェクト概要

• カテゴリー：LP
• 制作種別：自主制作
• 担当領域：Webデザイン、コーディング
• 使用ツール：Figma, HTML, CSS(Sass), JavaScript, git, Github
• 制作期間：3週間
• リンク：SmartOrdee LPはこちら

サイト制作の目的

本サイトは、飲食店向けQRコードオーダーアプリ「SmartOrdee」の機能や利点を効果的に紹介し、ターゲット層である飲食店経営者にサービスの魅力を伝えることを目的としています。 アプリケーションの開発後、さらに登録者を増やす施策として制作されたLPであり、新規登録をKGIとし、無料トライアルの申し込みや資料請求の問い合わせをKPIとしています。

ターゲット層の設定

本サイトのターゲットは、主に席数30～100席程度の小〜中規模の飲食店を運営する経営者や店舗マネージャーです。 彼らは、人手不足への対応や業務効率化を課題に感じており、特に注文率の向上、注文ミスの削減、ホールとキッチン間の連携強化などに強いニーズを抱えています。 こうした悩みを解決する手段として、SmartOrdeeの導入を検討してもらうことを目指しています。

調査分析

本LP制作にあたっては、同業他社のLPを参考に、ページ構成やトンマナ（トーン＆マナー）の分析を行いました。 また、自分自身をQRコードオーダーの導入を検討する飲食店経営者と仮定し、実際に各LPを閲覧した際に登録したいと思える導線になっているかを検証。 文言やイラストの使い方、訴求ポイントの内容とその見せ方についても細かく分析し、効果的な訴求方法の把握に努めました。

情報設計

本サイトは、SmartOrdeeのアプリ機能とその魅力を効果的に訴求することを最重要の目的として設計しています。

まずファーストビューでは、アプリのUIビジュアルとキャッチコピーを用い、サービスの概要を直感的に伝えることでユーザーの関心を引きます。 続いて「こんなお悩みはありませんか？」というセクションを設け、ターゲット層が抱えるペインやニーズを具体的に列挙し、課題共感を促します。 その後、SmartOrdeeの基本的な機能を紹介し、さらに導入によるメリットを効果的な訴求ポイントとして整理して提示します。

また、導入事例では、実際に導入した店舗における具体的な成果を定量的なデータを交えて紹介し、サービスの信頼性と導入効果を実感してもらう構成としています。 料金プランは3種類を用意していますが、最も推奨するのは中間価格帯のスタンダードプランであり、「一番人気」と強調することで機能面・価格面ともに最適な選択肢であることを印象づけています。 残りの2つのプランは選択肢として提示することで、ユーザーに自ら選択したという納得感を持たせる設計としています。

さらに、よくある質問のセクションでユーザーの疑問を解消し、最後にCTAとして無料トライアル申し込みと資料請求の導線を配置。 加えて、無料トライアルや資料請求のCVボタンは各セクション内にも適宜配置し、ヘッダーにも問い合わせボタンを固定表示することで、ユーザーが興味を持った瞬間に即アクションへ繋げられるよう導線設計を行っています。

UI設計の意図

配色

本LPでは、アプリケーションで使用しているプライマリーカラーを踏襲し、ブランドの一貫性を重視しています。 プライマリーカラーには、飲食店での利用を想定し、食欲を損なわず、かつモダンで洗練された印象を与えることを目的として、ワインレッド（#A52A2A）を採用しています。 さらに、このプライマリーカラーの諧調（明度・彩度のバリエーション）から、セカンダリーカラーやバックグラウンドカラーを選定することで、 全体の統一感を保ちつつ、情報の階層や視覚的コントラストを表現しています。 また、全体を通してWCAG基準に準拠したコントラスト比を保ち、視認性やアクセシビリティにも配慮した設計としています。

タイポグラフィー

本サイトでは、書体としてアプリと同じ Noto Sans JP を採用しています。 これは、SmartOrdeeが異なるデバイスで利用されることや、幅広い年代のユーザーが利用することを想定し、視認性・可読性が高く、クセのない標準的なフォントであることを選定理由としています。 フォントサイズは16pxを基準とし、基本的には4の倍数で設計することで統一感を持たせています。 ラインハイトは本文を2.0、見出しを1.5に設定し、文字間隔は0.02emとすることで、余白のバランスや可読性を確保しつつ、視認性の向上を図っています。 これらの設定は、UI全体の統一感を保つとともに、読みやすさを高めるための根拠に基づいています。

レイアウト

レイアウトはシンプルで視認性の高い1カラム構成を採用し、各セクションを縦に積み重ねることで、ユーザーが迷わず情報を順に読み進められるようにしました。 また、全体に十分な余白を設けることで情報を整理し、視覚的な負担を軽減しています。 加えて、テキスト偏重にならないように、適度にイラストや写真を用いることで、読んでいて疲れない構成にしています。

実装・インタラクション等に関して

実装にあたっては、PCのみならずスマートフォンやタブレットでの閲覧も想定し、各デバイスでの表示崩れが起こらないように設計・調整を行っています。 単にレイアウトが収まるだけでなく、画面幅に応じて余白やコンテンツの幅、フォントサイズといった要素を適切に変化させることで、どの環境で見ても快適に閲覧できるユーザー体験を担保しています。

アニメーションに関しては、ユーザーが読み進めるのを妨げないよう、必要最低限の表現にとどめ、主にフェードインを中心とした自然な動きのみを採用しました。 これによって、ページの表示速度や情報の可視性を損なうことなく、落ち着いた雰囲気の中でスムーズな体験を実現しています。

また、リンクやボタンなどのインタラクティブな要素については、ホバー時に微細なアニメーションを加えることで、ユーザーがその要素がクリック可能であることを直感的に理解できるよう工夫しています。 視覚的なフィードバックを通じて操作性を高めるとともに、UIのアクセシビリティ向上にも寄与しています。

アウトプット

ロゴ

Webデザイン

SmartOrdee紹介LPはこちら

飲食店向けSass型オーダー管理システム「SmartOrdee」の紹介ページ