コラム

はじめてコラムを書きます、webデザイナー１年生の赤猫です。よろしくお願いします！

未経験からwebデザイナーになりましたが、徐々にwebサイトのトップページのデザインをさせていただけるようになりました。今回は、先輩に教えていただいたことを踏まえ、制作の流れを自分なりにまとめてみました。

これからwebデザインをはじめる方や、初心者の方の参考になれば幸いです。

1.制作するサイトのイメージを決める。

サイトのターゲットや、目的、業種などから、どんなサイトにしたいか、どんな雰囲気にしたいか、どんな色使いがいいかを考えます。

例）目的：採用に力を入れたい→固くなりすぎず、この会社で働いてみたいと思わせるようなサイト
例）色：コーポレートサイトとして信頼感を表現したいので、メインカラーは青

2.デザインの参考となるサイトを探す

イメージが決まったら、実際にあるサイトからイメージに近いものを探します。

webサイトのギャラリー集やPinterestなどから、とにかくたくさんのサイトを見てみます。
ただやみくもに探しても時間がかかってしまうので、色やジャンル（ex.コーポレートサイト）で絞り込みをしたり、同業種のサイトを見てみたり。
そして最終的にイメージに近いものを複数選びます。

3.メインの参考となるサイトを決め、特長をまとめる

選んだ参考サイトの中から、色の使い方や雰囲気が、作りたいサイトのイメージに最も近いものをメインの参考サイトとし、そのサイトの特長をまとめてみます。
サイトに使われているパーツは角丸か直角か、余白は多めか、写真は多めか、アイコンを使っているか、線は細めか太めか…などなど。

4.ここからphotoshopの登場です

参考サイトの中から、ワイヤーフレームに基づき、コンテンツごとに使いたいパーツのスクリーンショットを撮り、画像にしてphotoshopのカンバスに乗せていきます。
ヘッダーはこのサイトから、このコンテンツの見せ方はこのサイトから…のように。
ここで大事なのは、画像を乗せていく作業は白黒で行うことです。あくまでもここではレイアウトを決めることが目的です。
すべてのパーツを乗せ、レイアウトを完成させます。

5.トレースをしてみる

置いた画像の上から、色をつけながらトレースをしていきます。
色は配色が決まっていればその色で、決まっていなければメインの参考サイトの配色を参考にします。
ここで大事なのは、余白の取り方や文字の大きさもトレース元に合わせることです。
「真似をする」、というのに抵抗を感じるかもしれませんが、ギャラリー集などに掲載されているようなサイトは余白の取り方や文字の大きさなどが素晴らしいものが多いので、とりあえずトレースしてみることが大切です。
先輩から、「デザインが上達しない人は、真似をしきれていない人」ということを教わりました。

6.レイアウトの調整

トレースが終わったら、全体の雰囲気を見ながらレイアウトを調整していきます。
パーツごとに別のサイトから持ってきた場合、ちぐはぐになっていることもあるので、全体がなじむように調整します。
万が一ここであまりにもちぐはぐ、また雰囲気に合わないと感じた場合、振り出しに戻ってしまうので、4のパーツを置いていく作業は慎重に行いましょう。

7.全体の調整

最後に全体を見て、細かい部分の調整をします。
【チェックポイント】
・コンテンツの上下の余白はコンテンツ同士で共通か
・デザインの基本的なルールは守られているか（反復・整列・近接・コントラスト）
・上記の3.でまとめたサイトの特長にあっているか
など。

全体の調整ができたら、ひとまずデザインの完成です！

さいごに

世の中にはたくさんの素晴らしいwebサイトであふれています。常に色んなサイトをチェックし、次はこんなデザインをしてみようという引き出しを増やしておくことがデザインの上達への一歩です。
いきなり自分の感覚でやろうとせず、まずは真似をしてみることで良いデザインの感覚をつかむことが大切だと思います。

多くの方が口を揃えて言うことですが、デザインやデザインの方法に正解はありません。これからもっともっと数を重ね、自分なりのデザインの方法ができるよう、日々精進していきます！