「Webデザイン制作」手順を制作事例から６ステップでご紹介【Web制作の流れ③】

• Webサイトを作るための「デザイン制作」手順の６ステップを実際のサイト制作事例から分かる。

実体験をベースに記事を作成していますので参考になれば幸いです。

「Webデザイン制作」手順を制作事例から６ステップでご紹介

Web制作「設計」手順を制作事例から２ステップでご紹介【Web制作の流れ②】に続いて次は「デザイン制作」です。

Web制作（オリジナルサイト制作）の全体の流れは

• その１「企画」
• その２「設計」
• その３「制作：デザイン」
• その４「制作：コーディング」
• その５「制作：WordPress」

となっておりこの記事はその３「制作：デザイン」となります。

その２「設計」でサイトマップ、ワイヤーフレームを作りました。ここからデザイン制作に進みます。

ここからどうするか、デザイン制作初心者には悩みどころです。僕はかなり悩みました。

どないしたらいいんや、、と思ってデジハリLIGの講師やデジハリLIGライブ授業の時の講師に聞くと、

「いろいろなサイトを見ていいところを真似して組み合わせて加工して自分の形にする」

と言っていた人がいたわけです。そんなわけで前に以下の記事を書いてみました。

未経験からWebデザインを勉強する効率のいい手順【初心者向け】

その思想のもとオリジナルサイトのデザインを６ステップに分けて作っていきます。

「デザイン制作」の６ステップ

設計はざっくり以下の６ステップで考えます。

• ステップ１：カラーとフォントは「ロゴ」からざっくり決める
• ステップ２：既存Webサイトをたくさん見ていいなと思うサイトをピックアップする
• ステップ３：いいなと思うWebサイトを模写して今回の依頼主イメージに変換してみる
• ステップ４：オリジナルサイトで利用する「写真」選び
• ステップ５：デザインの方向性決定後「レイアウト、配色、書体」を決めてトップページデザインを作り上げる
• ステップ６：下層ページもトップページと同じテイストで作っていく

この流れでどうやって進めていったかを書いていきます。

ステップ１：カラーとフォントは「ロゴ」からざっくり決める

まず依頼主から「企業ロゴ」だけをもらった状態であることはその１「企画」でお伝えした通りです。

「企業ロゴ」のフォント、カラーから全体のフォント、カラーもざっくり決めました。企業ロゴの色はブランドカラーにもあたります。

というロゴだったとします。（すみません、このロゴもどきテキストに色付けしただけです。ロゴと思ってみてください）

実際のロゴの色合い、フォントの印象もこんな感じでした。ロゴがあればまずロゴからデザインイメージを考えます。

フォントはゴシック体でカラーは青、紺、紫くらいで全体を作っていこう、とここで思います。

（ロゴから制作依頼される場合はまた別ですが初心者がロゴ制作から請け負うのは難易度高いです。）

ステップ２：既存Webサイトをたくさん見ていいなと思うサイトをピックアップする

今回の目的、業態業種に合うWebサイトをとにかくたくさんみます。

見て見てみまくります。Webサイトギャラリー、競合他社Webサイト、Pintarest（ピンタレスト）、見れるサイトはとにかく見ていきます。

そこから

これいいな、こんな印象のデザインなら依頼主は喜ぶだろうな

と思ったサイトをピックアップ（サイトを選別）していきます。僕はそのサイトのURLをEvernoteに保存しまくりました。

ステップ３：いいなと思うWebサイトを模写して今回の依頼主イメージに変換してみる

ここからデザイン制作ということで手を動かしていきます。

こんな感じのデザインが今回の要件に合っている、と思ったサイトを見ながら「模写」します。

ただの「模写」ではなく

• ロゴとキャッチコピー、テキスト、図、写真を入れ替える。
• カラーを色々変えてみる
• フォントも変えてみる
• レイアウトを変えてみる
• 別々のサイトのいいところを組み合わせてみる

こんなことを意識して「模写変換」していきます。

自分が作ったのは以下のような感じです。デザイン経験０状態で作った模写サイトですので今見返すとちょっと微妙だったりしますがこんなのをあと10個以上作りました。トップページデザインです。

あとは、これらトップページデザインイメージを依頼主に見せて依頼主のイメージに合うものを選んでもらった、ということになります。

下層ページはトップページのデザインが決まればそれに合わせて制作していきます。

ステップ４：オリジナルサイトで利用する「写真」選び

写真はWebサイトの印象を決めるので重要なコンテンツになります。

代表の写真とか会社外観写真などは依頼主からもらいました。

ただ、写真が足りないのでストックフォト（写真を有料無料でダウンロードできるサービス）で写真を入手することにしました。

僕はこのときは「envato elements」という海外のサイトを使いました。低料金でダウンロードし放題。スクールメンターからオススメされたからです。

完全オリジナル写真が必要ならばプロのカメラマンに依頼して写真撮影をしてもらうことになりますが、こちらで手配するも依頼主で直接依頼してもらうのも場合によりますね。

ステップ５：デザインの方向性決定後「レイアウト、配色、書体」を決めてトップページデザインを作り上げる

ざっくり方向性が決まったらここから詳細詰めていきます。

「企画」の最後で整理したサイトコンセプトを思い出し

「Who×What×How（誰に、何を、どうやって）」

を再確認しながら、

「レイアウト、配色、書体」

を固めていきます。

• レイアウトはワイヤーフレームの通りにして余白をきっちりとってグリッドもキレイにそろえて見やすさ重視！で考えました。
• リンク部分は長方形で囲い中に矢印マークを入れることでリンクであることの視認性を高めました。
• ロゴカラーをベースにアクセントカラーもシックにおさえめな配色にして全体的に高級感を出そうと考えました。
• 書体については、日本語は「ゴシック体」英語は「セリフ体（文字の先端小さな飾りのことをセリフという）」と変えてゴシックの見やすさとセリフ体の格調高さをフォントで表現してみました。

そんなことを考えてトップページは以下の通り作りました。

ステップ６：下層ページもトップページと同じテイストで作っていく

トップページができれば下層ページ制作に進みます。

下層ページは構成として同じレイアウト構成になることが多いのでまず１ページ作り上げます。「特徴」ページをまず作りました。

図はIllustratorで作りました。概念を図にすると見やすいのは見やすいんですけど図は作るのムズイ！図やイラストは外注してもいいかなぁ、と思ったりしますが依頼主がOKと言ってくれたのでこれでよしとしました。

ここまでくれば全体のパターンが見えたので下層ページを一気に作っていきます。

その２「設計」の記事でもお伝えした通り２階層目の目次的ページ（事業内容まとめページ）はこんな感じで。

事業内容個別ページ（３階層目）はこんな感じ。自分が今どこのページを見ているのか、一目でわかるような図を入れることを考えてみました。とにかく見やすさと分かりやすさがこのサイトのコンセプトなのだと考えながら作ってました。

まとめ：デザインは情報の整理

この記事内容はデザイン未経験者が最初に作ったオリジナルサイトの作り方の紹介です。本業で何年もされている方はもっと効率いいやり方をされたりパパッと作れたりするのかもしれません。

でもデザイン経験なしでも手順をふんでまあまあそれなりのものができたと思うんですけどどうでしょう。

ここまでくるとWebデザインは論理の積み上げなんだな、と思ってきました。

情報を整理して見ている人に分かりやすく情報を届けて行動に移してもらう、ということ。

デザイントレンドも見ていかないと古臭いなぁ、と思われたら離脱されるのでそこは感覚磨かないといけないな、と思います。

あと個人的感想としては、

デザインはオリジナリティが出るところがいい！

なんやかんやで自分のオリジナリティというのはにじみでてきます。形になって残るのがいいですよね。

次は、「コーディング」手順を制作事例から7ステップでご紹介【Web制作の流れ④】に続きます。

この記事はここまでです。