コードが書けても意味がない〜Webページを作りたい人が見落とすhtml以外のポイント〜

Webページを1から自分で作ろうと思った時にまず学ぶのがhtmlやcssだと思います。
しかし基本的な使い方を覚えたとしても、何故か思っていたようなWebページが完成しない。
それて結局Webページを自分で作ることは諦めてしまうという人が結構多いのではないでしょうか。

僕はほとんどド素人の状態から塾のWebページを作らせてもらっていました。
その中で気づいたことは、実はhtmlやcssっていうのはWebページ作りにおいてそんなに大切ではないのではということです。
大切ではないと言うと語弊があるかもしれません。
正確に言うと、コードだけ書けても意味がないように感じました。
これはWordPressとかでも同じだと思います。
僕がWebページを作っていく中で気づいたhtmlやcss以外の必要な技術についてまとめたいと思います。

Webページ作りに必要な4つの技術

Webページの構成要素を分解すると、以下の4つになります。
①マーケティング
②コンテンツ力
③デザインセンス
④コードを書くスキル
まず初めにどんな目的で作るのか、どういった人に訪れて貰いたいのか、自分たちは周りとどんな差別化ができるのかなどのマーケティング的な分析が必要です。
次に自分の強みや弱み、差別化、ターゲットを踏まえた上でのコンテンツ作りをしなければなりません。
その次に必要なことが全体の構成です。
Webページ全体の色のバランス、ロゴの色合いはもちろんですが、F型配置やZ型配置といったような読む人の視線誘導を意識したデザインを考えます。
こうしたものを元に実際にコードを書いて形にしていく。
僕がWebページを作ってみてざっくりとこうしたスキルが必要だと感じました。
コードはあくまで仕上げの段階に必要なもの。
意外とその前段階が大切であるように思います。

マーケティング

実際にWebページを作り始める前に必要なのがマーケティングです。
細かな手法なんてとても書ききれないのでざっくりと書ける内容だけの羅列になりたす。
細かな事はここら辺に載ってるので図書館とかで読んで見てください。

コトラー&ケラーのマーケティング・マネジメント 第12版

・ターゲットを明確にする
どのくらいの年齢層、どういった属性の人に読んで貰いたいのかといったことを明確にします。
・自分たちの強みと弱みは何なのか
まず競合をピックアップして、その人たちと比べたときの自分たちの強みと弱みを考えます。
具体的な競合との比較で考えるのがポイントです。
・読む人のニーズを考える
自分のWebページを訪れてくれる人はどんな情報を得たいと思っているのかを考えます。
たとえば塾の場合であれば、子供を通わせたい塾を探しているというのはもちろんですが、そこにはどうやってお子さんに勉強させればいいかという悩みがあるはずです。
そういった潜在的な悩みを考えていきます。
こういった事をまず細かに分析するのが第一段階です。

コンテンツを用意する

どんなWebページを作りたいかの分析ができたら次にコンテンツ作りです。
コンテンツには①自分が伝えたい情報と②訪問者が知りたい情報があります。
できる限り②のコンテンツ量を増やす事が大切です。
Webページを作ってからここを考えると、どうしてもスカスカになってしまいます。
そうならないためにも、まずWebページに入れたいコンテンツを先に作ってしまうのがいいと思います。
コンテンツを作るに当たって、差別化を意識します。
自分にしか提供できない、真似できないコンテンツにすること。
そして、訪問者が十分に満足するだけの情報量であるように心がけます。

コンテンツは質と同時に目に止まりやすさを意識することが大切です。
数多くの情報の中で訪問者の視線を捉えるような工夫が必要です。
ビジュアルに力を入れた表やグラフ、文章であれば最初の2行に工夫をこらす、コンテンツのキャッチコピーに力を入れるといったことを心がけます。
文章については竹内政明さんの「編集手帳の文章術」、コピーに関しては「ここらで広告コピーの本当の話をしよう」あたりが参考になると思います。

「編集手帳」の文章術 (文春新書)

ここらで広告コピーの本当の話をします。

デザインを意識する

Webページを自作しようと思ってhtmlを覚えたはいいけれど納得できるものにならず挫折したという人の最大の理由はここにあるような気がします。
テンプレートのデザインで作ってしまうと、どうしても頭の中にあるイメージには届きません。
やっぱり、ボタンやバナーは自分で作るのがいいと思います。
そのために最も使いやすいのがイラストレーターです。
ボタンやバナーくらいなら、難しいテクニックはいりません。
基本操作の組み合わせでカッコイイものを作れるように、「デザインのストック」を日頃から作っておきます。
具体的には色々なWebページを訪れて(或いは雑誌のデザインを見て)、いいなと思ったデザインやバナーをファイルに保存しておく。
丸パクリは良くないと思うのでオススメしませんが、幾つもいいなと思ったデザインを貯めていくうちに、自分の好きな配色や図像の組み合わせが作ることができるようになります。
基本的なイラストレーターの技術を身につけるには、気に入ったページを模写して作ってみるのが有効です。

これは実際に僕が練習で真似したやつの一つです。
気に入ったものを模写することで、配置の意図や配色の手グセなど、いろいな情報が学べます。

もうひとつデザインで大切なことは、相手の視線を意識したレイアウトです。
まずWebページ全体のレイアウトを紙の上に手書きで書き出します。
レイアウトの際によく言われるのが、F型を意識した構成にするということです。
ほとんどのWebページが左にメニューが並び、その横にメインコンテンツが並びます。
ちょうど、強調されているところを追うと「F」の形になっています。
Webページを作る際には、このF型の配置がいいとされています。
他にも雑誌でよく使われるZ型のコンテンツ配置など、いろいろな配置の仕方があります。
こういった、見やすい配置を意識してレイアウトを考えます。
そしてそこに配置するボタンやバナーを作っていく。
構成とパーツが完成したらようやくコードを書いてWebページを形にしていきます。

htmlとcssでコードを書く

ここはいろいろなWebサイトに載っていて僕が書いても仕方がないので割愛します。
僕は本当に最低限の、文字を記述するコードとリンク、画像貼り付けの仕方だけを覚えて、後はその都度必要になった時にコードを調べて勉強していきました。
これもデザイン同様に何処かのWebサイトを真似して一つ作ってみるといいと思います。
どういうコードでこうなっているんだろうというのを予想しながら自分なりにコードを書いて組み立てていくと、基本的なスキルや効果の付け方がだいたい理解できます。

一つ一つを丁寧に書いて行くと、とても文字数が追いつかないため、とんでもなくざっくりしたものになってしまいましたが、始めてWebページを作ろうとする場合、こうしたことを意識するといいように思います。
あくまでコードは4つある要素の一つです。
いくらそこを極めても他の3要素の練習をしなければ25%の出来にしかなりません。
Webページを作りたいのだけれど思うようにいかないという人は、ここで悩んでいるのではないかと思ったので新年度一発目はこんなエントリにしてみました。