2011年 5月 の投稿一覧

苦労して実現していたものがCSS3で簡単に

Internet Explorer 9の登場

今年の4月にInternet Explorer 9が公開されたことで、WEB制作現場において本格的にHTML5+CSS3の使用が浸透してきたことと思う。
HTML5やCSS3を実装することでよりダイナミックなWEBデザインが可能となり、HTMLはこれまではプログラム言語として認識されていたものが、WEBアプリ開発言語として様相を変えつつある。

レンダリングエンジンを有効活用

さて「2」から「3」へと進化したCSSだが、私はIE9デビュー以前から意欲的に導入していた。
と、言ってももちろんそれによってマークアップを激変させなければいけないような手法や、それひとつでブラウザによって著しく表示に差異が生じるもの、また本来デザインによって伝えなけれえばならないことがぶれてしまうような使い方はもちろんせず、あくまで「許せる程度」で、である。実験的にという意味合いもあり、いろいろ試してはきたが、今回紹介するのは「border-radius」だ。

既にCSSにおいてお馴染みとなっている「border-radius」だが、多くのモダンブラウザでは早くからHTMLレンダリングエンジンでサポートされていることもあり、あまり躊躇なく導入することができていた。角丸をフレキシブルなボックス等に容易に実装でき、ドロップシャドウなどと併用することで簡単におしゃれなボックスが出来てしまう。

-moz-border-radius: 5px; ←Mozilla
-khtml-border-radius: 5px; ←Safari
-webkit-border-radius: 5px; ←Chrome等
border-radius: 5px;

その昔は、上辺と底辺の角丸画像を入れたdivを2枚重ねにしたり、
角丸
こんな角丸画像を四方に置いたり、角丸にしたいがばかりに四苦八苦したものだった。

今後CSS3ではモジュール化が進みこれまでよりも、より自由度の高いユーザエージェントとの関わりを持たすことができる。
今までは「このくらいは…」という気持ちで使っていたものが、大胆に導入していくことができると思うとわくわくしてたまらない。

医療関係のホームページの制作について

医療関係、特に病院のホームページの制作についての考えてみよう。
まず、一番大切なのが医療関係だからと例外ではない制作の目的設定である。まず、「どんなベネフィットを求めるために制作をするのか?」を明確にしておきたい。そして、その目的をどう形にするのかを解説してみよう!

医療関係のサイト構築で最初に学んでおくこと

どんな環境下でもサイトが思惑通り表示されなければならない。また、サイトの訪問者の年齢や身体状況も考慮したい。入院施設の紹介なら患者の家族がサイトを利用する場合もある。

  • すべてのブラウザ環境で正しく表示させるためのソース。
  • モニターサイズの確認
  • アクシビリティの確認
  • テキストの縮小拡大機能

上記のように一般の死あとでは必要のないて知識や技術が必要になる。医療関係専門のホームページ制作会社もある。しかし、個性のないサイトを構築する結果になってしまう可能性もある。ただ、医療関係の経験のあるホームページ制作会社に依頼することをお勧めする。

病院サイトの制作目的とは?

医療施設にも規模や社会的役割は様々です。まず、以下の厚生労働省や医師会のガイドラインを確認しておくことが必要だ。
厚生労働省:医療法における病院等の広告規制について
厚生労働省:厚生労働省:医療広告ガイドラインに関するQ&A(事例集)
医療施設ホームページのあり方

病院サイトの制作目的とは?

医療スタッフを募集するために作るホームページ
現在、医療施設の抱えている問題は、医療スタッフや医師不足につてが、とても多いいようだ。一般のリクルートと異なり、その目的を全面に出すことが出来ない。そこを表現するのがWEBクリエータの力となる。まず、基本的に考えたい項目を記載してみよう。

  • 色使いで明るい食ベであることを表現する。
  • コピーライトで表現する。
  • 現場で明るく働く画像を利用する。
  • サイトにスタッフを参加させる。

歯科医や医療器具、薬品などの販売や患者の獲得ためのホームページ制作
これらの目的で制作する場合、特に注意しなければいけないのが制作ガイドラインになる。基本的にSEO対策も考慮してサイトMAPやワイヤーフレームデザインを構築しなければならない。ここで効果がある基本的な制作のポイントを上げたい。

  • 色使い。ライトブルーやライトグリーやグレー系の配色を避ける。
  • ユーザビリティの必要なページとテキストによるコンテンツページを区別する。
  • 笑顔の医師などのスタッフの画像を前面に使用する。
  • 地域に関するコンテツを使用する。
  • 地図はグーグルマップを使用する。
  • グーグルプレイスを活用する。

病院や薬局はエリアマーケティングを活用するためにグーグルのサービスや位置情報を提供することは大切だ。

http://www.omachi-hospital.jp/ http://www.momose-dc.com/

市立大町総合病院WEBサイト
ももせ歯科医院

webサイトでの画像ファイルをあらためて考える

現在の企業のWEBサイトはクライアント側でWEBサイトを更新することが必要とされている。中小企業にもWEB担当などがいることも長野県でもめずらしくはない。
WEBサイトを更新するには欠かせない画像ファイルの形式についてのまとめです。
webサイトを制作する上で現在では一般的に「JPEG」「GIF」「PNG」という形式の画像ファイルが支流である。

適した画像ファイル形式について

png.jpg.gifのまとめ
PNG
写真・イラストに適している。
JPEG
写真など色素の多い画像に適している。
GIF
色数の少ないイラストに適している。

PNG画像の注意点…。

IE-destroy写真にもイラストにも適し、背景に透過させる半透明グラフィックなどの表現もできる「PNG」画像だが、大きなデメリットもある。IE6では透過せず背景がグレーになってしまうことだ。しかし透過PNGをIE6に対応させる方法はたくさんある。そのひとつがGoogle Codeにあるie7.jsというJavaScript、IEの7以下に読み込ませるスクリプトで、IE7以下でもPNGを透過させることができる。
またwordpressプラグインHITS-IE6 PNG FixなどでIE6でも透過を可能にするものもある。ブラウザの表示に注意しながら使い分ける必要がある。
現在ではIE6の需要もだいぶ減ってはいるが、まだまだ油断ができないのもWEBデザイナー泣かせなIEである。

PNGはIEでキレイに見えない?

Photoshopで作成されたPNG形式のファイルにはガンマの値が異常な値に設定されている。一部ブラウザ(IE7、IE8)では色が変わってしまうといった現象が起こる。
そこで、PNG形式で保存された画像からガンマの設定(ガンマチャンク)を削除し、色温とICCプロファイルのチャンクも削除する必要がある。
※PhotoshopCS2以降はチャンクが含まず書きだしてくれるので気にしなくてOK!
作成したPNGファイルのチャンクを簡単に削除してくれるツールをご紹介。
WINでPNG形式の画像の補助チャンクを削除するソフト»
MACでPNG形式の画像の補助チャンクを削除するソフト»

PNGファイルの今後

PNGはW3C(World Wide Web Consortium)が推奨する画像フォーマットで、最近ではブラウザやグラフィックソフトのサポートも進み、標準的な画像形式になっている。 以前には、古いブラウザ(IE6等…)を使用しているユーザーへの配慮からPNGの使用を控えることもあったが、 PNGを表示できないブラウザのシェアはかなり低くなっている。そして最近急激にシェアが増えているiphoneやAndroid等のスマートフォン向けのサイトの場合はPNG形式が支流である。今後WEBサイトを構築する際にPNG画像を用いることが増えていくことは間違いないであろう。

WEBサイト構築フロー

WEBサイト構築のフローを作ってみた。システムからワイヤーフレーム、サイトの構築までを簡単に図にしてみた。ツールは、WEBクリエーターもビジネスマンも使えるツールで紹介されているgliffを使ってみた。クライアントへのプレゼン用のワイヤーフレームもこれのツールで作る。しかし、基本は手書きだ。その方が発想を絵にしやすい。その後の作業としてツールを使う。

この図に抜けているのは、サイト構築で一番大切な目的設定である。ホームページで何をしたいのか?どんな目的があるのか?その辺を明確化する必要がある。この作業が明確化されないとビジュアルコンセプトまで設定できない。結果的にクライントやデザイナーの色やデザインの好みでサイトが制作されてします。

webサイト構築

Facebookページの制作とブランディングのページ考え方!

Web Atfではウェブサイト・ホームページ制作したクライアント向けにFacebookページ作成を行っています。iframeで作成したページ提供は、現在のFaxcebookの人気からしても必要なWEBマーケティングの一部となります。そして更にはFacebookページがビジネスサイトのプラットフォームの主流になる考えております。もちろん、WorldPressとの併用にはなりますがショッピングサイトへの連動などを図っています。ソーシャルメディアでの顧客獲得は、最もクチコミを誘発する現在の重要なコミニケーションツールとなったいます。その上、SEO的に効果のあるFacebookページにフォーカスしてまいります。

ブランディングページの考え方をしっかりと持つ!

Facebookの特性を理解することから始める。どうFacebookのファンを構築するかということがビジネスファンを構築し、顧客拡大に繋がる。ブランディングページとは、ある意味で企業の顧客に対する考え方を反映させる。また、顧客満足度を高めるための手法として用いることが新しいクチコミを誘発させる。キレーションの効果を高めることをおススメする。

Facebook Page ビジネス効果を得るための5つの方法。
ブランド力を高めるFacebook Pageの7つのApps
フジQのFacebook利用に学ぶ!
Facebook Pageは共有SSLでも独自SSLでも使えるレンタルサーバーを使えれば、簡単に設置出来る。
Facebook Pageのiframeで、こんなビジネスページを作らなければ!

Déjà vu - 11-365

Web Atfが作ったFacebookページ

クライントのFacebookページを作成しております。現在、Welcomeページを制作しております。

Facebookページ 松本ローカルから全国へ!

アーティストもMySpaceからFacebookへ移行しネット上の活動を行っています。そこで、二胡奏者のデュオ華韻のFacebookページを制作しました。そして、松本市ローカルからおやきの全国販売の旬菜花のFacebookページも合わせて紹介いたします。

二胡Duo華韻Facebookページ

旬菜花 facebook page

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

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

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