IE6、IE7、IE8の表示確認

カテゴリー: ホームページ制作のヒント — @ 2009年7月31日1:53 PM

ホームページの制作で各ブラウザでの表示確認は欠かせない作業ですが、もっとも対応に苦慮するのはインターネットエクスプローラーです。

何しろ利用者が多いのにもかかわらずそのバージョンによって大きく表示が異なってしまう場合があるからです。

IE6のスタンドアーロン版などもありますがただの表示確認だけなら便利なものがあります。それが「Microsoft Expression Web SuperPreview」というもの。

superpreview

上のようにIE6、IE7、IE8の表示確認ができます。あくまでも表示確認だけです。リンクをクリックしても何も起きません。でも無いよりはイイか?でも動作確認はスタンドアーロン版か別のPCで行うしかありません。

公式ブログからダウンロードできます。

何に費用をかけるのか?

カテゴリー: ホームページ制作のヒント — @ 2009年7月14日6:23 AM

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

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

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

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

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

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

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

カテゴリー: ホームページ制作のヒント — @ 2009年7月12日7:13 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」。

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

カテゴリー: ホームページ制作のヒント — @ 2009年7月11日10:00 AM

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

例えば

big_image small_image

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

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

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

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

ホームページテンプレート(di-A-5)

カテゴリー: diシリーズAタイプ — @ 6:26 AM

ホームページテンプレート/di-a-5-1濃い青を基調としたデザインです。堅実な企業イメージをアピールするのにピッタリなテンプレートです。多くの企業サイトで活用できるでしょう。デザインはすべてCSS (スタイルシート)で行っています。W3C勧告に準拠したWeb標準HTMLテンプレートです。 左の画像、下のスクリーンショットも画像をクリックすると拡大してご覧になることが出来ます。

このテンプレートの特徴

アクセスアップ・売り上げアップにつながるテンプレート
upW3C勧告に準拠したWeb標準ホームページテンプレートです。適切で正しいHTMLであることはウェブサイト構築には不可欠の要素です。アクセシビリティの向上、サーチエンジン対策、サイトのメンテナンス性の向上等、サイトのアクセスアップ、顧客獲得が期待できます。
SEOの効果のある適切なHTML記述
htmlhタグをはじめとするHTMLの効果的な記述によりSEOに効果を期待できます。ホームページ運営の成功の秘訣はなんといっても検索エンジン上位表示です。そしてその基本は適切なHTMLの記述にあるといえます。
フルCSSデザインのシンプルなHTML
cssデザインはすべてスタイルシートに記述しました。これによりHTMLはとてもシンプルでホームページ作成初心者でも取り組めるテンプレートです。また、スタイルシートを書き換えることでサイト全体のデザインをカスタマイズでき、メンテナンス性が大幅に向上しました。
サイト構造を3階層まで考慮した設計
サイトの構成を3階層まで考慮しています。ショッピングサイトやカタログサイトなどで活用しやすいテンプレートです。アフィリエイトサイトにも使いやすいテンプレートになっています。
濃い青を基調としたデザイン
堅実な企業イメージを表すのにはぴったりの色調。サイトを訪れてくれた人に好印象を与えるのはとても大切なことです。
サイト規模20ページから500ページ程度のサイト向け
3階層の構造ですのである程度規模の大きなサイトにも対応できるテンプレートです。
マウスオーバーでボタンの色が変わる
マウスオーバーでボタンの色が変わる

テンプレートのスクリーンショット

ホームページテンプレート/di-a-5-2 ホームページテンプレート/di-a-5-3 ホームページテンプレート/di-a-5-4
ホームページテンプレート/di-a-5-5 ホームページテンプレート/di-a-5-6 ホームページテンプレート/di-a-5-7
ホームページテンプレート/di-a-5-8 ホームページテンプレート/di-a-5-9 ホームページテンプレート/di-a-5-10

テンプレートセットには以下のものが含まれています。

ホームページ制作マニュアル
こちらのテンプレートを利用してホームページを作成する場合の作業の流れと注意点などをまとめました。はじめにこちらをお読みください。
HTML記述マニュアル
上のスクリーンショットのようなページでHTMLの記述方法を解説しています。実際のテンプレートを利用してマニュアルページを作成していますのでホームページ作成の参考になること間違いありません。
基本テンプレート
基本構造のみのテンプレートです。ここから作業を始めるとよいでしょう。

ホームページ作成に不安のある方は

mailホームページを自分で作成することに不安のある方は1ヶ月のメールサポートつきパックをお申し込みください。ホームページを作成する上での疑問質問にメールでお答えいたします。
kouhin

クレジットカードでのお支払いはこちらから

「今すぐ購入」ボタンをクリックするとPayPalの決済画面にジャンプします。PayPal アカウントをお持ちでない方もクレジットカードでのお支払いが可能です。
card

ホームページテンプレート(di-A-5)
販売価格 : 11,800円

ホームページテンプレート(di-A-5)1ヵ月メールサポート付
販売価格 : 24,600円

ご注文のテンプレートは概ね24時間(土、日祝日を除く)以内にあなたのメールアドレスにお届けします。

銀行振り込みでのご購入は以下のフォームから

会社名

お名前 (必須)

メールアドレス (必須)

ご住所 (必須)

ご購入する商品、いずれか選択してください。
 HTMLテンプレート(di-A-5):11,800円 HTMLテンプレート(di-A-5)1ヵ月メールサポート付:24,600円

ご注文フォームを送信後あなたのメールアドレスにお支払いについてのご案内が届きます。お支払い手続き完了後、あなたのメールアドレスにテンプレートのセットをお送りします。

ホームページテンプレート(di-A-4)

カテゴリー: diシリーズAタイプ — @ 2009年7月10日5:24 PM

ホームページテンプレート/di-a-4-1グリーンを基調としたデザイン。エコロジー、ガーデニングなどの話題のサイト、健康をテーマにしたサイトにもマッチするテンプレートです。デザインはすべてCSS (スタイルシート)で行っています。W3C勧告に準拠したWeb標準HTMLテンプレートです。

左の画像、下のスクリーンショットも画像をクリックすると拡大してご覧になることが出来ます。

このテンプレートの特徴

アクセスアップ・売り上げアップにつながるテンプレート
upW3C勧告に準拠したWeb標準ホームページテンプレートです。適切で正しいHTMLであることはウェブサイト構築には不可欠の要素です。アクセシビリティの向上、サーチエンジン対策、サイトのメンテナンス性の向上等、サイトのアクセスアップ、顧客獲得が期待できます。
SEOの効果のある適切なHTML記述
htmlhタグをはじめとするHTMLの効果的な記述によりSEOに効果を期待できます。ホームページ運営の成功の秘訣はなんといっても検索エンジン上位表示です。そしてその基本は適切なHTMLの記述にあるといえます。
フルCSSデザインのシンプルなHTML
cssデザインはすべてスタイルシートに記述しました。これによりHTMLはとてもシンプルでホームページ作成初心者でも取り組めるテンプレートです。また、スタイルシートを書き換えることでサイト全体のデザインをカスタマイズでき、メンテナンス性が大幅に向上しました。
サイト構造を3階層まで考慮した設計
サイトの構成を3階層まで考慮しています。ショッピングサイトやカタログサイトなどで活用しやすいテンプレートです。アフィリエイトサイトにも使いやすいテンプレートになっています。
グリーンを基調としたデザイン
清潔な、環境にやさしい企業イメージを表すのにはぴったりの色調。サイトを訪れてくれた人に好印象を与えるのはとても大切なことです。
サイト規模20ページから500ページ程度のサイト向け
3階層の構造ですのである程度規模の大きなサイトにも対応できるテンプレートです。
マウスオーバーでボタンの色が変わる
マウスオーバーでボタンの色が変わる

テンプレートのスクリーンショット

ホームページテンプレート/di-a-4-2 ホームページテンプレート/di-a-4-3 ホームページテンプレート/di-a-4-4
ホームページテンプレート/di-a-4-5 ホームページテンプレート/di-a-4-6 ホームページテンプレート/di-a-4-7
ホームページテンプレート/di-a-4-8 ホームページテンプレート/di-a-4-9 ホームページテンプレート/di-a-4-10

テンプレートセットには以下のものが含まれています。

ホームページ制作マニュアル
こちらのテンプレートを利用してホームページを作成する場合の作業の流れと注意点などをまとめました。はじめにこちらをお読みください。
HTML記述マニュアル
上のスクリーンショットのようなページでHTMLの記述方法を解説しています。実際のテンプレートを利用してマニュアルページを作成していますのでホームページ作成の参考になること間違いありません。
基本テンプレート
基本構造のみのテンプレートです。ここから作業を始めるとよいでしょう。

ホームページ作成に不安のある方は

mailホームページを自分で作成することに不安のある方は1ヶ月のメールサポートつきパックをお申し込みください。ホームページを作成する上での疑問質問にメールでお答えいたします。
kouhin

クレジットカードでのお支払いはこちらから

「今すぐ購入」ボタンをクリックするとPayPalの決済画面にジャンプします。PayPal アカウントをお持ちでない方もクレジットカードでのお支払いが可能です。
card

ホームページテンプレート(di-A-4)
販売価格 : 11,800円

ホームページテンプレート(di-A-4)1ヵ月メールサポート付
販売価格 : 24,600円

ご注文のテンプレートは概ね24時間(土、日祝日を除く)以内にあなたのメールアドレスにお届けします。

銀行振り込みでのご購入は以下のフォームから

会社名

お名前 (必須)

メールアドレス (必須)

ご住所 (必須)

ご購入する商品、いずれか選択してください。
 HTMLテンプレート(di-A-4):11,800円 HTMLテンプレート(di-A-4)1ヵ月メールサポート付:24,600円

ご注文フォームを送信後あなたのメールアドレスにお支払いについてのご案内が届きます。お支払い手続き完了後、あなたのメールアドレスにテンプレートのセットをお送りします。

写真素材を選ぶ

カテゴリー: ホームページ制作のヒント — @ 11:46 AM

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

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

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

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

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

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

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

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

カテゴリー: ホームページ制作のヒント — @ 9:49 AM

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

趣味?商売?暇つぶし?

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

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

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

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

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

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

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

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

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

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

大手企業と中小企業

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

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

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

カテゴリー: ホームページ制作のヒント — @ 6:13 AM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ホームページテンプレート(di-B-5)

カテゴリー: diシリーズBタイプ — @ 3:33 AM

ホームページテンプレート/di-b-5-1明るいピンクを基調としたデザインのテンプレートです。女性向けのサイトの制作に適しています。タイル調のメニューボタンはマウスオーバーで色が変わるようになっています。

デザインはすべてCSS(スタイルシート)で行いHTMLは可能な限りシンプルにしました。W3C勧告に準拠したWeb標準HTMLテンプレートです。

上の画像、下のスクリーンショットも画像をクリックすると拡大してご覧になることが出来ます。

このテンプレートの特徴

アクセスアップ・売り上げアップにつながるテンプレート
upW3C勧告に準拠したWeb標準ホームページテンプレートです。適切で正しいHTMLであることはウェブサイト構築には不可欠の要素です。アクセシビリティの向上、サーチエンジン対策、サイトのメンテナンス性の向上等、サイトのアクセスアップ、顧客獲得が期待できます。
SEOの効果のある適切なHTML記述
htmlhタグをはじめとするHTMLの効果的な記述によりSEOに効果を期待できます。ホームページ運営の成功の秘訣はなんといっても検索エンジン上位表示です。そしてその基本は適切なHTMLの記述にあるといえます。
フルCSSデザインのシンプルなHTML
cssデザインはすべてスタイルシートに記述しました。これによりHTMLはとてもシンプルでホームページ作成初心者でも取り組めるテンプレートです。また、スタイルシートを書き換えることでサイト全体のデザインをカスタマイズでき、メンテナンス性が大幅に向上しました。
サイト構造を3階層まで考慮した設計
サイトの構成を3階層まで考慮しています。ショッピングサイトやカタログサイトなどで活用しやすいテンプレートです。アフィリエイトサイトにも使いやすいテンプレートになっています。
明るいピンクを基調としたデザイン
清潔でやさしい企業イメージを表すのにはぴったりの色調。女性向けのサイトにマッチしたテンプレートです。サイトを訪れてくれた人に好印象を与えるのはとても大切なことです。
サイト規模20ページから500ページ程度のサイト向け
3階層の構造ですのである程度規模の大きなサイトにも対応できるテンプレートです。
マウスオーバーでボタンの色が変わる
マウスオーバーでボタンの色が変わる

テンプレートのスクリーンショット

ホームページテンプレート/di-b-5-2 ホームページテンプレート/di-b-5-3 ホームページテンプレート/di-b-5-4
ホームページテンプレート/di-b-5-5 ホームページテンプレート/di-b-5-6 ホームページテンプレート/di-b-5-7
ホームページテンプレート/di-b-5-8 ホームページテンプレート/di-b-5-9 ホームページテンプレート/di-b-5-10

テンプレートセットには以下のものが含まれています。

ホームページ制作マニュアル
こちらのテンプレートを利用してホームページを作成する場合の作業の流れと注意点などをまとめました。はじめにこちらをお読みください。
HTML記述マニュアル
上のスクリーンショットのようなページでHTMLの記述方法を解説しています。実際のテンプレートを利用してマニュアルページを作成していますのでホームページ作成の参考になること間違いありません。
基本テンプレート
基本構造のみのテンプレートです。ここから作業を始めるとよいでしょう。

ホームページ作成に不安のある方は

mailホームページを自分で作成することに不安のある方は1ヶ月のメールサポートつきパックをお申し込みください。ホームページを作成する上での疑問質問にメールでお答えいたします。
kouhin

クレジットカードでのお支払いはこちらから

「今すぐ購入」ボタンをクリックするとPayPalの決済画面にジャンプします。PayPal アカウントをお持ちでない方もクレジットカードでのお支払いが可能です。
card

ホームページテンプレート(di-B-5)
販売価格 : 11,800円

ホームページテンプレート(di-B-5)1ヵ月メールサポート付
販売価格 : 24,600円

ご注文のテンプレートは概ね24時間(土、日祝日を除く)以内にあなたのメールアドレスにお届けします。

銀行振り込みでのご購入は以下のフォームから

会社名

お名前 (必須)

メールアドレス (必須)

ご住所 (必須)

ご購入する商品、いずれか選択してください。
 HTMLテンプレート(di-B-5):11,800円 HTMLテンプレート(di-B-5)1ヵ月メールサポート付:24,600円

ご注文フォームを送信後あなたのメールアドレスにお支払いについてのご案内が届きます。お支払い手続き完了後、あなたのメールアドレスにテンプレートのセットをお送りします。

Page 1 of 612345...Last »