2011年 7月 の投稿一覧

CSSスプライトの考察する

CSSスプライトとは複数の画像を一つの画像にまとめて、CSSのbackgroundプロパティで画像のポジションを指定することにより任意の画像を表示させる手法。
CSSで呼び出す背景画像を少なくすることでサイトの表示を高速化することができる。サイトの規模や内容にもよるが大手サイトでは積極的に使われている。例えば以下のようなサイトも使われている。

上記サイトのようにいろいろなサービスやツールを備えたサイトには非常に便利な手法だが、一般的な企業サイトや商店サイトではそれほど思い切って使えないような気がする。実際、携わった案件では上記サイトのような数十個以上の画像を一つにまとめて使ったことはない。そしてCSSスプライトにはデメリットもあります。

  1. 背景画像のリピートさせることができない
  2. CSSでサイズを変えると画像も変えなければならない

(1)は、すでに画像がいくつも並んでいるためリピートさせるようなポジショニングが難しくなる。(2)はCSSで対象範囲のサイズを変える場合は画像も変えなければならなくなる。逆の場合も同様に画像を変える場合はCSSも書き直さなければならない。すなわち改修する時に手間がかかってしまう。

導入できる箇所はある

大手サイトのような使い方は出来なくとも、グローバルメニューの背景やボタンなどCSSでマウスオーバー画像を変化させたい時にはCSSスプライトは有効だ。それほど一つのファイルに画像を集約する必要もないので(ボタンなら大体2種類くらいで済むだろう)画像をリピートさせることも出来る。
私はWordPressでサイトを作る際、グローバルメニューとなる部分は絶対にカスタムメニューを使いたいひとなのでCSSスプライトは多用する。

是非、お試しあれ。

松本市:ホームページ制作を知っておきたいこと!

松本市周辺の多くのクライアントに接して、感じたことが、自分のビジネスに対してのメモリーが整理されていないということだ。まず、建設会社であれば施工例となる。店舗であれば、顧客の喜んだ顔写真やサイトを構築する時のためやリニューアルするときのために準備しておいて欲しい。そして、成功するホームペジの作成方法についても同様だ。

行列の出来るホームページとは?

まず、顧客の満足度を高める為のサイトであり、その顧客サービスを見て、ユーザーはそのサイトの企業や店舗を利用する。つまり、ホームページでアピールするものは、商品やサービスではなく、顧客を満足させるためのシステムを良し悪しがキーポイントとなる。簡単にいえば、どれだけ顧客が喜んでいる様子や情熱をもってビジネスを行っているかをアピールすることだ。「この商品いいですよ!」アピールするより「このお店いいよ!」とユーザーが伝えるほうがアピール度は高い。

ホームページの周辺はどうするの?

ホームページをリニューアルする時に過去の失敗例を見つけてみよう。SEO対策も専門の知識のある業者に依頼してサイトのマスタープランを作る必要がある。以下は、グーグルの検索エンジン最適化(SEO対策)の一文です。

SEO 業者に確認すべき質問には次が挙げられます

  • 過去の事例のサンプルを見せてもらい、成功事例を紹介してもらう。
  • Google のウェブマスター向けガイドラインに従っているか。
  • 通常の検索を補完するオンライン マーケティング サービスやアドバイスを提供しているか。
  • 期待される結果とその日程、成果を測定する方法。
  • 同業種での実績。
  • 国内/地域での実績。
  • 外国語サイトの開発経験。
  • 最も重視している SEO 技術。
  • 創業年数。
  • 連絡方法。サイトに加えたすべての変更に関する情報、およびアドバイスの内容に関する詳しい情報とその理由を伝えてくれるかどうか。

下記のようにホームページを取り巻く様々な要素まで、考慮してホームページ作りを行わなければならない。また、WEBマーケティングに十分な知識がある業者に尋ねる必要もある。WEBデザインができるからと言って、WEBマーケティングが理解出来るとは限らない。いや、ほとんどWEBデザイナーは理解していない。つまり、あなたのビジネスに適合したソーシャルメディアや広告などの利用やそのオペーレーションも必要になるということだ。

サイトをリニューアルする前に!

業者に確認しておくべきことがる。既存のサイトの欠点とその対策はもちろんであるが、クライアント(発注)側でも多少の勉強をしておきたい。そして、最低、以下の部分だけは尋ねるようにしてください。

システムの拡張性・・・現在は、CMSが主流で、そのシステムの拡張性を訪ねておこう!例えば、WordPressなどを利用するのでは拡張性の心配はない。
公開後の修正と変更・・・WEBサイトは公開してから変更が生じる場合は少なくない。その辺の対応と料金について
サーバーとドメインについて・・・サーバーの管理は、WEBデザイン会社で管理してもらっても契約は直接レンタルサーバ会社としておこう!ドメインは、WHOSの登録をしっかりしてもらう。この辺は、よく問題になる。ホームページ制作者と連絡が取れなくなり困っているクライアントを多く知っている。
SEO対策について・・・実績を示してもらうこをオススメする。
モバイルの対応・・・スマートフォンや携帯の対応を事前に決めておく
ショップサイトの構築・・・サイトの拡張によりショップサイト・ECサイトの構築が以後可能なのか?サイトの将来性についても訪ねておこう!

floatさせたボックスをキレイに並ばせる方法

WEB制作をする上で画像やテキストを含ませたボックスを並ばせるレイアウトを作ることが多くある思う。
例えば下のようなデザイン。よく見かけるおなじみのレイアウトだ。

sample

大抵は複数のボックス共通のCSSを定義し横に並べて、幅いっぱいに到達したらカラム落ちしてキレイに並ぶといった仕組みだろう。
当然ボックスとボックスの間にはマージンを付けたいのだが、一番端にくるボックスが上手く並ばないことがよくあると思う。

sample2

そうした時に、従来ならJavascriptでキレイに並べられるライブラリを使う方法などがあったが、WEB制作者ならそんなところにJavascriptの手を借りたくないというのが本音だろう。
現在ではCSS3のnth-child()という、要素が何番目の子要素かによって該当するものにだけCSSをかけることができる疑似クラスがあるようだが、今のところまだレイアウトに関わる部分はCSS3を使うことは気が進まない。今日も同僚のデザイナーとそんな話をした(IEユーザがまだまだ多いため)。

そんなときに使えるのが親ボックス(親要素)にネガティブマージンを付けてあげる方法。横並びするボックス(子要素)に右マージンを付けているのなら、その親ボックスにマイナスの右マージンを付けてあげればいい。この方法ならIE6にも対応させることができるはずだ。

昔から多用してきたにも関わらずネガティブマージンという名前は知らなかったが、是非ためしていただきたい。サンプルコードは書きませんので。悪しからず。

どう作る!これからの中小企業のホームページ

これからのホームページと制作にはCI的な様相が多く含まれる。つまり、まず何かを得る前にどんな体質をした企業であるかをアピールしなければならない。つまりブランディングするということになる。いきなりソーシャルメディアの参入とは行かないまでも当然、キュレーションしてもらえるコンテンツも作成しなければならない。つまりプラットフォーム化したホームページを作れなければいけない。

Webサイトのガイドラインはなぜ重要なのか?

何かを売るのではなく!まず企業姿勢を知ってもらう!

まず、何かを売るのではなく、企業の姿勢を知ってもらえるサイトを作る。「だれが、どんな思い出この事業をやっているか?」とても重要なことでこれはひつのコンテンツとなりうる。そして、同カスタマーズサービスをするのか?言い換えれば、顧客満足度を挙げるためのサービスを潜在顧客に見てもらことが大切なのです。

WEBディレクターのするべきこと

松本市の住宅会社のホームページ制作

企業の大小にこだわらず住宅会社のホームページ制作は、どれだけコンバージョン率(資料請求)とアクセス数にフォーカスされる、それ自体が目的とされる。今回約1年をかけて創り上げたサイトがやっと更新されることになった。弊社では住宅会社のホームーページ制作のかなり多いい。そして、マーケティングのノウハウ、データには、自信があります。つまり、ユーザーが新築を考えた時に参考にする項目までを考慮してサイトを構築している点にあります。
ホームページ経由で年間何棟かの発注がよめるサイト構築をしています。その為には、送付資料からステップメールの構築まで成果を挙げるためのツールを駆使します。

株式会社住まい工房 ホームページ

WordPressでループ表示を思いのままに

WordPressで企業サイトやポータルサイトを構築していると、トップページの新着表示やカテゴリーページのループをカスタマイズしたいという局面にぶつかることが多々あると思う。プラグインを探せば求めているものが見つかるかもしれないが、実はプラグインではなく「query_posts」が便利だ。
今日はその「query_posts」の使い方を紹介する。

ループの直前に記述をするだけ

ループの直前に記述し、カテゴリの絞り込みや投稿者別、記事の表示順、表示件数などを指定すると、それに沿った条件で取得される。

記述コード

query_posts($query_string . “&order=○○&cat=○○&showposts=○○”)

whileの前に記述し、上記コードの赤字部分の引数を指定してあげる。

<?php while (have_posts()) : the_post(); ?>

<?php endwhile; ?>

例えばループ内もカテゴリごとにデザインを変えてあげると、ただのブログからダイナミックなWEBサイトへとガラッと変わる。
カスタムフィールドを併用して商品ページがあるサイトなどには非常に重宝する手法である。

単に固定ページを一生懸命作り込むだけでなく、CMSの一番の特徴となる部分にさらに作り込むことで厚みのあるサイトを作ることができる。
是非、お試しを。

まずは、お電話・メールで
ご相談ください。

「ホームページ制作成功の秘密」の
DVDと資料をお届けします。

Web制作に関する相談専用ダイヤル
メールアドレスだけでお問い合わせ
小さな会社のマーケティングとは