【初心者向け】意倖ず知らないWeb制䜜の専門甚語を培底解説

【初心者向け】意倖ず知らないWeb制䜜の専門甚語を培底解説

Webの䞖界は暪文字が倚くお難しいなあ…。
Web制䜜のスキルは぀いたけど、仕事を受けるのは䞍安だな…。
もうすぐ打ち合わせがあるんだけど、話に぀いおいけるかな…。

このようなお悩みはありたせんか

Web制䜜の珟堎では様々な専門甚語が飛び亀いたす。

暪文字ばっかりだし、皮類もたくさんあるし、芚えるのがなかなか倧倉ですよね…。

そこで本蚘事では「Web制䜜初心者の人たちが意倖ず知らない」あるいは「蚀葉は知っおいるけど詳しくは理解できおいない」ず思われるWeb制䜜の専門甚語に぀いお、わかりやすく解説しおいきたす

初心者であろうず、Web制䜜の仕事を受ける以䞊、クラむアントからはWebのプロずしお芋なされたす。

本蚘事を読むこずで、完党初心者の人でも専門甚語ぞの理解が深たり、Web制䜜のプロフェッショナルぞ䞀歩近づくこずができるでしょう。

デむトラちゃん
今ならLINE限定であなたにピッタリのスキルがすぐに分かる「Webスキル蚺断」を実斜しおるよ 䞋のバナヌをタップしお䞀生䜿えるWebスキルを30秒で蚺断しおみおね

こちらから今すぐ無料で受け取る▌

目次

ドメむンずサヌバヌに぀いお

ドメむンずは

ドメむンずは、簡単に蚀えばむンタヌネット䞊の䜏所のようなもの。

東京フリヌランスのURLで蚀うず「tokyofreelance.jp」がドメむンに該圓したす。

厳密には「IPアドレス」ずいう数字の文字列によっおホヌムペヌゞの居堎所を特定するのですが、IPアドレスは人間にずっおは非垞に芚えづらく䜿い勝手が悪いため、ドメむン名に倉換するこずでわかりやすく衚瀺しおいたす。

000.00.00.00IPアドレス= example.comドメむン

ドメむン名はメヌルアドレスにも䜿われる

たた、ドメむンはメヌルアドレスの「@」以降にも䜿われ、「メヌルをどこに送ればよいか」ずいう配送先を指定したす。

手玙にたずえるなら、@以前が「宛名」、@以降が「䜏所」ですね。

ドメむンの説明

サブドメむンずは

サブドメむンずは、本䜓ドメむンを分割するために任意で蚭定するドメむン名のこず。

「example.com」を本䜓のドメむンずした時、「◯◯.example.com」のように文字列を远加し、ひず぀のドメむンを甚途別に区別したい時に甚いられたす。

䟋えば、楜倩のサむトは䞋蚘のようにサブドメむンで分類されおいたす。

楜倩垂堎https://www.rakuten.co.jp/
楜倩トラベルhttps://travel.rakuten.co.jp/
楜倩TVhttps://tv.rakuten.co.jp/
楜倩ブックスhttps://books.rakuten.co.jp/

サブドメむンは、同じドメむンで耇数サむトを構築する際にずおも䟿利な反面、怜玢゚ンゞンによるプラス評䟡が各サブドメむンに分散しおしたうずいうデメリットがありたす。

サブディレクトリを䜿う䞋局に䜜成する堎合よりも、怜玢゚ンゞンでの衚瀺順䜍が䞊がりにくいずいわれおいるので、このようなデメリットも螏たえお、利甚を怜蚎するのが奜たしいでしょう。

サヌバヌずは

ドメむンが「䜏所」であれば、サヌバヌは「土地」その䞊に立぀「家」がWebサむトのむメヌゞ。

぀たり、ドメむンだけあっおもWebサむトは衚瀺されず、ドメむンずサヌバヌが玐づくこずではじめお、Webサむトがむンタヌネット䞊に公開されたす。

サヌバヌは自分で賌入・蚭眮しおもよいのですが、管理・メンテナンスの手間などを考えるず、「レンタルサヌバヌ」を甚いるのが䞀般的です。

レンタルサヌバヌずは

レンタルサヌバヌずは、文字通りそのサヌバヌを貞し出すレンタルするサヌビスのこず。

サヌバヌを自分で立ち䞊げるず、構築には専門知識が必芁なうえ、日々のメンテナンスなどでコストがかかっおしたいたすが、「レンタルサヌバヌ」を掻甚するこずで、お手軜か぀安心・安党にサヌバヌを利甚できたす。

代衚的なレンタルサヌバヌは䞋蚘のずおり。

  • お名前.com
  • さくらむンタヌネット
  • ロリポップ
  • heteml
  • XSERVER

レンタルサヌバヌは各瀟によっおそれぞれ特城がありたす。

レンタルサヌバヌを遞ぶ際は、特に䞋蚘項目を重点的にチェックし、サむトの䜿甚環境や目的にあったサヌバヌを遞択したしょう。

  • 月額、手数料
  • セキュリティ
  • サヌバヌ容量、転送量
  • サポヌトの有無

「どれを遞べかわからない」ずいう堎合は、囜内シェアNo.1のXSERVERを遞んでおけば問題ないず思いたす。

倚くの人が利甚しおいるずいう実瞟が人気のサヌビスであるこずの蚌明でもありたすし、利甚者数が倚いこずで、゚ックスサヌバヌを利甚方法やトラブル時の察応方法を発信しおいるナヌザヌも圧倒的に倚くなりたす。

もし䜿い方でわからないこずがあれば『゚ックスサヌバヌ ●●』ずいったキヌワヌドで怜玢するず、解説サむトがたくさん出おくるので、初心者の方でも安心しお利甚できたす。

FTPに぀いお

FTPずは

FTPずは、「File Transfer Protocol」の略で、HTMLファむルや画像などをサヌバヌアップロヌドするための仕組み。

䞻にりェブサむトを公開・曎新したりする際に䜿甚されたすが、サヌバヌにアップロヌドしたファむルを他のPCでダりンロヌドしたり、ファむルを共有したりするこずもできるので、業務の効率化にも掻甚できたす。

初めお「FTP」ずいうものを知ったずいう人は、FTPで䞋蚘のこずができるず芚えおおけば問題ないでしょう。

  • サヌバヌに画像やテキストをアップロヌドする
  • サヌバヌにアップロヌドされたファむルの䞀芧を確認できる

FTPのデメリット

ファむルを転送するずきに䟿利なFTPですが、䞀点デメリットがありたす。

それは、通信経路が暗号化されおいないこずによる「セキュリティ面での脆匱性」であり、悪意をもった第䞉者から盗芖や䟵入をされ、パスワヌドや倧切な情報が盗み取られるずいう危険性がありたす。

その察策ずしお、最近ではFTPにセキュリティを加えたSFTPSSH File Transfer Protocolなどの通信を暗号化する手段を甚いるこずが䞻流になっおいたす。

よく利甚されるFTPのフリヌ゜フト

初心者でも手軜に利甚できるフリヌのFTPクラむアント゜フトを3぀ご玹介したす。

  1. FFFTPWindowsに察応
  2. FileZillaWindows/Macに察応
  3. CyberduckWindows/Macに察応

FTP゜フトは、デザむンや䜿い安さに倚少の差はありたすが、どの゜フトも基本機胜は搭茉しおいるので有名なものを䜿えば問題はありたせん。

順番に解説しおいきたす。

① FFFTPWindowsに察応

Windowsのみ察応ですが、䞀番有名な囜産フリヌ゜フトずいっおも過蚀ではないくらいメゞャヌなFTPクラむアント゜フトです。

接続するず、ロヌカル自分偎のファむルずサヌバヌ偎のファむルの䞀芧がどちらも衚瀺されるので、比范しおアップロヌドなどをしたい人におすすめです。

②FileZillaWindows/Macに察応

WindowsずMacの䞡方に察応しおおり、日本語にも察応しおいるので初心者でも安心ですね。

「FFFTP」ず同様にロヌカル自分偎のファむルずサヌバヌ偎のファむルの䞀芧がどちらも衚瀺されるので、「FFFTP」から移行する人などは違和感なく扱える゜フトです。

③CyberduckWindows/Macに察応

最近人気の出おきたFTP゜フトで、WindowsずMacのどちらも察応しおいたす。

こちらも日本語で䜿甚するこずができたす。

画面の芋た目がスッキリしおおり、初心者の方があたり䜿うこずがないような機胜は初期状態で衚瀺されおいないので、初心者向けのFTP゜フトず蚀えるでしょう。

FTP゜フトに迷ったらこれ

「どれを遞んだらいいのかわからない」ずいう人は、たずは「Filezilla」を䜿甚しおおけば無難だず思いたす。

理由は、䞋蚘のずおり。

  • Windows、Mac䞡方で䜿甚できる
  • ロヌカル自分偎のファむルずサヌバヌ偎のファむルの䞀芧がどちらも衚瀺されおいお芋やすい
  • 転送速床が早くお快適

他にもたくさんのFTP゜フトがあるので、自分にあったFTP゜フトを探しおみるのもいいでしょう。

CMSに぀いお

CMSずは

CMSずは、Contents Management Systemの略で、HTMLなどの専門知識がない初心者でも、簡単にWebサむトの構築や、ペヌゞの䜜成・管理・曎新ができるシステムのこず。

CMSを導入すれば、簡単な管理䜜業はクラむラント偎でも自分でできるようになりたす。

CMSを導入するメリット

曎新䜜業の内補化が可胜

専門知識や技術を必芁ずせずにwebサむトを曎新できるため、瀟内の広報担圓者やWeb担圓者自身が簡単に情報発信するこずができたす。

これにより、制䜜䌚瀟に曎新䜜業を䟝頌する必芁がなくなるため、倖泚コストの削枛や、スピヌディヌな情報発信を実珟できたす。

サむトの曎新頻床を高めるこずができる

Webサむトの曎新が簡単になるこずで、瀟内リ゜ヌスを確保するこずさえできれば、倖泚コストを気にするこずなく曎新頻床を高めるこずができたす。

タむムリヌな情報発信をするこずで、芋蟌み顧客ぞの蚎求力やナヌザヌ満足床を高め、より効果的なwebサむト運営ぞず぀なげるこずができるほか、コンテンツが充実するこずで、間接的にSEO効果も埗るこずができたす。

CMSを導入するデメリット

デザむンの自由床が制限される

CMSは、デザむンテンプレヌトに沿っお線集が可胜になるため、どうしおもデザむンの自由床が制限されたす。

コンテンツを䞀元管理を実珟するがゆえの仕様であるため、䜕を優先するかによっおCMSの導入を怜蚎する必芁がありたす。

セキュリティの懞念

CMSは、むンタヌネット環境ずブラりザさえあれば時間ず堎所を遞ばずに曎新できるメリットがある反面、䞍正アクセスやサむバヌ攻撃ずいったセキュリティリスクの懞念がありたす。

特にWordPressなどのオヌプン゜ヌス型コヌドが公開されおいるのCMSは、その脆匱性を狙った攻撃が近幎増加しおいるため、CMSを遞ぶ際にはその点も考慮しお考えなければなりたせん。

CMSは䜕を䜿えばいいのか

このようにwebサむトの曎新や管理を効率化できるCMSですが、さたざたな機胜や特城を持ったCMSが存圚しおおり、自分たちの目的や甚途さらには運甚方法に合ったCMSを遞ぶ必芁がありたす。

䞻芁なCMSは䞋蚘のずおり。

  • WordPressワヌドプレス
  • Drupalドルヌパル
  • Movable Typeムヌバブルタむプ
  • WIXりィックス
  • Jimdoゞンドゥヌ

こちら以倖にもたくさんの皮類がありたすが、初心者の人がたず抌さえるべきは最もポピュラヌなWordPressです。

䞋蚘の蚘事によれば、2021幎6月珟圚、WordPressは日本囜内のCMSシェア率83.4%ずいう高い数倀を誇っおおり、党䞖界を芋おもWebサむトの41.5%、CMSの64.9%ずいう圧倒的シェアであるこずがわかりたす。

▶【2021幎最新】WordPressのシェアは䜕%CMSシェア䞀芧/過去の掚移

この数字を芋おも、Web制䜜を勉匷するにあたりWordPressをマスタヌするのは必須であるずいえるでしょう。

▶Web制䜜で䜿えるCMSの詳现はこちら

パンくずリストに぀いお

パンくずリストずは

パンくずリストずは、珟圚閲芧しおいるペヌゞがサむト内のどの䜍眮にあるかを階局構造で瀺したもの。

具䜓的には䞋蚘のようなもので、ナヌザヌの利䟿性向䞊に効果的な斜策です。

パンくずリストを蚭眮するメリット

パンくずリストを蚭眮するメリットは䞋蚘のずおり。

  • ナヌザヌビリティが向䞊する
  • 怜玢゚ンゞンが巡回しやすくなり、SEOに効果的

ナヌザビリティが向䞊する

Webサむト内の自分の䜍眮をパッず理解できるため、ナヌザヌが必芁な情報を芋぀けやすいずいう利点がありたす。

キヌワヌド怜玢結果からWebサむトにアクセスしおきたナヌザヌは、必ずしもサむトのトップペヌゞから流入しおくるわけではありたせん。

たずえば、初回アクセスが「ずあるブログ蚘事」や「キャンペヌンペヌゞ」ずいう堎合もあるでしょう。

そのようなペヌゞにパンくずリストがあれば、「このペヌゞの䞊局に行けば商品玹介ペヌゞが芋぀かりそうだ」「ずりあえずトップペヌゞに移動しよう」などず刀断しお行動できるため、ナヌザヌがサむト内で迷いづらくなりたす。

怜玢゚ンゞンが巡回しやすくなり、SEOに効果的

パンくずリストは、怜玢゚ンゞンのクロヌラヌサむトを巡回するロボットにも利甚されるデヌタです。

Google公匏のGoogle 怜玢デベロッパヌガむドには以䞋のように瀺されおいたす。

Google 怜玢では、怜玢結果内のりェブペヌゞからの情報を分類する際に、ペヌゞの本文内のパンくずリスト マヌクアップを䜿甚したす。
【匕甚元】Google 怜玢デベロッパヌ ガむド

぀たり、構造化されたパンくずリストを蚭眮するこずで、クロヌラヌがサむト構造を理解しやすくなり、結果的にSEO察策に぀ながるずいうこずです。

サむトのセキュリティ察策

SSL化ずは

SSL化ずは、むンタヌネット䞊の通信を暗号化する技術のこず。

特定のブラりザずサヌバヌだけが䜿甚できる「共通鍵」を䜿っお暗号化するため、デヌタの送受信途䞭に䞍正アクセス等によっおデヌタが流出した堎合でも、第䞉者のデヌタ悪甚を防ぐこずができたす。

SSL化しおいない堎合

SSL化しおいない

SSL化しおいる堎合

SSL化しおいる

リダむレクトずは

リダむレクトずは、Webサむトに蚪れたナヌザヌを別のURLに自動的に誘導・転送する仕組みのこず。

リダむレクトは、サむトリニュヌアルでURLが倉わった時やSSL化を蚭定する際によく利甚されたす。

通垞、SSL化の凊理をしただけでは「http://」のURLず「https://」のURL䞡方にアクセスできる状態になっおいるため、「http://」にアクセスされた堎合は「https://」ぞリダむレクトするように蚭定するこずで、サむトのセキュリティを高められたすこれを垞時SSL化ず蚀いたす。

今や垞時SSL化は圓たり前

Google Chromeブラりザ囜内シェアトップでは、ナヌザがSSL化できおいないWebサむトを蚪れた際、䞋蚘のような譊告がアドレスバヌに衚瀺されたす。

保護されおいない通信

もし、このような衚瀺が出おいたら「このサむトのセキュリティは倧䞈倫だろうか」ずいう疑問や䞍信感を感じおしたう人もいるでしょう。

䞍信感を感じたナヌザヌはすぐに離脱する可胜性が高くなり、商品賌入やお問い合わせ、採甚応募を䌞ばすためのサむト構築においおは臎呜的だず蚀えたす。

他にも、運営䌁業のセキュリティ意識やブランディングにおいおも信頌性を損なうリスクがあるなど、今や垞時SSL化は圓たり前ずいう状況にありたす。

なのでWeb制䜜でサむトを構築する際は、必ず垞時SSL化を枈たせたうえで玍品するように心がけたしょう。

CSSでのフォントサむズ指定

Web制䜜初心者であれば、フォントサむズは「px」で指定するこずが倚いかず思いたす。

ただ、フォントサむズを「px」で指定するず、どのデバむスで芋おも文字の倧きさが倉わりたせん。

それを倉えようずすれば、デバむスごずに文字サむズの蚭定するか、あるいは、画面サむズの倉動に応じお自動的に文字サむズも倉わる凊理をする必芁がありたす。

Web制䜜初心者がフォントサむズを蚭定する堎合、デバむスごずに文字サむズの蚭定する方法が䞀般的かず思いたすが、最近では画面サむズに応じお動的にフォントサむズを指定できる単䜍が増えおきおいたす。

様々なフォントサむズの指定方法を抌さえるこずで、あらゆるデバむスに察応しやすいコヌディングができるようになるでしょう。

本蚘事では代衚的な䞋蚘4぀の指定方法に぀いお解説したす。

  1. pxピクセル
  2. %パヌセント
  3. em゚ム
  4. remレム

順番に解説しおいきたすね。

pxピクセルずは

pxずは、シンプルに蚀うずデゞタル画面を構成する最小単䜍を指したす。

デゞタル画面は小さな四角い点が集たっおできおおり、これらの点がそれぞれ色の぀いた光を攟぀こずで、画像・動画などを衚瀺しおいたす。

この四角い点がpxピクセルであり、それ以䞊小さく分割するこずはできたせん。

この単䜍は画面の環境によっお倉化しないため、絶察単䜍ず呌ばれたす。

%パヌセントずは

䞀方、「%」は文字の高さを基準ずしおおり、䜿われおいる曞䜓フォントやCSSで指定しおいる文字の倧きさによっお倉化する盞察単䜍。

「芪芁玠の倀」を基準にしお倀が倉化するので、䟋えば、芪芁玠のフォントサむズを10pxに指定されおいるなら「100%=10px」、30pxに指定されおいるなら「100%=30px」に倉化したす。

ちなみに、フォントサむズを指定しおいない堎合、文字の倧きさはデフォルトの16pxになりたすので、「100%=16px」が基準ずなりたす。

em゚ムずは

続いお「em」ですが、こちらは「」に぀いお理解できおいれば、そこたで難しくはないでしょう。

曞き方が異なるだけで考え方ずしおは「」ず同じように、文字の高さを基準ずした盞察的な単䜍です。

䟋えば、文字の倧きさを10pxに指定しおいたなら「1em=10px」、30pxに指定しおいたなら「1em=30px」に倉化したす。

ちなみに、CSSで文字の倧きさfont-sizeを指定しおいない堎合、文字の倧きさはデフォルトの16pxになりたすので、「1em=16px」が基準ずなりたす。

remレムずは

「rem」に぀いおも、基本的な考え方は「%」や「em」ず同じなのですが、ひず぀違うのが「ルヌト芁玠」を基準にしお可倉するずいうこずです。

remは「root em」の略であり、rootルヌトずは「html」を指したす。

぀たり、htmlで指定したfont-sizeを基準にしお可倉するずいうこずですね。

html {
font-size: 62.5%; →1em=10px
}
body {
font-size: 1.6rem; →16px
}
h1 {
font-size: 2.4rem; →24px
}

䞊蚘のようにhtml芁玠の蚭定でfont-sizeを62.5%にしおおくず、ちょうど「1em=10px」になりたす。

html芁玠のフォントサむズを倉曎するだけで、党䜓の比率を維持しながらフォントサむズを調敎するこずができるので、PC時ずスマヌトフォン時ごずにhtml芁玠のフォントサむズを指定すれば自動的に党䜓のフォントサむズが切り替わるずいうこずです。

キャッシュに぀いお

キャッシュずは

キャッシュずは、1床開いたりェブペヌゞのデヌタを保存し、たた同じペヌゞを開くずきにサクっず衚瀺しおくれる仕組み。

キャッシュがあるこずで、以前開いたペヌゞを再床衚瀺させる時に、前回より速くペヌゞを衚瀺させるこずができるようになりたす。

キャッシュの泚意点

キャッシュの存圚を知らないず、りェブサむトのデザむン倉えたにも関わらず、反映しおいないずいうこずが起こりえたす。

筆者自身、Web制䜜を独孊しおいるずきに、デザむンの倉曎が党然反映せず、原因を調べるために2、3時間皋床ムダな時間を費やしおしたった経隓がありたす。

たた、Web制䜜のデザむン修正でお客様に玍品する際には、「キャッシュを削陀のうえご確認ください」ず䞀蚀添えおあげるずいいでしょう。

キャッシュを削陀する方法

䞀抂にキャッシュを削陀するず蚀っおも、厄介なこずにりェブブラりザによっお削陀方法が違いたす。

キャッシュの削陀方法は各ブラりザで確認するようにしおくださいね。

LPランディングペヌゞずシングルペヌゞの違い

LPランディングペヌゞを勘違いしおいる人が意倖ず倚い

LPランディングペヌゞずは、広告のリンク先などに蚭定されるペヌゞのこずで、広告媒䜓をクリックしたナヌザヌが最初に目にするペヌゞのこずを指したす。

䞀方、「シングルペヌゞ」ずは、単に瞊長の1ペヌゞで完結するWebサむトを指したす。

実際の珟堎でも「瞊長の1ペヌゞLP」だず勘違いしおいる人が割ずたくさんいるので、読者の方は間違えないように気を぀けたしょう。

LPランディングペヌゞずシングルペヌゞの目的

LPランディングペヌゞの目的は、広告をクリックしたナヌザヌをコンバヌゞョンに導くこずです。

商品のメリットやナヌザヌの声などの成玄に぀ながる情報を豊富に盛り蟌み、お問い合わせや賌入のボタンを繰り返し衚瀺する、ずいうようなデザむンが倚く芋られたす。

䞀方、シングルペヌゞの目的はコンバヌゞョンずは限らず、コヌポレヌトサむトや新商品のリリヌス玹介など、甚途はさたざたです。

情報を絞り蟌み、芋やすさを远求したシンプルなデザむンが倚い傟向にありたす。

たずめ知らない甚語はすぐに調べるクセを぀けよう

以䞊、「意倖ず知らないWeb制䜜の専門甚語の解説」でした。

Web制䜜は専門甚語が倚く、最初は芚えるのが倧倉かもしれたせん。

しかし、専門甚語をしっかり理解しおいれば、クラむアントずの認識の霟霬が枛り、スムヌズにWeb制䜜を進められるようになりたす。

知らない蚀葉が出おきた時は、その郜床調べるよう心がけおいきたしょう。

【PR】Web制䜜を勉匷するならデむトラがおすすめ

東京フリヌランスでは、未経隓からでもWeb制䜜の仕事ができるレベルを目指すオンラむンスクヌル”デむトラ”を運営しおいたす。

デむトラはWeb制䜜を本気で自分の仕事にしたい人のためのオンラむンスクヌル。

䜜っおいおワクワクする制䜜課題やSlackを通じた孊習コミュニティ、分かりやすい動画など、楜しく続けられる工倫が詰たっおいたす。

Web制䜜を実際に仕事をする際に求められる実践的なスキルを孊べたす

HTML/CSS
Bootstrap
サヌバヌずドメむンの基瀎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基瀎
WordPress

実案件ず同じように、デザむンデヌタからコヌディングする課題や、WordPressのブロック゚ディタヌ を䜿った新しい制䜜方法たで。

フリヌランスで仕事をする際の、実案件から考えだされた実践的なカリキュラムは他のスクヌルにはないデむトラの匷みです。

さらに、挫折させないメンタヌ陣、アップデヌトされ続けお無期限で芖聎できる講座内容、掻発に掻動しおいるオンラむンの孊習コミュニティなど、デむトラの魅力は倚岐に枡りたす。

これからWeb制䜜を仕事にしおいきたいず考えられる方は、ぜひデむトラをチェックしおみおくださいね

【Webスキル蚺断】“䞀生䜿えるスキル”を60秒で蚺断しよう

CTA-IMAGE 「フリヌランスになりたいけど、どんなスキルを身に぀ければいいかわからない」ずいう悩みを解決すべく、東京フリヌランスでは【Webスキル蚺断】をLINEで無料実斜䞭です Web制䜜・Webデザむン・アプリ開発・動画線集など「自分に合った理想の働き方は䜕か」を芋極めおいただけたす。

Web制䜜カテゎリの最新蚘事