現在、ちょっとした思い付きとスキルアップを兼ねて、自己紹介ページを自分でデザイン＆コーディングしたランディングページにしてみよう！と思い、色々と段取りを組んでいるところです。
ランディングページもwebサイト制作と同様まずは伝えたいことの情報整理が必要になってきます。
その整理された情報を元に、実際のデザインにアウトプットしていく流れになります。
そこで今回は、情報設計とに関する内容をサイトや本など色々な方法でリサーチして一般的な型をインプットし、しっかり定着させるためにも、学んだことは１つ１つ備忘録としてこのように記事に残していこうと思います。
尚、今回はあくまでも「自己紹介ランディングページ」の制作のための情報収集であるため、がっつり商品を紹介&コンバージョンさせるためのメソッドというよりも「伝えたい情報をわかりやすく効果的に伝えるためにはどうしたらいいかのコツ」の整理となります！
目次
情報設計の基本的な流れとポイント
LP(ランディングページ)立ち上げの目的・ゴールの決定
まず、最初の段階としてLP(ランディングページ)を立ち上げる目的・ゴールの設定が必要です。
この目的・ゴールを達成するためのデザインを作るためです。
例えば今回の、私がやろうとしている自己紹介ページの場合の目的・ゴールはこんな感じ。
- 私の人となりを知ってもらう
- ブログに戻って色々な記事をみてもらう
- SNSなどもフォローしてもらう
今回は、これが達成できるような設計にしていきます。
必要情報(入れたいコンテンツ)の洗い出し
ここで、LP内に入れ込みたい情報を全て洗い出します。
今回の自己紹介LPに入れ込みたい情報リストはこんな感じ。
- メイン写真(プロフ写真)
- 名前(活動名)
- 簡単な経歴(年表形式)
- 趣味や嗜好
- 簡単な性格
- お仕事・活動内容リスト
- SNSリンク
- ブログの簡単な紹介
- ブログに戻るリンク
シナリオを考える
LPのシナリオを考える上での大まかなポイントを抑える上で、下記の記事を参考にさせていただきました。
上記の記事の内容を要点に絞って整理した内容を書かせていただきます。
まず、LPのシナリオを考える上での大まかな設計としてはこのようになります。
- メインビジュアル
- アクション導線
- 特徴・ベネフィット
- アクション導線
- 実績・サービス説明
- アクション導線
- お客様の声・信頼・FAQ
- クロージング・アクション導線
メインビジュアル
ユーザがランディングページに訪れて最初に目にするファーストビューとなる部分です。このページを通して伝えたいことや商品・サービスの魅力を、要点を絞って最大限伝えます。
アクション導線
アクション動線とは、商品やサービス紹介の場合「お申し込みボタン」や「購入ボタン」がそれに当たります。これは、最初に述べたLPを立ち上げる上での目的やゴールを果たすためのものが当てはまると思います。
今回の自己紹介ページの場合は、
私のことを知ってもらい、最終ブログを見てもらう＆SNSをフォローしてもらう。
なので、「ブログリンクボタン」や「SNSのリンクボタン」が設置されることになるでしょう。
また、このアクション導線は商品やサービス紹介の場合は段落ごとに設置されることが多いのですが(ユーザーがLP閲覧の途中でいつでも申し込みや購入などのアクションが取りやすいように)、今回は自己紹介ページなのであまり頻繁に設置してしまうと少々鬱陶しいので、
メインビジュアルの下に１回と、一番最後に１回。という感じが良さそうかなと思います( ´∀｀)
特徴・ベネフィット
商品やサービスの特徴や、得られる恩恵を紹介する部分となります。
今回の自己紹介パージの場合、
- 簡単な経歴(年表形式)
- 趣味や嗜好
- 簡単な性格
辺りがそれなに当たるかと思います。
実績・サービス説明
ユーザが特徴やベネフィットを見て興味を持ってきたところで商品やサービスの内容と実績を述べていきます。
今回の自己紹介ページの場合は、私自身の簡単な性質・特徴がわかったところで、実際に私がどんなことができるのか？の実績とサービス内容を説明することになるかと思います。
レイアウトを考える
ここで、ここまでまとめてきた情報やシナリオをレイアウトしていきます。
大まかな並び順は、シナリオに沿う形になるかと思います。
ただ、そのシナリオの段落の中身のレイアウトもまた大事になってきますので、そこを考える上でのポイントを整理したいと思います。
メインビジュアルのレイアウト
まず、ファーストビューではいかに端的に大々的にその商品やサービスの魅力を伝えられるか！？が鍵となるので、情報の詰め込みすぎは NG です。
例えば、キャッチコピーを入れ込む・実績アピールなどを通して、わかり易く伝えることを意識するのが大事です。
また、商品・サービス自体やそれをイメージさせる画像を使用するのが王道となります。アクション導線となるボタンも目立つようにしましょう。
今回の自己紹介ページの場合、自分の写真、そしてキャッチコピーとしては自分の肩書きやモットーなどが入るのかな？と思います。
特徴・ベネフィットのレイアウト
ここでは、見出しを簡潔にして、それを読んだだけでも大まかな内容がわかるようにしておくのが重要です。
また、説明文もできるだけ短くしてイラストや図、写真などを利用して直感的に把握できるようにしておくのがポイントです。
今回の自己紹介ページの場合、自分の経歴や性質をイラストや写真を通じてビジュアルで伝えよう思います。
実績・サービス説明のレイアウト
具体的な数字や結果を提示して、魅力をアピールします。
商品やサービスの場合は、販売数や賞の受賞内容、証拠となる写真などを入れると良いでしょう。
今回の自己紹介ページに当てはめると、自分が制作してきたイラストやデザインの画像や様々な活動時の写真などになると思います。
お客様の声・信頼・FAQのレイアウト
実際にサービスを利用したお客様の声やQ&Aで、懸念を払拭させましょう。例えば、口コミやレビューを記載するといいでしょう。
今回の自己紹介ページの場合は・・・ちょっと変化球ではありますが経歴やお仕事・活動実績では答えられなかったくだらない質問コーナーでも設けてみましょうか・・ww
ここについては何を入れるか後々考えてみたいと思います！w
クロージングのレイアウト
ここ改めてアクション導線を入れ込んで、最終目的を達成させます。
ここでももちろん動線となるクリックボタンはわかりやすく配置・デザインしていくことが重要です！
今回の自己紹介ページの場合だと、大まかな私自身のことについて理解していただいていた上で、改めてブログ記事を見てもらう&SNSのフォローというところなので、ブログリンクとSNSリンクをわかりやすく適切に配置することになります。
まとめ
以上、今回は「自己紹介LP(ランディングページ)を自分で１から作ってみよう！」という自分の勝手な思いつきから派生した「LP(ランディングページ)制作の作り方の要点まとめ〜情報設計編〜」でした。
制作時のための自分の備忘録として「自己紹介ページ」をに当てはめながらの内容にはなっていますが、基本ベースは商品やサービスに置き換わった場合でも変わりはないかと思いますので、参考にしてみてください( ✌︎’ω’)✌︎
「韓国のアートカルチャー」を、デザイン・旅・教養・ファッションなど あらゆる切り口から解剖していくマガジン。「韓国のいろんなアート」をLiNA独自の目線でお届けします。
LiNAの「韓国でのノマド生活」を、仕事・生活・人生などといった、あらゆる切り口からお届けするマガジン。韓国ノマド生活のTIPSや日々の学びを独自の目線で記録します。
