サイト構築・運営

ウェブサイト(ホームページ)をつくる3番目の工程は制作

この記事で解決出来る課題は、

  • 思うようにウェブサイト(ホームページ)づくりが進まない
  • 今あるウェブサイト(ホームページ)のデザインが気に入っていない
  • せっかく作ったウェブサイト(ホームページ)が機能していない

ウェブサイト(ホームページ)構築というと、“ デザイン ”という印象を持っている人が多いけど、“ デザイン ”は制作工程の一つであって、その全てではない。

では、何故?ウェブサイト(ホームページ)構築=デザインという印象が広まっているのか?というと、ウェブサイト(ホームページ)構築の工程で、技術そしてセンスが問われるのが“ デザイン ”で、そのため上手く進められない人も少なくない上、デザインはそのまま見た目につながるため、結果、この“制作工程”の中でも“デザイン”の工程がクローズアップされているのだ。

サイト制作で問われるセンス

外から見られるウェブサイト(ホームページ)の顔(見た目)とその動き(フォームなどのプログラム)を作っていくことから、どれだけ素晴らしい企画で設計図が完璧でも、その見せ方や動きが不味かったら、全部がダメに映ってしまう。

2000年代前半だと、HTMLコードを書けるコーダーやCSSでデザインを施せるグラフィックデザイナー、そしてウェブ上で動くプログラムを作り組み込んでいくウェブプログラマーなどがウェブサイト(ホームページ)の構築には欠かせない存在だった。

そこから、時代が流れ、IT技術の進歩に伴い、2020年代の現在では、そういった方々の手を借りなくても、ある程度のウェブサイト(ホームページ)であれば、つくることが出来るようになったが、それでも根本的な部分をしっかり抑えておかないと、思うような仕上がりにはならない。

では、その根本的な部分とは、何かというと…

誰でもつくれる魔法のアイテムの嘘

YouTubeなどで流れてくる、『誰でも簡単!ウェブサイト(ホームページ)制作ツールの●●』などの広告では、“ 知識も技術も無くても誰でもプロが制作したようなサイトがつくれる!”というような魔法のアイテムがあるような印象を受けるが、そんなわけないし、多くの人は冷静に、

「そうは言っても、何の知識も技術も無い素人がつくるのって無理でしょ?」

と思っているはずだ。

誰でもつくれる魔法のアイテムの嘘

これまで、わたしがサポートさせていただいた事業家の方で、そんな広告をご覧になってご自身でウェブサイト(ホームページ)づくりにチャレンジされた方が数名いらっしゃるが、そのほとんどが途中で挫折されている。

四苦八苦して取り組み、結果、投げ出すことになってしまうなんて時間とお金の労力の無駄でしか無い。

では、そういった制作ツール類が全く使えないのか?というとそんなことは無い。

要は使い方次第だ。

途中で投げ出している人に共通しているのが、“制作ツールがなんでもやってくれると勘違い”してしまっていることだ。

これは、広告表現が良くないんだと思うけど、宣伝で謳っている制作ツールはあくまでも補助ツールで、その大半はあなた自身の手で取り組まないと先には進んでいかない。

あなた自身の手で取り組む

では、どのように取り組んでいけばいいのか?というと、それは、“効果が証明されている手順に従って取り組む”ということになる。

言い換えると、これが根本的な部分にあたる。つまり、見様見真似の我流で取り組んでも簡単にはいかないということだ。

効果が証明されているウェブサイト(ホームページ)制作の手順

4人のウェブサイト(ホームページ)構築のプロから、タイミングも場所もバラバラで教えを請うた時期があった。

その時、4人共にほとんど同じ手順で取り組んでいることを知り、そしてわたし自身も20年以上、実践し続けてその効率の良さを何度も実感出来たという経験と、出版されている様々なウェブサイト(ホームページ)関連の書籍を見ても、細部の違いはあるが、大筋はどの書籍にも同じ様な手順が書かれているということ。

もちろん、状況によって順序を入れ替えた方がよい項目も中にはあるし、これしか正解が無いというわけでもないが、これからお伝えすることは、実践で使える手法の一つとして知っておて損はない。

では、そのウェブサイト(ホームページ)制作の手順をご案内しよう。

ここからそのひとつずつの手順について、“分かりやすく”を前提に解説させていただこう。

1アウトプット・書き出し

アウトプット・書き出し

後に、ここで書き出したフレーズを組み立ててウェブサイト(ホームページ)に掲載する文章に仕上げていくその最初の段階で、掲載する文章の元になるフレーズを書き出していくことが、このアウトプット・書き出しになる。

どんなに優れた文章でも、最初の一文字からスラスラと書けるということは余りないので、紙でも、テキストエディタでも何でもいいので、最初は、頭の中にあるイメージを“フレーズ”、“単語”で書き出していくだけでいい。

2タイトル付け

タイトル付け

アウトプット・書き出した“フレーズ”、“単語”をカテゴリーに分けて、そこにタイトルを付けていくことが2番目になる。

例えば、アウトプット・書き出した“フレーズ”、“単語”が商品・サービスそのものに関わる事柄で、その使用・利用方法について言及しているのであれば、おのずとタイトルは、『商品・サービスの使用・利用法』といったタイトルになる。

ここでは、凝ったタイトルではなく、集めた“フレーズ”、“単語”が何に関連しているか?がわかるようにしておくだけで十分だ。

3本文執筆

本文執筆

“本文”というのは、先に付けた“タイトル”に対する内容のことになる。

付けたタイトルが『商品・サービスの使用・利用法』であれば、その“本文”はそのまま、『商品・サービスの使用・利用法』の説明となる。

この工程は、先に書き出した“フレーズ”、“単語”をつなげて文章にしていくという言わば執筆作業になる。

ここでも、まずは書き続けていくことが大切だ。

4素材の準備(イメージ、映像など)

素材の準備(イメージ、映像など)

ウェブサイト(ホームページ)構築の分野で“素材”と言えば、掲載する画像や映像のことで、それは編集加工前の状態を指す。

ウェブサイト(ホームページ)には、文章の他に画像、映像などのコンテンツを掲載するのが一般的なので、まずは、掲載したい画像や映像を揃えておく。

具体的には、これまでスマートフォンで撮りためている画像や動画、フリー素材の検索などがここでの作業工程になる。

5レイアウトデザイン(ワイヤーフレームを軸にレイアウトを決めていく)

“レイアウトデザイン”というのは、言わば“場所決め”のことで、文章や画像のコンテンツの置き場を決めていくことになる。

既に設計の工程で“ワイヤーフレーム”を作成しているはずなので、ここではその“ワイヤーフレーム”を軸に、ヘッダーの位置、ナビゲーションメニューの位置を調整したりしていく。

このタイミングで、準備した画像や動画を仮配置しながら、全体の印象を決めていく。

ここで使うツールとしてお勧めなのが、Googleスライドだ。無料で使えるし、配置も簡単に出来る。

もちろん、MicrosoftのPowerPointやAdobeのPhotoshopやIllustratorといったツールを使ってもいい。

6素材の加工(レイアウトに合わせた素材のサイズ調整や画像加工)

素材の加工(レイアウトに合わせた素材のサイズ調整や画像加工)

使用する素材が決まったら、それらの素材を加工するのがこの工程になる。

例えば、ヘッダーに使用する画像であれば、その画像の魅せたい部分だけをヘッダーのサイズに合わせて切り取るような編集を行う。これをトリミングという。

料理でも“素材”を料理することで完成させるように、“素材”を編集加工することで、ウェブサイト(ホームページ)上で表示させるコンテンツに仕上げていく。

7文章執筆・清書

文章執筆・清書

最初に“フレーズ”、“単語”で書き出したものを繋げて文章として仕上げていくのがこの工程になる。

この段階では、既に基準となる文章が存在しているので、その文章を言わば推敲すいこうしていくようなイメージだ。

ここでのポイントとして紙とウェブの違いがある。それは、一度完成させたものを紙に印刷されたものは修正するのは大変だし、それが出版された書籍やパンフレットなどであれば、コストも発生する。だけど、ウェブであればいつでも修正が出来る。だから、まずは仕上げてしまうことをゴールに進めていく。

8必要に応じて、図形・表の作成

必要に応じて、図形・表の作成

文章や画像だけでは、伝わりづらい事柄は、図形や表で示すことで分かりやすく、そして素早く伝わる可能性がある。

ウェブサイト(ホームページ)の訪問者が一字一句、じっくりと文章を読んでくれるというのは、珍しいケースでほとんどの訪問者は流し読みをしている。

そんな中で、少しでも発信している情報を受け取ってもらおうと思えば、図形や表で表現することが望ましいと言える。

9下書き用のページを用意

下書き用のページを用意

“下書き用のページ”とは、実際にブラウザ上でウェブサイト(ホームページ)を見た時にどの様に表示されるのか?を確認するために用いるもので、WordPressワードプレスでサイト運営を行う場合は、下書き用のWordPressワードプレスを用意することになる。

ただ、この段階でサーバーの用意が出来ていないことも少なくないだろうからその場合は、無料で使えるWordPressワードプレスもあるのでそれを使ってもよい。

とにかく、実際にブラウザ上でウェブサイト(ホームページ)を見た時にどの様に表示されるのか?を確かめることが出来る環境をここでは用意しておくこと。

10ページ内に文章とイメージ、映像などを配置

ページ内に文章とイメージ、映像などを配置

用意した“下書き用のページ”の中に、文章やイメージ画像、映像などのパーツを配置して、その感じを確かめながら、配置換えなどを行う。

それぞれのパーツが組み合わさることで、どんな見た目の印象になるか?を早めに掴んでおくことで、より精度の高いデザイン設計に繋げていくことが出来る。

もし、“下書き用のページ”が用意出来ていない場合は、引き続き、GoogleスライドやPowerPointなどのツールを使っても構わない。

11サイト全体のデザイン設計

サイト全体のデザイン設計

このデザイン設計の時に基準にするのが、サイトの訪問者だ。

ここは難しい部分だが、“デザイン設計”をする時に、どうしても制作者がつくりたいものをつくる傾向にある。

これは、ウェブサイト(ホームページ)だけではなく、どんなものにも当てはまるが、作り手がつくりたいものと使い手が使いやすいものは決して同じではないということ

単なる自己満足なウェブサイト(ホームページ)にならないように、企画の工程で設定した、“サイトの訪問者”が使いやすいデザインを心がけることが大切だ。

12[サイト全体]カラム設定

[サイト全体]カラム設定

“カラム”というのは、“列”のことで、ウェブサイト(ホームページ)全体を1カラムかそれ以上のマルチカラムにするか?を最初に決めておく。

ただ、既にレイアウトデザインの工程で大枠は決まっているはずなので、文章やコンテンツを配置してある状態で、どのカラムが読みやすいか?見やすいかを検証しておこう。

13[サイト全体]ヘッダーデザイン

[サイト全体]ヘッダーデザイン

“ヘッダー”というのは、ウェブサイト(ホームページ)のフロントページの上部に配置することが多い、主に画像・イメージのことで、これは“サイトの顔”と言える存在。

YouTube動画でも、“サムネイル”というのがあって、それはその動画の顔の役割を果たしている。

ウェブサイト(ホームページ)のレイアウトデザインによっては、“ヘッダー”にイメージを置かないケースも有るが、その場合はそこに配置する別のコンテンツのデザインを手掛けるのがこの工程になる。

14[サイト全体]グローバルリンクの設定

[サイト全体]グローバルリンクの設定

“グローバルリンク”というのは、例えば書籍で言えば、“目次”にあたる。

つまりここは、ウェブサイト(ホームページ)の“目次”をつくる工程になる。

ウェブサイト(ホームページ)を訪問した人はこの“グローバルリンク”を辿って、様々なページを見ることになる。

15[サイト全体]フッターデザイン

[サイト全体]フッターデザイン

“フッター”というのは、ウェブサイト(ホームページ)の下部に位置する部分で、こちらも“目次”の役割をはたすが、他にも、そのページを訪問した人の次の行動を示すという役割も持っている。

どういうことかと言うと、『商品・サービスのページ』を訪問した人が興味を抱いて、“資料請求してみよう”と考えていた場合、“フッター”には、会社名や資料請求フォームなどがあれば、次の行動に移りやすくなる。

16ページ単体のデザイン設計

ページ単体のデザイン設計

雑誌は複数のページが組み合わさって、雑誌といっているように、ウェブサイト(ホームページ)も複数のウェブページが組み合わさって出来ている。

ウェブサイト(ホームページ)全体のデザインが出来たら、次はそのウェブサイト(ホームページ)を構成している個々のウェブページのデザインに入るわけだが、ウェブページは会社情報ページや商品・サービスページなど様々な構成要素が詰まったページが存在しているため、それぞれのページごとのデザインが必要になる。

ここで行うのは、個々のウェブページのデザインと全てのウェブページに共通しているフォントなどの設定になる。

17[ページ単体]文章の装飾(文字の太さや色、マーカーなど)

[ページ単体]文章の装飾(文字の太さや色、マーカーなど)

“文字の太さ”、“特定の文字色”、“マーカーなどの強調”といった見た目の装飾に加え、“h2”や“h3”タグなどの構文に関係する箇所に装飾を施して、訪問者がより見やすい、読みやすいサイトづくりに取り組んでいくのがこの工程になる。

ウェブサイト(ホームページ)の訪問者は、よほどのことが無い限り一文字一文字じっくり文章を読んではくれない。だからこそ、つくり手としては、見やすい読みやすい構成を心がけることが大切になってくる。

18[ページ単体]背景色・背景イメージ

[ページ単体]背景色・背景イメージ

ウェブページの背景に色を付けたり、背景にイメージ画像を置いて、ページの印象を整えていく。

“色”が人に与える印象は強く、例えば“青色”を基調に使っているサイトから人が得る印象としては、“ビジネス”、“クール”などがあり、“ピンク色”から人が得る印象は“女性的”、“可愛らしい”といったものがある。

思いつきで色を考えるのではなく、企画、設計の工程で取り組んだ内容を元に、“カラーマネジメント”に取り組んでいく。

19[ページ単体]リンクボタンの装飾

[ページ単体]リンクボタンの装飾

“リンクボタン”というのは、ウェブサイト(ホームページ)の特徴でもある、ウェブページから他のウェブページにクリック一つで遷移せんいすることが出来るという機能のことで、そこに装飾を施すというのは、

クリックしたくなることを狙っていくということになる。

どういうことかと言うと、

例えば、商品・サービスなどの“資料請求”をして欲しいと考えた時、ページ内に“資料請求はこちら”というリンクボタンを設置して、そのから“入力フォーム”のページに飛んでもらうとする。

そんな時、“資料請求はこちら”というリンクボタンを見つけやすくそして、クリックしたくなるようなデザインを施すということがここでの工程になる。

20フォームなどのプログラムの導入

フォームなどのプログラムの導入

“プログラム”と言っても、ゼロからプログラミングしていくことはなく、いまは優れたプラグラマーさん達が作成されたウェブのプログラムを使わせていただくことが出来る。

WordPressワードプレスであれば、プラグインというウェブプログラムがパッケージされたアイテムを使うことで、お問合せフォームなどが完成する。

ウェブサイト(ホームページ)の主に動的な部分を担う、プログラムをここで導入していく。

21見直し・加筆修正・微調整

見直し・加筆修正・微調整

ひと通り、制作工程が進んだら何でもそうだけど、見直しや加筆修正、微調整を行うことでより洗練されたウェブサイト(ホームページ)に近づけていくことが出来る。

制作の工程を最初から見直しつつ、文脈が不自然な箇所は加筆修正を行い、配置した画像や映像に“なんか違うなぁ…”と感じたら、差し替えをしたり、ここの項目と次の項目の空白が広すぎるなぁ…と感じたら、空白を詰めたりしていく。

22HTMLコーディング

HTMLコーディング

“HTMLコーティング”というのは、ブラウザ上で表示させるためには、“HTML言語”で書かれていることが必須であることから、HTML構文を整えていくということになる。

分かりやすく言うと、このタイトルは大項目でその中に本文が入っていて、次は中項目なので…といった文章のそれぞれの箇所に適切なタグを付けて、ブラウザが正しく認識してくれるようにすることだ。

ここは少し専門知識を要するところだが、それだけに重要な箇所でもある。

23ディスクリプション作成

“ディスクリプション”というのは、Googleなどの検索エンジンの検索結果に表示された時にそのウェブページあるいはウェブサイト(ホームページ)のタイトルと簡単な説明文が表示されるのだが、その“簡単な説明文”のことを指す。

大体120文字前後が表示されることから、“ディスクリプション”は120文字前後で記述する。

これは、ウェブサイト(ホームページ)全体とここのウェブページそれぞれに必要になる。

ここまでが、ウェブサイト(ホームページ)構築の3番目の工程、制作の工程になる。

制作の工程まで進められたら、95%、ウェブサイト(ホームページ)は完成していると言っていい。後は、最後の工程の“公開”を残すだけだ。

-サイト構築・運営
-, ,