Webサイト作成の全体像を把握する
Webサイトを作成するために、htmlとcssを習得したいと考えているのであれば、逆説的ですが、Webサイトを作成することを第１に考えましょう。
具体的には、
- Webサイトを作成する目的を明確にします。
どんなWebサイトが効果的か、Webサイトよりももっと適切な手段が存在しないか考えて判断する必要があります。
- コンテンツを作成する
Webサイトは、コンテンツが一番重要です。そして、コンテンツの制作に一番時間をかけるべきです。記事に使う、文章、写真、イラストなど、積極的に用意してく必要があります。特に写真は、積極的に撮影しておく習慣をつけることが大切です。
- 現在のスキルで実現できる方法を考える
htmlとcssを習得は、時間が必要です。しかし、今ある技能や知識の範囲内で、できるだけ早くWebサイトを公開した方が有利です。Webサイトは、あとから修正も追加も可能です。現在活用できる技能で実現する方法で実行すれば、新たに覚える必要のあることを少なくすることが可能です。
Webサイトを一度も作成したことがない状態で、Webサイト作成の全体像を把握するためには、書籍を利用すると効率的です。
作業内容の全体把握は、書籍を活用すると効率的
インターネット上には、多くの情報が存在しますが、新たに行うことは、書籍を活用すると全体像が理解できるので効率的です。
問題は、その時の自分の知識や技能によって、最適な書籍が異なるので、書店の店頭で書籍の内容を確認したり、図書館で、手当たり次第に関連書籍を借りて、一番わかりやすかった書籍を購入し、それを元に作業を進めると効率的です。
注意！タグ辞典は、入門に向かない
Webサイトを作成しよう、htmlとcssを習得しようとするとき、何故か、タグ辞典を購入し、htmlやcssのそれぞれの意味を把握しようと考えてしまいます。タグ辞典は、あくまでも辞典です。学習には向いていません。
日本語や英語でも、単語それぞれを覚えても使うことができないように、タグのそれぞれの意味を覚えても、Webサイトは、作れません。日本語や英語の場合は、日常でよく使う文章をたくさん覚えることが上達への近道です。それと同じように、htmlとcssでは、実現したいデザインを表現する組み合わせ（コンポーネント）を覚えることが大切です。
レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~ [小川 裕之]
カラム・レイアウトをフルールドグリッドで実現する方法について、詳しく記述されています。自分でテンプレートを作成する場合、とても参考になります。出版年が少し古いので、フレキシブルボックスについては扱われていません。
完全に理解する前からコンテンツを作成する
htmlとcssの習得には、時間がかかります。そのため、習得の初期のほとんど学んでいない頃から、Webサイトで使用するコンテンツを作り始めることが大切です。はじめから、高度なことを目指さず、文章と画像を貼り付けて完結する記事と作り続けることが大切です。
htmlとcssの知識や技能を習得すれば、それに合わせて、後から、webサイトのそれぞれのページを読みやすいように、文章を修正したり、デザインを追加していけばいいのです。
知識や技能の習得を理由に、コンテンツの作成を停止するのは、良くない選択です。
コンテンツは、自分の中の知識や考えから生まれてくる
Webサイトの記事は、執筆する人の知識や思考から生まれます。執筆を続けていれば、いずれ、自分の中の知識や思考が出尽くして、執筆する内容がなくなります。
執筆する内容がなくなれば、学ぶ必要があります。執筆する内容が尽きないように、常に知識を吸収し続ける必要があります。
学ぶことで、新たに、Webコンテンツを作成できます。
- 何の目的で学び始めたか。
- どんな情報を集めたか。
- 学ぶために何を行ったか。
- どういったことを学んだか。
- 学んだ内容を実際に活用したときどうなったか。
- 振り返った考えたときに効率的な学びかたは。
このように、学び終わる前からコンテンツを作成することができます。写真や動画、イラスト、図表があればより有効です。
Web素材は、並行して作成する
Webサイトの価値は、デザインではなく、コンテンツによって決まります。デザインが優れている方が、読みやすく、理解しやすく、目的の情報にたどり着きやすくなりますが、本質は、コンテンツです。
そのため、Webサイトで使用する文章、写真素材、イラスト素材は、積極的に作成し続けていく必要があります。文章執筆、写真撮影、イラスト作成は、どれも簡単には上達しません。かなりやり込む必要があります。意識して、量をこなし、技能を向上させる必要があります。
文章は、自分がどれだけの知識や思考を持っているかによって、説得力と読みやすさに現れます。
写真は、道具と撮影条件、そして、Web素材として使いやすい構図、レタッチによる加工が重要です。また、使いたいときに、使いたい写真が手元にあることが重要です。
イラストは、視線を引きつけるだけでなく、文章で伝えたいことを理解しやすくするために重要です。写真と同じように、使いたいときに、使いたいイラストが手元にあることが重要になります。
Web素材が、使える状態で手元にあることが大切です。
- 記事のための資料を集める
- 記事を書く
- 写真を撮る
- イラストを描く
- スクリプトを作る
どれも、必要になってから、作成する、あるいは、集め始めるのでは、間に合いません。こまめにデータを集積し、こまめに記事を作成し、書き溜めておくことが大切です。
コンテンツの質と量は、サイトの力です。良質な記事をより多く、効率的に作成する環境を整えることが大切です。
htmlとcssについて学ぶのと平行して、記事を作成しておくことが大切です。
既存のWeb素材を利用する
無料で、あるいは、有料で利用できる写真やイラストがインターネット上に存在します。記事として利用する文章も、外注することが可能です。
Webサイト運営初期で、コストをかけれない時期を除き、Web素材は、購入することができます。有効に利用し、自分の運営するWebサイトのコンテンツの質と作成速度の向上を目指す必要があります。
参考になるサイト上の情報
基本的な使い方はWebデザインの書籍を使って理解したほうが効率的です。
その後、実際に作成する際に感じた疑問は、インターネットで調べたり、実際にコードを書いてブラウザで動作を確認する作業を繰り返して理解していきます。
