2009 « スタイルシートデザインHTMLテンプレート[2nd-css]

IE5.5 IE6 IE7 IE8の表示確認

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

インターネットエクスプローラーでの表示確認にはこんな便利なものもあります。

ietester

IE5.5 IE6 IE7 IE8での表示確認ができる「IETester」です。最もユーザーの多いブラウザなのにそのバージョンによって表示が異なる、とくにCSSでレイアウトしているときには頭痛の種です。と、嘆いていてもユーザーが多いので仕方ありません。しっかり確認しましょう。

この「IETester」日本語化もされています。インストールもカンタンで、ソフトウェアの使い方もいたってシンプルです。最近は私もコレ使ってます。

写真素材 Fotolia

Filed under: ホームページ作成のヒント — @ 2009年9月25日11:09 AM

このサイトを含め、私の運営するサイトやクライアント様のサイトでも結構使わせてもらっています。有料の素材ですがものすごい膨大な量のデータがあります。人物は外人が多くなってしまいますがそれ以外のものでは十分に対応できるものばかりです。

しかも、使うデータのサイズによって価格も異なるので無駄に大きなデータを購入する必要も無く便利ですね。

それと、「今日の無料写真素材」というコーナーがあって日替わりで素材十数枚をただでくれます。使うかどうかは別として良さそうなのは時々もらっておきます。だってタダなんですから。

唯一の難点はデータが膨大すぎて素材を探すのに時間がかかってしまうということ…というより目移りしてしまうといったほうが正確かもしれませんが。

写真素材 Fotolia

どうしてもホームページビルダー?

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

ホームページ作成ソフトといえばホームページビルダーといえるくらい初心者の方には有名なソフトです。ですからメールサポートパックでお申し込みの方のご質問に多いのが「ホームページビルダーで開いたら…」「ホームページビルダーで編集すると…」といったものです。

ホームページビルダーはとても良いソフトだと思います。ホームページ作成初心者がマニュアル本片手に初めてホームページを作るようなときには使いやすいソフトでしょう。

しかしこのサイトのテンプレートに限らず多くののホームページテンプレートはホームページビルダーで作られているわけではありません。使っていたとしてもHTMLのタグ打ちで作成されているものがほとんどでしょう。

ホームページビルダーが書き出すHTMLはとても複雑なものになりがちです。そのようなソフトで作成したテンプレートはたとえ見た目がきれいだったとしてもそれを編集することはとても難しくなります。

仮にこのサイトで販売しているテンプレートをホームページビルダーで編集していったとすると、編集していけばいくほどHTMLは複雑になってしまいます。しかもホームページビルダーがスタイルシートに十分に対応していないために編集画面では表示が崩れたりします。編集画面と実際のブラウザの表示が異なるのです。

初めてのホームページ作成にはホームページビルダーは良いソフトでしょう。しかし2度3度と作成回数が増えてきたらHTMLをきちんと理解して使いこなせるようにしていきましょう。そのことはあなたのホームページをより良いものとしてくれることにつながります。多くの方が「難しそう」とか「面倒くさい」、「せっかくソフトがあるのだから」といって覚えようとしません。

でも、私から見るとホームページを作れるのにHTMLを覚えないのはとてももったいないことに感じます。

なぁに大丈夫です。ホームページビルダーの使い方を覚えるよりカンタンですから…

わかりやすいホームページ

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

ホームページを制作する上で、その出来上がったホームページがわかりやすいということはとても重要なことです。さまざまな広告媒体を活用できる大手企業は別として中小企業や個人事業主の方にとっては時としてホームページが唯一の広告手段で合ったりする場合があります。

そのときそのホームページがわかりにくいものであったらそれは致命的です。せっかくホームページを公開していてもたいした効果は見込めないものとなってしまいます。

では、中小企業や個人事業主の方にとってホームページのデザイン、レイアウトはどのような ものがよいのでしょう。インターネット上には様々な企業やお店のサイトがあります。例えばあなたが何かを検索したときにどのようなサイトを見やすいと感じ るでしょうか?またわかりやすいと感じるでしょうか?

多くの方は、ごく普通にシンプルに作成されたホームページを見やすいと感じ、またサイト内の別のページにもいきやすいと感じます。フラッシュなどで色々動き出すメニューや、文字と背景色の区別ががわかりにくいコントラストのサイトは見ていて疲れるものです。

不思議なことにわかりづらいサイトは一見するとちょっとカッコよく見えたりするかもしれません。しかし実際はものすごく不親切なホームページとなってい ます。商品をアピールするために豊富に写真を使ったりするのはよいでしょう。しかしながらリンクのボタンなどは別に画像でなくてもよい場合が多いのです。

確かに見た目はリンクメニューなども全て画像で作成していった方がカッコいいホームページになりやすいです。しかしそれは自己満足に過ぎません。見た人にわかりやすい、快適に閲覧してもらえることをまず第一に考え、ホームページを作成していくことが大切です。

ホームページ制作会社は見た目のカッコいいホームページを制作するとクライアントさんに喜ばれます。カッコいいホームページは更新もし辛く、ランニ ングコストも余計にかかってしまう場合が多くなります。見た目でひきつけようとするホームページはまた、飽きが来るのも早いものです。

多くの閲覧者がわかりやすい、見やすいと感じるホームページのレイアウト、デザインがとても重要です。

YahooとGoogleの検索結果

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

このサイトを公開して2ヶ月あまり。総アクセス数も10,000を超えました。Yahooのビジネスエクスプレスとかその他広告は一切していないのにまずまずの出だしではないかと思っています。

あとはまじめにコンテンツを追加していけば、良いサイトに成長していってくれると考えています。

さて、サイトを公開してしばらくたったことですし、YahooとGoogleでの検索結果の位置を確認してみました。はたしてどうなっているのでしょうか?

まずはキーワードを「ホームページ テンプレート」では?
Yahoo 46,100,000件中 38位
Google 7,600,000件中 26位

次にキーワードを「HTML テンプレート」では?
Yahoo 25,100,000件中 14位
Google 12,600,000件中 17位

さらにキーワードを「スタイルシート テンプレート」では?
Yahoo 2,420,000件中 3位
Google 1,350,000件中 24位

と、いうわけでまずまずの位置でした。ここでは書きませんが上記以外にも予想に反するようなキーワードでアクセスされる方が結構いらっしゃいます。

このサイトはWordPressで運営していますが、サイトの基本構造は「monoシリーズ」とほぼ同じなのです。スタイルシートはもちろん編集していますし、HTMLにはWordPressのコードが書かれていますのでまったく同じではありませんが…ただ、サイト公開2ヶ月あまりでややハードルの高いキーワードでこの位置であるということは、サイトの基本構造は検索エンジン対策には十分であると思います。

あなたのサイトもこのHTMLテンプレートを使って作成することできっと良い結果を生み出すことでしょう。

エラーが検出されたので修正しました

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

ホームページビルダーのちょっと前のバージョンのものだと私の運営する別のサイトで配布するテンプレートを編集しようとすると「エラーが検出されたので修正しました。」と出て勝手に修正してしまうらしい。

どうもこのホームページビルダーというソフトは勝手なことをしてしまうので質問の多いソフトウェアなのです。

マニュアルにもこのサイトでもHTMLを直接書くことをおススメしていますがやはり抵抗のある方は多いのでしょう。ホームページビルダーのページ編集画面で編集し、どんどんHTMLを複雑にしてしまうサイトが良く見受けられます。

ちょっと前にオリジナルのテンプレートの制作を依頼された方もそうでした。ホームページビルダーで編集していきたいという注文です。お客様の要望である以上、可能な限りホームページビルダーで編集しやすいように、しかも可能な限りCSSでHTMLを簡潔にしたテンプレートを納品しました。

しかしながらほんの数ヵ月後にはとても複雑なHTMLのサイトに変わってしまっていました。ブラウザによっては文字が重なってしまっている部分もあります。HTML文法をチェックするとエラーの連続です。

こちらの用意したマニュアルをほとんど無視してホームページビルダーで作りたい様に作ってしまったのだから仕方の無いことかもしれません。

ホームページビルダーを使うなというのではありません。使いようによっては便利なソフトでしょう。しかし、勝手にHTMLを修正してしまわないように設定しておくことや、作成後のHTMLを必ずチェックする習慣は身につけておいたほうが良いでしょう。

HTMLはタグ打ちで…

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

あなたはホームページを作るとき何で作りますか?ブログを活用するという場合を除けば多くの方が「ホームページビルダー」を使っているのではないでしょうか?会社などでは「Dreamweaver」かもしれません。

HTMLを理解したうえでホームページ作成ソフトを使うのは問題はありませんが、HTMLの知識まったくなしにソフトウエアのみに頼っていると大変なことになる場合があります。

特に人気の「ホームページビルダー」ではブラウザによっては文字が重なったりして読むことができないなんていうサイトが結構あります。読めないなんていうのは論外ですが、レイアウトが崩れているサイトはそれ以上にあります。

そんなサイトのソースを見ると解読不能なくらいに複雑になっています。

初めてホームページを作ろうとするとき何も知識がないためとりあえずソフトウェアで作ります。ソフトウェアが書き出した複雑なHTMLを見て「うわぁ~難しそう…」と思うため余計に覚えようとしなくなります。

でも実際はHTMLはとてもシンプルにできるのです。デザインさえスタイルシートで行ってしまえば難しいことではありません。

むしろソフトウェアの使い方を覚えるほうが難しい。

私はDreamweaverを使って基本的にHTMLを直接記述していますがなんとなく購入してみたホームページビルダーは使ったことが無いせいもありますが、とても難しい。スタイルシートでレイアウトしようとすると本当に難しい。

結局HTMLは直接タグ打ちする方が効率がよいことに気が付きます。

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

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」。

1 / 3123