【LPのつくり方】初心者ほど盗め! すべてはコンセプトがアイデアの源。なるはやでボツ案をつくる。 Webデザインの制作手順全公開。

コミュニティプランのLPを作りました

コミュニティプランをBONOでちゃんとリリースしよう！ということでLPを作成しました。そんなに推しのプランではないのでLP作るのも悩んだのですが、"コミュニティとしてどういう場所なのか？"をちゃんと伝える場所が1つあっても良いかと思い作成しました。考えとしてはオンラインサロンとかって呼ばれるんですけど僕は全く違うと思っていて。サロンは1人のインフルエンサーが回す場所のイメージなんですが、コミュニティはもっと自由というか参加者が主役というか、そういう場所なんですよね。胡散臭いイメージもあるのでしっかり作っておこうということで今回はLPを作ってみました。

‍

作成の流れ

流れとしてはこんな感じです。が、そんなに凝ったものにしたくなかった（時間がない）のでコンセプトが伝わることを重視しました。

1. LP作成の目的決め
2. コンセプト決め
3. 伝えること/構成決め
4. アイキャッチの方向性作成
5. 必要な要素をLPにする
6. ディテールを詰める
7. 実装

‍

目的とコンセプト

今回のコンセプトは"BONOのコミュニティってどんな場所なんだっけ？”を伝える。でした。新しいプランが出ました！みんな入ってきて〜。がリリースとしては基本だと思うのですが、考えてみると”むしろ入って欲しくないかもw”と思えてきました。

BONOで特にコミュニティとして使っているメンバーを見ていると「なんだかんだいい人が多い＝ポジティブで頑張ってる人が多い」「ほのBONOしている」な意見をもらいます。昔のスターバックス的にいうと第3の場所みたいな、ヘルシーにデザインについてがんばろ〜と思える安全地帯なんだけど上昇できる土俵みたいな。そんなところが良いと言ってくれてるメンバーが多かった印象でした。

なので、これを伝えるというか、そういう人向けの場所なんですよ、と伝えるのがLPのコンセプトでした。逆にいうと情報収集"だけ”の要素で入ってもらうとあんまり良くないなあがありました。目的として情報収集してもらうのはいいんですが、それだけだと微妙だな〜というニュアンスです。

こういう考えをカフェに入って紙に色々書きながらまとめていくのをまず最初にしました。基本的にはメンバーの声と自分のやりたいことをミックスさせてアイデアを整えていく感じです。

‍

‍

サイトで伝えることを決める

方向性が見えてきたらサイトで伝えるべきこと＝載せる情報を決めていきます。やり方としてはまずは「セクション」で決めます。

こんな感じです↓

○ アイキャッチ

• コンセプト伝える。

○ BONOとはコミュニティプランとは

• BONO知らない人もいるから必要

○ プランでできること

• 機能面

○ 向いてる人

• ＝こういうことできるしやりたい人）

○ 注意事項

• なんか質問されそうなこと

最初から「これで完璧！絶対変更ないぞ！」な内容にはなりません。じゃあどうするか？1度考えてみてとりあえずまとまったらラフで形にします。実物を見てみる人の気持ちに立ってみると”あ〜こういう情報必要かも”、"これはいらんかも"が出てきやすいです。必ずやりましょう。

作る時はイメージに合いそうなサイトやデザイン候補をちゃんと調べて実験していきます。↓こんな感じです（似ているサービスとしてデザイナーズヒュッゲさんの言葉をイメージで拝借してます🙏）アイキャッチイメージはカウカモさんのLifeCatalogをラフでパクって当ててみてます（https://lifecatalog.cowcamo.jp/）

‍

構成の詰め

1度作ったラフからさらにラフをバージョンアップさせて試してみます。この時点で「ポエム」「BONOとは」「動画で詳しく」が追加されています。コンセプトをちゃんと伝えようと思った結果、構成を少し変えたアイデアです。

‍

‍

アイキャッチについて

今回は工数をかけたくなかったのでどうにか省エネで雰囲気を伝えることはできないか...ということで文字ベースでアイキャッチの雰囲気を作る。に都合で絞って模索しています。全然ピンとこなくて大変でした...w

↓ピンと来なかった図↓

‍

文字で印象とメッセージを伝えると決めたので

• コピーは大事
• 雰囲気作りたいので英語が良い
• 英語でも意味伝わる中身が必要だな
• フォントで全て決まる...（文字しかないので）だたのでポエム書きながらコピーを作りました。ただあんまり考えられなくて結局最初からあった「Hello」を使うことにしました。この辺はアイデア不足。シンプルだけど。

フォントに関してはGoogleFontが無料なのでその中でイメージと合うのを探しました。今回はちょっと全体的にトレンドを意識して、90'sな雰囲気を採用しました。

例えばこういうので使われてるフォントの雰囲気。最近の90's、Web3あたりによく使われている。丸っこいけどSlabSerifっぽい格式要素もちょびっと入ったようなスタイル・メルカリ10周年 (https://about.mercari.com/unleash/)

↓シンプルな左揃え。Helloに全集中させるアイデア

‍

色々作ったら1度寝て確かめるんですが、朝起きてみたら「なんじゃこのへっぽこは」となったのでボツ。イラスト素材が可愛く写りすぎて気が抜けすぎてるのもイメージと違いました。

最終的にはこれ。全部大文字にしているので同じフォントでも雰囲気が変わったり。レイアウトでもかなり雰囲気変わるので、パターンを作って検証した結果、落ち着かせました（時間）

あとは小手先のアニメーションでそれっぽい感じにしたろ〜と思ってこれにてFIX。

‍

参考はBONOコミュニティでmozzさんがシェアしていたtagbox。真ん中揃えとフォントの雰囲気を盗む。背景の色も近いものを使っていたので似た印象を借りれている気がします。トレンドですね。https://www.tagbox.io/?ref=producthunt

ちなみにイラストを使っていて、最初文字だけで組んでたんですが「抜け感が足りない...真面目で強そう...」だったので追加してます。素材は適当にFigmaCommunityのオープンソースからクセのなさそうなものから拝借しました。

‍

‍

ポエムについて

今回コンセプトを伝えたいというのがあってポエムを採用してます。長文の文章で”こういうの感じてない？”でメッセージで共感してもらうコンテンツです。

‍

‍

BONOコミュニティのメリットって機能ではなくて「参加するとデザインのやる気が上がる」ことだと思ってるんです。”体温”という言葉を思いついたのが我ながら天才では？と思っているのですが、ストレートに「やる気あげよう！」だと「固っ苦しいな...勢い強そ...疲れそ」になるので表現を考えています。

BONOの意味が”曙=朝やけ”でいろんな人の”夜明け”にする意味があります。年始で初日の出があったので太陽が出てきて暖かさを感じるイメージがなぜわからないけど浮かんできて採用になりました。BONOのグラデーションを使って、スクロールしてだんだん暖かくなる色にしています。

文章の中身に関しては自分がコミュニティ運営する中で感じていること、どういう場所にしたいかを考えてポエムを書きました。ちなみにポエムなんて普段書かないので見よう見まねです。中身は関係ないですが、さらっとしているのでZOZO 似合うラボの長文のテンションを参考にして書いています。https://niaulab.com/

こういう部分もちゃんとお手本を横に置いて参考にしてます。じゃないと作れない...感謝。

‍

残りの部分

BONOの他のページで使っているようなUIパーツから持ってきたりしてます。1度作ったもののパーツを再利用まで行けてませんが、「こういうときはこのレイアウト」って感じで使えるパーツにはなっているので一部改変でそのまま流用しました。

‍

▼ リスト▽

‍

▼ ブロックっぽいやつ

‍

コミュニティで熱量上げたい人はチェックしてね

今回は作成したLPのフロー過程の一部をシェアしてみました。制作する流れはわかったんじゃないかな〜と思います。気になった方はサイトに遊びに来てくださいね。体温を上げれる人、一緒にコミュニティでお会いしましょう。

https://www.bo-no.design/communityplan

‍

コミュニティプランのLPを作りました

コミュニティプランをBONOでちゃんとリリースしよう！ということでLPを作成しました。そんなに推しのプランではないのでLP作るのも悩んだのですが、"コミュニティとしてどういう場所なのか？"をちゃんと伝える場所が1つあっても良いかと思い作成しました。考えとしてはオンラインサロンとかって呼ばれるんですけど僕は全く違うと思っていて。サロンは1人のインフルエンサーが回す場所のイメージなんですが、コミュニティはもっと自由というか参加者が主役というか、そういう場所なんですよね。胡散臭いイメージもあるのでしっかり作っておこうということで今回はLPを作ってみました。

‍

作成の流れ

流れとしてはこんな感じです。が、そんなに凝ったものにしたくなかった（時間がない）のでコンセプトが伝わることを重視しました。

1. LP作成の目的決め
2. コンセプト決め
3. 伝えること/構成決め
4. アイキャッチの方向性作成
5. 必要な要素をLPにする
6. ディテールを詰める
7. 実装

‍

目的とコンセプト

今回のコンセプトは"BONOのコミュニティってどんな場所なんだっけ？”を伝える。でした。新しいプランが出ました！みんな入ってきて〜。がリリースとしては基本だと思うのですが、考えてみると”むしろ入って欲しくないかもw”と思えてきました。

BONOで特にコミュニティとして使っているメンバーを見ていると「なんだかんだいい人が多い＝ポジティブで頑張ってる人が多い」「ほのBONOしている」な意見をもらいます。昔のスターバックス的にいうと第3の場所みたいな、ヘルシーにデザインについてがんばろ〜と思える安全地帯なんだけど上昇できる土俵みたいな。そんなところが良いと言ってくれてるメンバーが多かった印象でした。

なので、これを伝えるというか、そういう人向けの場所なんですよ、と伝えるのがLPのコンセプトでした。逆にいうと情報収集"だけ”の要素で入ってもらうとあんまり良くないなあがありました。目的として情報収集してもらうのはいいんですが、それだけだと微妙だな〜というニュアンスです。

こういう考えをカフェに入って紙に色々書きながらまとめていくのをまず最初にしました。基本的にはメンバーの声と自分のやりたいことをミックスさせてアイデアを整えていく感じです。

‍

‍

サイトで伝えることを決める

方向性が見えてきたらサイトで伝えるべきこと＝載せる情報を決めていきます。やり方としてはまずは「セクション」で決めます。

こんな感じです↓

○ アイキャッチ

• コンセプト伝える。

○ BONOとはコミュニティプランとは

• BONO知らない人もいるから必要

○ プランでできること

• 機能面

○ 向いてる人

• ＝こういうことできるしやりたい人）

○ 注意事項

• なんか質問されそうなこと

最初から「これで完璧！絶対変更ないぞ！」な内容にはなりません。じゃあどうするか？1度考えてみてとりあえずまとまったらラフで形にします。実物を見てみる人の気持ちに立ってみると”あ〜こういう情報必要かも”、"これはいらんかも"が出てきやすいです。必ずやりましょう。

作る時はイメージに合いそうなサイトやデザイン候補をちゃんと調べて実験していきます。↓こんな感じです（似ているサービスとしてデザイナーズヒュッゲさんの言葉をイメージで拝借してます🙏）アイキャッチイメージはカウカモさんのLifeCatalogをラフでパクって当ててみてます（https://lifecatalog.cowcamo.jp/）

‍

構成の詰め

1度作ったラフからさらにラフをバージョンアップさせて試してみます。この時点で「ポエム」「BONOとは」「動画で詳しく」が追加されています。コンセプトをちゃんと伝えようと思った結果、構成を少し変えたアイデアです。

‍

‍

アイキャッチについて

今回は工数をかけたくなかったのでどうにか省エネで雰囲気を伝えることはできないか...ということで文字ベースでアイキャッチの雰囲気を作る。に都合で絞って模索しています。全然ピンとこなくて大変でした...w

↓ピンと来なかった図↓

‍

文字で印象とメッセージを伝えると決めたので

• コピーは大事
• 雰囲気作りたいので英語が良い
• 英語でも意味伝わる中身が必要だな
• フォントで全て決まる...（文字しかないので）だたのでポエム書きながらコピーを作りました。ただあんまり考えられなくて結局最初からあった「Hello」を使うことにしました。この辺はアイデア不足。シンプルだけど。

フォントに関してはGoogleFontが無料なのでその中でイメージと合うのを探しました。今回はちょっと全体的にトレンドを意識して、90'sな雰囲気を採用しました。

例えばこういうので使われてるフォントの雰囲気。最近の90's、Web3あたりによく使われている。丸っこいけどSlabSerifっぽい格式要素もちょびっと入ったようなスタイル・メルカリ10周年 (https://about.mercari.com/unleash/)

↓シンプルな左揃え。Helloに全集中させるアイデア

‍

色々作ったら1度寝て確かめるんですが、朝起きてみたら「なんじゃこのへっぽこは」となったのでボツ。イラスト素材が可愛く写りすぎて気が抜けすぎてるのもイメージと違いました。

最終的にはこれ。全部大文字にしているので同じフォントでも雰囲気が変わったり。レイアウトでもかなり雰囲気変わるので、パターンを作って検証した結果、落ち着かせました（時間）

あとは小手先のアニメーションでそれっぽい感じにしたろ〜と思ってこれにてFIX。

‍

参考はBONOコミュニティでmozzさんがシェアしていたtagbox。真ん中揃えとフォントの雰囲気を盗む。背景の色も近いものを使っていたので似た印象を借りれている気がします。トレンドですね。https://www.tagbox.io/?ref=producthunt

ちなみにイラストを使っていて、最初文字だけで組んでたんですが「抜け感が足りない...真面目で強そう...」だったので追加してます。素材は適当にFigmaCommunityのオープンソースからクセのなさそうなものから拝借しました。

‍

‍

ポエムについて

今回コンセプトを伝えたいというのがあってポエムを採用してます。長文の文章で”こういうの感じてない？”でメッセージで共感してもらうコンテンツです。

‍

‍

BONOコミュニティのメリットって機能ではなくて「参加するとデザインのやる気が上がる」ことだと思ってるんです。”体温”という言葉を思いついたのが我ながら天才では？と思っているのですが、ストレートに「やる気あげよう！」だと「固っ苦しいな...勢い強そ...疲れそ」になるので表現を考えています。

BONOの意味が”曙=朝やけ”でいろんな人の”夜明け”にする意味があります。年始で初日の出があったので太陽が出てきて暖かさを感じるイメージがなぜわからないけど浮かんできて採用になりました。BONOのグラデーションを使って、スクロールしてだんだん暖かくなる色にしています。

文章の中身に関しては自分がコミュニティ運営する中で感じていること、どういう場所にしたいかを考えてポエムを書きました。ちなみにポエムなんて普段書かないので見よう見まねです。中身は関係ないですが、さらっとしているのでZOZO 似合うラボの長文のテンションを参考にして書いています。https://niaulab.com/

こういう部分もちゃんとお手本を横に置いて参考にしてます。じゃないと作れない...感謝。

‍

残りの部分

BONOの他のページで使っているようなUIパーツから持ってきたりしてます。1度作ったもののパーツを再利用まで行けてませんが、「こういうときはこのレイアウト」って感じで使えるパーツにはなっているので一部改変でそのまま流用しました。

‍

▼ リスト▽

‍

▼ ブロックっぽいやつ

‍

コミュニティで熱量上げたい人はチェックしてね

今回は作成したLPのフロー過程の一部をシェアしてみました。制作する流れはわかったんじゃないかな〜と思います。気になった方はサイトに遊びに来てくださいね。体温を上げれる人、一緒にコミュニティでお会いしましょう。

https://www.bo-no.design/communityplan

‍

‍