時間がない中でも手戻りなくイケてる特設サイトを作る方法

時間がない中でも手戻りなくイケてる特設サイトを作る方法

2016.07.15
fujino03_00
ノウハウ

こんにちは。今年は梅雨なのに雨が少なく、猛暑日が続くと思ったら急に寒かったりと、体調管理が難しい天気ですが、ごきげんいかがでしょう。
今回は、主にデザイナー歴3年までの新人デザイナーさん向けに、「時間がない中でも手戻りなくイケてる特設サイトを作る方法」について書いてみます。

特設サイト:期間限定のプロモーションやイベントのサイトとします。

イケてるサイト:CVR目標を達成できるサイトとします。

たまによくある無茶な要求

  • 2週間しかないし素材もワイヤーもないけど特設サイト作って欲しい
  • とりあえず今ある素材でティザーサイトがほしい
  • 3日後までにペライチでページがほしい

ペライチ:1ページのみのサイト。ランディングページ(LP)やキャンペーンページとしてよく使われます。

無理だけど無理だと言えない状況のときってありますよね。弊社でいうと、もう発表会の日程組まれちゃってるし発表するって告知しちゃってるから!とかとか。
時間がない中で最大限のパフォーマンスを発揮するためには、どの工程においても手戻りは絶対避けたい、避けないと間に合わないわけです。

絶対に避けたい手戻りの内容

fujino03_01

  • もともとのページ構成からひっくり返る
  • デザインに根本からNGが入る
  • 大幅なレイアウト変更
  • 大幅な内容削除・差し替え
  • 担当者のOKが出て進めてきたが、ページが全て完成したあとでプロジェクト責任者の判断でひっくり返される

こんなことがおきて最悪間に合わないとか、徹夜で泣きながらやり直すようなことになるのは絶対に嫌だ!というわけで私なりに蓄積してきた手戻りを避けるノウハウをご紹介します。

手戻りを避ける仕事の進め方

先に答えを言ってしまいますと、この3つがとても重要です。

  • 制作スケジュールを細かく確認すること
  • 思考の順序を踏むこと
  • デザインに着手する前に企画担当(できればプロジェクトの責任者も)と、共通したイメージが持てるまで話すこと

企画担当:ページの構成要素や各種露出導線を手配する、プロモーションの担当者とします。

プロジェクト責任者:そのプロジェクト全体の指揮を執る人とします。

では、詳しくご説明します。

制作スケジュールを細かく確認する

制作〜公開にあたって、大きく以下の工程があります。

  1. 素材・ページ構成要素などの手配(企画)
  2. デザイン制作(デザイナー)
  3. デザイン確認(企画・プロジェクト責任者)
  4. フィードバック対応(デザイナー)
  5. デザインOK後、コーディング、コードレビュー(デザイナー)
  6. 各種対象ブラウザ・デバイスでの動作検証(デザイナー・企画)
  7. リリース作業(デザイナー)

それぞれの工程に通常どれだけの時間がかかるかをまず見積もります。締め切りが決まっている場合は、そこからどこをどれだけ削れるか、どこにどれだけ時間をかけられるかを企画担当と確認します。
また、リアルタイムで情報を集めている場合、ギリギリになって素材が決定したり、要素が変更になったりします。例えば直前に日程が決まるだけであれば、ダミーで入れておいて差し替えでも対応できますが、要素まるまる追加などは対応できる期間に限界があります。ここまでに要素を用意してもらえれば、リリースまでに対応できます、といった線引きをしましょう。
おおよそスケジュールに合意がとれたら次へ進みます。まだ制作には着手しません。

思考の順序を踏むための3ステップ

  1. ターゲットユーザーとコンバージョンを明確に
  2. プロジェクト全体のコンバージョンまでの流れを確認する
  3. 世界観を決定する

1.ターゲットユーザーとコンバージョンを明確に

ニコニコ超会議で振り返る大規模イベントサイトの作り方でも触れましたが、最初にするのがターゲットユーザーとコンバージョンを定義することです。
弊社の場合は例えばこんな感じです。

ターゲットユーザーは?

  • 特定の年代の男性/女性
  • 特定のコンテンツ/人物を知っている人
  • ニコニコライト/ヘビーユーザー
  • 一般会員/プレミアム会員
  • ニコニコと関係なく幅広く

今回のコンバージョンは?

  • 生放送を見てもらう、予約してもらう
  • イベント会場に足を運んでもらう
  • チケットを買ってもらう
  • プレミアム会員になってもらう
  • SNS共有して話題にしてもらう

ターゲットユーザーとコンバージョンは、スマホサイトとPCサイトのどちらをベースに構成を考えるかにも影響します。そちらも併せて確認しておきましょう。


2.プロジェクト全体のコンバージョンまでの流れを確認する

ページ導線はどのように貼られて、ユーザーはどういう期待を持ってこのページに遷移してくるのか?そこから先どのように遷移するのか?
例えばniconico内の露出であれば、生放送にリンクが貼られる、インフォが出る、トップにバナーが出る…など、どんなページのどのような煽りから遷移してくるのか、その流れを想像する中で、企画の方からもらったページ構成要素につまずくところがないか確認します。

つまずくところの例

  • 生放送視聴が目的なのに一番下までいかないとリンクがない
  • イベント来場してほしいのに、会場の情報が載ってない
  • プレミアム会員登録してほしいのにメリットがわかりづらい

つまずくところを発見したら、デザイン着手する前に必ず企画の方と共有し、改善案を提案してみましょう。


3.世界観を決定する

  • キービジュアルはどんなイメージ?
  • どんな世界観ならコンバージョンが上がるか?
  • キーカラーや使用するフォントもざっくりと決める

キービジュアル:サイト内のメインとなる写真やイラストなど。ポスターが先に作られていれば、ポスターの画像を利用したりします。

関連サイトやキービジュアルの世界観を参考に、流れを断ち切らないように注意しながら大枠のデザインイメージを固めます。
使える素材が何もない場合は、ターゲットユーザーとコンバージョンを意識して、画像素材やイラスト素材からいくつか候補を選定してみましょう。

完成イメージの共有

fujino03_03
ここまでの流れを企画担当と、できればその上のプロジェクト責任者と共有し、認識合わせをしておくことがとっても重要です!
時間がなくても、できるだけイメージの伝わる資料や動きのイメージができるサイト、ざっくり配置したラフイメージなどを用意して、全員の頭のなかに共通したイメージが持てるまで話しましょう。
小規模チーム内でスムーズに業務を進める5つの施策でも触れていますが、メール等ではなく、直接顔を合わせて話をして、空気感を共有することが大切です。

デザイン着手

レスポンシブ対応のLPをたった5時間で製作する方法のように、BootcompとBootstrapを使って一気に制作してしまうのもひとつの手段です。

もう少し余裕がある場合は、デザインの初期段階では細部を詰めすぎずにいろいろ試してみましょう。ページ構成のそのままではなく、ほんの少しの遊び心やアレンジを入れてみるだけで、CVRの向上につながったりします。

例えばこんなかんじに

  • ふきだしにしてしゃべらせてみよう→文体を口語体にしてみよう
  • 文字量が足りなくてスカスカになりそうだから適当に足してみよう、またはレイアウトを変えてみよう

手配されたテキストの文面に囚われず、企画者の「真の意図」を汲み取ってあげると、「期待以上のものが出てきた」と喜ばれること請け合いです。
また、手間をかけなくてもなんか凝ってる風に見せられるテクニックや素材は普段からストックしておきましょう。

素材例:写真・アイコン・シルエット・イラスト・背景・ブラシ・スタイル・シェイプなど

だいだいできてきたら、角度を変えて見てみる、人の意見を聞く

  • 一旦目を離して、他のサイトなどを見たあとにまた見る(おすすめ:次の日まで忘れる
  • カンプをブラウザ上で見てみて、遷移元のページから遷移したイメージを確認する
    • ユーザーの期待に対して違和感がないか
    • 遠目に見て、色調の調和がとれているか
    • 目立たせたい部分が目に入ってくるか
  • 人に見てもらって意見を聞く
    • 悩んでいる箇所は複数作って見てもらう
    • デザイナーに限らずいろんな人に見てもらったほうがよい
    • ターゲットユーザーに近い人ならよりよい

自分は背景を分かって制作していますが、全く前提知識がない人が見た時感じる印象はとても参考になります。こういう意図があった、と説明しないと分かってもらえない場合は何か足りてないので、再度構成やデザインを見直しましょう。

デザイン提出

fujino03_07
最初に意識合わせをきっちりしておけば、大きな手戻りは発生しないはず!
同じ議論を繰り返さないためにも、議論の内容から決定事項までを議事録やメールで残しておくとよいですね。

デザインが決まればあとはガリガリコーディングしていくだけです。CSSフレームワークを使うのも、時短テクのひとつですね。


今回の記事を持ちまして、少しだけおやすみをいただきます。復帰後にはまたおやすみ中の経験を活かした記事が書ければと思います。
それではみなさん、また会う日まで。さよなら、さよなら、さよなら。
※最近のベープのCMでTOKIOがスーツで並んでいるのを見るとドリフを連想する世代です

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

fjn

FJN

Designer

美味しいものを食べて美しい世界を見るために生きてます。モノより思い出。

ドワンゴデザイナー メンバー募集 ! !