【初心者必見】これからWebサイト作成をしたい人がやるべき5個のこと

Webサイト制作とはそもそも何か？

Webサイト制作って具体的には何をすることなの？どんな知識や道具があればWebサイトが作れるの？Webサイトの制作の流れを追いながら、必要な道具や知識を確認していきましょう！

Webサイト制作の流れ

Webサイトは主に、このような流れで制作されています。（あくまでも、制作の流れの一例です。必ずしも、これに従う必要はありませんよ）

1.コンテンツの検討

それでは、ひとつひとつ見ていきましょう。 まずは、どんな内容を持ったWebサイトにするか？を検討します。友人の店舗のサイトだったり、趣味のサークルの活動紹介サイトだったり、自分のスキルをアピールする自己紹介サイトだったり。いろいろな目的でWebサイトを作ることと思います。

サイトの各ページに何を書くか考えて、こんな図(サイト構成図といいます)を作ります。今回は、着物レンタルショップのWebサイトを作成するのが目的です。

各ページに書く文章も練っておくと良いですね。

2.デザイン

1で作った構成図をもとに、各ページのレイアウトをデザインをします。こんなサイトデザインにしてみました。まだ、手書きでもオッケーです。

3.画像作成

2で作ったデザインを、Webサイトで利用できるようにパソコン上で画像として作成します。必要であれば、ロゴやアイコンも別途作成します。プロのWebデザイナーが使っているのはPhotoshopなどの画像作成・加工ソフトです。ロゴ作成や文字作成には、illustratorなどのドロー系ソフトを使うこともあります。最近は、画面全体を画像化・動画化したりなど、ダイナミックに使ったWebサイトが流行しているようです。

ラフデザインをもとに画像化したのがこちら。

さらに、作成した画像はWebサイトで利用しやすいように分割(スライスと言います)したり、部品ごとに切り分けたりして準備しておきます。

4.コーディング

Webサイトの内容を、ブラウザで閲覧できる言語であるHTMLを使って整えます。この作業をコーディングと言います。 HTMLはHyper Text Markup Languageの略で、文章を見やすくするため体裁を整える目的で開発された言語です。そのまま表示するとこんな感じ。

ブラウザはHTMLを解析して、命令通りに表示します。上のHTMLはこうなります。

HTMLの役割は、文章を記述したり、3で作成した画像を表示させたりすることです。そして文字や画像の大きさや体裁、装飾をつかさどるのはCSSと呼ばれる言語です。こちらが、CSSを適用した先ほどの画面です。

また、ボタンを押した時の動作など画面上でのインタラクティブな動きを指定することができるのは、JavaScriptと呼ばれる言語です。これらを組み合わせて、ブラウザで思った通りの画面が表示されるようにWebサイトをコーディングしてゆきます。

コーディングには、タグの入力を補助したり、プレビュー画面が表示される機能があるような、開発用エディタを使用すると便利です。コーディングが完了したら、きちんとページが動作するかブラウザで表示してテストをしましょう。

5.サーバーにアップロード

Webサイトも、作成しただけでは他の人は閲覧できません。作成したWebサイトは、サーバーと呼ばれる、世界に公開されているデータ置き場のマシンにアップロードしなくてはなりません。

多くの方は、アップロードする場所をレンタルされることでしょう。レンタルサーバーを使用するための登録設定や利用するための知識が必要です。

6.公開！

無事、あなたのWebサイトが公開されました。おめでとうございます。

これからWebサイト制作をしたい人がやるべき5個のこと

Web制作の流れがつかめたところで、必要なスキルがイメージできましたでしょうか。これからWebサイト制作をしたい人は、以下の学習を始めてみましょう！

HTML/CSS

HTML、CSSを使ってWebサイトをコーディングします。画像のないページやシンプルなページを作る際にもHTMLは必須となりますので、まずHTMLから習得するのも良いでしょう。

こちらも参考にしてください！
【レベル別】HTMLの学習に役立つサイト8選
基礎からわかる！ゼロからのHTML入門講座
【初心者向け】CSSを概要から書き方のサンプルまで詳しく解説

画像加工ソフト

Webサイトのデザインをパソコン上で書き起こしたり、使用する写真を加工したり、イラストを作成するのに使います。プロはPhotoshopやillustratorを使うことが多いですが、似た機能を持った安価なソフトや無料のソフトもありますので、予算に合わせて探してみるとよいでしょう。

こちらも参考にしてください！
【入門編】Photoshopの学習に役立つサイト11選
【入門編】Illustratorの 学習に役立つサイト10選
無料なのに高機能！デザイナーに選ばれている画像編集ソフト8選

JavaScript

JavaScriptを使えると一歩進んだ楽しいWebサイトが作成できます。写真を複数枚順番に表示させたり、クリックしたらズームアップしたりなどのよく見られる機能はJavaScriptを利用しています。

こちらも参考にしてください！
初心者必見！JavaScriptとは？最新の動向まで細かく解説！

アップロードの知識

レンタルサーバーに登録、契約したり、アップロードする方法を知っておきましょう。

こちらも参考にしてください！
HTML初心者必見！Webページの仕組みをわかりやすく説明！

流行のデザインを知っておく

Webサイトにはデザインに流行があります。新鮮で見やすいデザインのWebサイトは人気があり、閲覧数が多くなるでしょう。古臭くて見づらいWebサイトでは、内容が良くても人気がでないかもしれません。

素敵だな！と思うWebサイトを閲覧したり、HTMLを表示させてどのようにコーディングされているのか確認したりして、センスを磨くように心がけてみましょう。

まとめ

いつも見ているWebサイトが、思っていたよりたくさんの技術や思いを持って作られていることに驚かれたのではないかと思います！たしかに、Webサイト制作に際して必要になる知識は幅広いです。でも、決して遠い道のりではありません。

完璧でなくても、誰でもどんどん公開できるのがWebサイトの良いところです。色々な知識や技術を少しずつ取り入れて更新し、成長していきましょう。

まずはHTMLを書いて、ブラウザに表示させてみてください。きっと新しい世界が広がりますよ！