徳島・香川・愛媛・高知および大阪・京都のホームページ制作(WEBサイト制作)・PHPシステム開発は shape DESIGN(シェイプデザイン)

こんばんは。
最近、また生活リズムが昼夜でややこしくなりつつある掛尾です。

ここ数日、PCサイトを前提に HTML5 と CSS3 をいろいろ調べて『お仕事で使い物になるのか？』を考えていました。
書籍・Webなどを参考にしながら実際にマークアップして試してたのですが、いかんせん新旧の情報が特にWebの場合散在しすぎていて、現時点でどれがどこまで使えるのか確認するだけでも一苦労します（汗）

そして、その情報のどれもが『HTML5 と CSS3 を使えばこんなことやあんなことが、こんなに簡単にできるようになるんですっ！』的に書いてるわけです。
それはそれでとてもいいことなんですが、実際『じゃあお仕事としてどうなの？』っていう視点から見ると、はっきりいいます・・・

さらに複雑かつ難解になり、ものすごく手間が増えます（笑）

ついでに、いろいろ試してみた感想としては、IE8 以下に対応させようと頑張ると・・・

Java Script のライブラリだらけになる可能性があります（笑）

※ちなみに、IE9 は Windows XP にはインストール出来ないみたいです。（そんな記事に何度も会いました）

新しい技術はやはり皆さん注目するものだと思いますし（特にWebデザイナーと呼ばれる方々は、今までも様々なブラウザに対応させるべく精進されてるはずだと思いますし）、生産性が上がるのであれば尚更と思います。

だけど、前述したような複雑なことやJava Scriptを読み込みまくるのって、本来の HTML5 や CSS3 を使うことの意義というか主旨というか、なんかそういうのがすり替わってしまってるように感じるんですよね…本末転倒って感じでしょうか。
もしかすると、僕の調べ方が悪いのかも知れないし、やり方がまずいのかもしれないです。本当はいろいろ使ってもっと手軽にできるのかも知れません。

趣味でするとか、スマートフォンのサイトなら問題ないと思うのですが、いざ『仕事で』となるともうエゴでしかなくなると思うので、結論として『現時点で HTML5 + CSS3（特にCSS3）は仕事では使えない』という結論に至りました（苦笑）

現時点ではサンプルサイトやスマートフォンサイトなどを作ってしっかり使えるようにしておき、来る時期に備えるというスタンスがいいのかなと思いました。
ただ、HTML5 に関してはそれ程ややこしいことをしなくても（若干JSライブラリーが必要ですが）それなりにマークアップできると思うので、少しずつ使うようにしていってもいいかなと思っています。
※スタイルあてるだけに意味不明な id や class を付ける頻度は大幅に減りそうな感じなのでお仕事でも使っていく価値はあると思います。

HTML5 と （特に）CSS3。
魅力的な（Webデザイナーにとっては特に）ものがたくさん盛り込まれているので、早く一般的な使い方が出来るようになるといいですね！

こんばんは。
随分前にヒザを痛めて、未だに痛みが解消しなくて動く度にストレスを感じている掛尾です。

先日、弊社でホームページの制作および管理を任せていただいてる音楽アーティスト様のステージを拝見させていただきに東京まで行っておりました。
経費を抑えようと往復夜行バスにしたのですが、さすがに9時間近く車内に缶詰になるのはきついですね（汗
帰りは疲れていたので結構眠れたのですが、行きが全然眠れなくて（＝暇）とっても困りました（苦笑

ステージはとても迫力がありとても楽しい時間となりました。
また、存在感や人を引き込む力・・・気づきをいただけたところもありました。

さらに、その日同じステージをされていた方は、僕が音楽と現在の仕事をしようと思うきっかけになったアーティス様で、若かりし頃のことを思い出したりして感激でしたね！

ステージの後、招いていただいたアーティスト様には挨拶だけでもできればと思っていて、ひとまず短時間ですがお話しすることができました。
そして・・・まさかとは思っていたのですが、同じステージをされていたアーティスト様に紹介していただけるという機会を設けていただき、これも短時間でしたがご挨拶＆握手までさせていただき、さらに僕自身がその方の活動を通して現在に至っていることも伝えられ、頭の中がまっしろになるほど感無量でした。
わかりにくい表現かも知れませんが、一生会えないかも知れないあこがれの人物に自分の存在と自分がその人の活動によって現在に至っているということを伝えられるって、凄いことだと思いませんか？

確かに、その方の僕の印象はとっても薄いものだと思いますけど、それでも僕自身の存在をその場だけでも知っていただけたというだけで、奇跡のような気がしてしましますね！（おおげさでしょうか？笑）

ヒザを痛めていて、歩くのも結構ままならない状態だったので、行くのも一瞬躊躇したりもしましたが、そういうのも忘れてしまうぐらい印象深い1日となりました。
あまりに感激過ぎて、その後別口で飲みに行ったのにほとんどお酒飲めませんでした（笑

スタッフや関係者の方々には「何者！？」と思われたかも知れませんが、忙しい折に貴重なお時間をいただいたこと皆々様に感謝いたします。ありがとうございました。

こんな感じで、また一段とどんな形でも再び音楽したいな〜と思ってしまって、気持ちを抑えつつお仕事を頑張っているところです（苦笑
僕自身も、他の人の行動を突き動かすような存在になれるよう精進していきたいと改めて思いました。

こんにちは。
少しお仕事が落ち着いた上にゴールデンウィークへ突入したもので、なんだかまったり気味な掛尾です。

最近、単色の広告チラシをいくつか作らせていただく機会がありました。
いつもは、当然フルカラー全開のホームページ等のWebのデザインをすることがほとんどです。

この度のお仕事をさせていただいて思ったのは、情報を整理する大切さ、ジャンプ率やフォント、またそのサイズをしっかりと把握した色に頼らない表現、アイキャッチやキャッチコピー、見る人の目の誘導方法などなど、勉強になることがたくさんありました。

また、稚拙ではありますがイラストなども描かせていただいたりして、本当に自分自身の身になるお仕事をさせていただいたと感謝している次第です。

昨今のホームページでは、Java Script や Flash 等を使って相当凝ったことが比較的簡単にできるようになってきました。
しかし、“情報を整理し、見る人が欲しいと思う情報が無意識的にスムーズに手に入る”という当たり前のことが、本当に大切なことなのだなと改めて気付かされた感じがします。
そして、Simple is best はそういう部分をしっかりと考えて創りあげられた場合に限って当てはまるんだろうな…と、そんな気がします。

また、ミクロの視点や技術だけでなく、マクロの視点や多種多様な知識や技術が相まることで、融合され影響し合いよりよいモノができあがってくるんじゃないかと思えます。

とてもよい経験をさせていただけたので、今後は前述のような事柄を意識的に持って、お客様に喜んでいただけるようにしていければと思います。

こんばんは。
最近、ウォーキングやらバンドやらを始めて、珍しくアクティブな掛尾です。

いやぁ…ようやく自社サイトのリニューアルが終わりました。
実はもう随分前にモノはできあがっていたのですが、一緒にサーバーを移転しようと考えていて、しかし旧サーバーではお客様の確認用のモノも置いてあったりして、お仕事が一段落するまで・・・って言ってる間にものすごい時間が経ってしまってたいう感じなんです（汗

そしてそして、リニューアルもさることながら、月額定額の新サービスを開始させていただきました！

このサービスの主旨としては、まだまだよく解らないとおっしゃられる方や、興味や知識はお持ちでもなかなか時間を作ることができない方をしっかりサポートさせていただけたらというものです。

また、作っておしまい！ではなく、お客様と末永くおつきあいさせていただき、微力ながらも運用のアドバイスやサポートもさせていただけたらというものでもあります。

ひとことで表すとすれば・・・ “あなたのお店（会社）のWeb担当者！” ・・・という感じでしょうか♪

今後もさまざまなサービスや特典もご提案させていただこうと思いますので、何卒よろしくお願いいたします。
ぜひ一度内容をご覧いただき、ご質問などがございましたらお気軽にご連絡いただければと思います。

こんにちは。 最近はjQueryでWebサイト上のほとんどの動きが実現できるようになってきましたね。 そこでナビゲーションとかでよく使う画像ロールオーバーにフェード機能をと考えていろいろ検索してみました。

個人的にCSSで-9999とかってやるのが嫌なので（あちこちで可否が言われてますけど、グレーなのには間違いないと思ってるので…）、オーバー時とアウト時の画像を2枚用意するバージョンです。

『jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー』 を参考にさせていただき、画像ボタン（inputタグ）にも対応できるように改造してみました。

以下、コード。

/**
* jquery.faderollover.js
*
* @author    shape DESIGN <info@shape-design.jp>
* @link      http://shape-design.jp/
*/
 
(function(){
  $.faderollover = function( option ){
    var settings = $.extend({
      target: 'img,input',
      out_suffix: '_off',
      over_suffix: '_on',
      in_duration: 300,
      out_duration: 200
    }, option );
   
    var objTarget = $(settings.target);
    objTarget.each(function(){
     
      if( $(this).attr('src') != undefined ){
       
        if( $(this).attr('src').match( new RegExp( '.+'+settings.out_suffix+'\..+$' ) ) ){
         
          this.objOverElm = $(this).clone();
         
          this.objOverElm.attr('src', function(){
            return $(this).attr('src').replace( settings.out_suffix, settings.over_suffix );
          });
         
          this.objOverElm.css({ position: 'absolute', opacity: 0 });
          $(this).before( this.objOverElm );
         
          $(this.objOverElm).hover(function(){
            $(this).stop().animate({ opacity: 1 }, { duration: settings.in_duration, queue: false });
          },
          function(){
            $(this).stop().animate({ opacity: 0 }, { duration: settings.out_duration, queue: false });
          });
        }
      }
    });
  }
})(jQuery);

使うときはこんな感じです。

$(function(){
  $.faderollover({in_duration: 400,out_duration: 400});
});

■Options
target: 要素名（imgとかinputとか）
out_suffix: アウト時の画像ファイル名のサフィックス
over_suffix: オーバー時の画像ファイル名のサフィックス
in_duration: オーバー時のフェードスピード
out_duration: アウト時のフェードスピード

Firefoxでしか試していませんので、使っていただくのはご自由ですが、自己責任でお願いいたします。