コーポレートサイトにjQueryを使ったモーションを追加しました。

Corporate
コーポレートサイトにjQueryベースでいろいろな機能を追加しました。
トップページのタイポグラフィーは上から表示されるように透明→非透明の効果を設定。
各ページヘはContact(お問い合わせ)を除き、ページ読み込みで下から上へイージングで表示されるようにしています。
Lightboxlike
その他サムネイルはリンクから、ページ内でフレーム上にウインドウを開き表示するLightbox的なものに変更。
最初右上に表示されている円はランダムに移動、色が変わります。
cdbk.net CREATIVES. http://creatives.cdbk.net

Coda使い始めました。


昨年から気になっていた「Coda」というマークアップ用アプリケーション。
DreamWeaverを今までずっと、12年ぐらい使っていたのですが、コーディングなどでも11インチMBAを使っているので、複数のサブウインドウなどがあると、作業領域が小さくなり、少し気にしていたりしたのですが、Codaはシングルウィンドウ、プレビューやコード入力がタブ切り替えのように行えるのですごく作業効率が上がりました。
何より、FTP設定すれば即時反映できるのでテスト環境を作ってそこで確認、問題なければ本環境へ反映みたいなフローにしてしまえばいいので、毎回毎回アップロードする手間なども省けます。
Coda
コードナビゲーターにHTMLの要素やJavaScriptのファンクションが表示されるので構造理解を視覚的にサポートしてくれます。
価格がちょっと高めですが、仕事でと考えている方にはおすすめです。
Coda 2がリリースされました。
Coda 2 - Panic, Inc.

レシピ本サイトを作りました。

KURIMO(クーリモ)  ギフトサイト

Iluvrecipe 01

最近外食より内食が主流なので家にレシピ本も増えてきたので、良さそうなものを集めてサイトを作ろうと思い、作りました。

名前は「I ♥ recipe.」。AmazonのAPI使っているのでAmazonに載っていないものは載せられないのですが、独自のカテゴライズをして増やしていく予定です。

最近はシリコンスチーマーやココットなどの調理器具がセットになったムック本などもあるのでバレンタインのために作ってみるなどしてもいいかもしれません。

個人的には小太り系のレシピ本をもっと載せたいところですが、できるだけ作りやすそうなものを中心にということで。

この本も載せてほしいなどリクエストあれば、コメントいただけると幸いです。

Iluvrecipe 02

レシピ本の話はここまでで、ここからはサイトの仕様。

システムはWordPressを使い、HTML5+CSS3+jQuery+less.jsで制作。

タグ部分やサムネイル一覧はjQueryで少し回転させてワンポイントにしています。

トップから本の詳細ページを見る際は基本、Lightboxのようにページ内で表示させるようにしています。

WordPressのテンプレートとして別途改変して普通のブログでも使えるようにするかは現在模索中。

 

 

ブロガー向けのアフィリエイトツールを作りました。

Blogtools

Amazon APIを使ってブログ用に作ったのがこのサイト。ブログを書く際に載せる書籍やガジェットのリンクをもっと簡単に載せられないものか、複数、商品をのせられないものかと試行錯誤してとりあえずこしらえました。

動作はHTML5が動作するIE9以上もしくはSafari,Google Chrome,Firefoxなどで確認済み。IE8は疑。中身はPHP+jQueryベースで出来ていてStyle付きのHTMLソースを出力してくれるのでブログのHTML編集・投稿画面にコピペすればそのまま使えます。

アフィリエイト、アソシエイトIDを入れて検索しないとデフォルトのIDが振られるようになっているのでそこだけ注意していただければと思います。

今後は要望などあれば機能追加などもしていきたいです。

  • Web制作の現場で使う+jQueryデザイン入門+(WEB+PROFESSIONAL)
  • jQuery+Mobile+スマートフォンサイト+デザイン入門
  • Webデザイナーのための+jQuery入門 魅力的なユーザーインターフェースを手軽に作る+(Books+for+Web+Creative)
  • jQuery+Mobile+ポケットリファレンス
  • jQueryデザインブック 仕事で絶対に使うプロのテクニック
  • つくって覚えるjQuery入門
  • jQuery+UI%2B厳選プラグイン41+実践サンプル集

linked by blog-tools

スティックタイプのインスタントティ、ticolino。

KURIMO(クーリモ)  ギフトサイト

Lightbox 1327826159691
昨日見つけたスティックタイプのインスタントティ、「ticolino」。
スティックの形をしているので熱いお湯にティーパックがすべて浸るようなことがなく、そのままかき回せばいいのでスプーンいらずなところが◎。
Lightbox 1327826246934Lightbox 1327826338722Lightbox 1327826622160
肝心な味はすごくおいしいこともまずいこともなく、そして苦みが少なくのみやすいお茶。
メーカーはアメリカのセレンゲティ社で茶葉は中国産。日本では楽天などで手に入ると思います。(¥1,500〜)
私は有楽町のJALプラザで見つけました(¥1,800/18袋)。
毎日飲むには少々お高い・・・来客用?にぜひ。

EvernoteからWordPressに投稿する方法。

Evernoteにブログのネタを書き溜めたりする方は多いと思うのですが、共有からブログへアップロードといった機能がないのでどうしようかと思っていたところ、とりあえずコピペで記事だけでも出来ないかと思い、試してみました。
結論としてはあっさりコピペで記事を貼付けることが出来るようで、この記事もEvetnoteからコピペで更新してみました。
欠点としては文章が<p>ではなく<div>で区切られるため、レイアウトを考慮するためには、投稿記事の表示エリアの<div>に対してCSSで指定をする必要があるところ。
それ以外は画像も表示されているので問題なさそうでした。
もしかするとアメブロなども可能かもしれません(試していないのでわかりませんが・・・)
普段はMarsEditを使って記事を書いているのですが、Evernoteがあれば思いついたときにすぐ記事を書き始めることが出来便利ですね。

2011年のWebデザイン関連ブックマークまとめのまとめ。

2011年のWebデザイン関連で役立ちそうな記事やブックマークを集めたサイトをいくつか見たのでブックマーク的に記事にしました。
今後も見つけ次第、時折更新すると思います。
2011年総まとめ:ウェブ制作に役立つエントリーBest 20(coliss)
2011年・個人的に参考になったWeb制作向けの国内記事リスト(かちびと.net)
2011年よくブックマークされた15のエントリー(Webpark)
ツイッター9月~12月のつぶやき まとめ 9/1 ~ 12/31 2011(Web Design RECIPES)


合間で見つけたので取り急ぎ。
Google Readerにはてブのタグ検索結果を登録しておくとトレンド的な記事はつかみやすいと思います。
このほかにもこんな記事あるよ!といったところはコメントorこの記事のTweetにRTでコメントなどしていただければと思います。
 

2012年もよろしくお願いいたします。

Nenga2012cdbk
2012年、よろしくお願いいたします。
今年の年賀状は「明るく、楽しく」がコンセプトでWeb用にアニメーションにした作品が上のデザイン。
昨年の2月から始まった仕事でスマートフォンやタブレット向けのデザインやマークアップを毎日するようになり、おかげさまでFlashと同じような動作をiPhoneやiPadでも魅せることが出来るようになりました。
業界の動きを見ていても今年はHTML5をベースとしたアプリケーションが次々と出てくる年になると思うので、このブログなどでいいアプリをどんどん紹介できればと考えています。
また、スマートフォン・タブレット(Android,iOS)向けのWebサイトを作る際のご相談も承っておりますのでこちらもよろしくお願いいたします。
 
掲載サイト
クリエイティブな2012年新春特設サイトまとめ