Web業界初心者でわからなかった用語まとめ

<!-- wp:heading {"level":1} -->
<h1>Webに関する用語集</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Webとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>=World Wide Web ワールド・ワイド・ウェブ</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>=世界的に広がる蜘蛛の巣</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>英語で蜘蛛巣状のもの、の意味。<br>wwwはCERN（欧州原子核研究機構）により</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1989年に開発され、1991年にデビュー<br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>HTML</strong>とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>=HyperText Markup Language </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ハイパーテキストマークアップランゲージ</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>プログラミング言語</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>文書や画像、見栄、体裁を記述することができる</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>UIとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> = User Interface　ユーザインターフェイス </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのこと</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サイトの見た目や、使いやすさのこと</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>PCやスマホなどの表示、操作などの仕組み</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「使いやすさ」や「使い勝手」「見やすさ」などが求められる。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>UXとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>=User Experience ユーザーエクスペリエンス</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザーが製品やサービスを通じて得られる体験</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サービスを利用する<strong>ユーザーが質の良い『体験（UX）』をするためには、質の高い『見た目や操作性（UI）』が必要</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>パンくずリストとは</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Webサイトを訪れたユーザが</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>今どこにいるかを視覚的にわかりやすくした誘導表示。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Webページの上部箇所に表示されているケースが多い。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>名前の由来</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>パンくずリストという語源は、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>童話「ヘンゼルとグレーテル」</strong>の話の中に主人公の兄弟が</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>森に入るときに、迷子にならないように</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>自分たちが通ってきた道にパンくずを置いていったエピソードが由来となっています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Webサイトでも同じように、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>ユーザ自身の現在位置と辿ってきたルートを示す役割を担っていることから</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>「パンくずリスト」</strong>と呼ばれるようになりました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザビリティだけでなくSEOにおいてもその効果を期待できる。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>OGPとは</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>=Open Graph Protcol オープングラフプロトコル</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>FacebookやTwitterなどのSNSでシェアした際に、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>設定したWEBページのタイトルやイメージ画像、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>詳細などを正しく伝えるためのhtml要素。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>設定しておくと、SNS上でURLが共有された際にタイトルや画像、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>説明文などが表示されるようになり、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザーに対してページの内容を詳しく伝えることができる。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>OGPの構成</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>OGPを設定するためには</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>以下のようなタグをサイトに埋め込む必要があります。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;meta property=”og:type” content=”ページの種類”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;meta property=”og:url” content=”ページのURL”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;meta property=”og:image” content=”ページの画像URL”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;meta property=”og:title” content=”ページのタイトル”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;meta property=”og:description” content=”ページの説明”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>&lt;meta property=”og:locale” content=”言語の指定”&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>プロトコル</strong>とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>お約束事。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「通信する上でのお約束事」を意味する</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「通信プロトコル」の省略表現。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コンピュータでデータをやりとりするために定められた</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>手順や規約、信号の電気的規則、通信における送受信の手順</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>などを定めた規格。 </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>異なるメーカーのソフトウエアやハードウエア同士でも、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>共通の<strong>プロトコル</strong>に従うことによって、正しい通信が可能になります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>サーバーとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>サーバーとはインターネットなどのネットワークを通じて</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>利用者にサービスを提供するコンピュータのこと。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サーバーとは、英語で書くと「Server」となり</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「サービス(Service)を提供する側」</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>ドメインとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ドメインはインターネット上の住所。Domain。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>DNSとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Domain</strong>&nbsp;Name System<strong> </strong>ドメイン&nbsp;ネーム システム </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>インターネット上で&nbsp;<a href="https://www.nic.ad.jp/ja/tech/glos-ij.html#02-JPdomeinmei">ドメイン名</a>&nbsp;を管理・運用するために開発されたシステム。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>IPアドレスを教える役割を果たしています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「192.41.192.129」といった数字をピリオドでつないだIPアドレスで</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>通信相手を特定しているが、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 数字の羅列は人間が識別するのは非常に困難であるため、 </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>人間が覚えやすいように「nic.ad.jp」といった文字列からなる</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ドメイン名を利用し、 変換していること。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>IPアドレスとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Internet Protcol Adress　インターネットプロトコルアドレス</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>インターネットの約束事の住所。<meta charset="utf-8">「192.41.192.129」といった数字。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>このドメイン名とIPアドレスを対応づけるしくみがDomain Name System (DNS)であり、 「インターネットの住所録」にあたります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="outline1">meta descriptionとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>メタディスクリプションとは、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>記事内容を100文字程度のテキストで表現した「概要」のこと。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>検索結果画面に表示され、クリック率に影響する。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Retina対応とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Retina Displayは、<a href="https://ja.m.wikipedia.org/wiki/Apple">Apple</a>製品のうち、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>100〜160<a href="https://ja.m.wikipedia.org/wiki/Ppi">ppi</a>程度であった従来の<a href="https://ja.m.wikipedia.org/wiki/%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)">ディスプレイ</a>解像度の、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>およそ倍の解像度、高画素密度のディスプレイを指す名称。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>「Retina」（レティナ）は英語で「<a href="https://ja.m.wikipedia.org/wiki/%E7%B6%B2%E8%86%9C">網膜</a>」</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://ja.m.wikipedia.org/wiki/%E7%94%BB%E7%B4%A0">画素</a>が細かく人間の目で識別できる限界を超えている<sup><a href="https://ja.m.wikipedia.org/wiki/Retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4#cite_note-1">[1]</a></sup>、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ということから命名された。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>それまでの他のディスプレイでは画像などを</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>等倍（ドットバイドット）で表現していましたが、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Retinaディスプレイでは例えば</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4つのピクセルで１つのドットを表現する</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>といったスケーリングという技術を使用することで</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>高精細ディスプレイを実現しています</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1枚高解像度の写真を使えばいいじゃんと思うかもしれませんが、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Windowsユーザーがまだまだ多い世の中、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Windowsで見ても違いが分からないのに、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>わざわざ2倍の重い画像を読み込ませるのは不親切です。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Webデザイナーがやること</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>▼SPデザイン</strong><br>優先する機種が会社によって違いますが、最優先機種の<strong>横幅×2倍で</strong>デザインすれば問題ないと思います。<br>例えばiPhoneXが基準の場合、<strong>375px×2の750px</strong>でデザインすることになります。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Gitとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><meta charset="utf-8"><meta charset="utf-8">プログラミングなどを用いた現場でよく使われている「バージョン管理システム」</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Gitの用語</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4><meta charset="utf-8"><strong>リポジトリ＝貯蔵庫 </strong></h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5><strong>１.リモートリポジトリ</strong></h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5><meta charset="utf-8"><strong><strong> ２.ローカルリポジトリ</strong></strong></h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4><meta charset="utf-8"><strong>ブランチ 枝</strong></h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>プル</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>pull</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>プッシュ</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>マージン</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>チェックアウト</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>ステージング</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>コミット</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>デベロップ＝開発環境　</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>develop</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>テスト環境 </h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>マスター＝本番環境</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>master</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>GitHubとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><meta charset="utf-8">Gitの仕組みを利用して、世界中の人々が</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>自分の作品(プログラムコードやデザインデータなど)を保存、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>公開できるようにした「ウェブサービスの名称」。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Gitのハブ（拠点・中心・集まり）</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>AWS とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>AW＝Amazon Web Services　アマゾン ウェブ サービス、略称：AWS　</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Amazon.comにより提供されているクラウドコンピューティングサービス</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>レンダリングとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Rendering</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> コンピュータプログラムを用い、 </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>もととなる数値データを計算し表示を行うこと</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>例えば、WebサイトのHTMLファイルなどをもとに、 </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ユーザーが閲覧できるページに表示することもレンダリングとなります。 </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>表示用のデータをもとに、内容を整形して表示すること </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>マークアップ</strong>とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>文書構造（テキスト）や視覚表現（装飾）などの情報を、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コンピューターが正しく認識できるように、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>意味付けを行っていくことを意味します。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コンピューターに文書を理解させるために、ルールに従ったタグを記述していくこと、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>これを「マークアップする」と呼びます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コーディングとは、プログラミング言語やマークアップ言語によって</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>コンピューターが処理可能なソースコード（プログラム）を入力していく作業。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><strong>モバイルフレンドリーテスト</strong>とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Googleが提供するツール。モバイルに対応しているサイトかチェックしてくれる。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> 誰でも無料で確認することができる。&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>テスト</strong>したいページのURL全体を入力するだけ。&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>通常、<strong>テスト</strong>は1分もかからずに行われます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>テスト実施後は2つの結果が表示されます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1つは、ページがモバイル端末でどのように表示されているのかを示すスクリーンショットで、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>もう1つはモバイルフレンドリーに対応していない箇所の一覧です。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>サイトがすでにモバイル対応していて問題がない場合は、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>緑色の文字で「このページはモバイルフレンドリーです」と表示されます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>rel=”prev”と”next”とは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>複数のページ間の関係をGoogleに正しく伝えるためのタグ。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2011年12月2日にGoogleのウェブマスター向け公式ブログにて発表されたもので、</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ページネーションされたコンテンツに対してページ間の関係を正しく伝える</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>という意味を持ちます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>タップでコールとは</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>スマートフォンの画面に表示された電話番号にあらかじめリンクがつけられ、<em>電話番号をタップするだけで自動的に電話をかけられる機能</em>のこと。</p>
<!-- /wp:paragraph -->