ユーザーインターフェイス基礎③3/9Webページ制作ポイント

デザインの考え方の教科書⑥参照。

実際にWebサイトを作ろう。まずは、LPを作ろう

どういうウェブサイトなら制作できそうか、考える

Webサイト制作＝箱を積み上げていく作業。

LP＝検索結果や広告などを経由して訪問者が最初にアクセスするページ。誘導先のページ。バナークリックして飛んだ先のページ。

①掴み…バナーをクリックしたらどーーん。第一印象。
②説明…万人受けはダメ。需要がマッチする人＝優良顧客だけ呼び込むための説明。
③魅せる…②の人に自己PR・売りを3つ以上、売れる工夫、どう売り込むか。

バナーから、SNSから、のつながりを意識する！！

④目的…最終的なゴール。最終的にどうしたいのか。優良顧客を獲得するために。

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

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

①「掴み」掴んでいく
まずはお客さまを掴んでいく「掴み」です。
キラースペースとも呼ばれる部分です。しっかりとお客さまを掴んでいきましょう。
②「説明」伝えていく
前の①で掴んだお客さまに、詳しく説明をしていきましょう。
ビジネスの基本の５W１H、 When（いつ）Where（どこで）Who（だれが）
What（何を）Why（なぜ）How（どのように）を意識するとよいでしょう。該当しない方は離れてもらいます。
③「魅せる」魅せていく
②の５W1Hの説明が出来たら、売り込みをしてアピールしましょう。
個人的に最低3つぐらいのアピールをして、欲しいと思ってもらいましょう。アピールポイントに対して
合わないユーザー（お客さま）には更に離れてもらいます。

絞り込みが大事！！▽！！

2.ワイヤーフレーム・デザインカンプをつくる

準備① 情報を整理する

前項で「掴み」「説明」「魅せる」を軽く説明しましたがその後に、
TELやメール等のお問合せや、カートシステムで購入なのか、イベントなら会場、直接対面での販売が必要なら実店舗などの最終的な「目的」が必要になります。
その「目的」に必要な電話番号、メールアドレス、WebサイトならURL、SNSならアカウント、カートシステムなら埋め込みなのか外部リンクなのか、イベントなら会場、直接対面での販売であれば、アクセスマップや住所の案内が必要になるでしょう。
また、スマートフォンを利用するお客さまがターゲットになるのか？
とにかく会員にする事が重要なのか？
現在の告知なのか？ 未来の告知なのか？ 過去の議事録（実績紹介）なのか？
また、説明不足によるクレームなどが起こらないよう「対策」も考えておきましょう。
それと、「写真」を収集しどう使っていくかを考えましょう。
※実務では、撮影に立ち会う事もデザイナーの仕事になります。実際に自分で撮影する人もいます。
とにかく様々な状況を想定して、情報を整理し必要な項目をまとめておきましょう。
そしてワイヤーフレームにその必要な情報を配置してストーリーを整えましょう。

準備② 目的を逆算する

情報をしっかりまとめてからレイアウトを考えると良いでしょう。後で変更すると全部変更になるので、最初にしっかりまとめる。このレイアウトが、HTMLとCSSというルールに変わるだけ。

例えば… 飲食店で、客単価5,000円のお店で1日（週末）Webからのお客さま100名来店を目指すキャンペーンを行う。

まず手書きで書く
↓
Terapadでテキストをすべて書き出す
↓
ワイヤーフレームを作る。テキストあてこんでいく。

レイアウトのコツ STEP①

掴み
「掴み」では、企画全体の意味する事をしっかりと伝えましょう！
単純に、全ての意味を込める必要があります。
「目的」に対して現在・過去・未来を明確にしましょう。
例えば、「現在」今どんな事を行っているのか？、「過去」今まではどうだったのか？「未来」これからどうなるのか？
を簡潔にまとめ一目で解るように表現をしましょう。
キラースペースである事
Webページで最も見られる場所であるここは「キラースペース」とも呼ばれます。
当然、そのページの象徴となる文言・写真を使っていきましょう。
キャッチコピーを考える
キラースペースに掲載する文言である為、最も効果的で魅力的な「キャッチコピー」を考えてみましょう。
またWebサイトですので、SEOとして検索キーワードになる事も想定しましょう。
写真・イラスト等で効果的に
キャッチコピーと同じく、キラースペースの写真になる訳ですので、しっかりと目的への印象を与えられるような
写真やイラスト等を利用しましょう。
キラースペースのイメージはバナー広告からの誘導になるので、デザインは親和性（繋がり）もお忘れなく。

レイアウトのコツ STEP②

説明

① When … いつ（時間）/ Where … どこで（場所）
最初にWhen（いつ）Where（どこで）を伝えることで、時間と場所が明確になり、その先の内容が頭に入りやすくなります。
② Who … 誰が（主体）/ What … 何を（物・行動）
次にWho（誰が）とWhat（何を）を伝えることにより、結果が明確になります。
次に説明する過程の前に結論を持ってくることで、伝えたいことが明確になります。
③ Why … なぜ（理由）How … どのように（手段）
最後にWhy（なぜ）、How（どのように）がきます。どのようにその結果に至ったのか過程を説明していきます。
「相手にものを伝える。」を改めて考えてみましょう。
解っている相手なら言葉足らずでも伝わりますが、商業デザインとして文字と絵や写真のデザインで、知らない人に「説明」をしなければいけません。
まずは、ビジネスの基本である５W１Hについて考え、整理してみましょう。
※例えば、8月から（When）都内各所（Where）で、タレント○○さん（Who）の主演映画（What）が公開します。
彼の半世を描いた映画ですので、彼のファン（Why）の皆さんは是非映画館で見てください。（How）

５W1Hをしっかりとまとめることで、信頼性や信用、信ぴょう性や安心感につながります。
逆に、信頼や安心、信用が不足していれば、後のトラブルに繋がります。しっかりとまとめておきましょう。

レイアウトのコツ STEP③

魅せる
① 自信のあるもの
自己発信の、自分が主語として考えた「売り」です。自己満足になってしまわないよう注意は必要ですが、自信を持つことは大切です
ので、様々な角度から分析して魅せていきましょう。
② 実績があるもの
周りの評価や過去の実績です。主語を相手にしますので意見を貰う事や、評価される「受賞歴」「資格が必要」「達成したもの」など
の実績を魅せていきましょう。
③ メリットと感じれるもの
当然として、お得と感じれるものです。単純に「安い」「早い」「上手い」などを魅せていきましょう。
PRポイントです。 その商品・商材の「売り」はなんでしょうか？
個人的に3つぐらい欲しいです。
どんな方におススメしたいのか？ 自分自身はどう感じるのか？ 単に良いものなのか？
当然、商品・商材理解が必要ですし、様々な分析をして考えてみましょう。
例えば、ぐるなびでランキング上位になり、評価も高い、レビューも多いのであればそれはアピールポイントです。
更に、ユーザー（お客さま）に対して、お得な特典が付きます。なら興味は高くなり、注目されるでしょう。
出来る事の棚卸と整理整頓が重要になりますし、ここで次の「目的」に繋がります。
しっかり考えて、どう見せたらより良く「相手に刺さる」かをしっかりと魅せていきましょう

レイアウトのコツ STEP④

目的
① TELやメール（お問合せ）
電話番号の掲載・メールフォームの作成・専用サイトへのリンク、実際の経営体制や予算・企画規模等を考えて準備しましょう。
② カートシステムの利用
外部リンクなのか、自社カートで埋め込みなのかで、技術的、経営的な問題が出てきます。
しっかりと確認・準備をしておきましょう。
③ SNSでのフォロワーや専用アプリのインストール
SNSへ誘導し、フォローして頂いたら1ドリンクなどの場合や専用アプリへ誘導しインストールの場合、その説明ページが必要になる場
合があります。こちらもしっかりと準備をしておきましょう。
ここで、TELやメールでの「問い合わせ」、「カートシステム」への誘導で購入なのか、SNSならフォロワーに、イベントや実店舗への誘導なのか？
目的に合わせて、しっかりと案内（アテンド）を行いましょう。
④ イベント会場や実店舗へのご案内
イベントのチケットを購入したり、お店に予約したのに、そこにたどり着けなければ、本末転倒でですね。
以前作成したアクセスマップです。しっかりとお客さまをご案内できるように作成しましょう。

ここのミスは、特にクレームに直結します。クレームは嫌ですね。。
正しく快適かつ親切にご案内が出来るようにしっかりと考えて作成していきましょう。

レイアウトのコツ 対策とその他

対策

後から変更は出来ない
文字やコンテンツのサイズ感を正確に
「対策」フォローアップを想定しておきましょう
後からあれこれ追加できないと思って、漏れや抜けが無いように考えていきましょう。
また実務での現実問題として、ここでしっかりと企画をまとめる事が出来る人材を企業は求めています。
後からの変更は「無駄」「無理」「無料」の仕事になる場合が多いですので、安易に考えずしっかりと考えていきましょう。
文字サイズやデバイス画面のサイズを意識しておきましょう。
よくある話で、Webページにしたら「文字がでかい？？」「写真が変？？」「なんか見にくい？？」なんて事があります。
実際のWebページを「スクリーンショット」等をしてサイズバランスを確認しておきましょう。
「対策」フォローアップを想定しておきましょう
「目的」で書きましたが、クレームになるのは絶対NGです。ただ万が一の場合もありますので、「注意書き」や「適切な説明」をしっかり
と行っておきましょう。また、作り手のお仕事をする以上、類似したサイト等の注意喚起の内容を見ておくとよいでしょう。
権利の記載について
著作物は日本の法律ではちゃんと守られるので、コピーライトの記述はあってもなくても、勝手に人のものをコピーしたら違法です。
書かなくても良いというより、法律から見れば書いても意味はないですが無断利用への抑止力となるので記載しておきましょう。

コピーライトを書く理由
・著作権者を明記し主張することで、無断利用への抑止力となる
・そういう慣習になってしまっているから
コピーライトの書き方
© 最初の発行の年 著作権者の氏名（例：© 2018 Samplesdl Inc.）