Webページ制作の流れをまとめてみたその１（HTML、CSS）

HTMLとCSSでWebページを作る授業を取っているのですが、そこで配られた手順の資料がわかりやすくていいなと思ったので、紹介したいと思います。

エイチティーエムエルとシーエスエスとはなんぞやっていうのを超雑に説明すると、

• HTML…サイトの構造を書くやつ

• CSS…サイトのデザインを書くやつ

って感じです。

他にも色々と書くやつはありますが、書くやつで書くと、自分でWebページが作れちゃうよ！ってことです。

紹介するのは、Webページを作るにあたって企画から公開までの流れです。

作るぞ～って意気込んで作るのはいいんですが、まず、何から手をつけていいかわからない…って事があったりしません？

作りたいもののテーマと全体のサイトマップみたいなのだけでもざっくりあるだけで、今やってる事の目的が明確になるので頭の中を整理するためにも有効かなって思います。

やり方は人それぞれあると思いますが、私も勉強中の身なので勉強がてらまとめておこうと思います。

1.企画

まず、なにを目的としたページを作りたいのかを決めます。

はっきりしたテーマやコンセプトがあると作っていくのが楽になりそうですね。

特に以下のポイントを意識すると良いみたいです

• 誰が誰（ターゲット）に伝えるのか
• 趣味や興味があることをテーマにすると書きやすい
• サイト全体を一言で表すタイトルを考える
• どんなページにしたいか

2.情報のデザイン

ここが山場かも～ヒィ～

情報を収集しそれをどんどん書き出していきます。

箇条書きでガリガリ書きます。

思いつくままに書き出していくのがポイントです。

詳しい内容までしっかり書き込んでおくと後々ラクです。

次に、書き出した情報をグループ化して整理して行きます。

内容をポイポイ仕分けしちゃいます。

そしてグループ化した情報に見出しをつけていきます。

これってなんのこと言ってんねんって言いながらペタペタラベル付けです。　　

　→この時、Wordのアウトラインっていう機能を使うとスッキリしていい感じにグループ化できます。めっちゃ便利。

そしたら、見出しや段落をHTMLによる記述を考えて、ページの構造を決定します。

このページのこの文字は大きくしたいからh2ぐらいにしよっかな〜って妄想します。

なんとなくイメージができてきたら、簡単にサイトマップを書いてみます。　

設計図ですね。アウトプットアウトプット〜

スマホだけどこんなのも参考になりそう。

techlife.cookpad.com

　ここまで来たらあと少し？

3.表現のデザイン

見た感じをどんなデザインにしようかな～っていうのを考えます。

こんなページを作りたい！って思う自分の理想に雰囲気が近いサイトを参考にして配置などを決めると良いらしい。

このあと

4.素材の収集と加工

5.制作

6.公開！

と続きます。

長くなってしまいそうなのと、まだ詳しくやっていないので、後日その２としてまとめたいと思います。

とにかくイメージを書き出してみるってのが大事みたい。

授業だからかなりゆっくり進むししっかり基礎やってるけど、こういう仕事をしてる人はどういうふうに作ってるんだろう…

まとめてみたはいいけど本当にこんなんでサイト作れるのかな…？

なんか不安になってきたので、こんなやりかたもあるよ！とかもっとこうしたらいいんじゃない？っていうのがありましたら、教えて欲しいです🙇🙇🙇

Thank you for reading .