超初心者から始める、初めてWebサイトを作る前に、知っておきたい専門用語10選

こんにちは、sonomama life(ソノママライフ)です。

3歳の息子のワンオペ育児と、フリーランスのWebディレクターに、日々奮闘しています。

さて、Webサイトのご相談を頂く際に、
「私、本当に何も知らないので」と、100歩くらい後ずさって恐縮される方が多いのですが、
「知らなくて当然!そのために、私がいるんです」と毎回お話しします。

でも、知らない言葉がたくさん出てくるって、やはり不安なんですよね。
そこで今回は、少しでも安心材料を増やせたら…ということで、
『web制作で絶対に使う専門用語10選』を、さらっとご紹介していきます!

ソノママライフの小話
こちらはweb制作やインターネットの用語に馴染みのない、
超初心者の方向けに、専門用語をご紹介します。
難しく細かいお話は、省いていますので、サラッと読んでいただけます。

既にweb制作経験のある方は、知っていることばかりかと思いますよ。

1:ウェブブラウザ
(インターネットブラウザ、Web browser)

ウェブブラウザとは、『インターネットに接続して、webサイトを見るためのソフトウエアのこと』です。
こう説明されても、あまりピンと来ないですよね。

そこで、まずは有名なウェブブラウザを見てみましょう!
「あ、これか〜。知ってる知ってる」ってなりますよ。

Iphoneでお馴染みのsafari(サファリ)

青い時計のようなマーク、iphoneユーザーであれば、見覚えがあるのではないでしょうか?

・Apple社が開発したブラウザ
・MacOSのPC(Macbook、MacbookAir など)やIphoneに、標準インストールされている。
・iphoneやapple製品の人気が高まるに連れて、利用するユーザーが増加

Windows系PCの王道はInternet Explorer(インターネットエクスプローラー)

Windows系のPCを使っている方であれば、「青いeマーク」をクリックして、
インターネットサイトを見ているのではないでしょうか?

・Windowsの王道ブラウザ。
・ie(アイイー)など略称で呼ばれる。
・Windows10以降は、Microsoft Edge(マイクロソフトエッジ)が標準インストール。
Windowsでのみ使用できるブラウザ。Mac(Apple製のPC)では使うことができません。

Googleとの親和性随一、ググるならGoogleChrome(グーグルクロム)

Gmailやググるでお馴染み、Googleが開発したブラウザです。

・世界で一番使われているブラウザ
・Googleに付随する機能(GmailやGoogleDocs等)と親和性がい。
・動作が速く安定している。
・WindowsでもMacでも、使うことができる。

ウェブブラウザは、種類ごとに特徴がある

ご紹介した他にも、Firefox(ファイヤーフォックス)やOpera(オペラ)など複数あるウェブブラウザですが、基本的には全て無料で使えます。
ユーザーは、機能や特徴によって、好みのブラウザを選ぶことができますが、
web製作者は注意が必要です。

ブラウザ毎や、同じブラウザ同士でも「バージョン」が違えば、
同じwebサイトを見ても、文字や画像の大きさが違ってしまうことがあります。(恐ろし〜)

そのため、ブラウザの種類やバージョンによる「表示の揺らぎ」があることを、知っておきましょう

 

2:WEBデザイン(Web design:ウェブデザイン)

webサイトを作るとき、頭に真っ先に思い浮かぶのが、こちらのwebデザインについて。
webデザインとは、webサイトのデザインを意味します。(そのままですねw)

パッと思い浮かぶのは、「かっこいい、大人向け」「可愛いくポップに」など、
webサイトの見た目の印象でしょうか?
実がwebデザインは、見た目の印象意外にも、たくさんの要素がたくさんあります。

webデザインのための要素

・メインカラー(1番多く使うカラー)
・サブカラー(2番多く使うカラー)
・フォント(文字の種類)
・レイアウト(ページの構成)
・ユーザビリティー(webサイトの使い勝手)
などなど…

一口に「webデザイン」といっても、かなり多くの要素があります。
また実際にwebデザインを行う前に、「webサイトの要件定義」をする必要があります。

webサイトのターゲットが「50〜60代の男女」の場合を例題に、ちょっと考えてみましょう!
PCやスマホに慣れ親しんだ人ばかりでは、無いでしょう。
その場合は、先進的なデザインよりも、
「文字が大きく」「ボタンがわかりやすい」方が、
実際にwebサイトを使用するターゲットに喜ばれる可能性が高いです。

 

ターゲットに合った、使い勝手の良さや、分かりやすい誘導なども加味し、
ただ単に「見た目の美しさだけを追求するのでは無い」のが、webデザインの面白さです。

3:レスポンシブ デザイン(Responsive web design)

どんな画面の大きさでwebサイトを見ても、webサイトが見やすく表示すること
これを、レスポンシブデザイン(レスポンシブ対応)と言います。

ここ数年、世界中でスマホ(スマートフォン)が普及し、
webサイトを見る環境も一変しています。

多くのwebサイトでは、閲覧する人の8割以上がスマホという状況。
そのため、webサイトのデザインも、PC用とスマホ用を作り、
どんな環境でも見やすく表示する必要が出てきました。

ソノママライフの小話
PCは画面が横長・スマホは画面が縦長です。
例えば、PC用のデザインをスマホで表示すると、文字が小さくなりすぎてしまい、読めないことも。
レスポンシブデザインの他にも、PC用とスマホ用に、別のサイトを作って、自動で切り替える様な方法もあります。
 
 

4:グローバルメニュー

グローバルメニューとは、webサイトのどのページでも表示される、案内メニューです。
そのwebサイトに、どのようなメニューがあるのか?主要なメニューを並べて表示しています。

例えばこのような形↓(softbank HPより)

グローバルメニューは必須?

グローバルメニューのメリットは2つです。

・どんなメニューがあるか、一覧でわかりやすい。
・webサイト内の、ページ移動がスムーズ。

スマートフォンでは、「menu」というボタンを押して表示する場合も多く、
最近のwebサイトでは、必ずしも表示しなければならないものでは無くなりました。

グローバルメニューを作るかどうか、表示するかどうかは、
制作するwebサイトの特徴に合わせて選択していきましょう。

 

5:ファーストビュー

webサイトを表示した時に、最初に画面に表示される範囲を、ファーストビューと言います。

このファーストビューは、いわゆる「第一印象」となるため、重要視されます
この第一印象は、3秒で決まると言われているため、
どれだけ短時間で、ユーザーの心を掴めるかが重要です。

そのためには、2:webデザインの段階で
しっかりとターゲットユーザーを明確にしておきましょう!
(10代の女性ターゲットであれば、ポップに可愛く!黒と金の煌びやかやサイトは合いませんよね…w)

6:URL(Uniform resource locator:ユーアールエル)

URLとは、「webサイトの住所」のようなものです。
まずは実際の画面を見てみましょう。

画像の中の赤い囲みの部分、「sonomama.life」が記載されているところが、URLです。

あ、この場所は「見たこと、ある〜」という方も多いでしょう。
このURLが記載されている場所を、「アドレスバー」と呼びます。

「ウェブブラウザ」の「アドレスバー」に、
「URL」を入力することで、
ウェブページを見る ことができます。

改めて聞くと、「無意識にやってたな〜」と思いませんか?
専門用語として身構えると、「難しい(泣」となってしまいますが、
実際は日常的にやっている事だったりするんです。

では、もう少しだけ詳しくみてみましょう。
先程のアドレスバーに表示されているURLを、一度クリックすると、更に詳しいURLが表示されます。
たとえば、こちらのサイト「sonomama.life」であれば、こちらの画像のような形です。

詳しく表示されたURLを、2つに分けて見てみます。

まず左側が「ルール」、そして右側が「インターネット上の名前」です。
こちらは、『“sonomama.life”という名前のサイトへ行くには、”https”というルールですよ〜』
という意味になります。
この2つが合わさって、URL(インターネットの住所)となります。

プロトコルとは、インターネット上の交通ルールのようなもの。
例えば「ソノママライフ」というお店にいくのであれば、「httpsという通路を通って行ってください」といったようなイメージです。

7:ドメイン(Domain)

では先ほど2つに分けたURLの右側、「ドメイン」について、もう少し詳しく見ていきましょう。

例えば本サイトであれば、「sonomama.life」がドメインとなります。

このドメインは、世界中で1つしか存在できないという決まりがあります。
そのため、世界中探しても、sonomama.lifeは、このサイトだけなんですね。

また、誰でも好きなドメインを使うことができますが、ドメインは早い者勝ちという決まりもあります。
そのため、あなたが「sonomama.life」を使いたいと思っても、既に使われていため、諦めるしかありません。

ドメインを取る方法

自分だけのドメインを取りたい場合は、「レジストラ」という、ドメインを専門に扱う会社から購入します。
有名なサービスは「ムームードメイン」や「お名前.com」などです。

ドメインは基本的に有料で、1年〜購入することができます。
また、ドメインの末尾の部分の種類によって、購入時の金額も変わります。

例えば、有名な「.com」であれば、推奨用途は「商業組織用」となっており、年間3,000円程度〜。
その他にも「.net:ネットワーク用」や「.jp:日本」や「.cn:中国」など、多種多様にあります。
ドメインの年間管理費の多くは、数百円〜数千円程度です。

ドメインの役割

世界中に1つしかない、ドメイン。
その大きな役割の1つは、ずばり「信頼性」の獲得です。
インターネット上で、情報発信や売買を行うことが当たり前になったことを背景に、
「これって何処の誰なん?」といった「信頼性」が重要視されるようになりました。

そういった「信頼性」の獲得に貢献するのが、「ドメイン」です。
ドメインは、基本的に有料のため、購入時には「購入者の情報」が必要になります。
そしてドメインの所持者の情報は、インターネット上に公開されているため、すぐに調べることができます。

「独自ドメインを持っている」ということは、
インターネット上の名刺のような役割を果たしてくれるため、
信頼感がアップするという訳です。

例えば、あなたがインターネットを通して物を買おうと思ったとき、「アマゾン:amazon.co.jp」や「楽天市場:rakuten.co.jp」であれば、マイナーな海外サイトから購入するよりも安心感がありませんか?
馴染みがあったり、見慣れた文字列だと、それだけで不思議と安心感が増すものなんです。

 

8:https(Hypertext Transfer Protocol Secure:エイチティーティーピーエス)

では先ほど2つに分けたURLの左側の部分、「プロトコル」について、もう少し詳しく見ていきましょう。

インターネット上で使える唯一無二の名前「ドメイン」へアクセスする際、
インターネット上の交通ルールのような決まり事があります。
それがこちらの「プロトコル」です。

webサイトにアクセスする場合は
「http(Hypertext Transfer Protocol:エイチティーティーピー)」プロトコル、
もしくは
「https(Hypertext Transfer Protocol Secure:エイチティーティーピーエス)」
を使用します。

この2つの違いは、通信が「暗号化」されるかどうかです。
httpを使用する通信は暗号化されておらず、
httpsを使用する通信は暗号化されています

数年前までは、個人情報や支払いページのみを暗号化していましたが、
現在はwebサイト全体を暗号化することが推奨されています。

webサイトを暗号化対応することを「https対応」と呼んだり、
「SSL(エスエスエル)対応」と呼ばれることもあります
SSLは、暗号化に使用する仕組みの名前(SSL:Secure Sockets Layer)からきています。

ソノママライフの小話
https対応の必要性は、ここ数年で急激に上がっています。
今では、https対応していない場合は、アドレスバーに「バツマーク」が表示され「このサイトは安全ではありません」という警告ページが表示されてしまう場合も…
信頼性の担保という意味では、https対応は必須といえます。
 
 

 

9:IPアドレス(Internet protocol address:アイピーアドレス)

IPアドレスという言葉を聞いたことはありますか?
例えば192.169.xx.xxといった、ドットで区切られた6桁〜12桁程度の数字が並んだものです。

このIPアドレスは、インターネットを介して通信する際に、住所のように使用されています。
ここで、感の良いあなたは「あれ?さっきURLも住所じゃなかったけ!?」と思うかもしれません。

インターネット上の住所には、機械用と人間用がある

そう、先ほどまでご紹介していたURLやドメインも、インターネットの住所
そして今からご紹介するIPアドレスも、インターネットの住所になります。
なぜ、インターネット上の住所を示す機能が、複数あるのでしょうか?

それは、ドメインは「人間用」であり、IPアドレスは「機械用」の住所だからです。

機械は、英数字をそのまま理解することは難しいため、数字の羅列であるIPアドレスを使用します。
本来であれば、このIPアドレスを、人間も使用すれば良いのですが、
数字の羅列のままでは、やはり使い勝手が悪いですね。
そこで、IPアドレスとドメインを紐づけて使うことで、
機会も人間も双方に分かりやすくしたという訳です。

IPアドレスの種類

このIPアドレスは、大きく「グローバルIPアドレス」と「プライベートIPアドレス」の2種類があります。
インターネット上の住所として使われるのは「グローバルIPアドレス」です。
この「グローバルIPアドレス」も、ドメイン同様、世界に1つしか存在しません

例えば、sonomama.lifeのIPアドレスは163.44.185.215です。
このIPアドレスは、ドメイン毎に紐付けされているため、
人間が「sonomama.life」へアクセスすると、
PCやスマホは「163.44.185.215」へと変換し、
こちらのwebサイトを表示します。

ソノママライフの小話
IPアドレスとドメインの紐付けは、DNSと呼ばれる専門の機械があります。
また、グローバルIPアドレスは、複数のドメインや機械で、共有できたり…と、俗に「ネットワーク」と呼ばれる、奥の深い分野になります。
「ネットワークエンジニア」や「インフラエンジニア」といった、この分野に特化した職業もあるほど奥が深く、面白い分野です。
>sonomama life は元々、インフラエンジニアですw

 

興味の湧いた方は、専門書を紐解くと、理解が深まりますよ!

 
 
 

10:サーバー(Server)

次にサーバーです。
サーバーは、インターネット上の土地のようなものです。
その土地に、建物(webサイト)を作り、
住所(ドメイン、IPアドレス)を紐づけることで、
世界中の人に、あなたのwebサイトを見てもらうことができます。

サーバーはどうやって手に入れる?

では、どのようにしてインターネット上の土地を、手に入れれば良いのでしょうか?
一般的には、「レンタルサーバー」を提供している会社と契約して、使用することが多いです。
イメージとしては、レンタルサーバーを提供する会社は、いわゆる大家さん。
レンタルサーバーを契約するということは、
大家さんが管理しているマンションの1室を賃貸契約する様なイメージです。

有名なレンタルサーバーは、「ロリポップサーバー」や「Xserver」でしょう。
どちらも月額500円〜1000円程度で使用できます。

実際に賃貸マンションを契約したことがある方であれば、想像が付くかと思いますが、
レンタルサーバーも、マンションの賃貸と同様に、
その大家さんによって提供されるサービスが異なります。

あっちは食器洗浄機が付いている、あっちは家具付きだ。
そんな風に、レンタルサーバー会社によって、提供機能が違うため、
実際にレンタルする際は機能や料金を見比べることがおすすめ
です。

ソノママライフの小話
サーバー自体の見た目は、PCを細長く、平べったくした様なものです。
それが、サーバーラックという専用の縦長の棚に、ズラ〜〜っと並べられ、保管されています。

 


PCって、後ろから熱い空気が出ますよね。
サーバーも全く同じで、何十台、何百台というサーバーが、1箇所に集められるので、
サーバーの管理部屋は、クーラーガンガンの超寒い部屋になっています。

 
 

まとめ

今回は、「初めてWebサイトを作る前に、知っておきたい専門用語10選」をご紹介しました。

超初心者の方向けに、ざっくりと説明しましたが、
それぞれはもっと深く掘り下げていけるものばかりです。

まずは、なんとなく知っている用語を増やすことから…
「私もできるかも」「面白そう」と思った方は、
ぜひweb制作にもチャレンジしてみてくださいね。

まずは「面白い」「やってみたい」から始めていきましょう♪

今回ご紹介した内容は…

1:ウェブブラウザ(インターネットブラウザ、Web browser)
2:WEBデザイン(Web design:ウェブデザイン)
3:レスポンシブ デザイン(Responsive web design)
4:グローバルメニュー
5:ファーストビュー
6:URL(Uniform resource locator:ユーアールエル)
7:SSL(Secure Sockets Layer:エスエスエル)
8:https(Hypertext Transfer Protocol Secure:エイチティーティーピーエス)
9:ドメイン(Domain)
10:サーバー(Server)

 

よろしければ、Follow me!!