LP制作の流れと手順!デザインから作る方法【初心者OK】

LP制作のと流れと手順を紹介!

デザインからコーディングまで受注した場合の制作方法を超初心者向けに解説します。

コーディングのみで受注した場合は以下の記事をどうぞ。

LPコーディング案件の作り方と流れ【初心者向け】

 

LP制作の流れと手順!デザインから作る方法【初心者OK】

  1. サイトのイメージを聞く
  2. 参考サイトで認識合わせをする
  3. ワイアフレームの型を選ぶ
  4. ワイアフレームを作る
  5. デザインの認識合わせをする
  6. コーディングをする
  7. 納品する

 

1.サイトイメージを聞く

まずクライアントサイトイメージを聞きます。

ヒアリング内容例

  • サイト制作(修正)の目的・背景
  • サイトのテーマ・コンセプト
  • 制作(修正)後に期待する効果(ex.お問合せ増加)
  • サイトのターゲット層(性別、年齢、職業)
  • サイトに入れたい内容(商品説明、メリット、お問い合わせなど)
  • サイトに追加したい機能(facebook連携機能など)
  • 希望イメージ(女性的/男性的、シンプル/賑やか、単色/カラフルなど)
  • 提供可能な素材(ロゴや素材、使用したい画像など)
  • そのほか気になる点

 

ヒアリングシートがオススメ

直接ミーティングで聞いても良いですが、ヒアリングシートに以下の質問を書いて回答してもらうのが効率的だし記録に残るのでオススメ

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

 

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


1.の回答を参考に、ネット上で参考サイトをいくつかピックアップしてクライアントに好みを聞きましょう。

相手に視覚的に確認してもらうことで「デザインを始めてから認識のずれが起こる」というような手戻りを防ぐことができます。

 

3.ワイアフレームの型を選ぶ

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

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

次にワイアフレームの型を選びましょう。目的に合わせてLP型とサイト型どちらかを選びましょう。

LP型のサイト

一枚のページに情報を集約しユーザーのページ離脱を少なくできます

縦長の1ページ完結型のため、下までスクロールしてもらいやすいですが、情報を絞って伝える必要があります

ウェブサイト型のサイト

情報量が多い場合にオススメ

情報がページごとに分類・整理されており、トップページを起点として、下層となるさまざまなページに遷移させます。

 

4.ワイアフレームを作る

ワイアフレーム作成ツールは何でもOK

ワイアフレームはエクセル、パワポ、Figma、AdobeXD(無料ツール)など色々な選択肢はありますが、どこに何があるのかわかればOKです。

紙でもOK。

FigmaかAdobe XDがオススメ

私はいつもFigmaかAdobe XDという完全無料でデザインできるツールを使っています。

これならワイアフレームを作ったら、それを使ってそのままデザインもできるので楽です。

オススメはデフォルト設定でフォントの数が多いAdobe XDです。

 

Adobe XDの使い方

Adobe XDはデザイン初心者向け。プラグインなしで効率化する方法を紹介

 

Figmaの使い方

Figmaの使い方、5分で3つだけ覚えればOK【初心者向け】画像で説明

 

5.デザインを作る

FigmaかAdobe XDで作成

デザインは先ほど述べた、Adobe XDかFigmaを使えばOKです。(制作会社案件の場合は、photoshop指定されるかもしれないので気をつけましょう)

デザインを提出

全体デザインをクライアントに送り、微修正をしましょう。

必ず最初にデザイン案はいくつまでか決めておきましょう。そうしないとエンドレスでデザイン変更になります。

さらにデザインをする前に、「4.ワイアフレーム作成」段階まででしっかり「変更なし」という認識を合わせておくことが大事です。

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

 

6.コーディングをする

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

コーディングに自信がない人は模写コーディングで練習するのがオススメです。

LPの模写コーディングの方法は無駄な作業をしがち!効率的に行う方法【初心者向け】

 

7.納品する

LPが完成したらクライアントに納品をします。

デザインから案件を行う場合は直案件のことが多いので、クライアントのサーバー上にFTPでアップすることがほとんどです。

cyberduckを使うのが簡単でオススメ。

Cyberduckでエックスサーバーにftp接続をする方法

 

 

LP制作の流れと手順!デザインから作る場合の注意点

LP制作のトラブルを防ぐ方法を知っておく

LP制作をデザインから行う場合は、直案件のことが多いと思うので、トラブルに気をつけましょう。

デザインから行う方がクライアントとのコミュニケーションが大事になり、トラブルが起こりやすくなります。

 

ヒアリングシートに入れないとトラブルになることを知る

web制作でヒアリングシートに入れないとトラブルになること

 

LP制作を受注したら契約するべきことを知る

web制作でトラブルを防ぐ!フリーランスが契約書に入れるべきこと!8割は事前確認で防げる

 

2つのLP制作受注形式の違いを知っておく

LPを受注するなら、2つのの受注形式があります。それぞれの仕事の流れを知っておきましょう。

  • 直案件:クライアントから直接受注する
  • 制作会社案件:仲介している制作会社から間接的に受注する

 

直案件の流れ

web制作の仕事の流れとコーディング手順【直案件編】

 

制作会社案件の流れ

web制作の仕事の流れとコーディング手順【web制作会社案件編】