「ホームページ制作初心者向け情報」カテゴリの最近のブログ記事

ホームページを作成する時に、意外と悩む事にドメイン名があります。ドメインってそもそも何？という方の為にドメインについてご説明させて頂きます。

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

ドメイン取得は先着順になっており、基本的に、先に取得した人がいた場合は、後から申請しても取得できません。裏をかえせば、どんなドメインでも最初に申請すれば、それがあなたのホームページの「住所」になります。

ドメインとはＵＲＬの最後にくる「.com」「.jp」「.net」などの文字の事をいいます。単にスペルが違うだけではなくてこれらにはそれぞれ意味があります。よく目にする「.com」そして日本特有の「.jp」法人専用の「co.jp」などそれ以外にも複数の種類があります。

gTLD（Generic Top Level Domain）と呼ばれる種類のものは、世界中の誰でも取得する事ができます。日本人だろうと、アメリカ人だろうと誰でも取得する事ができます。具体的には（.com/.net/.org/.info/.name/.biz）になります。

一方でccTLD（country code Top Level Domain）と呼ばれる種類のものは原則としてその国に在籍する人だけドメインを取得できます。日本の場合、具体的には（.jp / co.jp / or.jp / ne.jp）になります。また co.jp / or.jp / ne.jp は企業や団体用なので個人では取得不可になります。

当社のサイトであれば「 web-balloon.com を取得して　http://www.web-balloon.com にしよう！」 というような感じでになるわけです。

今ご説明したものは独自ドメインと呼ばれる種類のものになります。

これとは別にサブドメインというものもあります。サブドメインとは一言で言えばドメインをさらに細かく分けたものになります。
サーバにもよりますが先ほどご説明したドメインに対して「○○○.web－balloon.com」のように○○○の部分を変えてサブドメインをいくつも作る事ができます。

それぞれメリット、デメリットがあります。用途に応じて使い分けをまずは考えて見てください。

独自ドメインは費用がかかりますが、サーバ会社を変えてもＵＲＬを変える必要がなく、メールアドレスでも使用する事ができます。サブドメインはサーバ会社が無料で提供している場合もあり、費用を抑える事ができますが、サーバを引っ越したりする時にはＵＲＬを変える必要があります。

それぞれ特徴がありますから、より自分の状況にあったものを考えるのが大事です。

何となく、ドメインに関してはわかって頂けましたでしょうか？

さて、ホームページを作成する時に私のホームページはこんな名前にしよう。短くてわかりやすい名前にしよう、簡単で誰もが訪問してくれる名前にしよう。そんな風に名前を考えるのはとても楽しいものです。
ですが、ドメインは他に誰かが持っていると、同じドメインは持つことが出来なくなっています。

もし、すでに他の人に利用されていたら・・・　もうそれは諦めて他の名前を考えなければなりません。他の人が使っているかどうかはドメイン名を検索するサイトで簡単に調べる事が出来ます。

もし、ホームページを作成するときに、絶対この名前にしようとか、こういう関連の名前にしようと考えているのなら、早めに調べておくことがお勧めです。他の人が使用してしまうと、もう同じ名前は使用する事が出来なくなってしまいます。

一度契約していたドメインを手放して、しばらくたってもう一度使おうと考えると、別の人が使用していて使えなかったという話をよく聞きます。

長く使っているうちに愛着もわいてくるものですし、ホームページを作るときは名前であるドメインも慎重に考える事が必要です。

お店やサービスの検索で多く利用されるGoogle。
そのGoogleが提供するサービスの一つとして Google プレイスがあります。
Google プレイスとは、GoogleMapなどにお店やサービスの情報を掲載できる無料のリスティングサービスです。

▼GoogleMapにビジネス情報を掲載できる

 このサービスはホームページを持っていなくても、利用できるサービスです。
登録がされればGoogle プレイスから登録した情報を編集することもできます。

▼アカウントを作って登録を行う

▼営業時間やサービスの詳細も掲載できる

Googleプレイスでは、ホームページのURLも載せることもできますので、GoogleMapからホームページへの誘導に利用できます。

また、キーワードに地域属性を追加して検索を行うと検索結果の上部にGooglMapの情報が出てくることがあります。
つまり、検索結果で1ページ以内に入っていなくても、GoogleMapに掲載されることで、1位のホームページよりも上に表示される可能性もあるのでお得ですね。

Googleプレイスに登録がまだの皆さん！無料のサービスを利用してビジネスに活用しましょう。 

そしてホームページをまだお持ちでない方は、ホームページ制作のWEBばるーんにお任せください！

ホームページはあるけれどいまいち売上に繋がらない・・という方もお気軽にご相談を！ホームページのリニューアルプランができました。

↓↓　お問合せはこちらから　↓↓

今回は、ホームページ制作時にお客様からご相談いただくお困り事例について、ご紹介いたします。

ホームページに写真を掲載する際、お客様に写真をご用意いただくことがあります。

[お困り事例1]

「自分で撮影したのですが、余分なものまで写っているので、
修正できませんか？」

大丈夫です。ご相談下さい。
弊社で、写真を加工することができます。

1枚目は、加工前の写真です。
カレンダーが右端に写っているため、削除します。

2枚目は、弊社で画像加工を施した写真です。
元々カレンダーが写っていなかったかのように見えます。
また、明るさ・角度を調節しているので、1枚目よりも見やすくなりました。

いかがでしょうか？
このように、他社名や不要なものが、写真に写っていても
修正することは可能です。

[お困り事例2]

「撮り直しができない写真を使用したいが、横幅が足りない」

このような場合でも、弊社ではプロ用の写真加工ソフトを使用していますので、お客様のご要望に沿って写真加工ができます。

1枚目から2枚目をご覧下さい。
2枚目の写真は、写真加工ソフトを使用して、横幅を伸ばしました。

ここでご紹介したのは、写真加工の一例です。
ホームページ制作を依頼される際に、写真のご用意でお困りでしたら
お気軽にご相談下さい。

ホームページ作成に使える画像編集ソフトをご紹介します。

しかし、FireworksやPhotoshopはプロ向けのソフトウェアであるため高機能で高価です。

「画像に文字をのせたいだけなのだけど…」ということであれば、Windowsなら「ペイント」を利用すれば画像編集ができます。
「いやいや、もう少し画像の色を微調整してシャープな感じにしたいんだよねぇ…」ということであれば、「ペイント」だと機能が足りません。

もっと高機能なソフトが欲しいけど、プロ向けの高いソフトが手が出しにくいなぁと思われるのであれば、無料で利用できるソフトウェアから試しに使ってみることをオススメします。

Photoshopのように高機能なのに無料で利用できる次のようなソフトウェアがあります。

『GIMP(ギンプ)』
『Paint.net（ペイントドットネット）』

色々と探してみると無料で使えるソフトというのは沢山リリースされています。
ホームページ制作会社へデザインを依頼する前に、このようなソフトを使ってイメージを作ってみるという利用方法も考えられます。

自分でホームページを作ってみたけれど、やっぱり時間がかかるし難しい！ということであれば、制作会社へ依頼されることをオススメします(^^)

私が担当したブログ記事では、これまでにHTMLで文章構造を作り、CSSで文章を装飾する、といった内容を説明してきました。

さて今回、ご紹介するJavascriptを使えば、ホームページ上で時刻を表示したり、入力された値をチェックしたり、アクセスした時間によって異なるページを表示させたり、といったことが可能となります。

ホームページを訪れた人がそこに表示されている文章を読んで、また次のページへ行くという動作はホームページ側からすると非常に受身です。
JavaScriptは見るだけのホームページを変化に富んだ便利なものにしてくれる技術なのです。


なおJavaScriptは、Netscape Communications社によって開発されたプログラミング言語です。

前回はホームページにCSSを適用して、見栄えを変えることができるというところまでを説明しました。

では、CSSを適用するには、具体的にどうすればいいのでしょうか？

CSSとはホームページの各要素の見栄えを設定するという性質上、まず要素を指定してやる必要があります。

前々回、「”HTML”とは｣で<h1>や<p>といったHTMLタグで、文章に要素づけをしました。

CSSでは、まずこれらのタグ(要素)を指定します。

その後、指定したタグ(要素)に属性(見栄え)を設定してやります。

このCSSの記述をHTMLの<head>から</head>の間に

<style type="text/css"> （CSSの記述) </style>というように

挿入してやりましょう。

すると、指定した要素の見栄えが変わったかと思います。

このようにHTMLとCSS を組み合わせることで様々な表現が可能になるのです。

前回は、ホームページの本文について考えましたが、今回はそれに引き続きページ内容の画像・データについてお話しようと思います。

ページ構成も考えた、本文も読みやすくなった、よし、これで大丈夫…でも、本文の次に重要なものが残っています。それは、画像です。

本文を段落分けしたように、読みやすいホームページを作る上で重要なことは、そのページにあった画像やグラフ・表などを挿入することです。

前回の「ホームページを作る際に始めること②」でもご説明しましたが、ネット上にはたくさんのホームページが溢れているので、同じような内容を扱っているホームページがたくさんある場合、閲覧者は文章がだらだらと書いているだけでは読む気力をなくしてしまいます。

その中で、少しでも読みやすくするために、画像や表などを挿入します。

また、画像などを挿入したりすることによって、文章だけのホームページよりも印象に残りやすくなります。

ただし、画像などを挿入する場合、逆に画像の入れすぎに注意しましょう。
1ページに何枚もの画像を入れるとホームページが重たくなり、表示されにくくなります。

ホームページの内容を考えて、文章と画像のバランスを考えてみましょう。

また、紙媒体のチラシをそのまま綺麗に見せたい場合や画像があまりにも重たい場合は、画像をＰＤＦにして、閲覧者に見てもらうという方法もあります。

画像は余裕を持って多めに用意しておいたほうが、ホームページ作りを進めていく時は安心です。

作成したいホームページに合わせて、画像やＰＤＦなどのデータを用意しましょう。

ドキュメントタイプ・・・といっても、普段サイトを見るだけでは、あまりなじみのない言葉かと思います。

「HTMLがどんな仕様にのっとって作られてるか」というようなもので、
ページを作成する場合、このページはXXという仕様で作ってますよとそのドキュメントタイプを最初に宣言したりします。

ブラウザのメニューバー「表示」⇒「ソース」（※IE7での表示方法）をクリックすると今見ているページのソースコードが見ることができるます。
するとその文書の上部に

＜!DOCTYPE HTML PUBLIC～云々・・・

という一文が記述されていると思います。これがドキュメントタイプになります。
※ドキュメントタイプが記載されていない場合もあります。


今見ていただいているページだと

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

になります。
このページはXHTML1.0にのっとったページということになります。
「Transitional」の部分が「Strict」となるとより厳密にその仕様（このページではXHTML1.0）に従うというものになります。

言語のバージョンによっていろんな記述がありますが
大まかな形としては

<!DOCTYPE html PUBLIC "-//W3C//DTD 記述言語 バージョン//EN" "DTDのURI(URL)">

という形になります。
この記述によってスタイルシート（CSS）の記述方法などもドキュメントタイプに沿ったものにする必要があるのです。

また、 "DTDのURI(URL)"と記載した部分やドキュメントタイプ自体を記載していなかったり、先ほど出てきた「Transitional」や「Strict」との違いによって
ブラウザごとに「見え方」が変ってきますので注意が必要になってきます。

それにしてもドキュメントタイプって長ったらしく、記述がいまいちわからんと思われる方に朗報です。


現在W3Cで策定中のHTML5になるとドキュメントタイプが

<!DOCTYPE html>

だけで良いらしいです。なんともすっきりで良いですね！

Web標準とはWebで使用される技術における標準規格です。

工業製品におけるJIS規格があるように
Webの世界でもWeb標準といわれるものがあるのです。

このWeb標準、特に法的拘束力があるわけではないので
守ってなくても法的に罰せられたりはしません。

ではなぜ「標準化」や「Web標準に準拠」などといわれるのでしょうか？

もし、それぞれが好き勝手に作成してしまうと、その分汎用性からは遠のいてしまうでしょう。
ある方法では見ることができるけれど、こちらの方法では見ることが出来ない…といった具合ですね。

そこでWeb標準なのです。
“標準”と言われるくらいなので、そこにはより多くの人に見られるための工夫が詰まっています。
アクセシビリティやSEOにも期待ができるということになります。

決められたものに沿うのってめんどくさそうだな…と思うかもしれませんが、
好き勝手していたところを標準化しよう！と策定されて行っているものなので
ありがた～いことに思えてきますよね。

HTMLと並んで現在のホームページ制作に欠かせないのがCSSです。 

 <h1>や<p>といったHTMLタグを使用してホームページを制作すると、ブラウザが自動的に文字のサイズや書体、色などを決めて表示してくれます。  

ブラウザが自動的に文章の見栄えを決めてくれるとは言っても、それは最低限のものでしかありません。そのままではどのホームページも似たようなものになってしまいます。

 そこでCSSの出番です。 

 HTMLが文章の構造を明確にするためのものなら、  CSS はその文章に装飾を加え、見栄えを整えるために使われるものなのです。

上の例を見て頂いても分かる通り、 CSS の有無でホームページの見栄えは驚くほど変わります。

作成したホームページにCSSを付け加えることで、見栄えの良い自分だけのホームページをつくることができるのです。

次回、"ＣＳＳ"とは（２）ではどのようにCSSを設定するのかを見ていきたいと思います。