こういう人にこの記事は役に立ちます
・WEBサイトはだれが作っているの？
・WEBサイトはプログラミングで出来ていることは何となく知っているけど、どういう仕組みで表示されていの？
と疑問に思っている人！
簡単にまとめるとこう！
作りたいページの設計図を作成
⇒見た目のデザインを作成
⇒エンジニアが、デザインを基にコンピューターが分かるコードに変換
⇒webサイトが完成
webサイトとは？
今あなたが読んでいるこのページ含め、web上に公開されているページをwebページやwebサイトと言います。「ホームページ」も今では同じ意味として使われています。
webページとは？
googleで何かを検索したら、いろんな記事を読むことができます。
このweb上に公開されている一つ一つの記事をwebページといいます。
複数のwebページをまとめて、webサイトといいます。
あるケーキ屋さんを例にあげると、
ケーキの商品一覧が載った1枚のページをwebページ
商品一覧ページ・アクセス・企業情報などのwebページをまとめて、webサイト
と言います。
webサイトは一体どのようにつくられているのでしょうか？
webサイトは全て「文字」で作られている
webサイトは全て文字で作られています。
以下のような、色がきれいで、写真がたくさん使われているこのサイトも全て文字情報によってつくられています。
つまり、見た目の美しいデザインや上下にスクロールできる動きも全て、文字情報によって成り立っているのです。
「文字」で出来ているってどういうこと？
webサイトはデジタルの世界です。
デジタルの世界はコンピューターが作り出しています。
コンピューターは人間の世界のように想像力や物理的な形でモノを作ることはできません。
あらかじめ人間とコンピューターの間で決められたルール（＝文字列）によって、webサイト上で見せたいモノを表現しているのです。
例えば、webサイト上に使われている青い色は「#0000FF」といった文字情報によって表示されています。
それは、青＝#0000FF にしよう。とあらかじめルールが作られているからです。
この青い色をちょっと濃くしたいなと思ったら、「#0000DD」という違う文字をコンピューターに打ち込みます。
文字にシャドーを付けたいなと思ったら、「text-shadow: 2px 2px 4px rgba(0,0,0,0.5);」といったような文字列を打ち込みます。
まだ上手くイメージできない人は、もしかしたらこう思うかもしれません。
「webサイトだって、パワーポイントみたいに視覚的にペタペタ画像や図形を貼ったりテキストボックスを挿入したりして作れないの？
色だってボタン一つで選択して背景色引いたり、マウスで図形を並べたりすればいいんじゃないの？」
実は我々が当たり前のようにパワーポイント見たいに視覚的に自由に色をぬれたり図形を作れるのは、それができるように、「どこかの誰か」があらかじめ文字情報としてコンピューターにプログラミングをしてくれているからなのです。
誰が文字情報にしているの？
では、文字情報としてコンピューターに入力している「どこかの誰か」とは一体どんな人なのでしょうか？
それがエンジニアという職種の人です。
エンジニアと聞くと、黒い画面によくわからない文字をひたすら打ち込んでいる人を想像しますよね。
まさにあの打ち込んでいる文字情報によって、われわれが見ているwebサイトが出来上がっているのです。
webサイトが出来上がるまでの流れは以下の通りです。
デザイナーが、見た目のデザインを考える。
↓
エンジニアが、そのデザインを全てコンピューターが理解できる文字情報に変換して、コンピューターに打ち込んでいく。
↓
コンピューターはその文字情報が持つルール通りに、WEBサイトとしてパソコンやスマホの画面に表示させてくれる。
では、どのように、見た目のデザインをエンジニアはどうやって文字情報に変換しているのでしょうか？
そして、コンピューターははその文字情報から、見た目のデザイン通りにWEBサイトとして変換する事ができるのでしょうか？
webサイトはHTMLとCSSというルールによってつくられている
それは、この文字列＝このデザインになる、この文字列＝こういう動きになる
というルールがあらかじめ決められているからです。
例えば、こちらの丸いボタンを作るりたいという場合は、以下の文字情報をコンピューターに入力します。
.btn {
background: salmon;
color: #fff;
padding: 16px 40px;
text-decoration: none;
border-radius: 30px;
<a href=リンクしたいページのURL>ボタンに表示したい文言</a> Backgroud= ボタンの色 Color=テキストの色
といったように、ルールがあらかじめ定められています。
このルールに則って、数字などを作りたいデザインに応じて変えことでデザイナーが作ったデザインを目指して作っていくのです。
エンジニアはこのルールをたくさん覚えることで、デザイン通りに再現していきます。
webサイトが出来上がるまでの流れ
一つのwebサイトを完成させるには、以下の流れを一般的にたどります。
■依頼主
「あれこれ、こういう機能を持ったwebサイトを作りたい」とweb制作会社に依頼します。
例）ケーキ屋さんの場合
・<商品一覧>＜オンラインストア＞＜アクセス＞を載せたい
・若い女性をターゲットにしているため、かわいらしく明るい印象のサイトにしたい。
等…
■webディレクター
依頼内容を基に、サイトの設計図を作成します。
この段階では、色やデザインなどは考慮せず、
・商品はどのような配置・順序で並べるか
・各ページの紹介文の文言はどうするか。
・ボタンはどこに何個配置するか
等サイトの設計図を作成します。
■デザイナー
設計図を基に、見た目のデザインを作成します。
この段階で、各webページの見た目のデザインが決まります。
しかし、この段階ではただの「デザイン」にすぎません。
ボタンをクリックしたり、ページを選択することはできません。
このデザインを基に、誰もが閲覧でき操作ができるwebページとして作成する必要があります。
■エンジニア
コンピューターが分かる言語を使って、デザイナーが作ったデザインを再現し、動きをつけていきます。
こうして、私たちが普段使っているように、ボタンをクリックしたり、読みたいページに飛んだり戻ったりできるサイトが完成します。