訓練56日目　学科 ECサイトデザイン基礎④

本日のアジェンダ

1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて

2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて

3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて

4限目
学科 ECサイトデザイン基礎④
制作に向けての準備

5限目
学科 ECサイトデザイン基礎④
制作に向けての準備

本日のテーマ

Webサイト制作にあたり、まずは『ワイヤーフレーム』の制作のコツを学びましょう。

本日のレポート

Webページの作成

まずはLP（ランディングページ）を作成してみましょう。
1ページのWebページでストーリーを考えつつHTMLとCSSの仕組みと文法を理解しつつ目的をしっかりと意識しつつ様々な要件定義を整理しながらデザインしていきましょう。

LP（ランディングページ）

LPの目的は、ユーザーに購入や申し込みといった「コンバージョンをしてもらうこと」です。
Web広告と連動させて運用するものですので、バナーはこのLPなどの「誘導先のページ」をしっかりと意識をして作成してみましょう。

「デザイン」を作ってから、どう「コーディング」するの？とならないように、HTMLの文法、CSSで表現できることを意識して計画的にデザインを考えていきましょう。

ストーリーをデザインする

ユーザーの行動や特徴、年齢や性別、地域、様々な条件に合わせてストーリーを考えていく必要があります。

まずは、最も基本的なページ構成のLP（ランディングページ）の作成です。
ポイントは、上から順番に「掴んでいく」 「伝えていく」 「魅せていく」です。

  1. 「掴み」掴んでいく
    • まずはお客さまを掴んでいく「掴み」です。
      キラースペースとも呼ばれる部分です。しっかりとお客さまを掴んでいきましょう。

  2. 「説明」伝えていく
    • 前の①で掴んだお客さまに、詳しく説明をしていきましょう。
      ビジネスの基本の５W１H、 When（いつ）Where（どこで）Who（だれが）What（何を）Why（なぜ）How（どのように）を意識するとよいでしょう。

  3. 「魅せる」魅せていく
    • ②の５W1Hの説明が出来たら、売り込みをしてアピールしましょう。
      個人的に最低3つぐらいのアピールをして、欲しいと思ってもらいましょう。

ワイヤーフレーム・デザインカンプとは？

Webサイトの目的に沿って、「どの情報を」「どこに」「どのように配置するか」をチーム内やクライアントと共有するための重要なものです。
デザインを決める前に作るもので、サイトの骨組みとなるものですのでしっかり設計しましょう。

まずは絵を描くときの下書きのように、手書きスケッチ(ラフ)してみましょう。
いきなりワイヤーフレームを作ったりというケースもありますが、事前にラフを描いておくことでより一層スムーズに制作が進められるようになります。

ワイヤーフレーム・デザインカンプ作成　～準備～
  1. 情報を整理する
    • デザイン制作の前に、「最終目的」（問い合わせ・購入・来店など）を明確にし、それに必要な情報（電話番号・メール・SNS・会場・地図など）を整理します。
    • ターゲット（スマホ利用者か／会員化重視か）、目的（現在告知・未来告知・実績紹介）も整理し、説明不足によるトラブル対策も考慮します。
    • 写真の用意や撮影も必要で、実務ではデザイナーが撮影に立ち会うこともあります。
    • こうした情報を整理・収集し、ワイヤーフレームに配置して構成（ストーリー）を組み立てましょう。

  2. 目的を逆算する
    • 「情報の整理」がある程度出来てきたら、「目的」を逆算してストーリーを意識しましょう。
    • 例えば、飲食店で客単価5,000円のお店が、週末にWebからの集客で1日100名の来店を目指すキャンペーンを行うとします。

      • 目的
        100名の予約がWeb予約システムから受付できるように、事前に準備を整える。
      • 魅せる
        Web予約特典として、「1品サービス」や「5％OFF」、さらに「18時前に来店なら10％OFF」といった魅力的な特典を用意する。
      • 説明
        「○○駅徒歩5分」「やきとりなど鶏料理と日本酒が自慢の居酒屋」といった具体的な情報で、店舗の特徴や立地をわかりやすく伝える。
      • 掴み（キャッチ）
        「焼き鳥、日本酒が自慢」「Web予約でお得なキャンペーン実施中」といった印象的で簡潔なフレーズでお客様の興味を惹きつける。

  3. 目的の誘導について
    • 「目的」への誘導は「いかがですか？」のタイミング
    • ただ「いかがですか？」と提案するだけでは効果は薄く、本当に必要としている「優良顧客」にどう届けるかを考えることが重要です。
    • まずは広く入口で人を集め、
      →「掴み」で興味を引き、
      →「説明」で興味のない人には離れてもらい、
      →「魅せる」でさらにふるいにかけて、
      →最終的に「目的」に近い顧客を確実に獲得する流れを作ります。
    • 商業デザインでは「目的＝成果」が求められるため、この流れを意識して設計・誘導することが大切です。
ワイヤーフレーム・デザインカンプ作成　～レイアウトのコツ～
  • STEP①「掴み」：象徴的な文言・写真を使う。
    • キャッチコピー：魅力的で効果的に伝える表現を。SEO対策も考慮します。
    • 写真・イラスト：目的に合った印象を与えるビジュアルを選びましょう。
    • デザインの親和性：広告バナーなどの導線との一貫性も意識することが大切です。

  • STEP②「説明」：5W1Hを活用して、内容をわかりやすく構成する。
    • When／Where（いつ・どこで）：最初に時間と場所を伝えることで、全体像がつかみやすくなります。
    • Who／What（誰が・何を）：主体と行動・内容を伝えて、結果や結論を明確にします。
    • Why／How（なぜ・どうやって）：理由と手段を説明し、内容の信頼性を高めます。

  • STEP③「魅せる」：相手に強く印象づけるアピールポイントを明確に伝える。
    • 自信のあるもの（自己発信）：自分が主語となる「売り」。自己満足にならないよう注意しつつ、根拠をもって表現します。
    • 実績があるもの（他者評価）：受賞歴・資格・達成実績・高評価レビューなど、信頼性のある裏付けを伝えます。
    • メリットを感じるもの（お得感）：「安い」「早い」「美味しい」など、ユーザーが得だと感じる内容を強調します。

  • STEP④「目的」：目的に応じた導線と情報をしっかり準備する。
    • 問い合わせ（TEL・メール）：連絡先の掲載やフォーム設置、体制や予算に応じた準備が必要です。
    • カートシステムでの購入：埋め込み型か外部リンク型かを選定し、技術や運用面を考慮して準備します。
    • SNSやアプリへの誘導：特典付きフォローやアプリインストールに必要な説明・導線も整えておきます。
    • イベント・実店舗への案内：アクセス情報や地図の用意は必須。迷わせない設計を心がけましょう。

感想

タイトルとURLをコピーしました