7月 « 2009 « HTMLテンプレート|2nd-css.com

メニューよりコンテンツを先に記述する

Filed under: ホームページ作成のヒント — @ 2009年7月23日10:42 AM

ホームページを制作する上で気をつけなくてはならないのが、コンテンツの記述の順序です。

ホームページはたいてい一番上にタイトルや簡単なナビゲーション、右か左にメニュー、そして反対側にコンテンツ、最後にフッター部分となっています。

HTMLの記述は極力コンテンツが最初のほうに来るようにするとよいでしょう。テーブルレイアウトなどで左にメニューを持ってきてしまうとどうしてもメニューの記述が最初のほうに来てしまい、検索ロボットから見るとどのページも前半は同じことが書かれていると判断されてしまいます。

これはSEOの観点からは望ましいことではありません。

またSEOだけでなく音声ブラウザなどでインターネットを閲覧している人にとっては毎回メニューが先に読まれてしまうのはつらいものです。

というわけで、コンテンツはメニューよりも先に記述するほうが望ましいでしょう。このサイトで販売するテンプレートはCSSでレイアウトしていますので左右のメニューは常にコンテンツの後に記述されるようにしています。

何に費用をかけるのか?

Filed under: ホームページ作成のヒント — @ 2009年7月16日10:40 AM

中小企業がウェブサイトを公開する場合、たいていの場合限られた予算というものがあります。その中で最大限によいものを作ろうと考えます。

特に外部に委託をして制作しようとする場合、どの部分に費用をかけていくのかをしっかり見極めなければなりません。

以前私がご相談を受けた会社の例です。その会社は2年程前に外部に委託してウェブサイトをすでに公開していました。しかしながら2年間問い合わせは無いどころかその制作会社自体がなくなってしまい更新すらできないという状態でした。

そのホームページはなかなかキレイにできておりました。ちょっとしたフラッシュも入っています。しかしながらHTMLの文法は適切なものではありません。SEOのことはまったく考慮されていないようでした。

当然どんなキーワードを入れても検索結果に出てきません。会社名ですらトップで見つけることは出来ませんでした。

制作当時かけた費用は数十万円とのこと。せめてフラッシュ入れないでその費用でYahooのビジネスエクスプレスでも登録しておけばもう少しちがったのに…

ブラウザによる表示の違い

Filed under: ホームページ作成のヒント — @ 2009年7月15日10:38 AM

いまだ多くのインターネットユーザーが利用するブラウザは「Internet explorer」ですね。しかしながら最近では別のブラウザを利用する人も増えてきました。おそらく「Internet explorer」に対する不満からであると思いますが、このことがホームページ制作を厄介なものにさせているひとつの原因にもなっています。

それは表示の違いです。

CSS(スタイルシート)の解釈の違いからおきてしまうのですが、1つのページをすべて同じように表示させるというのはなかなか高いハードルとなります。

自分のパソコンと他人のパソコンでは見え方がちがう

例えばある人がホームページを作成し、その人が友人に「ホームページ作ったから見てよ。」なんていったときに「なんだよぉ…レイアウトが変じゃん…」なんてことがあります。

ホームページを作った人のブラウザは「Internet explorer7」その友人のパソコンのブラウザは「Internet explorer6」この違いで大きくレイアウトが変わってしまう場合があります。

CSS(スタイルシート)で制作するからこうなるわけで、それを避けるためには「ガチガチのテーブルレイアウト」それでは本末転倒ですね。

ではどうするかというとすべてのブラウザでそれなりにきちんと表示されるという妥協点を探していくしかないのです。ある程度文法の正しいHTMLとCSSで制作したページであればその妥協点も見つけやすいのですが、そもそもそのHTMLやCSSが適切でなかった場合にはとても困難なことになってしまいます。

全てのブラウザでまったく同じように表示させることは不可能かもしれませんがそこそこ同じように表示させることは可能です。

ホームページを制作するときには様々なブラウザで表示の仕方を確認することがとても重要です。もちろんこのサイトで扱うテンプレートはチェック済みですのでマニュアルどおりにHTMLを書いていくことで全てのブラウザでそこそこ同じように表示されます。

ちなみに私の使うブラウザは「Firefox」制作中の表示の確認はまずは「Firefox」これできちんと表示されても「Internet explorer7」だとちょっと気になるところが出てくる。そこを修正して「Internet explorer6」で確認すると「うわぁ~何だコリャぁ」となります。で、そこを修正していけばそのほかのブラウザはたいていそこそこ同じように表示されます。

時間をとられるのはいつも「Internet explorer」。

イメージ写真のサイズは適切に

Filed under: ホームページ作成のヒント — @ 2009年7月14日10:32 AM

ホームページで使うイメージ写真はきちんとリサイズしてから使いましょう。HTMLで写真を小さく表示させるのは好ましくありません。ホームページの表示が遅くなり、必要以上にサーバーのスペースを使うことになります。

例えば

この上の二つの写真はまったくサイズが異なります。それぞれの写真をクリックしてみてください。元のサイズで表示されます。つまり左の写真は400×300ピクセルの写真なのにHTMLで強制的に100×75ピクセルにして表示しているのです。

この程度のサイズのイメージならそれほど影響はありませんが時々3000ピクセルクラスの写真を250ピクセルにHTMLの記述で小さく見せているサイトがあります。

速い回線で見ているときにはあまり気がつかなくても、遅い回線で見ているとまったく表示されません。

イメージ写真は必ず使用するサイズに画像編集ソフトなどでリサイズ(大きさの変更)をしてから使いましょう。

写真素材を選ぶ

Filed under: ホームページ作成のヒント — @ 2009年7月13日10:27 AM

ホームページの作成で必ずといっていいほど必要なイメージ写真。中小企業の方がモデルやカメラマンを雇ってなんてことが出来るわけもありません。ましてホームページ制作会社にそのあたりも任せてしまうととんでもない料金になりかねません。

となるとどこかで出来合いのものを見繕う必要があります。昔からの定番といえば「素材辞典」ですね。今月末にはVol.219が発売されます。しかしながらホームページに使うにはサイズが大きすぎてもったいなくも感じます。そこでおすすめが

ですね。画像サイズは640×480ピクセルとなってしまいますがちょっとしたイメージ写真を入れるには十分でしょう。ページいっぱいに入れる場合は小さいですけど…

イメージ写真1枚から購入できるサイト

そんなに色々写真入らないという場合は「Fotolia」がおすすめです。数百万点という写真素材から1枚ずつ購入できます。画像サイズも様々ですのであなたの必要なサイズの写真のみ購入すればよいでしょう。

ただし、写真に出てくる人物は外人が多いです。そのあたりをこだわらなかったり人物では無い写真であれば問題ありません。サンプルで荒い画像をダウンロードできるので加工してホームページに貼り付けたときの雰囲気を確認してから購入できるという点もおすすめです。

ちなみに私は上記の素材辞典イメージブックはすべて所有しています。そのほかFotoliaでそのつど購入したりしています。

キレイなホームページは優れている?

Filed under: ホームページ作成のヒント — @ 2009年7月12日10:25 AM

あなたはホームページで何をしたいですか?

趣味?商売?暇つぶし?

趣味と暇つぶしは好きなようにやればよいのでどのようにやってもよいでしょう。さて、ホームページで商売をしたい、会社のホームページを持ちたい、お店のホームページを作りたい、という方…どんなホームページがよいと感じますか?

  • キレイ
  • カッコいい
  • 色々動く…

では、ホームページで何を望みますか?

  • お客が増える
  • 売り上げが伸びる

たいていはこんなところでしょう。売れている、効果の上がっているホームページはどんなページなのでしょう?

  • 説明がしっかりしている
  • 信頼できそう
  • 検索サイトで見つけた

カッコいいとかキレイだとかは効果と関係がない

というのが実際のところです。しかし多くの人が特にはじめてホームページを公開しようとする人は「カッコよくキレイなホームページ」を望みます。そういう作業が得意な制作会社に依頼してしまい、提案されるままにカッコいい仕掛けを取り入れてしまったりします。

気付いてみればほとんど意味の無い自己満足の象徴のようなホームページと請求書が…

本当に大切なのは見た目よりもわかりやすさ、わかりやすさよりもそこにある情報の確からしさそして新しさなのです。

大手企業と中小企業

大手企業のホームページはカッコいいですね。キレイですね。大手企業はそのホームページに何百万円も何千万円も使います。もしあなたにそれくらいの費用をかける余裕があるのでしたらよいですが、おそらくそんなことは無いでしょう。

であれば、大手企業のサイトを真似しても仕方ありません。自分の身の丈にあったホームページを目指しましょう。キレイやカッコいい部分に余計な費用をかけるべきではありません。

ブログで作るホームページ

Filed under: ホームページ作成のヒント — @ 2009年7月11日10:21 AM

ホームページは自分で作成するにしろ、制作業者に依頼するにしろ、公開後の運営が大変です。会社案内程度のホームページでいいというのであれば別ですが、ある程度のアクセスを望んだり、問い合わせを期待したりするのであれば常に新しい情報を掲載していく必要があります。

自分でホームページの更新をしようとすれば作成ソフトを起動して、ページを作成したり編集したりして、リンクを作って、リンク切れなどがないかチェックして、アップロードして…

と、結構面倒なわけです。

頻繁に更新しないのであればあるほどどんどん面倒になっていき、ついにはほったらかしということになります。

制作会社に依頼すれば、当然費用が発生します。「この程度なら別に更新しなくてもいいや」、「今度まとめて更新してもらおう」なんて思っている内にやはりほったらかしになってしまいます。

ブログでホームページを作るという選択

そこで便利なのがいわゆるブログというものです。インターネットエクスプローラーなどのブラウザ上で書きたいことを書き、編集していくだけで面倒なリンク設定やアップロードをしなくて済みます。

でも通常のブログサービスではやはり日記のようです。デザインも個人の趣味のページっぽくなってしまいます。とても会社のホームページには使えません。

そこで考えられるのがサーバーを借りてブログをインストールし、デザイン等自分の好きなようにしてしまうということです。もちろんそれをするには、ただホームページを作るだけよりもはるかに多くの知識を必要とします。特にレイアウトにこだわるのであればCSS(スタイルシート)の知識は必須です。

ただ、一度インストールして設定してしまえば、後の更新作業はとてもラクになります。ちなみにこのサイトは「Wordpress」というブログのプログラムを使って作成しています。

販売するテンプレートを制作したり、テンプレートのスクリーンショットを作成したりすることはブログ上ではどうあがいても不可能ですが、今あなたが読んでいるこの文章もそのほかのページの文章もすべてブラウザ上で書いています。

これはとても便利なことです。パソコンとインターネットにつながる環境さえあればどこにいてもホームページの更新作業が可能なのです。

ブログでホームページを作る

ということも考えてみてはいかがでしょうか?もし興味があって、どこかの制作会社にブログを使ったホームページを依頼してみようかとお考えなら私もその候補の一人に入れていただけたらうれしいです。詳しくはWordPressパックのページをご覧ください。

ホームページ制作会社選びのコツ

Filed under: ホームページ作成のヒント — @ 2009年7月10日10:18 AM

このサイトを訪れている人は何とか自分でホームページを作ってやろうと考えているでしょうからあまり興味のないことかもしれません。でも、もしかすると「めんどくさいからやっぱり誰かに作ってもらおうか…」と考えている方もいるかもしれません。

私自身もホームページ制作に携わる人間ですので参考までに。

セールスマンがやってくる

私の知人の店や会社にもセールスマンがやってきたり、セールスの電話がかかってきたりするようです。一概に言えませんがホームページ制作会社ならホームページで堂々と売り込むべきだと私は考えます。電話で勧誘しなければクライアントを見つけられないホームページ制作会社は私だったらご遠慮します。

すごく高い

私も不思議でたまりませんが、ものすごい高額な見積もりを出してくる制作会社があります。私の出した金額の3倍4倍は当たり前に出してきます。何をしてくれるのか不思議で仕方ありません。高いからよいものを作ってくれるのかもしれませんし、そうでないかもしれません。

すごく安い

あまり安いとちょっと不安になってしまいます。でももしかすると意外とよいものを作ってくれるかもしれません。

ホームページ制作費無料

制作費が無料という会社は結構あります。しかしながらたいてい月々の費用が2万円とか。1年で24万円になってしまいます。ホームページはいったん公開すればその制作会社とは長いお付き合いになります。2年、3年となると結構な金額になってしまいます。将来自分で更新するようになったり、自分で安いレンタルサーバーで運営したくなったときにスムーズに移行できるか疑問があります。

長い目で見て考えましょう

ホームページは公開して終わりではありません。更新のコストも考えなくてはなりません。たとえば、もしあなたに50万円の予算があったとしたらそれをすべて制作につぎ込むべきではありません。半分は制作費、半分は1年間の運営費というように考えましょう。

そのあたりをきちんとしてくれる制作会社を選びましょう。そしてその制作会社とはある程度の長いお付き合いになるはずです。あなたのホームページを担当する人の人柄も大切な要素です。そりの合わない人といい関係が築けるはずがありません。

また、あなた自身も制作会社に丸投げの姿勢はよくありません。あなたのホームページはあなたのものです。しっかりと運営していくという姿勢が大切です。

ページのタイトルの重要性

Filed under: ホームページ作成のヒント — @ 2009年7月9日10:17 AM

ホームページを制作するときにおいてページのタイトルはとても重要です。HTMLでいえば、

<title>ここにタイトル</title>

この部分です。「ここにタイトル」の部分にそのページのタイトルを的確につけることはSEOにとってもホームページを訪れてくれる人にとっても重要なことです。

たいていの検索エンジンは検索結果の見出しとしてこの「タイトル」を表示します。当然そこに含まれる言葉はそのページに書かれている内容の重要なキーワードであると検索エンジンは判断します。

無題ドキュメント

ホームページ制作ソフトで見える部分だけ一生懸命制作しているとこの「タイトル」部分を見落としてしまいがちです。デフォルトでつけられてしまう「タイトル」は「無題ドキュメント」であったりします。

検索エンジンで「無題ドキュメント」を検索すると実に100万件以上のページがヒットします。それぞれのページは、趣味のサイトだったり企業サイトだったり様々ですが「無題ドキュメント」ではなかなかクリックしてみようという気にはなることが出来ません。

サイト内のタイトルがすべて同じ

「無題ドキュメント」ページ以上に多いのがサイト内のページのタイトルがすべて同じというサイトです。「無題ドキュメント」よりははるかに良いですが仮にそのサイト内のページが100ページにわたる内容であればそれぞれのページに書かれている内容を的確に表すタイトルをつけることが望ましいでしょう。例えば「株式会社やまだ」の「求人情報」のページであれば

<title>株式会社やまだ</title>

ではなく

<title>求人情報 << 株式会社やまだ</title>

等とすることが望ましいです。

「そんなの知ってるよ」という方がほとんどかもしれませんが、残念ながらせっかくテンプレートをご利用いただいているのにタイトル部分の修正を忘れているばっかりに効果を半減させてしまっているサイトが結構あります。

今一度、適切なタイトルがつけられているか確認しましょう。

ホームページのメニューの位置

Filed under: ホームページ作成のヒント — @ 2009年7月7日10:15 AM

ホームページのレイアウトをするときたいていの場合パターンは決まっています。ホームページはタイトルなどのヘッダー部分、メニュー部分、内容を書くコンテンツ部分、そしてcopyright等を書くフッター部分で構成されます。たいていは以下のようなパターンでしょう。

ホームページのレイアウト例

上の図の水色の部分がメニュー、ピンク色の部分がコンテンツ(内容)部分です。もちろんもっと様々なパターンはありますが大まかに分けるとほとんどのホームページが上のいずれかのパターンでしょう。

その中でも多いのが2カラムのレイアウトです。このサイトのテンプレートもそうですね。そこで気になるのがメニューの位置。メニューは右がいいのか左はいいのか…

一昔前まではメニューは左というのが常識でした。人の視線はたいてい上から下、左から右に流れるためということからのようです。Windowsのショートカットアイコンも左側が標準です。

しかしどちらかというと「みんな左にメニューがあるから…」というなんとなくという理由が大多数であった気もします。

最近はまだ左メニューの方が多数派のようですが右側にメニューを配置するサイトも数多く見られるようになってきました。その理由は「右利きの人が多い」ということからです。

たいていの場合マウスに手を添えてボーっとしているとマウスカーソルは画面の右下の方にやってきます。ですから右側にメニューがあったほうが近いということです。またスクロールバーは右側にあるため縦長のページのときは「スクロール、クリック」という動作をし易いということもあります。

「ホームページのメニューの位置」についてはそのときの流行もありますから一概にこちらが優れているというものではありませんが、HTMLにおいては常にヘッダー→コンテンツ→メニュー→フッターという書き順にしておく必要があります。

これはSEOの観点からも最も重要なことです。もちろんこのサイトで扱うHTMLテンプレートの書き順はヘッダー→コンテンツ→メニュー→フッターとなっています。

1 / 212