【備忘録】ゼロからWebページを作ろう ! と思った時にすること【初心者向け】
こんにちは。
Webデザイナー目指して勉強中のかいもちです🐣
先日、久しぶりにLPカンプを作りました。🐝✨
#なみしお勉強会
— かいもち | Webデザイン勉強中 (@kaimochi_web) September 10, 2021
初参加させていただきました🐝✨
"白山養蜂園" デザインカンプ🍯
働く女性がターゲットで、「忙しいけど、身体に良いことがしたい」というニーズに応えるようなブランディング、ページを目指しました😌💐
スクロールがド下手なのは許して欲しい...😂 pic.twitter.com/dSQw9JZ6Mb
#なみしお勉強会 は、ツイッターで仲良くさせていただいている、現役デザイナーのおふたり (グラフィックについてはベテラン、Webについてはお勉強中とのこと ! ) が企画・運営されている勉強会です。
今回は、白山養蜂園という架空の企業のサイトを作るというお題でした。🐝✨
こちらを含め、わたしは今まで5つほどオリジナルのWebサイトを作ってきたのですが、はじめはそれこそ右も左も分からず...。
模写も、サイトレビューも、コーディングの練習もたくさんしてきたというのに、手も足も出ない状態でした。😱
まだまだ初心者の域を出ないわたしではありますが、それでも最近は、最初の頃よりスムーズに、かつ、質の高いアウトプットができるようになってきたかなと感じます🥺 !
ということで今回は、そんな私なりの、オリジナルサイトを作ろうと思ったらすること、使うものや手順について、まとめていこうと思います
今回は、先述の「なみしお勉強会」で作成した、白山養蜂園のLPを例にまとめます。
1. 要件の確認
これは大事... !
どんなに素敵なデザインを作り上げたとしても、お客様の求められるものに沿っていなければ喜んでいただけない・・・ですよね、😢
今回の場合、クライアントはいませんが、主催者からこのような提示がありました。
※ ↑ こちらは、なみしお勉強会を主催されているしおちゃん @design_shio と、おぎなみさん @oginami_design 著作です。
こちらの要件をよーーーく確認しまして、いざ、アイデア探しです。
2. ふわっと、アイデアリサーチ 「Pinterest」
いよいよ、アイデア探しです。
ここでまず競合他社のページを見たり、コンテンツを考えたり・・・という人も多いのかな ? と思いますが、私はデザインのインプットをガッと増やしてからみるようにしています。🤍
そうすることで、より、自分の作ろうと思うイメージに近い会社のページを重点的に見たり、コンテンツをよりリアルに作り込めると思うからです。
ここで登場するのが、Pinterestというアプリです。
Pinterestは、さまざまなアイデアのスクラップがたくさん集まったプラットホーム...のようなSNSです。
今回は養蜂園のページを作るので、まず「はちみつ」「養蜂」「Bee」など、直接的な単語で検索します。
・・・と、ここからがPinterestの面白いところで、直接的に関係ないように見えるスクラップも出てきたりするんです。😂
なぜかというと、PinterestはSNSなので、いろんな人がいろんな解釈で、同じ名前をつけてスクラップを保存しているからです。👌
自分の意図しないようなアイデアに触れることで、さらに検索するワードが変わってきます。
例えば今回は、「はちみつ」の検索で、化粧品のスクラップが多く出てきたことからヒントを得て、オーガニックコスメ、ハニースクラブ・・・などなども検索してみました。
最終的には、1. の要件とも照らし合わせ、はちみつを使った、身体に優しい化粧品をキーワードにサイトを作ってみるのはどうかな ? 🤔 というアイデアが浮かびました。
3. メインターゲットは誰 ? 「ペルソナの作り込み」
次に、具体的なペルソナの作り込みに入ります。
※ペルソナ、については、わかりやすくまとまっているページがあったのでこちらをご参照ください。
今回私が作ったペルソナ (Scrapboxにメモすることが多いです)
(順番が逆になってしまっていますが、ペルソナを考えるのが難しいという人は、まず、ターゲットから作って、よりそれを具現化したペルソナに落とし込むのもアリかと思います。)
ペルソナ作成の注意点としては、あくまで、一般的に十分あり得る設定にすることだと思います。あまりにニッチな設定になりすぎると、このページは誰がみるんだい... 😨 ? というものになってしまうかもしれません。
自分の周りにもいるいるそういう人 ! という設定になっていれば、まず問題ないかと・・・。
4. 競合他社は一番の参考 「実際のページを見てみる」
ここまできてようやく、実際のWebページを見ていきます。笑
幅広くみるのは大切ですが、時間も限られていることですし、「より、自分のイメージするページに近いもの」をじっくり見るのがおすすめです。👀
「商品や提供サービスが近いもの」ももちろんですが、ターゲット属性が近い会社のページもよく見るといいと思います。
ページを俯瞰するために、私は以下の手順をとっています。
( 1 ) 全体のスクショを撮る→XDに貼り付けて眺める👀
( 2 ) 具体的にどこが参考になるのかを書き出す
内容・配置・言葉・配色・動き・フォント・・・などなど。
( 3 ) フォント、余白、カラーなどの要素を調べる
1と3は、Chromeの拡張機能でサクッと完了します。拡張機能については、こちらが詳しくまとめてあり、私の使っている機能も網羅されているので、ご興味ある方はぜひ読んでみてください ! 👏
2は、ご自身の使いやすいツールで良いかと思うのですが... 私は、ペルソナをまとめたのと同じScrapboxか、最近使い始めて使い勝手がいいなーと思っているNotionに書いています。1を貼ったXDのページに書き込むこともあります。
もちろん、紙のメモでも。✏️
5. ペルソナが求める情報は何か ? 「コンテンツを羅列してみる」
いよいよ、オリジナルのページ作成に取りかかっていきます。
私は、デザインに入るより先に、大まかにコンテンツを作成しています。(というか・・・そうしないとデザインできなくて・・・😂)
実際に使うかどうかとか、順番とかは気にせず、まず書き出してみます。
(これもNotionかScrapboxが多いです)
こんな感じです。あくまでメモ。笑
--------------------
ここまででだいぶ、方向性が定まってきたかと思います。✨
このあと、本格的にデザインと、コンテンツの構成に入ってきます。
それについてもまた後日、まとめようと思います !
読んでくださり、ありがとうございました🙇♀️
この記事が気に入ったらサポートをしてみませんか？