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

(ホームページ制作を切り拓くFunaks | SEO対策の入ったホームページ制作)
[RSS]

2009年


画像にマウスを当てるとメッセージが出てワクワク、ドキドキです。

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

アコーデオンメニューを設置しました。

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

2009年5月27日

ネット紙芝居の制作

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

画像切り替えをJavaScriptで上品に!

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

縮小画像から拡大画像を楽しむ手法(ジャバスクリプトとスタイルシート)

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

ジャバスクリプトとスタイルシートで大量画像をスライドで気持ちよく見れる様にしてみました

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


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

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

ジャバスクリプトとCSSを使って拡大写真を貼り付けましょう

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

ジャバスクリプトとスタイルシートでとても印象深いデザインを制作

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

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

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

また、頑張ります。
2009年5月6日

サブページもデザイン更新をしました。

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

当サイトの親サイトも更新しました。

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

遊び心で3次元回転木馬に挑戦!

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

top page上、Java Scrictで編集し直しました。

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

ライニングサービス(株)のサイトを全面更新しました。

4年前にホームページ制作依頼を受けてちょうど4年経ち、業務内容も変わってきたと言う事で更新依頼を受けました。 当初は新規業務のページを新たに構築すれば良いと言う気持ちの様でしたが、この様な時にしか出来ないのが全ページの見直しです。 デザインしかり、更にインターネットの世界も日進月歩でどんどん新しい技術が開発され、4年前の公開方法では物足らない面があります。 そこで今回はメニューバーに新しい方法を導入してみました。 各ページの上段部にプルダウンメニューを貼り付けました。以前のプルダウンメニューと言えば窓があり、その右側に三角マークがあってそこをマウスでプシュッと押すとメニュー内容が下に五月雨方式で垂れ下がってきた物でした。 それ故、メニューバーへの認識が薄くアクセスに繋がらない事が多く敬遠され来ていました。 しかし、今回導入したのは最新式でいわゆるフラッシュタイプのプルダウンメニューでマウスをその上に置くだけでプルダウンメニューがだらだらと自然にアコーデオンの様に下がってきます。 これは結構おもしろくて何となくマウスをクリックしたくなる物です。 更に標準タイプのパソコンの画面のサイズで見える範囲に表示したい業務内容をバナーとテキストファイルで埋め尽くしました。 これによりアクセス者が望んでいる情報を入手する為にどこへ進めば良いのかが一目瞭然となっています。 この方式により更に受注が増えると確信しています。
制作日:H21年4月
最新制作ホームページ
内容:
更新、新規ページ追加、4年ぶりの更新の為、ページ全体のデザイン一新、上段メニューバーをフラッシュらしくマウスを置くとプルダウンする方式を採用し、アクセス者に新しいページを開く感動を与える事をコンセプトとしました。
特筆すべき点:
トップページは開けた瞬間に標準モニターサイズの15インチ版で上段に会社のロゴ、表現したい業務内容、会社の連絡先、メニューバー(上段、サイド)、更に会社の業務内容をカテゴリごとにバナー化してアクセスをしたくなる様になっています。
全体イメージ:
全てのページで表示したい内容に付随する様に設備、施工フロー、画像、写真を貼り付け、更にそれらに対する説明を簡略に添付する事で一目で理解出来るサイトに仕上げています。
2009年4月13日

全ページをW3C、CSSに準拠したページに編集しました。

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

トップページのデザインを全面的に変更

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

2008年


W3C XHTML W3C CSSに準拠したサイトにしました。

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

製造業向けホームページの更新を完了しました。

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

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

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

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

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

2008年7月29日

RSS配信情報の設置をしました。

更新内容をはっきりと分かる様にrss配信をする様にしました。
2008年5月14日

トップページ上のフラッシュによるホームページ制作の特徴を更新

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

基本メニュー 当社の特徴 無料ホームページ制作ガイド 制作基準 マイブログ
トップページ SEO対策万全 ホームページ製作の工程 制作までの流れ VA、VEブログ
業務案内 XHTML,HTML,CSS 【検索エンジンへの登録】 他社との違い IT情報ブログ
事例集 全ブログ対応 【タイトル】の意味 制作料金 マラソンブログ
制作概念 ドメイン取得代行 【相互リンク】の重要性 QA 元気印ブログ
会社案内 モバイル対応 【会社説明の重要性】 介護を楽しむブログ
個人情報の取り扱い キャッチコピーとHP 【keyword】,【description】
HP制作の問い合わせ メンテナンス対応 WEB管理者と閲覧者の温度差
相互リンク BtoB,BtoC対応
HPとブログの合体化
講演実績
[TOP]