自分は技術者じゃないし、ウェブ制作の技術を知る必要はない。そう考えていませんか？ 実際どうなのか、というとこんな記事を書いているくらいですし「最低限はあったほうがいい」と断言します。というのも、ホームページを最終的に確認するのは担当者の方であり「サイトの質」くらいは把握しておかなければ、プロジェクトにとって最低なサイトを提供されていても、判別がつきません。

しかも、難しいのはクリエイターや制作パートナー企業によって「質」の価値の置き所もまったく異なることです。デザインを重視するタイプもいれば、プログラミングのコードの質を重視するタイプもいる。情報設計を大事にするタイプもいれば、マーケティングを大事にする人もいる。最終的に何を重視するか決定するのは、発注者側にほかなりません。

もちろんクリエイターや制作会社側から、こうしたほうがいいという提案も受けるでしょう。ベストな道を提案しない制作パートナーなど論外なわけですが、何が良いかを判断するために、最低限の知識があれば、質の高い議論も生まれるはずです。

また、制作過程で制作物の確認をする上で、最低限の知識がなければ、思考の齟齬がうまれることもあります。例えば、制作パートナーが話している意図を読み違えてしまったり、逆に自分が発した言葉が本来制作側が使っている意味とは異なり、コミュニケーション上の齟齬が生まれてしまうこともあります。

例えばIT用語を使う必要がある時に、その意味を勘違いして覚えていたら、お互いに話が噛み合わなくなってしまいます。よって、コミュニケーション上のリスクや、しっかり自分の目で良し悪しを判断するために、技術に関して最低限の理解は必要なのです。

数百円のお惣菜を買うのではなく、ホームページという何十万、何百万、何千万という高額の買い物をするわけですから、自分である程度理解できるようになると、よりホームページで成果を出せるようになるでしょう。

ホームページを作る手順

技術についてお話する前に、ホームページ制作の基本手順を押さえておきましょう。どういった手順とどのような価値観で進めていくのか知っていれば、全体像を把握した上でより建設的にプロジェクトを進められるようになるはずです。

ヒアリング

まず、どんなサイトを作りたいのか、今回ホームページを制作するゴールがどこにあるのか決める必要があります。商品やサービスを販売することなのか、それとも問い合わせを取るためなのか、ブランド力を高めるためなのか。ゴール設定がふわっとしていると、当然、制作するサイトも一貫性がないものになります。まずはゴールを明確にしましょう。

さらに今回、どんなページが最低限欲しいのか、コーポレートカラーはあるか、無いのだとしたら、色のイメージはるか、参考にしたいサイトはあるか。制作パートナーが様々な情報についてヒアリングしますので、作りたいサイトのイメージをあらかじめもっておくと話がスムーズになります。

サイトマップ、企画、お見積り

ヒアリングが完了したら、一旦制作パートナーは情報を持ち帰ります。その後、全体のおおまかな企画とサイトの構造を表すサイトマップ、そしてお見積りを制作します。次のミーティングはそれらの情報をもとに作られた見積もりを許可すれば、制作開始となるでしょう。

ちなみにお見積りについてですが、価格の安さだけで決めるのは良くありません。詳しい制作パートナーの見つけ方に関してはこちらの記事にまとめましたので、ぜひ、参考にしてみてください。

なお、大抵の場合、制作会社側が何か使える写真や素材がないか求めてくるでしょう。もし素材を求められたら、過去のパンフレットデータや、使って欲しい画像、動画、ロゴなど、一通り渡せるデータは渡してください。うまくデザインに活用してくれるはずです。

ワイヤーフレーム

見積もりがOKであれば、次にワイヤーフレームを制作します。ワイヤーフレームとは、設計図みたいなもので、大抵は、灰色のボックスや線、そして文字だけで「どこに何のコンテンツが入るか」指定したものです。不動産の間取り図、家具の組み立て設計図みたいなものですね。

ワイヤーフレームができたら、文字の内容やレイアウトを互いに確認し、抜けているコンテンツがないか、ユーザーにとってわかりやすい設計になっているかなど確認します。クライアント様にもご確認頂きますが、もちろんプロではないのでシンプルに感じたことを言えばOKです。

例えばパッとみてわかりにくいとか、ここのコンテンツはもっと強く打ち出したいとか。文言はもっとこうしたいとか。思ったことをそのまま伝えましょう。ユーザー目線の重要な情報として、制作パートナーも受け止めてくれるはずです。

デザインを制作する

ここから具体的な制作に入ります。まず制作パートナーはデザインの方向性を決めるため、トップページだけ最初に出してくるケースが多いです。トップページのデザインを確認し、方向性があっているかどうか確認してOKだったら、他のページの制作に入ります。ちなみにトップページ以外のページについては「下層ページ」と呼ばれます。デザインは一度方向性を決めてすべて作ってしまうと、後から変更を加えるのが難しくなります。それだけ労力や手間がかかるためです。

例えば色の変更を後からしようとすると、なんとなく「色を変えるくらいすぐできるんじゃないか」と感じてしまうかもしれませんが、デザインとは色やレイアウトなど、すべてが絶妙なバランスで整っており、色1つ変えるだけだとバランスが崩れて、全てダサくなってしまうこともあるのです。

色を変えれば他のデザイン要素もすべて変更することになり、作り直しに近い手間がかかることもあります。なのでデザインの方向性はここで慎重に話を聞いて決めていきましょう。トップページのデザインが決まったら、下層ページをすべてデザインし、OKであれば「コーディング」という作業に進みます。

コーディング

今まで作ってきたデザインは、あくまでも画像として存在しており、クリックでリンクが飛ぶこともなければ、スライドショーのような機能があるわけでもありません。Googleで検索しても出てくることはありませんし、ホームページとしての機能を何も有していません。なので、ただの画像に対してホームページの機能を与えるのが、コーディングという作業になります。

コーディングは今まで作ってきた画像を、そのままホームページとして機能を持つ形に構築しなおす作業です。なので、優秀なエンジニアであれば、頻繁にチェックをしなくても、見た目をきちんと再現してくれます。クライアント様でやることと言えば、最終的に出来上がってきたものを、しっかりデザイン通り組み上げ、レイアウトに崩れがなく、リンクなども間違っていないかということです。

ただし、アニメーションのような動きをつけていた場合はコーディング後に初めて動きの完成形を確認することになります。イメージの相違がないか、しっかり確認しなければなりません。いずれにせよ、コーディングの段階では微調整程度の修正がいくつかあって問題なければ納品となります。ただ、納品となるのは特に会員登録のようなシステム開発が存在しない、情報を伝えることをメインとした一般的なホームページである場合です。

こうした情報を伝えるために作るサイトを「静的サイト」と呼びます。ここまでのコーディング作業を「フロントエンド」と呼んだりもします。

ただ、会員登録などを含むウェブサービスやウェブアプリケーションであれば、コーディングのあとにシステム開発をしなければなりません。システム開発が必要なサイトに関しては「動的サイト」と呼んでいます。システム開発側の作業を「バックエンド」と呼びます。

システム開発

前述したように、会員登録や商品購入機能といった、ユーザーが何かしら道具として使う機能がホームページにある場合、システム開発が必要になります。システム開発はphpやRubyと呼ばれる言語が主に使われており、HTMLやCSSのコーディングよりさらに深いプログラミングの知識や考え方が必要になります。システム開発に関してクライアント様が行うことは、しっかりと希望した機能が動作しているかどうか、実際に使ってみてチェックすることです。

大抵の動作はもちろん制作パートナーがチェックしてありますが、彼らはプロとしてチェックしていますので、まったく知識のないユーザーが操作した場合、予期しないエラーが起こることもあり、そうしたエラーに関して見落としがある可能性もあります。

なので、クライアント様で確認する際は、完全に素人のユーザー視点から自由に使ってチェックをし、その上で正常に機能しているかどうか、確認すると良いでしょう。クライアント様に求められるのは、あくまでユーザー視点の確認です。

納品と公開

静的サイト、または動的サイトの開発が完了したら、いよいよ納品です。納品は、後ほど詳しくご説明させていただきますが、サーバーと呼ばれるデータの保管庫のような場所にデータを移す必要があります。サーバーは制作パートナー側で用意することもありますし、クライアント様で用意することもあります。すでにホームページを持っていたり、ある程度大きな組織においてホームページを公開する場合は、自社でサーバーを持っていることが一般的です。

サーバーではテスト(ステージング)環境と呼ばれる表に公開されない環境と、本番環境と呼ばれる一般ユーザーに公開される環境が存在します。ただ、速度を重視、または公開しながら修正を加えていくような状況によって、本番環境のみ用意し、すべて本番環境でチェックした上でそのまま公開することもありますが、基本的にはテスト環境と本番環境が存在します。そして、テスト環境で確認し、OKであれば本番環境に公開して、納品、公開(リリース)となります。

HTML、CSS、JavaScript、php、Ruby、Python

ホームページを制作する時にHTMLやCSSという言語を使って書くというのは、ある程度広く知られていることかもしれませんね。ただ、ホームページを制作する言語はたくさんあり、数多く利用される言語だけ集めても6種類あります。今回はシェアの大きい言語を6つ紹介させていただきます。

HTML

ホームページの骨組みを作る言語です。ホームページはボタンや画像、テキストやタイトルなどのような細かいパーツで構成されていますが、これらパーツは言ってみれば「機械語」に変換してあげなければ、何がボタンでどれが画像なのか、Googleの検索エンジンやパソコンが理解してくれません。

なので、ホームページを機械が理解できるように、パーツに対して適切な意味づけをしてあげるのです。具体的な方法は興味があれば調べてみてください。HTMLは単なる意味づけなので、色やレイアウトのようなデザイン的要素を再現することはできません。

CSS

HTMLで意味づけしたサイトに対して、色や位置のようなデザイン的要素を加えます。CSSでできる範囲は年々広がっており、アニメーションもCSSでつけることができます。CSSがあってはじめて、ホームページはデザイン性を得ることができます。HTMLだけだと、ただの文字の羅列にしかなりません。

JavaScript

ホームページをアプリのように、ユーザーが操作できるようにする言語です。例えばクリックしたら画像が拡大表示されたり、データの一覧を並び替えたり、複雑なアニメーションをつけたりする場合はJavaScriptで制御していることが大半です。

シンプルなアニメーションはCSSでもつけることができますが、例えばシンプルなアニメーションをいつどのタイミングで機能させるかなどは、JavaScriptで制御します。ただ、JavaScriptはあくまでも「操作」ができるだけで、データを「保存、記録」などはできません。それらができるのは、以降に紹介する言語です。なお、HTML、CSS、JavaScriptまでをフロントエンドと呼びます。

PHP

データの保存などが可能になるのはここから紹介する「バックエンド」と呼ばれる言語です。中でもPHPはウェブサービス、ウェブアプリケーション開発によく使われます。言語としては古く、最新の考え方やロジックでできているわけではありませんが、情報が多く、触れる人も多いので、リソースや人員確保に困らなくてすみます。WordPressもphpでできているので、WordPressとの互換性もあり、システム開発には最もよく使われる言語の1つです。

Ruby

日本人が開発し、世界中で使われる稀有な言語です。最近ではスタートアップを中心にウェブサービスでよく使われるようになりました。ただ、実際に使われているのはRuby on RailsというRubyをもっと開発しやすくするフレームワークと呼ばれる仕組みを使って書かれていることが多いです。日本ではPHPと同じくらい、広く使われているバックエンド言語です。

Python

機械学習や人工知能などを取り入れて開発する際によく使われる言語です。なぜその分野で使われるかというと、人工知能や機械学習を活用するための開発をサポートする仕組みが整っているためです。近年ではスプレッドシートの代わりにPythonを学ぶなど、より統計やデータ分析の分野にも使われており、他の2つの言語とは、少し違った特色を持っています。

バックエンドの言語は特に、機械学習や人工知能を使うのでなければ、どれを使ってもクライアント様にとって、それほど大差はありません。しいて言うなら、PHPやRuby on Railsであれば、書ける人材がたくさんいるため、もし開発者が変わったとしても、別の開発者を見つけやすい、といったくらいで覚えておけば良いでしょう。

サーバーとドメイン、SSL、データベース、FTP

次に、サーバーまわりについての解説をさせていただきます。クライアント様で用意するケースも多いですので、用語としても機能としても、把握しておいた方が話もスムーズになるはずです。では、1つずつ解説をはじめていきます。

サーバー

ホームページを誰でも見れるようにするためには、まずサーバーが必要です。サーバーとはデータの置き場のようなもので、オフラインで言う貸し倉庫に近いと考えてください。サーバーを持っている会社がたくさんの特殊なハードディスクをもっていて、その一部を貸し出しているイメージです。

もちろん自社でサーバーを作ることもできますが、運用や設置のコストがたくさんかかります。ホームページのデータをサーバーにおくことで、はじめて一般公開できる状況になります。ただ、サーバーだけだと誰もそのサイトにアクセスできません。URLが付与されていないためです。そこで必要になるのが次に解説するドメインです。

ドメイン

ドメインとはホームページの住所のようなもので、当サイトであれば、quon.inkがドメインとなります。ドメインはドメイン管理会社から取得できます。

ドメイン管理会社としては「お名前.com」などが有名どころです。ドメインを取得し、ホームページのデータが置かれたサーバーと接続することで、はじめて誰もがホームページに辿り着けるようになります。そしてGoogleなどの検索エンジンにも登録され、検索すれば辿り着けるようになるのです。

ちなみにURLと呼ばれることもありますが、URLは例えば「https://quon.ink/blog/tsukuba/」のようにドメインを含めた住所全体を意味します。ドメインはあくまで「quon.ink」を意味するものだと考えればわかりやすいかもしれません。

データベース

通常、ホームページのデータはパソコン内と同じように「ファイル」という形で保存されています。ただ、データによってはファイル形式で保存すると、逆に扱いづらくなってしまう場合もあります。

例えばユーザーデータなどです。ユーザーの名前、年齢、メールアドレスといったデータは、検索をかけたり編集したりすることも多いです。そうするとファイルの形ではなく「テキストだけ」で扱った方がプログラム上処理がしやすくなったりします。

このようにテキストとして扱った方が便利なデータの場合、データベースを活用します。データベースは大抵のサーバーに設置されており、自由に扱うことができます。ブログ記事やSNSの投稿といった、膨大に増えていくデータに関しても基本的にはデータベースに保存されます。

SSL

ホームページが悪者にハッキングされないようにするセキュリティです。URLを見ると「http」と「https」の2つを目にすることがあると思いますが「https」となっていれば、それはSSLが機能していてセキュリティが働いているということになります。

パソコンでWebサイトを見る時には、ブラウザというアプリケーションを使ってホームページを閲覧します。ホームページを閲覧するとき、ブラウザとサーバーの間でデータの通信が行われているわけですが、SSL化していない場合、生のデータがサーバーとブラウザの間で行き来するわけです。こうなると、もし悪いハッカー(クラッカー)がデータを盗もうとしたら、通信の間に割り込むことで、容易く情報を盗まれてしまいます。

ところがSSL化しておけば、通信されたデータはすべて暗号化されるため、盗もうとしても解読できないということになります。なので、セキュリティが高まるわけです。昔SSL化は割と高いお金がかかったのですが、最近では無料でSSLを使えるサーバーも増えました。

FTP情報、FTPソフト

FTPソフトは自分のパソコンからサーバーの中身にアクセスするためのツールです。サーバーにデータを置いてはじめてホームページを一般公開できると言いましたが、FTPソフトでサーバーにアクセスすることで、データをサーバーに送り込むことができるのです。

そして、FTP情報とは、パソコンからサーバーにアクセスするために必要な鍵のようなものです。FTPソフトにFTP情報を入力することで、はじめてサーバーの中にアクセスできます。FTP情報はサーバーを借りた時についてきますので、必要であれば、制作パートナーに渡してあげてください。

ただし、会社の方針で本番サーバーには社内からしかアクセスさせないケースもあります。その時は、テストサーバーのFTP情報だけ渡すか、制作パートナー側でテストサーバーを用意してもらう必要があるでしょう。

CMSとWordPress

CMSとは「コンテンツ・マネジメント・システム」の略称で、ホームページのレイアウトや文章、画像など、コンテンツを管理画面から簡単に変更できるようにするシステムを意味します。

ホームページはこれまでお話してきた通り、さまざまな言語や工程によって作られます。CMSはプログラミング等の知識がなくても、ホームページの変更や構築ができるシステムとも言えます。

そんなCMSの中でも、もっとも有名なのがWordPressです。WordPressは無料で提供されるCMSで、全世界に存在するホームページの40%以上がWordPressで構築されていると言われています。ここで1つ勘違いされるのが、WordPressを使えば、簡単に安くホームページを構築できるのではないか、という点です。これには大きな誤解があります。

確かにテンプレートをそのまま使えば、一瞬でホームページを構築することか可能です。しかしオリジナルのデザインとなると、一旦通常通りホームページを作ったあとで、そのデータをWordPressで使えるようにテンプレート化という作業が加わるので、通常のサイトよりも工数も価格も高くなります。

ただ、WordPressで作ったサイトは、例えばブログやニュースを更新できたり、サイトの一部を更新できるようになるので、クライアント様で必要箇所が管理、変更できるというメリットがあります。

かといって、サイトの全てを変更できるようになるわけではありません。自由に更新したい箇所は、特殊なプログラムを組んで、変更できるように編集する必要があります。最初からどこを更新したいかを決めてWordPress化のすることで、指定箇所の変更が可能になる、という意味です。制作パートナーとどこを更新できるようにするか話し合って決めなければ、WordPress化する意味はありません。変更したい箇所をしっかり話あって、制作を進めるようにしましょう。

キャッシュとキャッシュ削除

Webサイトを表示するためには、サーバーからブラウザにデータを送らなければなりません。しかし、毎回ページを開くごとに通信していたのでは、表示も遅くなってしまいます。そこで表示を高速にストレスなく行うために、一度読み込んだデータをパソコンに保存しておくのです。すると、いちいちサーバーからデータを呼び出さなくてよくなるため、表示が早くなります。

しかしキャッシュには欠点があります。それは、サーバー側でファイルを最新にしても、キャッシュがパソコンに残っているので、新しいファイルに更新されないことです。キャッシュは一定時間経過すれば消えますが、もし制作パートナーとリアルタイムで確認しなければならない場合、待ってもいられません。そんな時はブラウザのキャッシュを手動で消すことができます。ブラウザごとでキャッシュの消し方は異なるので、今お使いのブラウザでキャッシュの使い方を調べてみましょう。Google検索でブラウザの名前とキャッシュの消し方で検索をかければ、すぐに見つかるはずです。

Googleアナリティクス、サーチコンソール

何度も言うように、ホームページは作っただけだと意味がありません。ユーザーがサイトに訪れたあと、どのように移動しているのか、どのページがよく見られていて、逆にどんなページが興味を持たれないのか、細かにアクセスデータをとって調べる必要があります。

そこで役にたつのが、Googleアナリティクスです。Googleアナリティクスを設置すると、数多くのアクセスデータを取得することができます。そのデータを分析すれば、自ずと、どのようにページを改善すれば良いかもわかってくるでしょう。

さらにもう1つ、サーチコンソールというツールがあります。こちらもGoogleが提供しているもので、検索エンジンにおいて、どんなキーワードでサイトにアクセスしてくれているのか、そしてどのページが何番目に表示されているのかなど、検索に関する様々な情報を手に入れることができます。SEO向けのツールですね。

サーチコンソールで検索エンジンへの対策を行い、Googleアナリティクスでサイト内で迷わないように、わかりやすいように、そしてユーザーの興味を引くように修正を施す。この2つはホームページに必ず入れておいた方がよいでしょう。

レスポンシブデザイン

もともと、スマートフォン用のホームページと、パソコン用のホームページは、別々に作られていました。ところが、HTMLやCSSが発達するにつれ、1つのファイルでも画面の横幅に応じてレイアウトを出し分けられるようになったのです。それが、レスポンシブデザインと言います。レスポンシブデザインは、別々にファイルを制作するよりも複雑なことはできませんが、大半のサイトはレスポンシブデザインで補えるようになりました。制作コストも期間も圧縮できます。

現在は何か特別なことがない限り、スマートフォン用のサイトとパソコン用のサイトを別々に作ったりはしません。レスポンシブデザインで、つまり同じファイルの中で画面の横幅に応じて可変する形で制作するのが一般的です。この言葉はクリエイターサイドとのコミュニケーションでもよく使いますので、記憶しておくとスムーズに話を進めることができるでしょう。

まとめ

ホームページ制作は「制作パートナーにまる任せしていれば最高のサイトができる」というものではありません。クライアント様は、自分自身の業界のプロ目線でサイトを確認する必要があります。特にユーザー目線でサイトについて考え、クリエイターはホームページのプロ目線で最高のホームページを目指し、初めてベストなホームページが完成するのです。

例えば家を立てる時、すべて任せれば自分たちの生活にベストな家が建てられるとは限りません。自分達には自分達の生活スタイルがあるので、建築士さんに、自分たちの生活のあり方を伝えて議論しなければ、本当に欲しい家は完成しないでしょう。ホームページも一緒です。

もちろん、時間と予算があれば、ウェブ制作パートナーも徹底的に業界のことを調べ、何がベストな道か確信を持った上で制作することができるかもしれません。しかしそこまで調査を深掘りしたら、ホームページ1つ作るために、膨大な費用が必要になってしまうでしょう。

なので、なるべくクライアントとして発注する場合も、完全に丸投げではなく、自分たちの視点から積極的に議論および情報の提供をしていきましょう。それこそ、ウェブ制作のプロジェクトを成功させる秘訣です。