INDEX
目次
前の章に戻る☑️ サンプルデータはこちら
Figma 9章 サンプルデータ
Created with Figma
📷 バナー画像素材はこちら
【9-1】LPとは
ランディングページ（Landing page）の略。※初めに到着するページとも訳されます。
✅ 「問い合わせ」「申し込み」「商品を購入」など、アクセスしたユーザーに何かアクションを起こしてほしい場合などによく使われます。
必要な情報を集約した単体のページであるスタイルが多いです。
✅ 「問い合わせ」「申し込み」「商品を購入」など、アクセスしたユーザーに何かアクションを起こしてほしい場合などによく使われます。
必要な情報を集約した単体のページであるスタイルが多いです。
【9-2】LPとホームページの違い
☑️ 目的
- ホームページ：会社・お店・商品等を、詳しく知ってもらうため。
- LP：会社・お店・商品などを知らない方々にも知ってもらい、商品購入やサービス参加といったアクションを起こさせるため。
☑️ ターゲット
- ホームページ：常連顧客や取引先、ファンなど。
- LP：これから顧客になってくれそうな方々や、商品を購入してくれる見込みがある方々。
☑️ デザイン
- ホームページ：扱いやすい洗練されたUIが一般的。多くの情報が整理されて詳しく表記されているのが特徴。
- LP：ターゲットが興味を引くインパクトあるデザインや、情報が集約されたコンテンツが特徴。「問い合わせ」など目的のためのボタンがある。
【9-3】ワイヤーフレーム作成からデザイン実装まで進めてみよう
第5章のホームページ作成の時と同じく、サンプルを基にワイヤーフレームから着手して模写してみましょう。単一ページなので、ホームページの時に比べ作りやすいと思います。
LPのワイヤーフレームも情報を集約させ、きれいに整える事が重要です。
※単一のページの場合、大方フロー設定（第6章：プロトタイプ）は必要ありません。
ワイヤーフレームが出来たら、デザインしてみましょう。
こちらもサンプルサイトを模写する形で構いません。
LPの目的は、商品を購入させたりサービスに参加してもらったり等のアクションを起こさせるのが目的ですから、その導線でいかにアクションを起こしてもらえるか（例えば、商品購入ボタンなどをいかにクリックしてもらうか）が重要なポイントです。
✅ 模写の重要性について
模写を通じて様々な制作物を作成することで、Figmaの操作方法が身につきます。
また、デザインの模写はデザインスキルや、デザインを見る目を養うことにも繋がりますので、サンプルサイトを参考に制作を進めていきましょう。
【9-4】デザインしたLPを、共有してみよう
■「共有」機能でデザインを見てもらおう
「共有ボタン」をクリックすると、ファイル共有パネルが表示されます。
以下のいずれかの方法で、自分が作成したFigmaデータを他の方にみてもらうことができます。
※共有された相手がFigmaをインストールしていない場合でも、ブラウザ版で閲覧できます。
※共有された相手がFigmaをインストールしていない場合でも、ブラウザ版で閲覧できます。
- 「リンクをコピー」を選択すると、作成しているFigmaのURLを取得できます。
このURLをメールやチャット等で見て貰いたい方に送ればOKです。 - メールフォームに招待したい方のメールを入力し「招待」ボタンをクリックして招待する事で、共有メールを送る事が出来ます。
※無料プランの場合、ファイルごとに招待できる編集者の数には制限があります。チームでの共同編集など、より高度な機能が必要な場合は有料プランへの移行を検討しましょう。