初めてWebサイトを作ってみて分かったこと｜初心者がカフェサイトとジムLPを作って感じたこと

Web制作を勉強していると、参考書や教材を見ながらコードを書いたり、サンプルを参考にしてWebページを作ったりすることがあります。

私も最初は、参考書を見ながらコードを書いて、少しずつHTMLやCSSなどを勉強していました。

しかし、実際に自分でデザインを考えて、ページ全体を一から作ってみると、思っていた以上に難しいことがたくさんありました。

私が初めて作ったのは、架空のカフェサイトと架空のジムLPです。

実際のお店やジムのサイトではありませんが、それぞれのサイトの目的を考えながら、自分なりにデザインや構成を考えて制作しました。

今回は、初めてWebサイトを作ってみて感じたことや、制作を通して分かったことを記録していきます。

初めてWebサイトを作るまで

Web制作を勉強し始めた頃は、HTMLやCSSなどのコードを覚えることに意識が向いていました。

参考書を見ながらコードを書いて、表示結果を確認する。

分からないところがあれば調べて、またコードを書いてみる。

そうやって少しずつWeb制作の基本を学んでいきました。

ただ、参考書を見ながら作るのと、自分でページ全体を考えて作るのでは、難しさが大きく違いました。

見本がある場合は、

「ここに見出しがある」

「ここに画像を置く」

「このようなレイアウトにする」

といった基準があります。

一方で、自分で作る場合は、どこに何を配置するのかも自分で考えなければなりません。

そこで、実際にWebサイトを作ってみることにしました。

最初に作ったのは架空のカフェサイト

最初に制作したのは、架空のカフェサイトでした。

カフェサイトを作るときに特に意識したのは、お店の雰囲気に合わせたサイトデザインにすることです。

カフェには、それぞれのお店によって違った雰囲気があります。

落ち着いたカフェなのか、明るく親しみやすいカフェなのか、シンプルでおしゃれなカフェなのか。

同じカフェというテーマでも、イメージによってデザインは変わってくると思います。

そのため、ただ情報を並べるのではなく、

「このお店ならどんな雰囲気が合うだろう？」

と考えながらデザインすることを意識しました。

お店の雰囲気をサイトで表現する

カフェサイトでは、色や文字、余白、画像などを使って、お店の雰囲気が伝わるように考えました。

Webサイトを見たときに、

「どんなお店なんだろう？」

「どんな雰囲気なんだろう？」

ということが想像できるようなデザインを目指しました。

単純に見た目を整えるだけではなく、サイト全体からお店のイメージが伝わることを意識しました。

実際に行ってみたいと思えるサイトを目指した

もう一つ意識したのが、サイトを見た人が実際にそのカフェへ行ってみたいと思えることです。

お店の情報を載せるだけではなく、

「このカフェに行ってみたい」

と思ってもらえるような見せ方を考えました。

この経験から、Webサイトは単に情報を表示するだけではなく、見る人にどのような印象を持ってもらいたいのかを考えることも大切なのだと感じました。

次に架空のジムLPを作ってみた

カフェサイトの制作を経験した後、次に架空のジムLPを制作しました。

LPは、通常のWebサイトとは少し違い、特定の商品やサービスなどを紹介して、問い合わせや申し込みなどの行動につなげることを意識する必要があります。

そのため、カフェサイトとはまた違った難しさがありました。

ジムLPではキャンペーンの良さを伝えることが難しかった

ジムLPを作るときに特に難しいと感じたのが、キャンペーンの良さをどう伝えるかということでした。

キャンペーンの内容を掲載するだけなら、それほど難しくありません。

しかし、

「このキャンペーンはどんなところが魅力なのか」

「どのように見せれば興味を持ってもらえるのか」

を考えると、単純に情報を載せるだけでは足りないことに気づきました。

情報の順番や見せ方、文字の大きさ、余白などを調整しながら、キャンペーンの魅力が伝わるように考える必要がありました。

料金表を見比べやすくするのが難しかった

もう一つ難しかったのが、料金表のデザインです。

ジムには複数の料金プランがあるため、それぞれの違いを分かりやすく伝える必要があります。

料金をただ並べるだけでは、

「どのプランが違うのか」

「どのプランを選べばいいのか」

が分かりにくくなってしまいます。

そこで、料金やサービス内容を比較しやすくするためには、どのような配置にすればいいのかを考えました。

実際に作ってみると、情報を載せることよりも、情報を分かりやすく整理して見せることのほうが難しいと感じました。

この経験は、Webデザインについて考えるきっかけにもなりました。

参考書を真似るのと、自分で作るのは違った

カフェサイトやジムLPを作って、一番強く感じたのが、

参考書を見て真似しながら作ることと、自分でデザインから考えて作ることは全く違う

ということでした。

参考書を見ながら制作すると、基本的には見本があります。

そのため、

「ここにはこのコードを書く」

「ここにこの要素を置く」

という判断をしやすくなります。

しかし、自分で一から作る場合は、そうはいきません。

配置を考えるのが難しかった

自分でデザインを考えてみると、

「この要素はどこに置けばいいんだろう？」

「この画像の大きさはどれくらいがいいだろう？」

「ここに情報を追加すると、全体が詰まって見えないだろうか？」

など、考えることがたくさんありました。

一つ一つのパーツを作ることができても、それらをページ全体に配置すると、思ったような見た目にならないこともあります。

コードを書く知識だけではなく、ページ全体を見る力が必要なのだと感じました。

全体的な見やすさを調整するのが難しかった

特に難しかったのが、ページ全体の見やすさです。

例えば、見出しや画像、文章、ボタンなどをそれぞれきれいに作ったとしても、全体として見たときにバランスが良いとは限りません。

余白が少なすぎると窮屈に見えます。

逆に余白が多すぎると、情報が離れて見えることもあります。

文字の大きさや画像のサイズ、各セクションの間隔なども調整する必要があります。

実際に制作してみて、

「パーツをきれいに作ること」と「ページ全体を見やすく作ること」は別の難しさがある

と感じました。

Web制作はコードを書くことだけではなかった

Web制作を勉強し始めた頃は、HTMLやCSSなどのコードを覚えることが重要だと思っていました。

もちろん、コードの知識はWeb制作をするうえで大切です。

しかし、実際にサイトを作ってみると、それだけではありませんでした。

例えば、

• どんなデザインにするか
• 情報をどの順番で見せるか
• どこに画像を置くか
• どれくらい余白を取るか
• どこにボタンを配置するか
• スマートフォンではどう見えるか
• 見る人に何を伝えたいか

など、考えることがたくさんあります。

実際にページ全体を作ってみたことで、Web制作はコード・デザイン・情報設計などを組み合わせて一つのページを作っていくものなのだと実感しました。

実際に作ることで覚えやすくなった

Web制作を勉強していると、分からないことがたくさん出てきます。

最初は参考書を読んで理解したつもりでも、実際に使ってみると、

「これはどうやって配置するんだろう？」

「なぜ思った場所に表示されないんだろう？」

と疑問が出てきます。

そこで調べて、試して、修正する。

この繰り返しをすることで、少しずつ理解できるようになりました。

実際に使う場面があることで、

「このコードはこういうときに使うんだ」

と分かることもあります。

そのため、Web制作では知識を覚えるだけではなく、実際に使ってみることが大切だと感じました。

作ってみて初めて分かったこと

カフェサイトとジムLPを制作して、いくつかのことに気づきました。

完璧に理解してから作る必要はない

Web制作を始めたばかりの頃は、

「もっと勉強してから作ったほうがいいのでは？」

と思うこともあります。

しかし、実際には作り始めると分からないことが出てきます。

その分からないことを調べながら進めることで、新しく覚えられることもたくさんあります。

最初からすべてを理解する必要はなく、分からないことが出てきたら、その都度調べながら作っていくことも学習の一つだと思うようになりました。

自分でページ全体を作る経験が大切

今回の制作で特に感じたのは、参考書を真似して勉強するだけではなく、自分でページ全体を作る経験が大切だということです。

参考書を見ながらコードを書くことは、HTMLやCSSなどの基本を学ぶためにとても役立ちます。

一方で、自分でデザインを考えてページを作ると、

「どこに配置するのか」

「どのくらい余白を取るのか」

「どの情報を目立たせるのか」

など、自分で判断しなければならないことが増えます。

その難しさを実際に経験したことで、参考書で学んだ知識がどのようにWebサイト制作につながっているのかも少しずつ分かるようになりました。

Web制作は修正の繰り返し

最初から思った通りのサイトが完成するわけではありません。

実際に表示してみて、

「ここは少し詰まっている」

「この部分は見にくい」

「もう少し余白を取ったほうがよさそう」

と感じることがあります。

そこから修正して、また確認する。

この繰り返しがWeb制作なのだと感じました。

カフェサイトとジムLPで学んだこと

今回、違う目的のWebページを作ったことで、サイトの目的によってデザインで意識することも変わると分かりました。

カフェサイトでは、

お店の雰囲気を伝えて、実際に行ってみたいと思ってもらえること。

ジムLPでは、

キャンペーンの魅力を伝えて、料金などの情報を分かりやすく比較できること。

を意識しました。

同じWeb制作でも、目的が変われば考えることも変わります。

この経験から、Webデザインでは「きれいに見えるか」だけではなく、そのページで何を伝えたいのか、見た人にどう感じてもらいたいのかを考えることが大切なのだと学びました。

初めてWebサイトを作る人へ

これからWeb制作を始める人には、勉強と一緒に実際の制作にも挑戦してみることをおすすめします。

最初は難しく感じると思います。

思ったように配置できなかったり、コードを書いても表示が崩れたり、デザインがうまくまとまらなかったりすることもあります。

それでも、一度自分でページ全体を作ってみると、参考書を読んでいるだけでは分からなかったことに気づけます。

架空のカフェでも、ジムでも、美容室でも、学校でも構いません。

まずは一つ、自分でテーマを決めてWebサイトを作ってみる。

そして、作りながら分からないことを調べていく。

この経験が、Web制作を学ぶうえで大きな一歩になると思います。

Web制作で使っているツール

実際にWeb制作をしていく中では、コードを書くためのエディタや、デザインを考えるためのツールなど、さまざまなツールを使うようになりました。

私がWeb制作で使っているツールについては、こちらの記事でも紹介しています。

関連記事：Web制作で使っているツールを紹介｜初心者向けおすすめ環境

VS Codeについては、実際に使い始めて感じたこともまとめています。

関連記事：VS Codeを使い始めて感じたこと｜初心者におすすめな理由

また、Web制作で使える無料ツールやサービスについてはこちらにまとめています。

関連記事：Web制作に便利な無料ツール・サービスまとめ【初心者向け】

Webサイト制作の基本的な流れについて知りたい場合は、こちらの記事も参考にしてみてください。

関連記事：Webサイト制作の基本的な流れを初心者向けに解説

これからも実際に作りながら学んでいきたい

今回、架空のカフェサイトとジムLPを作ってみて、Web制作は「コードを覚えるだけ」ではないことを実感しました。

デザインを考え、情報を整理し、実際にページへ配置してみる。

そして、表示を確認して、見にくいところや気になるところを修正する。

その繰り返しの中で、少しずつWeb制作について分かることが増えていきました。

これからも、いろいろなWebサイトを実際に作りながら、HTMLやCSS、JavaScriptだけでなく、Webデザインやユーザーにとっての見やすさについても学んでいきたいと思います。

まとめ

今回は、初めてWebサイトを作ったときの経験についてまとめました。

最初に作ったのは架空のカフェサイトと架空のジムLPです。

カフェサイトでは、お店の雰囲気に合ったデザインにすることや、サイトを見た人が実際に行ってみたいと思えることを意識しました。

ジムLPでは、キャンペーンの良さを伝えることや、料金を見比べやすくすることが難しいと感じました。

そして、制作を通して特に感じたのが、参考書を見て真似しながら勉強することと、自分でデザインからページ全体を作ることは違うということです。

自分で作ってみると、配置や余白、情報の見せ方など、実際に制作してみなければ分からない難しさがあります。

だからこそ、Web制作を学ぶときは、参考書や教材で知識を身につけるだけではなく、実際に自分でページ全体を作ってみる経験も大切だと感じました。

これからも「ゆるり、学んで、つくって。」を大切にしながら、少しずつWeb制作の経験を積んでいきたいと思います。