僕はWebデザイナーになる前、サイトの作り方を全く知らなかった頃にある制作事務所にWebデザインの依頼をしたのですが、その時は聞いた事もない言葉が沢山飛び交って不安な気持ちになりました。
一応サイトはできたのですが、ほぼ丸投げ状態で作ってもらったためにあまり納得いくものではなく「少しでもサイト作りに関する知識を入れておけば良かったのにな」と後悔することに・・・。そこで今回、昔の僕のように失敗してしまう人を減らすためにこの記事を書いてみました。
まず始めに
Webサイト?ホームページ?
「ホームページを作って欲しい」と依頼を受けることが多いのですが、ホームページとは本来Webサイトと呼ばれているものです。ただ、今ではどちらで呼んでも同じ意味として通じるのであまり気にしなくても大丈夫です。
その他にもWebサイトに関連する言葉があるので、以下の表を見てサラッと確認だけしておきましょう。
Webサイト | 複数のWebページが集まったもの |
---|---|
Webページ | 今表示されているようなページ |
トップページ | Webサイトの表紙にあたるWebページ。 |
下層ページ | プロフィールページやコンタクトページなど、トップページ以外のWebページ |
ホームページ | ブラウザを起動したときに最初に表示されるページ |
階層構造
Webサイトは基本的に階層構造になっています。
トップページを第1階層とし、全てのページに2クリック以内でアクセスできるよう第3階層までにするのが理想です。トップページより下の階層に位置するページのことを、下層ページと呼びます。
サーバーとドメイン
サイトを公開している間サーバー代とドメイン代がかかるのですが、サーバーとドメインが何なのかご存知でしょうか。
サーバーとドメインについて分かりやすく説明する為にサーバーを土地、そしてドメインを住所で例えると「借りた土地(サーバー)に家(Webサイト)を建てました。家に友達を招待する為に、友達に住所(ドメイン)を教えます」となります。
つまり自分のサイトを公開して誰かに来てもらうには、サーバーとドメインは必要不可欠なのです。
サーバー
Webサイトを表示するために必要なデータを格納しておく場所です。
無料で借りられるサーバーもありますが、基本的にサーバーはロリポップ!やエックスサーバーなどでレンタル(年間6,000円~15,000円)をします。
ドメイン
URLの「○○.com」や「○○.net」の部分です。
ドメインはムームードメインやエックスドメインなどで取得(年間1,000円~5,000円)します。
Webサイト制作の流れ
Webサイトを作る流れは大まかにいうと以下の通りです。
- 企画構成
- デザイン
- コーディング
- 完成
これだけでは分かりにくいと思うので、1つ1つをお店作りで例えてみます。
企画構成
お店作りで例えると…どんなお店にするのかを話し合い、コンセプトを考え、交通量や他店舗などを調査すること。ここで、どんなサイトになるのかが決まるので、とても重要な項目です。
デザイン
お店作りで例えると…外装・内装を含めたデザインを考えること。基本的にはトップページのデザインをして、OKを貰ってから他のページもデザインしていきます。
コーディング
お店作りで例えると…設計図に基づいた建設・工事を行うこと。できあがったデザインをブラウザで閲覧できるように、HTMLやCSSなどの言語でコーディングをします。
Webサイトに関する専門用語集
基礎知識
HTML
Webサイトを作成するための言語のこと。世の中のサイトはほとんど、HTMLという言語によって作られています。
CSS
HTMLで作成されたWebサイトの、見栄えを指定するための言語です。
ブラウザ
Webページを閲覧するためのソフトです。使用しているブラウザの種類やバージョンによって、サイトの見え方が異なる場合があります。代表的なブラウザはGoogle Chrome、Firefox、Internet Explorer、Safari等です。
CMS
Webサイトを管理・更新できるシステムのことです。HTMLやCSSの知識がなくても利用できるので、最近ではCMSを導入しているサイトが非常に多くなっています。代表的なものではWordPress(ワードプレス)があります。
Webページの構成
ヘッダー
ページの最上部で、サイトタイトルやロゴマークなどが設置されている部分です。基本的には、全てのページで共通して表示されます。
ナビゲーションメニュー
Webサイトの目次の役割を担います。ここから目的のページに移動できます。ナビゲーションメニューには、大きく分けて「グローバルナビゲーション」と「ローカルナビゲーション」があります。
グローバル | 主要なコンテンツへのリンクが集められた、重要なナビゲーション。基本的には、全てのページで共通して表示されます。 |
---|---|
ローカル | グローバルナビゲーションで選択されたコンテンツ内の詳細な内容を示すナビゲーションです。 |
サイドバー
画面の右側または左側に表示されている縦長の部分です。バナー広告やナビゲーションが設置されることが多いです。
フッター
ページの最下部で、コピーライトが配置されることが多いです。基本的には、全てのページで共通して表示されます。
ハンバーガーメニュー
三本線のナビゲーションメニューです。三本線をクリックすると、メニューが表示されます。少ないスペースで表示できるので、主にスマートフォンやタブレットサイトに使用します。
レイアウト
シングルカラムレイアウト
参考サイト:城田行政書士事務所 | 長野県上田市の行政書士【ビザ申請や相続手続きなら】
左右にサイドバーをもたず、コンテンツを縦に配置するレイアウトです。スマートフォンのような画面幅の狭い端末でも、サイトが見やすくなります。
マルチカラムレイアウト
参考サイト:小金井市で風邪や鼻炎の治療ならこがねい耳鼻咽喉科クリニック
サイドバーをコンテンツの左か右(または両側)に配置する、よく利用されているレイアウトです。PCで見るのは適していますが、スマートフォンなどのような画面幅の狭い端末には適していません。
カード型レイアウト
参考サイト:楽しみ方∞無限大!オコタコ・キッチン | 日清フーズ
四角形のボックスを並べたレイアウトです。一度に沢山の情報を見せることができるので、ECサイトやギャラリーに適しています。
フルスクリーンレイアウト
参考サイト:和菓子のご案内 一菓素心・高山堂
画面幅いっぱいに、写真や動画を表示させるレイアウトです。他のレイアウトよりも、用意する写真や動画のクオリティ次第で、サイトの良し悪しがほぼ決まります。
表現手法
レスポンシブウェブデザイン
PC、タブレット、スマートフォンなど様々な端末に対して、最適化された表示を行います。端末ごとにHTMLファイルを用意する必要がなくなるので、管理・更新がしやすくなります。
パララックス
スクロールなどに応じて、立体感や奥行きを演出するができます。「視差効果」とも言います。
スライドショー
複数の画像を順番に表示させます。
マーケティング
SEO対策
GoogleやYahooなどでキーワード検索した際に、上位に表示されるための対策のことです。検索エンジン最適化とも呼ばれます。
アクセス解析
サイト訪問者の行動を分析し、サイトの改善すべき点を見つけます。Google Analyticsというアクセス解析ツールを使って分析します。
まとめ
かなり長くなってしまいました…。
最初に言った通り、丸暗記する必要はありませんがなんとなくでも言葉を知っておけば、いざWebサイトの制作を依頼するという時にデザイナーの話がスッと頭に入りやすくなります。そうすれば、納得のいくサイトが出来上がる確率が一気に増えますね!
Webの世界は日々進化していて、新しい言葉がどんどん増えているのでまたここに追加していきます。今日もここまで読んで頂き、ありがとうございました!