この記事は、未経験からHTML・CSSでサイトを作れるようになるまでのステップを紹介する記事の2記事目です。
今回からさっそく実践したいところですが、いくら実践重視といっても、やはりある程度の知識がなければサイトは作れません。
この記事では、実践で必要となる最低限の知識の習得と、サイト制作を行う上で必要なものの準備を行おうと思います。
ただし、Webサイト制作に関する知識はとっても膨大ですので、今回は、サイトを作れるようになるために必要だと考える基本的なもののみに絞っています。
あくまでも、独学で学ぶ上で、これから知っておくと後が楽だよ、という実践向けの情報なので、経験に基づくものが多いです。
この情報が正解！というものではありませんので、詳しく知りたいという人や、きちんとした情報が学びたいと言う人は、ぜひ自分で調べてみたり、より詳しく解説してくれている講座などを探してみて下さい！
Webサイトができるまでの工程
まず必要な知識は、Webサイトがどのようにしてできあがるのか、という制作工程です。
実践するにしても、サイトというのはどのような工程を経て作成されるか知らなければ、作成することはできません。
まずは、Webサイトができあがるまでにどのような工程が必要なのか、ざっくりと把握しましょう！
企画、アイデアを考える
1番最初に必要な工程は、どのようなサイトを作成するのかという企画、アイデア出しの工程です。
サイトを作ろうとしていても、どんなサイトにするのか、どのような内容を書くのか、そしてどうやって作るのか、大枠が決まっていないと、制作が進められません。
サイト制作の基盤となる情報などを決めて、アイデアを出す必要があります。
主に、下記のようなことを決めると良いでしょう。
- サイトを作って達成したいこと、サイトの目的
- どんな人にサイトを見てもらいたいか
- サイトの大まかな方向性や、コンセプト
- 予算や制作にかけられる期間
この企画やアイデアは、制作を希望する企業や個人があらかじめ決めていることもありますが、場合によっては制作を担当する人や企業が、お客様からヒアリングをして決めることもあります。
副業やフリーランスが個人で行う場合はすべて1人で作業しますが、制作会社などの場合は、この部分を営業や、Webディレクター、プロジェクトマネージャーなどが担当することが多いのではないでしょうか。
経験上、サイト制作における最も重要な工程は、この部分です。断言します！
ここが決まっていなかったり曖昧だと、後の工程すべてに影響し、最悪作り直す必要まででてきてしまいます。
早く制作に入りたい！という気持ちもあるかもしれませんが、まずは基盤からしっかり固めていきましょう。
サイトの設計を考える
どんなサイトを作るか目的が定まったら、次はサイト全体について設計を考えます。
ここで考える設計は、サイトの全体図です。どんなページが必要で、そのページはどこから移動してくることができて、どこへ移動することができるのか。
また、それぞれのページには、どんな内容を書いていくとよいのかなど、サイト全体を設計していきます。
この時、サイトの設計書のようなものを作成しておくと、後から見返すこともできるので、便利です。
この設計書は、サイトマップやディレクトリマップと呼ばれたりします。
ページの設計を考える
サイト全体で必要なページや内容が把握できたら、次はそれぞれのページごとに設計を考えます。
1つのページの中で、どこにどのような情報を配置するのか、写真は使用するのか、テキストはどの程度入れるのか。具体的にイメージしながらページをイメージしていきます。
この設計は、頭で考えているだけでは具体的なイメージがし辛いため、簡単な図を用いて配置したりすることがほとんどです。
この、ページ単位の設計図は、ワイヤーフレームと呼ばれています。
デザインを考えて作成する
必要なページがわかり、各ページの設計が整ったら、次はサイトのデザインを検討していきます。
サイトの見た目のイメージを大きく左右するのがデザインといっても過言ではないでしょう。
どんな色を使うのか、イラストを使うのか、写真を使うのか。最初に決めたサイトの目的やコンセプトに沿って検討していきましょう。
どのようなデザインにするか決まったら、1つ前で作ったページ設計図(ワイヤーフレーム)を元に実際にページを作ってみます。
この時は、まだHTMLやCSSは使用せず、デザイン作成ツールを使ってデザインを作成します。作ったデザインは画像として保存できるので、これをお客さんと共有しながら、希望のサイトになりそうか確認するのです。
この時作成できる画像のことを、デザインカンプと呼びます。
デザイン作成ツールというのは、有名なものでいくと下記のようなものがあるでしょうか。
- Photoshop
- Illustrator
- Adobe XD
- Figma
- Canva
- GIMP
無料で使えるものから有料でなければ使えないものもありますが、最初は無料のツールから使っていくことをおすすめしたいです。
今は無料のツールでもあらゆる機能が使えるので、サイトのデザインくらいであれば十分だったりします。いろいろなサイトを作っていく中で、対応できないことが出てきたら、有料のツールに切り替えるといった形でも十分対応できますよ！
ちなみに、今回のこの記事の中では、「Figma」を使ってデザインを作成しました！
Figmaは、基本的に無料で利用できるツールです！機能や作成できるページ数などが一部制限されていますが、何かデザインツールを使ってみたい、という方も気軽に始められます。
実際にサイトを作る
各ページのデザインが完成したら、いよいよHTMLやCSSを使ってサイトを作っていきます。
サイトを作るときは、まず自分のパソコンの中で作成するとよいでしょう。というのも、作成したページをインターネットで見えるようにするためには、毎回サーバーへのアップロード作業が必要だからです。
修正したものや作り直したものを、毎回アップロードしなければならないのは、とても面倒です。
また、インターネットで見える形で作り始めてしまうと、作りかけの状態を他の人に見られてしまうかもしれません。
自分のパソコンの中でも作成は十分できるので、一旦すべて完成するまでは、パソコン内での作業をおすすめします。
ただし、お客さんにページを確認してもらうときは、お客さんに、自分のパソコンを見てもらうわけにはいかないので、インターネットで見える形にしなければなりません。
このときは、サイトに鍵をかけた状態にするか、もしくは仮のサイトを用意して、そちらにアップロードするようにしましょう。
サイトを公開する
ページを見てもらい、修正もすべて終わったら、あとはサイトをインターネット上で公開したら、サイト制作が完了です！
公開するために必要な設定を行い、サイトを公開しましょう。
サイトを公開するために必要な手順は、下記のような手順となります。(※新規でサイトを公開する場合を想定)
- サーバーの取得と設定
- ドメインの取得と設定
- ファイルのアップロード
- サイトの公開設定(必要な場合のみ)
サーバーやドメインの取得、設定については別の記事で説明しているので、ぜひそちらを読んでみて下さい！
サーバーについては準備中。お待ちください……！
アップロード方法についてはあとの記事で詳しくやるので、一旦ここでは「そういう工程が必要」とだけ把握いただければOKです！
アップロードしたサイトが、問題なく見れたら、サイト制作は完了となります！
より良いサイトを作るためには
サイトを作る大まかな流れは以上ですが、もちろんこれはざっくりとした流れで、今回は省いているものもあります。
省いた工程の中には、より使いやすく良いサイトを作るために必要な工程もあるため、簡単に紹介したいと思います。
サイト制作を仕事にするためにはとっても必要な項目ですが、HTMLやCSSを学ぶ上では一旦必要がないものでもあるので、飛ばしたい人は飛ばしてしまってくださいね。
見た目以外の機能性を考える
みなさんが使っているサイトの中には、お問い合わせでメールが送れたり、ブログが更新されていたり、何かの予約ができたりと、いろいろな機能があるのではないでしょうか。
しかし、今回の作成でメインとしているHTMLとCSSだけでは、これらの機能は作成できないのです。
HTMLとCSSでのサイト制作は、サイトの見た目を作る作業のみです。そのため、サイトにあらゆる機能を追加するためには、別の技術を利用する必要があります。
もし、作るサイトにこういった機能が必要ならば、HTMLとCSSだけでサイトを作るのではなく、こういった機能面が追加できるサイト作りを検討しなければなりません。
これはバックエンド開発と呼ばれるもので、主にエンジニアが対応する領域です。
後半で、応用編として紹介する記事では、これらの機能面に関わる話もしたいと思うので、気になる方は見てみて下さい。
見る人のことを考えて設計・デザインする
サイトの設計やデザインは、見た目の良さだけではなく、機能面を考慮しながら考える必要があります。
たとえば、スマホでサイトを見た時に、文字がとても小さかったらどうでしょうか？
画像が小さくて、何が書いてあるかわからなかったら？ボタンやリンクが小さくて、何度押しても違うページに飛んでしまったら？
それは、とっても使いづらい不便なサイトになってしまいます。
また、会社の採用ページを作成しているはずなのに、ページに掲載する内容が、会社がある地域の紹介ばかりだったら、見る人はどう思うでしょうか？
どんな職種を募集していて、どんな条件なのか教えてくれないサイトは、良いサイトでしょうか？
このように、作ったサイトがとっても使いづらいサイトにならないように、サイトを設計、デザインするときは、見る人のことを考えて行う必要があるのです。
このような考えは、UI・UX(ユーアイ・ユーエックス)などと呼ばれることがあります。
今回は、デザインや設計がメインではないため、UI・UXについては深堀りしませんが、サイト全体の構成もしっかりと考えたいという方は、ぜひ調べてみて下さい！
実際にサイトを作るために必要な環境
ここからは、サイトを作るために必要な環境の準備に入ります！
ただし、今回の記事では「HTMLとCSS」をメインとするので、準備するのはHTMLとCSSを使う部分のみです。
また、知識などがなくても問題なく、１番簡単に導入できる環境で解説します。そのため、実際の現場で使用するようなツールは使いません。
もちろん、現場の方が使っているようなツールも解説しますので、もしそういったツールにも興味がある場合は、そちらも見てみてくださいね。(ちょっと難しめなので注意！)
それでは、以下を確認しながら必要な環境、ツールを用意してみてください。
前提として必要な環境
まず、サイト制作をするにあたり、下記の環境が整っていることを前提とします。
- パソコン(Windows10以上、もしくは最新のバージョンのOSをインストールしているMac)
- インターネット回線(可能であれば有線接続)
- Google Chromeのブラウザ
- パソコンに、ソフトがダウンロードできる容量が残っている
ブラウザについては、他のブラウザであっても問題ないですが、今回はGoogle Chromeにある機能を使って説明することがあるため、インストールしておくことをおすすめします。
また、パソコンの容量については、どのソフトをダウンロードするかで変わるため、必要なソフトをダウンロードした時に問題なくインストールできれば、空き容量は問いません。
サイトの構成とデザイン
制作の流れで説明している、デザインまでの部分はあらかじめ対応しておくようにしましょう。
今回は私の方で用意したサイトの構成とデザインは用意してみました。もし自分で用意するのが難しいという方は、必要なタイミングでダウンロードできるようにしておくので、私と同じサイト構成とデザインを利用しちゃってください。
※使用している画像については、ダウンロード元のリンク掲載のみとしますので、各自ダウンロードしてご利用ください。
もちろん、サイトの名前や入れている文字、色などは好きなものに変えていただいて問題ありません。
もしご自身で用意してみたいという方は、サイトのデザインまで完成させておいてください！
(勉強の一環として作成するのみであれば、サイトの構成と等は一旦飛ばしてデザインだけやっても大丈夫です。ポートフォリオ用にしたい場合は、よかったら設計から考えてみてくださいね！)
メモ帳
今回サイト制作を行うのは、メモ帳を使って行います。
実は、HTMLとCSSは、メモ帳アプリやソフトが1つあれば、それでできてしまうんです！
パソコンに標準でインストールされているものを使ってもいいですし、そういったものがない場合は使いやすいメモ帳ソフトをインストールしておいてください。
メモ帳アプリ・ソフトは、無料で使用できるもので問題ありません。
ただし、Wordやドキュメントのような、文章作成ソフトでは対応ができないので、必ずメモ帳を選ぶようにしましょう。
また、そのメモ帳が「HTML」「CSS」のファイルを開けなければ意味がないので、その点も注意してください。これに関しては、「テキストエディタ」という種類のメモ帳であれば問題ありません。
もし、どれがいいかわからないという人は、下記におすすめのテキストエディタから選んでみてくださいね。
※私がWindows使用者のため、Mac環境でのエディタはあまり詳しくありません……！ごめんなさい……！
EmEditor (Windows)
今回私が使うのは、このEmEditorです。みやすさや機能面の充実さから、かなり多くの方が使っている印象。
※最初はPro版でダウンロードされますが、無料版にダウングレードしてしまって問題ありません。
TeraPad (Windows)
シンプルで使いやすいテキストエディタ。メモ帳の上位互換のようなシンプルさなので、使いやすいと思います。
CotEditor (Mac)
日本で開発されているエディタとのことで、シンプルな見た目。愛用者も多そうです。
おすすめツール【上級者向け】
ここからは、本格的な開発を行いたい、という方向けの上級者向けツールをご紹介します。
プログラミング用エディタとされているエディタですが、実際多くの開発現場で利用されているツールです。私も普段はこれらのツールを利用しているので、もしチャレンジしてみたい人はどうぞ！
ただし、どちらも標準は英語になるので、日本語にするためには日本語化するパッケージなどが必要です。
また、カスタマイズするためにはいろいろなプラグインを入れたりしなければならないので、調べながら対応していく必要があります。
Visual Studio Code
Web制作の場面ではかなり使用者が多いツールです。Webサイト制作で必要な言語はほとんどサポートされているので、1つで色々な開発ができます。(私はこちらを愛用しています。)
Sublime Text
こちらも使用者が多いツールで、見た目がすっきりキレイなツールです。拡張もしやすく、いろいろなプログラミング言語に対応しています。
これからサイトを作っていくときに意識してほしいこと
さて、これから先の記事では、実際にHTMLやCSSに触れながら制作を行います。
専門用語などもある程度増えていくので、少しずつ難しくなるかもしれません。しかし、そこで諦めたり、わからないと放置してほしくないので、これからの学習で意識してほしいことをお伝えできればと思います。
これは、私の経験上の話でもあり、学習を続けている人を見てきて感じたことでもあります。
少しでも楽しく学習を続けるためにも、ぜひ心に留めておいてもらえると嬉しいです。
できないことを自覚する、認める
意外と大事なことなのですが、自分はまだまだ学習の途中で、できないのだということをしっかりと認めてあげるようにしてほしいと思います。
これは、最初の心構えだけでなく、ある程度学習した後も同じだったりします。
例えば、勉強して知ったHTMLを使ってみても、上手くいかない時。この時、上手くいかないのは当たり前であるということを認めてあげてください。
当然ですよね、初めて使うものが、一発でうまくいくはずがないんです。
しかも、人間は普段から自然と使っている日本語ですら間違えることがあるんですから、普段使わないHTMLやCSSなんて、日本語より使えるわけがありません。
意外にも、勉強を進めるうちにこのことを忘れてしまって、なんで出来ないんだろう！と感じてしまうことがあるように思うんです。
何回も間違えたり、何度も修正しなければならなかったり、なかなか覚えられなくても、それは普通なんです。覚えられるまで続けたり、わからなければ何度も調べましょう。
このことを、忘れないように学習を続けてみてもらえたらと思います。
とにかくやってみる、真似してみる
人間は、何か覚えるときにアウトプットすることが大切だと言われています。
私も実際、見たり聞いたりしたことを、自分で言語化したり、実際にやってみることで覚えるものだと思っています。
だからこそ、何か新しいことを知ったり学んだときは、とにかくそれを実践してみてください。
私は、最初はコピペでも全く問題ないと思っています。実際、私も初めて見るコードは、コピペから始めていますし、カスタマイズしていく中で仕組みを理解したりします。
英語なんかの学習もそうですが、実際に話してみるのが1番とか言ったりしますよね。それと同じで、HTMLやCSSも、実際使ってみるのが1番です。
これから学習を進めるときは、ぜひやってみる！真似してみる！というのを意識してみてください。
わからないときは調べるクセをつける
実は、これが1番手っ取り早い学習方法だと思っているのですが、調べることです。
皆さんは、普段GoogleやYahoo!といった検索サイトは使っていますか？
こういった検索サイトは、無料で使える辞書のようなものだと思っています。有識者が無料で知識を書いてくれているので、わからないことを検索したら、どこかで回答が見つかったりします。
もちろん、中には難しかったり特殊だったりして解決策がわからないこともありますが、それでも何かしらの情報が得られます。
しかし、意外にもこの調べるという行為を忘れがちな人が多いように思うんです。
何かわからないことがあったり、躓いた時は、必ず自分で調べるというクセをつけてみてください。
普段検索してもなかなか回答が見つからないよ～という人は、もしかしたら検索の仕方を変えると、答えが見つかるかもしれません。
何か調べたいときは、下記を意識して検索してみてくださいね。
- 最初は調べたいことをそのまま具体的に文章で入れて調べる
- 見つからない場合は、調べたいことを単語に書き換えて検索してみる
- 関連する単語をどんどん増やす
例えば、今回の記事で行くと、EmEditorをダウンロードしたけど、パソコンの中で使えるようにする方法がわからないとしましょう。
このようなときは、まず最初に「EmEditorをパソコンで使えるようにする方法」などの文章で検索してみましょう。
もしこれで思っているものにたどり着かなかったら、次はこれを「EmEditor パソコン 使う 方法」のように単語に分解して検索してみます。
それでもダメなら、この単語をどんどん増やしたり、別の単語にしてみましょう。
GoogleやYahoo!の検索機能はとても優秀なので、単語などの関連から、使えそうなページを表示してくれたりします。
目の前のことだけ覚える
HTMLやCSSについてたくさんのことを勉強したいと思っているのなら、すべてを学びたいと思うかもしれません。
しかし、実践で使えるようになるためには、すべてを学ぶという方法は、とっても非効率的だと思っています。
HTMLやCSSに限らずですが、その分野の情報というのは、かなり膨大です。しかも、中には実践で全く使わなくても良い知識なんてものもあります。
こういった、実践で使うことがない知識を先に覚えてしまうのは、あまりに非効率的です。
だからこそ、まずは目の前にある課題や、目の前にあるやりたいことに使う知識や技術だけに集中して覚えるようにしましょう。
例えば、今回のHTMLとCSSならば、これらの言語ができた歴史なんかは、最初は覚えなくても良いことです。
サイトを制作する時に、歴史を質問されることはまずありません。歴史を書かなければならないことも、ほぼありません。
であれば、後回しにしてしまってもいいですよね？
今覚えるべきなのは、HTMLを使うために必要なテキストエディタの種類であり、インストール方法のはずです。
学習していると、いろいろな情報が目に入ってきますが、それらすべてを覚える必要はなかったりします。本当に今覚えるべきものを見極めて、目の前のことに集中しましょう。
それでは、次回はHTMLとCSSを使うために、最低限必要な知識と、最初に覚えて欲しいコードなどを紹介します！
次回記事 Coming soon……
