知っておきたいWebデザインの知識！Webサイトってどうやって作るの？

こんにちは！ルーツ八王子です😊

今回はWebデザインについてお伝えしていきます🎨

 

Webサイトを作ってみたい！Webデザインを学んでみたい！と思うけど、そもそもWebサイトってどうやって作るんだろう…？と疑問に思うことはありませんか？

そこで今回はWebサイトの作り方についてお伝えしていきます！

 

Webサイトを作る方法は実はひとつではありません！

大きく分けると完全にゼロから制作する方法と、WordPressやWix などのサービスを活用して制作する方法の２パターンに分かれます！

今回は完全にゼロから作る方法について簡単にお伝えしていきます💻

 

Webサイトの制作ステップは以下のようになっています！

 

①目的設定

②ワイヤーフレームの設計

③デザインカンプ制作

④実装

⑤サーバーアップ

 

ひとつずつ詳しく見ていきましょう！

 

①目的設定

サイト制作において、実はここが一番重要なポイントです！

ただなんとなくサイトを作るのではなく「そもそも何のためにサイトを作るのか？」を決めておくことが大切です！

例えば…「サイトからのお問い合わせを増やしたい！」「集客を増やしたい」「サービスの世界観を伝えたい」などです。

最初の目的設定がずれてしますと、でき上がったサイトが思っていたものと全く違う！なんてことが起こってしまいます。

 

②ワイヤーフレームの設計

目的設定ができたらいよいよデザインを作りたい！と思うかもしれませんが、その前にワイヤーフレームを設計する必要があります。

 

ワイヤーフレームとは？

Webページのレイアウトを決めるための設計図です。

実際のデザインや実装に入る前に作成することで、完成イメージを「見える化」することが目的です。

本格的な絵を描く前のラフのようなイメージです。

 

 

事前にワイヤーフレームを作っておくことで、作業に入ってから「項目が足りていなかった」「見づらくて作り直しになった」といったトラブルを防ぐことができます。

またパソコン、タブレット、スマートフォンなどと、さまざまな画面サイズのデバイスでサイトを見るため、それぞれのサイズに合わせたワイヤーフレームを作っておく必要もあります。

 

ワイヤーフレームはPhotoshopやXD、Figmaのようなツールを使って作ることもあれば、手書きで作成することもあります。

 

③デザインカンプの制作

ワイヤーフレームが完成したら、実際のデザインを作っていきます。

デザインカンプとは、デザインの完成見本のことです。

デザインカンプはPhotoshopやXD、Figmaのようなツールを使って作っていきます。

使うツールはクライアントや会社に指定されることもあれば、自分で好きなものを選択できることもあります。

そのため自分が使いやすいツールを見つけておくと便利です！

またワイヤーフレーム同様に、タブレット、スマートフォンなどと、それぞれの画面サイズそれぞれのサイズに合わせたデザインカンプを作るようにしましょう。

 

④実装

デザインができたら次は実装をしていきます！

実装を行うことで、作ったデザインをサイトに反映させることができます。

実装をするために、コーディングという作業をしていきます！

 

コーディングとは？

プログラミング言語を使って、コードを記述していく作業のことです。

プログラミング言語はさまざまな種類がありますが、サイト制作ではHTMLとCSSという言語を必ず使います。

そのほかにも必要に応じて、JQueryやJavaScriptなどの言語を使います。

 

こちらの作業も同様に、タブレット、スマートフォンなどと、それぞれの画面サイズそれぞれのサイズに合わせて行っていきます。

 

⑤サーバーアップ

実装まで終わったら、作ったサイトが誰でも見られるようサーバーアップを行っていきます。

この作業をしないと、実際にサイトを制作したパソコンの中でしか閲覧ができないままです。

レンタルサーバーを契約して、設定を行います。

 

 

 

ここまでの一連の作業を行うことでWebサイトの制作が完了します！

Webサイトの制作のイメージ掴めたでしょうか？

 

Webサイトの制作は複数のステップからなるため、１から学んでみることはもちろん、一番興味がある部分から勉強することもおすすめです✨

例えばデザインすることに興味のある人はデザインから学んでみる、プログラミングに興味がある人はHTMLやCSSから学習してみるなどです。

ぜひみなさんが興味のある部分から、Webデザインについて学んでみてくださいね💻

 

 

 

ルーツでは、相談・見学や体験をいつでも受け付けています◎

ルーツの公式LINEからもお問い合わせできます！

下記より追加できますので、ぜひお気軽にご連絡ください。

 

 

 

ルーツ八王子

【最寄り駅】

JR中央線・横浜線・八高線「八王子駅」北口から徒歩5分

（地図はコチラ！）

【住所】

〒192-0081

東京都八王子市横山町3-6  JEビル3階

【電話番号】

042-649-9037