顧客開拓型ホームページ制作

世の中には色々なアイデアを使って表現できるようにしてくれる人がたくさんいる事を感じています。 以前はアナログ社会で人と人とは「face to face ] 、顔と顔を合わせて話をするのが当たり前でしたが、現代はネット社会で「自分の気持ちをネット上で表現できるようにもしましょうと言う事ですね。 最近Java Scriptで編集する方法にはまって結構おもしろい物を制作していますが、今回のはまたおもしろいです。 写真にマウスを当てると吹き出しが出てメッセージを表示させる事が出来ます。 この様な物もネットショッピングサイトにはぴったりですね。 見る人の気持ちを掴んで離さないと言う感じがしました。 参考サイト： http://exyz.cocolog-nifty.com/good_sleep/2009/05/jquery-d304.html

スタイルシートとJavaScriptライブラリのjQueryのプラグインを利用してアコーデオン型メニューを制作してみました。 ネット上に公開してあるのは写真が多いのですが、これを通常のメニューバーの中でカテゴリ別のページにリンクする様にして見ました。 ホームページ上で閲覧者に感動して貰える様なデザインを構築する事が受注に繋がる一つの大きな要素と思っていますので効果ありでしょう 。

スタイルシートとJavaScriptを合わせて画像を切り替える方法でおもしろいのがありました。 その名も紙芝居風となっていました。 通常は画像の切り替えは左右が多いと思いますが、こちらでは上下での切り替えとなっています。 先に進む時は上に、前に戻る時は下へとその意味が何となく分かる気の使いようになっていました。
画像にコメントを付けると更に生き生きとした内容になりますね。

縮小画像から拡大画像へ、標準色からオプションで色違いの画像へ切り替えるのには通常内部リンクで画像を切り替えるのが普通だと思います。 ところがこれですと【パシャ！パシャ！】と無味乾燥に画像が切り替えられるだけの機能重視という事になります。 高価な商品、品質を訴えたい部品、商品を掲載する時には画像の切り替えにも心がけたい物ですね。 そうする事により商品一つずつの価値が非常にあがり、閲覧者（特に購入希望者）の心を捕らえる事間違い無しです。 http://www.hp-funaks.net/imageswitch_No.2/index.html

最近のネットショッピングサイトは競争が激しくなってきましたが、その中で勝ち名乗りを上げる為に色々な手法を用いて販売商品を前面に出せる様にしているのを見かけますね。 その中でもっとも顕著なのがフラッシュを使っての誘導画像だと思います。 フラッシュも単に画像が流れていても説得力がないのでその点を克服するのはセンスでしょうか？ 今回挑戦したのはサムネイル化した縮小画像からクリックして拡大画像を見せる事でお客様の求める品質、デザインをわかりやすくする方法を更にエスカレートさせる事の出来る物です。 下記写真の中にマウスを入れると右側に拡大画像が浮かび上がります。 その拡大画像は概ね１０倍に設定すると効果があると思います。 購入希望者に縮小写真の中で気になるところにマウスを持っていて貰う事で右側に拡大化された写真が出る事で購入希望者はどんどん気持ちが入り込んでいき、買い物かごに入れてくれる可能性が高まるという物ですね。 インターネットショッピングも買い物の一つで楽しんで貰いたい物。 この様な画像を貼り付けてどんどん楽しんで買い物をたくさんしてくれると良いですね。
http://www.hp-funaks.net/java_sample/jqzoom/demo/

ジャバスクリプトとスタイルシートを使った例は今たくさん世に出てきていて旨く活用するとフラッシュと同じような事が出来る事がわかりました。 ネット上でも色々な方が制作方法を公開してくれているのでとても心強いところです。 今回は１１枚の画像をスライドで自動的に次の画像へと移してくれる方法です。

最近はこの様な手法が多く見られるようになり、一瞬にして内容を把握出来る事が重要になってきていますね。 一つの手法でした。

下記サイトに掲載してあります。
http://www.funaks.co.jp/kaigo_blog/

最近のネットショップはどんどんフラッシュ化されてきていますが、綺麗な事と受注に結びつく商品情報をどのように閲覧者に対してアピールするかは違うと思うのですが・・・・・。
今まではテンプレート型のネットショップサイトを購入してそれに画像を貼り付けていく簡単なサイトが流行っていたと思います。 最近はオープンソースと言う事で「ECCUBE」などが無料で公開してくれているので努力次第では究極のカスタマイズ化されたネットショップが出来る可能性もあります。 今回紹介するのは「Phatfusion」というサイトで情報公開をしてくれている中の「MultiBox」です。 画像にマウスを置き、クリックすると複数の画像でもどんどん進行して画像を拡大してくれます。 これも最近結構あちこちのサイトで見かけますが、この方法だと見る人にとって気持ちが良く購入したくなるのではないかと思います。 アコーデオンタイプでもそうですが、閲覧者がほしい情報、画像を旨く展開出来るようにすることも大切ではないかと思います。 これで上、左右、斜めからの画像を掲載しておくとそれでもう実際に手に持っている気持ちになりそうですね。 一つの新しいタイプの方法ですね。

最近、ジャバスクリプトとスタイルシートを編集してフラッシュっぽく動く画像を制作する方式にはまってしまいましたが、今回のもとても印象深く見る事が出来るすばらしい物です。

画像の上にマウスを置くと５枚ある画像の中でそれぞれ好きな画像がフルに出てちょっとびっくりする事もあるかも？です。

最近よくネットショップで商品の写真を前後左右、上からと方向を変えて見れる様にしているのがありますが、あれもジャバスクリプトですね。しかし、こちらの方がインパクトが大きい様に思います。 印象深いのも大きな要素の一つですからね。

また、頑張ります。

このところ、スタイルシートとジャバスクリクトを使ったフラッシュっぽい画像を掲載する事をやって来ましたがその中で気に入った内容をサブページにも貼り付けようと思い、このたび実行しました。 http://www.hp-funaks.net/jirei1.html 上記ページ内に【3dcarousel（３次元回転木馬）】を貼り付けました。 既に「ITブログ」内に実績がありますが、このページでは単なる紹介ですが、今回貼り付けたのはその応用版とでも言いましょうか、回転しているアイコンをクリックすると新しいページが出てそれとページ内で説明している内容が合致する様になっています。 僕が思うには単に動くと言うだけでなく、動いているアイコン、画像等をクリックする事でアクセス者が期待するページに移動出来るのが期待感をそそられる様に思いました。 まずは見てのお楽しみ！

先月から今月にかけて【NoobSlide】,【TooMools】と言うスタイルシートとジャバスクリプトを合わせてフラッシュの様な動きのある画像と巡り会い、これに夢中になって１ヶ月が経ちました。 最後は当サイトの親サイトである下記サイトにもこれを貼り付けてみました 。http://www.funaks.co.jp/ 今回は上記ページの上段真ん中にある画像をいじってみました。 以前は簡易フラッシュを使っていくつかの画像を回転させていましたが、今回のはメインの画像の両端にサムネイル画像を配置してそのサムネイル上にマウスを置くとその画像がメインの画像に早変わりすると言う結構マウスを動かすのに夢中になりそうなタイプの【NoobSlide】です。 一つの画像の中で８ヶの画像が動くので旨くおこなうと説得力のある画像になります。 また、ここでも画像に「altキー」を使えるのでＳＥＯ対策にも有効？でしょうか。 ただ、一つ問題がわかりました。 今までW3C対応で綺麗に編集していたのですが、ここで使っているジャバスクリプトの中で「Link」があるのですが、これが引っかかってしまい、残念ながらW3Cに準拠しなくなりました。 まあ、一つだけのエラーなのでそれほど目くじら立てる物でもないと勝手に解釈しています。

【MooTools】を使い、スタイルシート、ジャバスクリプトで「3d carousel」と言うのを作ってみました。 「3d carousel」とは直訳すると３次元回転木馬となります。 何はともあれ、見ればわかります。 http://www.funaks.co.jp/it_blog/ 僕は金魚すくいではないかと思いましたが？ その心は？ 掴もうとすると逃げて行く！ 僕の信頼する人にこれを制作した事を報告したらとても良い使い方を伝授してくれました。 http://www.hp-funaks.net/carousel/index1.html これはバナーの代わりに商品である家具を貼り付けて回転木馬の様に動くので見に来た方はその異様さに思わずクリックするのでは？ そうして貰えたら受注に繋がるかな？と思ったりして。 これも遊び心の一つですね。

従来トップページ上段左側にバナーを貼り付けてサイト内容を表現していましたが、【スタイルシート、ジャバスクリプト】の編集でフラッシュらしき動きをするMooToolsを使って見ました。 ホームページビルダーで言えばウェブアニメーターと同等ですが違いはバナー、テキストファイル両方を使え、更にaltキーも使えるのでseo対策には良いのでは？ そして中断に業務内容を表現する為にバナーとテキストファイルで表現していましたが、ここはロールオーバーを使ってバナー上にマウスを持って行ってくれると真ん中のバナーに表現したい内容を浮かび上がらせる様にしました。 これら皆「遊びの気持ち」で制作してみましたが、概ね閲覧者が最初にする事はモニター上をマウスで動かす事と思います。その時に画像が変わったりするのはちょこっと気を引きつける事が出来るのではないかと思っています。 そこから縁が出来るかも？ですね。

４年前にホームページ制作依頼を受けてちょうど４年経ち、業務内容も変わってきたと言う事で更新依頼を受けました。 当初は新規業務のページを新たに構築すれば良いと言う気持ちの様でしたが、この様な時にしか出来ないのが全ページの見直しです。 デザインしかり、更にインターネットの世界も日進月歩でどんどん新しい技術が開発され、４年前の公開方法では物足らない面があります。 そこで今回はメニューバーに新しい方法を導入してみました。 各ページの上段部にプルダウンメニューを貼り付けました。以前のプルダウンメニューと言えば窓があり、その右側に三角マークがあってそこをマウスでプシュッと押すとメニュー内容が下に五月雨方式で垂れ下がってきた物でした。 それ故、メニューバーへの認識が薄くアクセスに繋がらない事が多く敬遠され来ていました。 しかし、今回導入したのは最新式でいわゆるフラッシュタイプのプルダウンメニューでマウスをその上に置くだけでプルダウンメニューがだらだらと自然にアコーデオンの様に下がってきます。 これは結構おもしろくて何となくマウスをクリックしたくなる物です。 更に標準タイプのパソコンの画面のサイズで見える範囲に表示したい業務内容をバナーとテキストファイルで埋め尽くしました。 これによりアクセス者が望んでいる情報を入手する為にどこへ進めば良いのかが一目瞭然となっています。 この方式により更に受注が増えると確信しています。
制作日：Ｈ２１年４月

内容：
更新、新規ページ追加、４年ぶりの更新の為、ページ全体のデザイン一新、上段メニューバーをフラッシュらしくマウスを置くとプルダウンする方式を採用し、アクセス者に新しいページを開く感動を与える事をコンセプトとしました。
特筆すべき点：
トップページは開けた瞬間に標準モニターサイズの１５インチ版で上段に会社のロゴ、表現したい業務内容、会社の連絡先、メニューバー（上段、サイド）、更に会社の業務内容をカテゴリごとにバナー化してアクセスをしたくなる様になっています。
全体イメージ：
全てのページで表示したい内容に付随する様に設備、施工フロー、画像、写真を貼り付け、更にそれらに対する説明を簡略に添付する事で一目で理解出来るサイトに仕上げています。

昨年１１月１８日にトップページをW3C,CSSに準拠したページにした旨ここに報告しましたが、今回全ページに対してW3C、CSSに対して世界標準をクリアした内容に編集し直した事を報告します。 一説によりますと全ページをW3Cの世界標準にクリアしているサイトは全体の６．５％と言われているほど少ないそうです。 W3CによるHTML構文チェック、及び外部スタイルシートによるサイト構成はこれからのホームページ制作に必要不可欠です 。 ホームページが毎日たくさん誕生していますが、このW3C世界標準に準拠している事がホームページの識別に大いに関わってくると思われます。

平成２１年１月１０日、トップページデザインの全面変更 説明文的レイアウトであった今までのトップページから画像を使って一瞬で何を書いてあるページかが分かって貰える内容へと変更しました。 更に上下のスクロールもなるべく少なくて済むようにも配慮をしました。

トップページをW3C XHTML W3C CSSに適合したサイトに出来ました。 今まではホームページビルダーで編集したページを公開していましたがチェックしてみたら１０００カ所ほどが文法エラーでした。スタイルシートも殆ど使っていませんでしたがこの際全てやり治そうと思い１週間ほどで完成しました。 結果として今まで３５ｋｂだったのが２８ｋｂまで減量することが出来ました。

既に２回、ホームページの更新をさせて頂いているお客様より今回新たに更新の注文を頂きました。
私の持っている全知識、技術を駆使して最良のホームページを制作しようと思い、完了しました。

タイトル：５軸制御加工 マシニング加工 NC旋盤加工の複合加工と超精密加工 千葉県
URL：http://www.haranoseiki.co.jp/

ビデオによる工場見学も取り入れ、ネット上で全ての情報を見る事が出来ます。

インターネットでは「相手の顔が見えない、相手の話を聞けない、相手の話に答えられない」と言ったハンデがありますが、このサイトでは反対にこのサイトを見れば全てが分かりますと言うようにすることを大事にして制作をしました。

最近はIE6が60%、IE7が25%、Firefoxが5%程と言う感じですね。
IE7、Firefoxでは今までと違う表示内容になっていますので注意が必要ですね。
双方とも「FAVICON.ico」が有効なのでこれは是非使うべきですね。

更新内容をはっきりと分かる様にrss配信をする様にしました。

ホームページ制作のこだわりと業務内容を詳細にフラッシュで掲載しました。