新任Webサイト(ホームページ)担当者に必須なWeb知識。|とっても初級篇

2015/05/23   カテゴリー:ホームページのイロハ

みなさん、こんにちは。
神戸のWebブランディング事務所「Six」(シックス)です。
「ブランディング&コミュニケーション」で、経営戦略として資産価値を高めるための
Webサイト制作(ホームページ制作)・Webデザインを企画から運用までトータルにプロデュースいたします。

《神戸、明石、芦屋、西宮、尼崎、加古川、姫路、加西、西脇、兵庫県各地、京阪神各地、お気軽にご相談下さい!!》

今週は、制作の間をぬって、いろんな活動が盛りだくさんで、あっちに行ったりこっちに行ったりでした。
継続した活動に加え、初参加の「加西市観光研究会」もありました。
ミーティングの後は、恒例らしい二次会もあってごはん。「ゆとり世代」の笑い話もあり〜。さて、次回活動はいかに!?
kanko
今回は、会社のWebサイト(ホームページ)をリニューアルすることになった!
いきなり上司から呼び出しをくらい(笑)
「ねぇ、君さぁ、今度Webサイトの担当者ね。期待してるよ!!」とか言われちゃったけど、
「正直Webサイト(ホームページ)の知識がないよ〜。」の初心者マーク付きのかたに向けて、超超「基本印の用語説明」をしたいと思います。
ちなみに思いっきり「それぐらい知ってるよ〜。」的なことも含んでます。

53

まずは、超初心者コースです。さぁ、行ってみよう〜♬

Webサイト・ウェブサイト

ウェブサイト (website) は、World Wide Web (WWW) 上にあり、一般に特定のドメイン名の下にある複数のウェブページ(コンテンツ)で構成されています。
企業などの団体を紹介するため自ら構築したサイトを「公式サイト」と呼びます。

「Six」では、「Webサイト」か「ウェブサイト」と正式な用語を使わせていただいています。
Wikipediaさんの「ホームページという言葉と誤用」やコチラのブログ記事などをご覧くださいね。
(ただし、クライアントさんに合わせて、用語遣いは、柔軟に対応させていただいています!)

ドメイン

ドメインとは、インターネット上の「住所」にあたります。ネットワークに接続しているコンピュータの場所を示す「住所」で、全世界にたったひとつだけ存在します。

ドメインの種類は、国や目的によって分類されています。

◆ .com   営利組織向け
◆ .jp   汎用JPドメイン 日本国内に在住していれば、個人も登録可能
◆ .co.jp  属性JPドメイン 企業向け

基本的には、上記の場合が多いかと思います。
会社名や、コンテンツに沿って、「覚えやすい」「短い」「信頼性に繋がる」「ずっと継続して使える」ことなどに配慮して、アドレスを決めましょう。
販促物(印刷物)や名刺、メールアドレスの文字数表記にも影響します。

サイトマップ

Webサイト内(ホームページ内)のページ構成を一覧できるようにした案内、目次です。Webサイト内のすべてのページを表示してあり、各ページへリンクしてある場合が多く、一覧を見たい場合や特定のページを探したい時に便利です。

Webサイト(ホームページ)の制作に入る前には、ツリー型で、各ページ構成を決め、提出します。
サイトマップを元に、お見積書を作成したり、コンテンツの整理やつながり、階層の深さ、使いやすさを検討します。
Webサイト(ホームページ)の構成を一覧を図式化することで、デザインの前にサイト全体のボリュームをイメージすることも大切です。

ワイヤーフレーム

Webページの大まかなコンテンツやレイアウトを示した構成図・設計図です。
主にレイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に記すことで簡単に作成しますので、デザインではありません。
簡単に言うと、「何を、どこに、どのように」配置するかを記したラフ画のようなイメージです。

frame

家を建てる時には、設計図を元に、基礎を造り、大工さんが建てていきますよね。マンションだと、建設業者さんかもしれませんが。。。

Webサイト(ホームページ)のワイヤーフレームが、家の設計図のと違うのは、詳細にサイズを決めている箇所と、おおまかなレイアウトの表示を記した箇所の2パターンがあります。
Webサイト制作における簡単な確認書と指示書と考えていただくと良いと思います。
クライアントさんには、ざっくりと「こんなレイアウトで、ここに写真やテキスト(文章)が入るんだなぁ〜。」と予測してもらうために作成します。
制作サイドは、プロジェクトの共通認識で確認するためと、デザインの基礎レイアウトとなります。

グローバルナビゲーション・ヘッダー・フッター

グローバルナビゲーションとは、Webサイト内の各ページに共通して設置されるサイト内の各コンテンツを案内するためのメニューのことです。

frame

グローバルナビゲーションは、主要コンテンツであり、カテゴリーのトップとして、各詳細コンテンツに繋がる導線となります。
配置においても、Webサイト(ホームページ)の目的を考慮し、重要視します。
一般的には、ある程度共通認識として、並びかたの順序が浸透しているかと思いますが、企業によって配列が異なるのは、Webサイトの運営の目的、ゴール設定が違うためです。

ヘッダー、フッターもグローバルナビゲーションと同じく、Webサイト全体に共通として存在します。
ロゴをクリックすると、Webサイトのトップページに戻ることも、Webサイト訪問者の操作性に共通認識と言えるでしょう。

コーディング

HTMLやCSSなどの言語を使用して、Webページの内容やデザインを記述していく作業のことです。
Webデザイン・Webコンテンツを、インターネット上で、Webサイト(ホームページ)として表示するためにデザイン確定後に行ないます。
綺麗に正確にデザインを表示させること、操作性や機能性を重視すること、GoogleなどにキチンとWebサイトとして認識してもらえるように、細部にまで配慮したコード記述が大切になってきます。

coding

検索された時に、上位表示するためにも正確なタグ、コード記述が大切です。
最近では、PCサイトだけでなく、スマートフォンやタブレットなどの各種端末に対応したコード記述も必須になってきています。

次回の予告。

次回は、「新任Webサイト(ホームページ)担当者に必須なWeb知識。|たぶん中級篇」をお送りする予定です。
Webサイトの設計や操作性など、具体的な話にも対応したいと思います。
ちなみにご質問もコチラで( @kaorubysix)受付けしておりますので、お気軽にお送りください。

Six pick up ! ココロが動いた優れものMemo。

不定期更新で、その都度、「素敵だな。」と思ったり、感動したり、ココロが動いた、広告関係からゲットした最新情報をお届けします。

画像をWebサイトにドラッグしたら、その画像が、万華鏡になっていろんなカタチに変化します。
凄いですよ〜。ぜひお楽しみください。

P R I Z M A

PRIZMA

次回の「Six pick up ! ココロが動いた優れものMemo。」もお楽しみに♬

あなたのビジネスに最適なWebブランディング・Webデザインをお手伝い致します。まずは、現状の課題をお気軽にご相談ください。