フリーランスが会社員収入を継続して得られないパターン7つ

Web制作初心者のためのLP制作方法(デザイン編)

web制作初心者が最短で稼ぐにはLP(ランディングページ)制作がおすすめです。

今回はLP制作案件でデザインからコーディングまで受注した場合の制作方法を解説します。

ちなみにデザインからコーデイングまで行えるようになると案件が取りやすくなります。


ポイントは、「クライアントと効率的に認識を合わせる」ことです。

 

では具体的なデザイン方法を見ていきましょう。

 

  1. サイトのイメージをヒアリングシート で聞く
  2. 参考サイトで認識合わせをする
  3. ワイアフレームの認識合わせをする
  4. デザイン要素の認識合わせをする
  5. 全体デザインの認識合わせをする
  6. コーディングをする

 

前提としてクライアントと、「サイトにどのような要素を入れるか(例えば、商品説明、メリット、お問い合わせフォームなど)」の認識を合わせている状態です。

 

1.LPのイメージなどをヒアリングシートで聞く

クライアントと効率的にイメージを合わせるためにヒアリングシートに、イメージを記入してもらいましょう。具体的にヒアリング内容の例は以下です。

ヒアリングシートはエクセルに書いてクライアントにメールで送ったり、Google formやGoogle spread sheetに書いて共有しましょう。

  • サイト制作(修正)の目的・背景を教えて下さい
  • サイトのテーマ・コンセプトはなんですか?
  • 制作(修正)後に期待する効果はありますか?イメージアップ、アクセスアップ、お問合せ増加、など
  • ターゲット層を教えて下さい(性別、年齢、職業、など)
  • サイト内容について既存のサイトに追加するものがありましたら教えてください。
  • サイトに追加したい機能を教えてください。(facebook連携機能など)
  • 希望イメージをお選び下さい(女性的/男性的、シンプル/賑やか、単色/カラフルなど)
  • ご提供可能な素材はございますか?(ロゴや素材、使用したい画像など)
  • そのほか気になる点はありますか?

 

2.LPの参考サイトで認識合わせをする


1.の回答を参考に、Pinterestなどで参考サイトをいくつかピックアップしてクライアントに、どれが好みか選んでもらいましょう。

その際のピックアップのポイントは、上の画像のように「イメージがわかない」ものを2軸に設定してマトリックスを作って送ることです。

例えば、アンケートで「シンプル」かつ「カラフル」なイメージにしてほしいという回答がきた場合、イメージが湧きづらいと思います。(もともとこのようなわかりにくい回答が来ないような質問の設定にするのもアリです)

それを軸に設定して、4象限に参考サイトイメージを貼り付け、相手に視覚的に確認してもらうことで、「デザインを始めてから認識のずれが起こる」というような手戻りを防ぐことができます。

 

3.LPのワイアフレームの認識合わせをする

ワイアフレームとは、デザインなしでサイトの構造を作成したものです。

例えば、こんなものです。

1.LPのワイアフレームを作る前に、

「ウェブサイト型」か「LP型」かを最初に確認しましょう。

  • LP型:一言で言うと自社の商品・サービスのチラシです。一枚のページに情報を集約しユーザーのページ離脱を少なくできます。縦長の1ページ完結型のため、下までスクロールしてもらいやすいですが、情報を絞って伝える必要があります。
  • ウェブサイト 型:情報の網羅性が高く、ページごとに分類・整理された「カタログ的」な機能を持つもの。トップページを起点として、下層となるさまざまなページに遷移させます。情報は多いです。

LP型のサイト

ウェブサイト型のサイト

 

2.LPのワイアフレームを作る

エクセル、パワポ、adobeXD(無料ツール)など色々な選択肢はありますが、上記のように、どこに何が書いてあるのかわかればOKです。

クライアントにツールを指定された場合は、それを使いましょう。(私は指定されたことありません)

私はいつもfigmaを使っています、これは無料でオンライン上でデザインできます。

イラレ、フォトショより格段に簡単です。

 

4.LPのデザイン要素の認識合わせをする

デザインの認識合わせをするときは、配色、構成、背景などの要素に分けてそれぞれで候補出しをして選定してもらいましょう。

そのほうが手戻りなく認識合わせをすることができます。

ポイントは、UXなど意識することはもちろん、コーディングしやすいデザインにすることです。

ちなみに私はこれまでのデザインを全て前述のfigmaで行なっています。

デザインからコーディングまで行うときにデザインツールの指定は基本的にされませんが、一応クライアントの聞いておいたほうが無難です。

 

5.LP全体デザインの認識合わせをする


全体デザインをクライアントに送り、微修正をしましょう。ポイントは4.まででしっかり「変更なし」という認識を合わせておくことです。

また、この段階でも一旦決めたことは変更しないために「この部分はこれで確定で」という認識合わせを行いましょう。

そうでないとエンドレスで変更が起こります。

 

6.LPのコーディングをする

早速デザイン通りにコーディングを開始しましょう。

コーディングするときのポイントは「Chromeの検証機能を必ず使うこと」です。これで、コーディングしたものが反映されているのかを確認できます。


具体的な検証方法が知りたければ、こちらから。

自分の場合、納品はほとんどの場合が、zip形式でした。

 

 

「LP制作案件でコーディングのみ行う場合の制作方法」は、下記の記事をどうぞ。

Web制作初心者のためのLP制作方法(コーディング編)

 

CV率の高いLPのデザイン方法は下記の記事をどうぞ。

CV(コンバージョン)率の高いLPデザインチェックリスト18