ホームページデザイン制作の流れ

以前の解説では、ホームページ制作の企画や設計をまずしっかり話し合ってからデザイン制作に入った方が、無駄が少なくなったりコミュニケーションのすれ違いも起きにくくなったりして良いですよ、というお話をしました。

今回はその次の段階、いよいよデザインの制作についてです。デザインの制作が実際にどんな流れで進んでいくのか、ご紹介できればと思います。

デザイン制作のフローは会社によって様々

正直なところ、デザインの制作フローは結構いろんな種類があって、会社によってやり方が違うことが多いですね。 ただ、大体の流れは「こんな感じだろうな」という部分は共通していると思いますので、そういう心づもりで聞いていただければと思います。

まず何から始める？デザインの方向性を決める

なにはともあれ、まずはどんな感じのデザインにしていくのか、話し合うところから始めていきます。

印象を左右する「カラー」の決定

例えば「カラー」です。コーポレートカラーが決まっていて、その色を絶対に使ってほしいというご要望もよくあります。あるいは、ホームページで「信頼感を得たい」という目的があればブルーを基調にしていこうとか、逆に「あえてブルーは使わずに信頼感を出したい」「情熱的な赤を使いたい」といったように、サイトの目的から使用するカラーを決めていきます。

Web業界の専門用語？「トンマナ」を決めよう

次に「トンマナ」というものを決めていきます。これは業界用語なので、あまり聞き馴染みのない方もいるかもしれませんが、「トーンアンドマナー」の略です。 サイト全体の雰囲気と、どういうルールでデザインを統一するか、ということです。 例えば、星をたくさん散りばめるとか、そういうデザイン上の「マナー」ですね。あるいは、スペースをたっぷりとって、余裕のある感じのデザインにするといった雰囲気も「トンマナ」と呼びます。

例えば、カラーで「信頼感のある感じ」を選んだとしたら、トンマナもそれに合わせて「どっしり構えている感じがいいので、スペースも余裕をもって作りましょう」とか、「文字をやや小さめにすることで大手感が出たりするので、もう少し小さめにしようか」といったマナーを決めていくわけです。

イメージを共有する「参考サイト」の活用

言葉だけで「信頼感のあるデザイン」と言っても、それが具体的にどんな感じのデザインなのか、イメージが湧かない担当者の方も結構多いんです。 そこで、いろんなサイトを一緒に見ながら「これ、イメージに近いですね」「これはちょっと違いますね」といったように、具体的なビジュアルで認識をすり合わせていく作業も行います。

サイトに動きを加える「アニメーション」の検討

最近のWebサイトは、表現できるアニメーションの要素も増えてきています。 例えば、トンマナで「星を使う」と決めたなら、「流れ星みたいに動かしていきましょう」といったアニメーションについても事前に話し合ったりします。 こういった動きの要素は、企画の段階で話し合われることもありますが、デザインの段階でより具体的にどうしていくかを決定し、いよいよ実際のデザイン作業に取りかかっていきます。

いよいよデザイン制作へ！でも、やり方は会社それぞれ

さて、いよいよデザインの制作に進んでいくわけですが、ここが一番やり方が分かれるところじゃないかと思います。

PC？スマホ？どの画面のデザインを作るかという大きな分岐点

というのも、今はPC、スマホ、タブレットなど様々なデバイスがありますよね。 ですので、どこまでのデバイスのデザインを作るのか、というのがまず最初の分岐点になります。

例えばトップページを1つ作るにしても、最初はPhotoshopやFigmaといったツールで「画像」の状態で作るんですね。 見た目上はボタンなどがありますが、あくまで1枚の画像なので、実際にはクリックできない状態のデザインカンプです。 この後、この画像を元に「コーディング」という、エンジニアが活躍するフローに移ります。 ボタンのパーツやメインビジュアルの部分などをそれぞれ切り取って、バラバラのパーツを組み立てるようにしてWebページを構築していくんです。

PC版デザインだけでは分からないスマホでの見え方

その時、エンジニアは「PC版のデザインはこれだけど、スマホの時ってどうやって表示するんだろう？」と迷ってしまいます。PCとスマホでは画面の幅が全く違うからです。 例えば、PCで強みが横に「1・2・3・4」と並んでいたとして、これを縦長のスマホ画面で表示する場合、「1, 2, 3, 4」と順番に縦に並べるのか、それとも「1, 2」を横並びにしてその下に「3, 4」を並べるのか。 PCのデザインを見ただけでは、スマホでどう表現すればいいか分からないのです。

じゃあスマホ版のデザインも作るのか、タブレット版も作るのか、という話になります。しかも、タブレットも様々な画面幅があります。 こうした画面幅に応じて表示が切り替わるポイントのことを「ブレイクポイント」と言います。 このブレイクポイントをどこに設定するのか、そしてどこまでのデザインを画像として作成するのか。当然、作るデザインが増えればその分工数が上がり、費用も高くなるので、お客様と「どうしようかな」と相談することが多いです。

コストを抑えるための工夫と最近のトレンド

ちなみに弊社では、トップページだけPCとスマホのデザインを作り、それ以降の下層ページはエンジニアに「いい感じにスマホ対応してもらう」という、少し乱暴（？）な手段でなるべくコストを下げよう、というフローをとることがあります。

また、最近はPCとスマホの一体型のようなサイトも増えてきています。 PCサイトの画面の中にスマホサイトの表示をそのまま埋め込んでしまうような形式です。 これであれば、制作するデザインはほぼスマホ版だけで済むので、お客様と制作会社の間で「スマホになった時に少し思ってたのと違うな」という見た目の不一致が起こりにくくなります。 おそらく、今後はこういう手法を取り入れるところも増えてくるのではないでしょうか。

なぜ、いきなり全ページを作らないのか？

制作の進行ですが、まずはトップページを作るところから入っていきます。 そのトップページをどのデバイスまで作るかが決まれば、その複数デバイス分のトップページをまずはお客様に確認していただきます。

いきなり全ページを作りたいところかもしれませんが、もし全ページ作った後に「全部イメージと違う」となった場合、作り直す量がとんでもないことになってしまいます。 ですから、まずトップページだけを作らせていただいて、そこで最初に話し合ったカラーやトンマナが合っているかを確認します。 そしてOKをいただいてから、その他の下層ページも作っていくという流れになっています。

さらに手戻りを減らすための、より細かいステップ

弊社の場合は、さらに手戻りを少なくするために、トップページの中でも、いわゆるファーストビュー、つまりパソコンを開いた時の最初の表示領域分（全体の20%くらい）だけをまず作ってお見せすることもあります。 まずそこで方向性が合っているかを確認し、OKであればトップページ全体を、そしてトップページが完成したら下層ページへと進んでいく。 このように、もう少し細かめのステップを踏んで制作を進めることで、なるべくコミュニケーションの乖離がないようにしています。

デザインの修正と確認はどう進める？

制作会社が作ってきたデザインをお客様にお見せして、画像の状態で問題ないかを確認していただきます。

便利な「ビジュアルコミュニケーションツール」

その際、最近は便利なビジュアルコミュニケーションツールを使うことが多いです。 これは、デザイン画像をWebサイトにそのまま貼り付けて、「ここの4番のデザインのところを少し変えたい」といったように、画像上の特定の箇所に対して直接コメントを書き込んでいけるツールです。 口頭で「右の上の下の…」と言ってもなかなか話が伝わらないですが、このツールを使えば「ここのことを言っています」と明確に指示を共有できます。

「雰囲気」を伝える、制作会社の腕の見せどころ

もちろん、打ち合わせの場で直接雰囲気を確認し合うこともあります。 デザインの確認は、何しろ「雰囲気」という感覚的な部分が大きいので、そこをいかに汲み取って円滑にコミュニケーションをとるか、制作会社の腕の見せどころではないかなと思っております。

完成に向けた修正の繰り返し

お客様からツールなどでコメントをいただき修正し、それをさらにもう一度お返しして確認してもらう。 また修正があれば対応する、というフローを繰り返しながら、完成へと向かっていきます。 全てのページをしっかりと確認していただき、前段階で作成したワイヤーフレーム（設計図）との違いがないかもチェックしながら進めていく、ということですね。

デザイン制作の流れ、おさらい

以上が、デザイン制作がどういった流れで進んでいくかの解説でした。 まず、事前にどんな感じのデザインにするかという企画・話し合いをします。 その後、まずトップページだけを作り、その際にどこまでのデバイスのデザインを作るかが少し変わってくるポイントです。 そして、トップページがOKだったら、ようやくその他の下層ページも作っていく、という流れで進んでいきます。

次のステップ「コーディング」へ

ここまで来て、すべてのデザインについてお客様からOKをいただけたら、次はいよいよ「コーディング」と呼ばれる段階に入ります。 先ほど少し触れた、デザインの画像をバラバラにして組み立てていく作業ですね。 次回は、そちらについて詳しく解説していきたいと思います。