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

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

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

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

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

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

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

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

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

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

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

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

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

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

ターゲットユーザーは？

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

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

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

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

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

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

つまずくところの例

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

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

3.世界観を決定する

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

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

完成イメージの共有

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

デザイン着手

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

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

例えばこんなかんじに

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

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

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

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

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

デザイン提出

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

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

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

編集部オススメ

レスポンシブ対応のLPをたった5時間で製作する方法

ハローエブリワン、ジェイだ。 最近は増刊号でエブリワンに会える機会が増えて、俺も嬉しい限りだよ。 季節も夏が近づいてきて気持ちもハッピーなピープルが増えてきたんじゃないだろうか。 俺も日が長くなり太陽とコミ...

2016.06.09