SHIDEN DESIGN BLOG

thumnail_20170628

ホームページ制作の依頼時に役立つWEBに関する基礎知識

SponsorLink

ホームページ(WEBサイト)の開設を検討している方の中には、多くの聞きなれない言葉に頭を抱えたり、どう受け答えしていいか悩んでしまう方もいらっしゃることかと思います。
制作会社に全て丸投げと言うのも一つの方法ではありますが、インターネットの普及に伴い、重要度を増している、ホームページの開設までのプロセスがそれでいいのでしょうか?
 
今回は依頼者側の目線から、発注の際に見聞きする可能性があるインターネット関連の用語や、知っていると役に立つかもしれない基礎知識を紹介します。
 
 
 

 

インターネット関連の用語

 
 
かえって混乱を招いてしまっては本末転倒ですので、簡単な説明にとどめておきます。
 
 

アクセシビリティ

年齢、国籍、障害、等の要因に関わらず、どんな人がどんな環境で利用しても利用しやすいモノであるかの度合いを表す言葉です。
 

インプレッション

WEBサイト上に広告が表示された回数のことです。
 

ウェブサイト

一般的にホームページと言われるものです。
ウェブサイト=ホームページは誤用と言われることもありますが、制作会社との打ち合わせにおいて、この認識で何の問題もありません。
 

ウェブフォント

端末にインストールされていないフォント(書体データ)を呼び出すことで、観覧者の端末に依存することなくデザイナーが意図した書体で、WEBサイトに文字を表示する技術のことです。
 

ウェブブラウザ

インターネットを閲覧するためのソフトウェアです。
主なブラウザとして、Internet Explorer、Chrome、Safari、Firefox、Opera、等があります。
 

オープンソース

無償で公開されていて、自由に再配布ができるソースコード(プログラムが書かれたファイル)のことです。
 

コンバージョン

WEBサイト上での最終的な成果(売上、会員登録、問い合わせ等)のことです。
 

グローバルナビゲーション

WEBサイト内のどのページにも常設されているナビゲーション(メニュー)のことです。
 

検索エンジン

検索欄にキーワードを入力し、インターネット上のWEBサイトや画像等を検索するシステムのことです。
Google検索、Yahoo検索等。
 

検索連動型広告

検索エンジンで検索したキーワードに関連した広告を検索結果画面に表示するインターネット広告の一種です。
「リスティング広告」や「検索キーワード広告」と言われることもあります。
 

コーディング

制作したデザインをブラウザで表示させることのできるデータにしていく作業のことです。
 

コンテンツ

WEBサイトに掲載する内容のことです。
 

サーチエンジン

検索エンジンと同義です。
 

サーバー

きちんと説明しようとすると凄く長くなるので、制作会社との打ち合わせの際にサーバーと言う単語が出てきた場合は、WEBサイトを構成するデータや、それを表示するためのソフトウェアを保管しておくコンピューターだと考えてください。
レンタルサーバー(共用サーバー)、専用サーバー、VPS (Virtual Private Server)、クラウドサーバーと大きく4つのタイプに分けられるのですが、企業のWEBサイトや個人のWEBサイトではレンタルサーバーを使用するケースが多いです。
 

ソーシャルネットワーキングサービス

インターネットを通じて人と人との繋がりを構築するサービスのことです。
代表的なものとしてFacebook、Twitter、Instagram、LINE、mixi、GREE、Mobage、等があります。
 

ドメイン名

これもきちんと説明しようとすると凄く長くなるので、ブラウザでWEBサイトを表示させる際、データを保管したサーバーを特定するための文字列だと考えてください。よく「インターネット上の住所」といった例え方をされます。
このサイトのドメインは『shidendesign.net』で、ヤフーのドメインは『www.yahoo.co.jp』です。
 
もしも『トップレベルドメイン』『第一レベルドメイン』と言った単語が出てき場合は『.』で区切られた一番最後の文字列を指します。
トップレベルドメインには『.com』『.org』『.net』『.jp』等があります。
 

バナー

他のWEBサイトやWEBサイト内の特に見て欲しいページを紹介する等、広告や宣伝のために作られた画像のことです。
 

ファーストビュー

WEBサイトを見る際、スクロール等の操作をしなくても表示される範囲のことです。
 

ユーザビリティ

WEBサイトの使いやすさ、わかりやすさの度合い、またそのWEBサイトの利用者の満足度を表す言葉です。
 

レスポンシブデザイン

パソコン用サイト、スマートフォン用サイトといった端末別にWEBサイトを用意するのではなく、1つのファイルで各端末の画面サイズに応じたレイアウトや操作方法を調節する手法のことです。
 

CMS

コンテンツマネジメントシステムの略称。
コンテンツ管理システムとも言われ、プログラミング等の知識がなくても、管理画面からWEBサイトを更新することができるシステムのことです。
代表的なCMSとして『WordPress』『MovableType』等があります。
 

CSS

カスケーディングスタイルシートの略称。
WEBサイトのスタイル(文字の大きさや色、背景の色等)を指定するための言語です。
 

Eコマース(EC)

エレクトロニックコマース=電子商取引の略称。
インターネット上で行う商取引のことです。
 

Google Analytics

グーグルアナリティクス。
Googleが提供する無料のアクセス解析サービスで、サイト訪問者の動向を把握することに役立つツールです。
 

HTML

ハイパーテキストマークアップランゲージの略称。
WEBサイトを作成するための言語で、文字や画像に意味や情報構造を定義します。
 

JavaScript

プログラミング言語の1つで、様々なことに用いられますが一番わかりやすい部分でいうと、WEBサイトの動いている部分の多くはJavaScriptで動かしています。
 

SEO

サーチエンジンオプティマイゼーション=検索エンジン最適化の略称。
検索エンジンで検索したキーワードに対して、自身のWEBサイトを検索結果の上位に表示させるための対策のことです。
 

UI

ユーザーインターフェースの略称。
製品・サービスと、それを使う人との接点を指す言葉で、WEBサイトの場合は、表示されている情報やボタン等、全てをUIと呼ぶことができる
 

UX

ユーザーエクスペリエンスの略称。
製品・サービスを使って得られる体験を指す言葉で、WEBサイトの場合は、そのWEBサイトを見て感じたこと全てをUXと呼ぶことができます。

 

WEBサイトの種類

 
 
WEBサイトと一言に言っても、その種類は様々です。WEBサイトを作る目的を明確にし、どのタイプのWEBサイトが適しているのかを知ることで、制作会社との認識の食い違いを防ぎ、打ち合わせを円滑に進めることが可能になります。
ここでは、ウェブサイトの種類と目的について説明していきます。
 
 

コーポレートサイト

会社概要や企業理念、製品・サービスの情報等を記載し、その会社の実績や情報を伝えるためのWEBサイトです。
 

店舗サイト

商品やメニュー、所在地等を記載し、お得な情報を発信したり、予約システムを組み込む等して、来店を促すためのWEBサイトです。
 

ECサイト

カート機能や決済システムを持った、インターネット上で商品を購入してもらうためのWEBサイトで、通販サイトと同義です。
 

ランディングページ

インターネット広告をクリックした際に表示されるページとして、1つの商品やサービスの購入、サービスへの登録、または資料請求を促すことに特化したWEBサイトで、その多くは1ページで完結するようになっています。
 

プロモーションサイト

商品やサービスのプロモーションを行うことを目的としたWEBサイトで、特設サイト等ととして開設されるものも多く目にします。
 

メディアサイト

将来的に商品やサービスを購入する可能性のある人を集めること、広告収入を得ること、自身の活動を知ってもらうこと、その目的は様々ですが、情報を発信するWEBサイトです。

 

パーツの名称レイアウトの種類

 
 
パーツの名称と代表的なレイアウトの種類を紹介します。
 

パーツの名称

layout_01

メインヴィジュアルは『キービジュアル』や『ヒーローヘッダー』と呼ばれることもあります。
縦の列をカラムと呼び、カラムの数で『2カラムレイアウト』『3カラムレイアウト』といった表現をします。
 
 

シングルカラムレイアウト

sample_01

サイドバーを設けず、1つのカラム(コンテンツエリア)を縦に配置するレイアウトです。
余白を大きく取ることができ、すっきりとした印象を与えることができます。関係のない情報が目に入らないので閲覧者の興味が他にそれにくく、WEBサイトの内容をしっかり見せることができます。
ただし、サイドバーを持たない分、ナビゲーションを配置できる場所が制限されるので、ナビゲーションの機能が低下してしまいます。
 
 

マルチカラムレイアウト

sample_02

複数のカラム(2~3が主流)で構成された、異なる情報を横に並べたレイアウトです。
情報量の多いWEBサイトでは、サイドバーに関連情報やローカルナビゲーションを設置することで、閲覧者に情報を探してもらいやすくなりますが、適切な情報を配置するよう気を付けないとゴチャゴチャした印象を与えてしまいます。
 
 

タイル型(カード型)レイアウト

sample_03

コンパクトに纏めた複数の情報をタイル状に並べたレイアウトです。
一度に多くの情報を見せることができ、必然的にクリックできる領域が大きくなるので、スマートフォンやタブレットでのクリックも容易に行ってもらうことができます。
ただし、情報の重要度ごとに差をつけることが難しく、どれから見るか閲覧者を迷わせてしまう可能性があります。
 
 

フルスクリーンレイアウト

sample_04

画像や動画、イラスト等を画面全体に表示させるレイアウトです。
画像や動画を大きく配置できるので、そこに写っている商品や人物の持つイメージを伝えやすく、強く印象に残すことができます。
画面全体を使えるので表現の幅は広がりますが、大きな画像や動画を多用すると閲覧者の環境によってはWEBサイトの表示に時間がかかってしまう可能性があります。

 
 
 

さいごに

 
 
かえって混乱してしまいそうな表現や、技術的な部分に関する言及は避けながら書いてみたのですが、いかがだったでしょうか。
よく言われるようにWEBサイトは作って終わりではありませんし、作った後の方が重要です。
 
制作会社に丸投げでも、素晴らしいWEBサイトに仕上げてくれるでしょうが、自らも色んな提案をし担当者と議論することで、より愛着のあるWEBサイトに仕上がるのではないかと思います。
 
 
 

SponsorLink

Related Articles