【初心者向け】WEBサイト制作の流れ|デザイン前の基本を解説

paws-img
デザインTIPS

【初心者向け】WEBサイト制作の流れ|デザイン前の基本を解説

WEBサイトのデザインをしたいけど、「何から始めればいいのか分からない」「いきなりデザインしていいの?」と悩んでいませんか?

実は、WEBサイト制作はデザインに入る前の“準備段階”がとても重要です。この工程をしっかり押さえておくことで、完成後のクオリティや成果に大きな差が生まれます。

この記事では、初心者の方でも分かりやすいように、WEBサイト制作に入るまでの基本の流れとを解説していきます。

これからWEB制作を始めたい方や、進め方に不安がある方は、ぜひ参考にしてみてください。

①コンセプトを決める

まずはデザインのコンセプト決めをします。

大切なのは「5W1H」の「いつ・どこで・誰に・何を・どのように」と、

目的とターゲットを決めコンセプトを設定します。

②情報の整理

コンセプトを決めたら、伝えたい情報を整理していきます。

例えば:コンセプトが「同業の方に情報を届けたい病院サイト」であれば診療内容や、実績などがしっかり伝わる情報が必要です。

「地域の方に愛される病院」ということを病院に来られる方に知ってもらいたいということであれば、 暖かい雰囲気が伝わるように、病院内の様子や、先生の人柄が分かるような情報が必要です。

③必要素材を集める

上記のことを整理した後はWEB制作に必要な素材を集めていきます。

画像

ターゲットやクライアントの意向に合わせた雰囲気を表現するために、必要に応じて新たに写真を撮影したり、イメージに合った写真素材を選定します。

イラスト・アイコン

必要があればイラストやアイコンも挿入します。

ターゲットやクライアントの意向に合わせた雰囲気を表現するために、必要に応じてオリジナルのイラストを制作したり、コンセプトに合ったイラスト素材を選定します。

フォント

企業の雰囲気に合わせてフォントも選んでいきます。場合によっては有料フォントをダウンロードして使用したりもします。

長い文章を手書きフォントなど特殊な文字で全てデザインしてしまうと、どこが大切な箇所か分かりずらい上に読みにくい印象を与えてしまいます。

長文なら読みやすいように、多くのサイトで使われている、Noto SansやNoto Serifなどのフォントを使用したり、

目立たせたい箇所やタイトルなどは、手書きフォントや特殊文字などを使用したりして、

フォントを分けて使用することをお勧めします。

詳しいフォントの決め方は「WEBデザインにおける定番フォント8選」のブログ記事を参考ください。

ホームページの色は企業のイメージを直感的に決める大切な箇所です。

落ち着いた雰囲気なのにたくさんの色を使ったカラフルなサイトを制作したり、

明るい雰囲気なのに、黒やグレーなどの暗めの色を多く使ったデザインを制作したりしてしまうとうまく企業のイメージを伝えることができません。

詳しいカラーの決め方は「WEBデザインにおける配色の考え方」のブログ記事を参考ください。

上記の工程経てデザインツール上でのデザイン制作に入っていきます。

最後に

ここまで、WEBサイト制作におけるデザイン前の流れについて解説してきました。

一見すると「早くデザインを作りたい」と思いがちですが、目的の整理や構成設計といった準備を丁寧に行うことで、結果的に質の高いサイト制作につながります。

特にデザインを始めたばかりの方は、この“土台づくり”を意識するだけで、迷いが減りスムーズに制作を進められるようになるかと思います。

今回ご紹介した流れを参考にしながら、ぜひ自分なりのWEB制作方法を探していただけたらと思います。

最後までお読みいただき、ありがとうございました。

執筆責任者

著者画像

Kato -WEBデザイナー

建築設備設計士として約4年働いた後、Anilaboにデザイナーとして入社
ホームページやチラシなどデザイン全般を担当