Webページを公開するまで

大山先生

「僕にとってWebは遊びみたいなものです」が口癖。
好きな言葉は「天才とは努力を努力と思わない才能」。Webチーム制作部門 の要にして最後の砦。XYZ…(後がない)どこかで聞いたことがあるそんな言葉を呟けば、大山先生が登場し問題を綺麗に片づけてくれるためチームメイトは彼のことをスイーパー(始末屋)と呼ぶ。ハードボイルドを愛し、一見不愛想に思われがちな大山先生だが、いつも快く問題を片づけてくれることから、その心は意外にも「エンジェルハート」だとか。

小野

デザインをはじめ様々なことをこなす、自称ゼネラリスト。強面であるが笑うと、実は八重歯が可愛いかったりすることは本人も自覚しているらしい。Web制作チームの中では、まさに”ピカイチ”なITリテラシーの低さで、リテラシーという言葉を聞いて「大正だっけ?」とわけの分からないことを言った過去があるとかないとか。(デモクラシーです。それは)加えて年も年であるため、物忘れ＞(大なり小なり)物覚えなのが現状。 この人のWeb知識を高めれば、きっとよりよいデザインが生まれるに違いない、そう考えたエンジェルハートな大山先生。Webについて「ピカピカの1年生」でも分かるように分かりやすく説明してくれます。

大山　これまでHTMLや簡単なタグの書き方、そしてSEOについて簡単に説明してきましたが、どうですか小野さん。理解できています？混乱していません？

小野　理解できてはいるよ。ただ色々な情報をいっぺんに知ったから、ちょっと疲れちゃってるかな。

大山　そうじゃないかと思いました。ここら辺でちょっと整理しますか。今まで説明したことはそれぞれが断片的なものなのですが、全てWebサイトを構築するために必要な要素です。SEOは要素といったら変ですが、ページを構築する上でのポイントとなります。じゃあ、Webサイトを構築する要素って他にどんなものがあるのって思いません？

小野　まぁそりゃそうだ。

大山　そこで今回は今まで見てきたもののほかにWebページを構築するための要素と実際に構築したページをインターネット上で公開するために必要なものを説明します。早速行きましょう！

Webサイトを構築するもの

大山　Webサイトを構成するのは文章であり、 画像であり、動画や音楽などの様々なコンテンツ、すなわち情報です。

コンテンツをインターネット上に置き、ブラウザを通して見られるようにすることが Webサイトの構築です。この時、ブラウザにコンテンツを認識させるために必要なのが HTMLでしたよね。

HTMLでコンテンツを書こう

大山　そういう意味ではHTMLはWebサイトを作る上で必要最低限の要素となります。 ただし、HTMLだけでは文章や写真、動画があっても思った通りにレイアウトしたりすることは出来ませんし、読みやすく色をつけたりすることも出来ません。 そこで登場するのがCSSです。

CSSで文章を読みやすく、分かりやすくしよう

小野　何CSSって？

大山　CSSは始めて出てくる言葉です。CSSとは、Cascading Style Sheetの略で、HTMLで書かれた内容を、読み手にとって読みやすく、また分かりやすくするために見栄えを整えるための言語です。 学生時代、綺麗なノートを書く人はいませんでしたか？そういう人のノートって借りたくなりますよね。

同じ内容を書くにしても、文字の大きさやマーカーを使って強弱をつけたり、その文章や言葉をどこに書くかにより、見やすさであったり分かりやすさがずいぶんと変わります。そういう意味で見栄えを整えることはとても重要です。
CSSのおかげでより細かい見栄えの調整が可能となりました。
また、HTMLとCSSを分けることによりファイルの構造もすっきりします。

JavaScriptでWEBページに動きを加えよう

小野　出た。JavaScript。よく聞くんだよなぁ。難しいイメージがある。

大山　そうですね。サイト内のページをブラウザで見た時、動的な要素を付け加える言語がJavaScriptです。
カーソルを合わせると、色や形が変わったり、アクセスする度に表示される画像を変えてみたり、様々な変化を与えることが出来ます。主に、動きのあるデザインに使われることが多いのが特徴です。

PHPでサーバを介した処理をしよう

小野　JavaScriptもさることながらPHPはもっと難しいイメージがある。

大山　確かに難しいかもしれませんね。ここではその役割についてざっくりと説明します。Webサイトでは様々な情報を扱うことが出来ます。 例えば、お問い合わせフォームやショッピングサイトでは、サーバを介してWebサイトの管理者と利用者間のやり取りが出来るようにしています。 その為に必要な言語がPHPに代表されるサーバサイドの開発言語です。

小野　何、サーバサイドの開発言語って。

大山　サーバに蓄積されたデータベースに対して質問を投げかけ、返事を受け取るための「問い合わせ言語」です。よくHTMLを勉強した後にPHPを勉強した人は、PHPを難しいと思うことが多いようです。それは両者の性質が全く異なるためです。HTMLは、文書に印を入れることによってその構造をコンピューターに伝えるための「記し付け言語」です。性質の違いは明らかですよね？まぁ、詳しいところは改めて説明します。

インターネット上で公開しよう

大山　今まで説明してきた内容だけでは、コンテンツとなるファイルを世界中の人に見てもらうことは出来ません。インターネット上で公開され始めてWebサイトとなります。そのためにはコンテンツとなるファイルをインターネット上に置かなければなりませんよね。そこで、必要となるものが2つあります。

ドメインとは「Webの世界の戸籍」

大山　まず一つはドメインです。人間の世界で言うなら戸籍のようなものです。戸籍がなければ行政のサービスを受けられないのと一緒で、ドメインがあって初めてWebのサービスを受けることが出来ます。ドメインについては、現段階ではURLを取得することと考えておいてください。

サーバにファイルを設置しよう

大山　Webサイトは一般的に「Webサーバ」に設置し、サーバを介して世界中に配信されます。
中にはサーバを自作する、という方もいますがオススメは出来ません。

FTPソフトを使いサーバにファイルを送ろう

大山　サーバにファイルを設置する際に必要となるのがFTPソフトです。FTPとはFile Transfer　Protocolの略で、訳すなら「ファイルを転送するためのプロトコル」です。もしFTPがなかったら、例えば画像一つ一つを選択して手作業でアップロードしなくてはいけません。ファイルを一度で指定した場所まで届けてくれる。そんな頼れるメッセンジャーがFTPソフトです。

小野　プロトコル。何すか？それ。

大山　聞かれると思いました。じゃあ、分かりやすく説明します。小野さんと僕が何かやり取りをするとします。小野さんですから迷うこともあると思います。だから事前に決まりごとを決めておきます。例えば、僕が、北海道に行きました。現地でバフンウニを食べたらものすごく美味しかったとします。やさしい僕は小野さんにも食べさせてあげたいと考え小野さんにウニを送ります。もしこの時、何も伝えずにウニが送られてきたら小野さんはどう思います？

小野　大山はデキたやつだなって思うだろうね。ウニを送られて喜ばないやつはいないでしょ。

大山　例えが悪かったかな、コンピューターは小野さんとは違い常識がありますから、いきなり物が送られてきたらビックリしてしまいます。だから、そんな時はあらかじめ「物を送る前には連絡をする」と決めておかなければいけません。この決め事こそプロトコルです。

Webの進化

大山　以上、Webサイトを構築するにあたり必要なものを紹介してきました。話は変わりますが、小野さんはWebサイトを見るのは好きですか？

小野　もちろん好きだよ。ただサイトを眺めるだけでなく、その下にあるコンセプトであったり、使われているキャッチコピーであったり、そういうものを見るのはすごく好きだよね。

大山　いいこと言いますね。僕は、ブログが大好きです。マニアックなテーマを扱ったブログは特に好きで、ブログからはとてもたくさんの事を学びました。「ブログ」もれっきとしたWEBサイトですからね。だから、僕にとってWebサイトは教科書であり、雑誌のようなものなんです。

小野　大山は本当にWebが好きなんだねぇ。一緒に仕事する前は、正直「コイツ何考えてるんだろ？」って思っていたけど、知れば知るほど大山のWebに対する純粋な愛情を感じるよ。

大山　まぁ僕も、小野さんのこと「何だ、この人は」って思いましたけどね。正直、小野さんとクリエイティブという言葉が結び付かなかったです。話がそれましたね。Webサイトって日々進化してますよね。ちょっと語ってもいいですか？

小野　どうぞどうぞ。

大山　例えば、コーポレートサイトは企業が自社のことを紹介、アピールするページです。企業にとってはパンフレットのようなものです。また、十数年前に流行ったテキストサイト。これは小野さんの方が詳しいかもしれませんが、これもWebサイトです。無料作成ツールやWeb上のレンタルスペースが多くなり始めた時代背景もあり、誰でも気軽にWebサイトを構築することが可能になりました。テキストサイトは、ブログサービスの普及と共に衰退していきましたが・・。

小野　テキストサイトか。懐かしいなぁ。「侍魂」なんて今見ても面白いもんね。見栄えという点ではやっぱり古さを感じるけど。
でもさ、やっぱりブログでもなんでもそうだけど、コンテンツが命だと思う。時代を経ても面白い、また読みたいと思うのは、コンテンツが魅力的だということ。作りこまれたコンテンツは時代を経ても色あせないと俺は思う。小説とか、映画や音楽がそうであるように。

大山　そうなんですよ。全くその通りで、良くSEOでは「コンテンツイズキング」などと言われます。読んで字のごとくで、WEBサイトにおいて最も重要なものはコンテンツであるという考え方です。僕もそのことは強く思います。話が途中だったので続けますよ？
第一回目で出てきたティム・バーナーズ=リー。そもそも彼が初めてWebというものを創りだしたわけですが、その目的は論文や文書をリンクさせ、共有出来るようにすることでした。 生まれた当初のWebは、HTMLだけですべての表現を行っていました。つまり、白黒の、「書類」でしか無かったわけです。
それがCSSの登場により、自在なレイアウトが可能になり、さらにはJavaScriptのおかげで、動きのあるサイト作りが可能となりました。 ユーザーにとってより読みやいものになり、制作者にとっては表現の幅が広がったわけです。
この「表現の幅の広がり」は今も続いていて、それは例えばHTML5であり、CSS3です。
文章のフィールドでしか無かったHTMLによって、今では動画の設置や、ブラウザで絵を描くことが可能となりました。また、色付けとレイアウトの機能でしか無かったCSSでは簡単なアニメーションを作ることも可能です。
そして、そういった進化の中でWebサイトを作ることの難易度はどんどん下がっています。 先ほども言いましたが無料作成ツールも最近ではずいぶんと充実しています。WIXのように非常に完成度の高い無料作成ツールも登場しました。今では全世界で3割以上のシェアを持つワードプレスも簡単にコンテンツを用意する事が可能です。
つまり何が言いたいかというと、「Webサイトを作る」ということ自体には、価値がなくなってきているということです。サイトを作るだけではなく、例えば「Webサイトを通して何ができるか」などといった方向に価値がシフトしていくのはないかと考えています。

小野　その通りだね。ちょっと前に、AIがWebサイト作ってしまうという記事を読んだことがある。統計をもとに、最適なレイアウトや配色を決め、最適なコンテンツを作り上げるというものだった。実現が本当に可能なのか、真偽のほどは定かじゃない。でもそれって、ものすごく危機的な話であり、だからこそ人でなければ作れないものというのが大切になってくると思う。 それは、コンセプトであり、ブランディングであり、つまり心のこもった、温かみのあるコンテンツなのかもしれない。時代を経ても色あせないモノづくりをしていきたいね。そうそう、そういやさ、オウンドメディアって言葉をよく聞くんだけど、おそらくそういうものも大切。今度詳しく教えてね。

大山　分かりました。小野さんもずいぶん変わってきましたね。僕としてはどんどん僕好みになってきていてうれしい限りですよ。