こんにちは！たく丸です！
今回はサイト制作の流れをご紹介していこうと思います。
いざWEBサイトを作りたいと思っていてもどうやって作ればいいかわからない方が多いのではないでしょうか？？
本来ホームページ作成はそこまで難しいものではありません。
今回はステップごとにまとめて見ましたのでご紹介致します。
そのステップが下記になります。
まずは企画を考える
まずはどのようなWEBサイトを作成するか考えます。
WEBサイト作成の目的を明確にし、掲載する内容を決めていきます。
「そもそもWEBサイトはなぜ必要なのか？」
「本当に必要なのか？？」
という具体的な部分をはっきりさせる必要があります。
次にその目的を達成させるためにサイトに必要な内容を考えていきます。
例えば会社のサイト（コーポレートサイトとも呼びます）であれば
「事業内容」や『アクセス情報」問い合わせるための「連絡先」「お問い合わせフォーム」などのコンテンツが必要になってきます。
会社はどのような事業をしていて、ユーザーが気になりこの会社と取引をしたいと思ったときに、連絡することができる情報を掲載しておく必要があります。
上記のようにそのサイト制作の目的達成のために必要な項目をより綿密に洗い出すことで自分の目標を達成に近くサイト制作をすることが可能になります。
WEBサイトの設計を考える
ステップ１の「企画」が終われば次は骨組みとなるWEBサイトを設計設計するステップに移ります。
先ほど企画した情報を基に各カテゴリーごとにまとめていき関連づけ構成を組み立てていきます。
企画した情報を種類ごとにまとめて関連づけて構成を組み立てていきます。
サイト全体の構成が決まったら、トップページの構造を設計し、次に下層ページの構造を決めていきます。
この設計を決める設計図はWEB業界ではWF（ワイヤーフレーム）と呼ばれており、サイト制作に欠かせないものです。
WFを基にデザインする
設計が終われば制作に入っていきます。
まずはWEBサイト全体の配置や配色、使う文字フォントなど細かいところまで詰めて決めていきます。
ここで先ほど「設計」の段階で作成したWFをベースデザインを仕上げていきます。
さらにデザインを良く見せるテクニックもあわせてご紹介致します。
・使用する色は３色以上使わないこと
・余白を意識してデザインすること
・メリハリをつけて、強弱のあるデザインに
・整列方法を揃えること
使用する色は３色以上使わないこと
１つのWEBサイトに複数色使用すると、サイト全体に統一感がなくなるのと同時に非常に安っぽいイメージ（少し古いイメージ）を与えてしまいます。
メインとなる色を1色ないし2色で差し色としてもう１色ぐらいのバランスがちょうど良いかと思います。
余白を意識してデザインすること
よくある失敗例として「余白」が少ないサイトを見かけます。
「余白」＝「隙間が空いてて、内容が少なく手抜きのWEBサイト」と思っていませんか？
実際にこう考える方もいてるのかもしれませんが、情報がいっぱい載っている＝ユーザーにとっていいサイトではありません。
本当にユーザーのために見せたいサイトを作成したいのであれば「余白」を十分に使用し、その中でデザインすることをお勧めします。
メリハリをつけて、強弱のあるデザインに
デザインにはメリハリが必要です。
特に目立たせたいところにはインパクトのある画像や大きい文字を使って表現することは大事です。
ただ全部見せたいから全部大きく！っていうのはメリハリがなくWEBサイトを訪問したユーザーにもすぐにサイトから離脱されてしまいます。
メリハリを利かせたデザインを意識していきましょう。
整列方法を揃えること
整列方法とはどこにあわせてデザインをするかということです。
「この行のテキストは左寄せ」「この行は真ん中」「ここは右寄せ」などバラバラに揃えているとユーザーが見ていてしんどいです。
また高さが不揃いな画像なども同様にユーザーにはいい印象を与えないので要注意です！
よほどのことがない限り整列方法は揃えて見やすいサイト作りを意識しましょう！
以上のことを気をつけるだけでも見違えるぐらいデザインが良くなるのでぜひチャレンジして見てください！
デザインを基にコーディングをする
デザインが完了するとWEBブラウザで閲覧できるようにする為に、コーディングをしていきます。
ここでは詳しい紹介はしませんが、主に「HTML」や「CSS」、「Javascript」などの言語を用いて、記述していきます。
ここまでできて初めてサイトをブラウザ上で閲覧できるようになります。（実際には違いますが…笑）
※実際にはインターネットに公開する必要があります。
まとめ
以上がWEBサイトを制作する一連の流れになるかと思います。
WEBデザイナーやフロントエンドエンジニアを目指している方でもこのフローを知っておくだけでも全然違うかと思います。
一連の流れを把握して今後のWEB制作に役立てていきましょう！
