タグ

ブックマーク / blog.creamu.com (66)

  • jQueryで実装する、奥行きのある回転テーブルの動き – creamu

    普通と違った、奥行きのあるインターフェースを実装したい。 そんなあなたにおすすめなのが、『jQuery Roundabout』。jQueryで実装する、奥行きのある回転テーブルの動きです。 シンプルなul, liのHTMLを、奥行きのあるインターフェースにしてくれます。しかもクリックすると、前面にぐいっと回転して出てきます。 以下のようなデモも用意されていて、かなり刺激的なことになっています。 Standard Roundabout in Action Clock 一度見てみてください。 jQuery Roundabout ブログデーになりつつあるな。。今日はインプットが多すぎました。。朝までがんばるぞ。 P.S. 今気づきましたが2つとも田口さんとかぶってしまいましたすんまへんm(_ _)m

  • 請求書のデザインいろいろ – creamu

    Smashing Magazineで、請求書のデザインがいろいろと紹介されています。 いくつかご紹介しますね。 Graeme Duckett Hicks Design Francisco Inchauste Devia シンプルですがロゴの使い方、色使い、レイアウト、フォントの選び方などが参考になるのではないでしょうか。 その他、CurdbeeやFreshbooksといった、オンラインで請求書が作れるサービスも紹介されています。デザインの参考になるのでは。 一度見てみてください。 Invoice Like A Pro: Examples and Best Practices 久々にマクド中。kitsonのバッグとか持ったギャルがいっぱいいるぞ。今年はスパンコールとかキラキララメラメがはやりのようですね。。 ギャルと言えば19歳で起業した藤田志穂さんのがなかなかいい感じです。

  • 素晴らしいHTMLメールテンプレート配布サイト – creamu

    HONGKIATで、素晴らしいHTMLメールテンプレートがまとまっています。 ざっといくつかご紹介。 Campaign Monitor – 30 FREE HTML Newsletter Templates OutlookやThunderbird、Gmaiといった多くのメジャークライアント、Webメールでテストされたテンプレート集 Carbon Graffiti – 10 Free email marketing templates デザインに優れたテンプレート。シンプルなものから凝ったものまで Download PDFなどをダウンロードするリンクのあるテンプレート Welcome サービス登録時のサンクスメールに使えるテンプレート Blog Newsletter ブログをニュースレター形式で配信できるテンプレート。読者との関係作りに Malibu セール情報などをプロモーションする用のテ

  • Webデザイナーのための美しいjQueryプラグイン22 – creamu

    Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery

  • Photoshopのレイアウトチュートリアル90 – creamu

    1st webdesignerで、Photoshopのレイアウトチュートリアルが紹介されています。 ざっといくつかご紹介。 ↑はDesign a trendy business & finance layout。 Create a Clean and Effective Product Layout Web Design Tutorial: Blog/Portfolio Template! Create a Professional Portfolio Design in 17 Easy Steps Softblue Template Tutorial その他のリストは以下からどうぞ。 » 90 New And High Quality Photoshop Web Layout Tutorials 実家に帰ってきてまったりしています。お店のパピヨンがかわいすぎて連れて帰りそうになりました♪

  • WordPressをCMSにする方法 – creamu

    noupeで、WordPressをCMSにする方法が紹介されています。 ざっといくつかご紹介。 ・静的なトップページを作る ・ナビゲーションバーに表示させるものを制御してカスタマイズする ・編集できない部分を作る ・WordPress Widgetsを使ってサイドバーをカスタマイズする ・パーマリンクをカスタマイズする ・サイトマップを作成する ・コメントやトラックバックを拒否する 「How To » 」にそれぞれ方法が書いてありますね。 一度見てみてください。 » 101 Techniques for a Powerful CMS using WordPress いろいろやることがあるのでブログ書く手を止めたい。。

  • スタイリッシュなフッターデザイン25選 – creamu

    フッターのデザインを凝ったものにしたい。 そんなあなたにおすすめなのが、『25 Stylish Website Footer Designs』。スタイリッシュなフッターデザイン25選だ。 以下にいくつかご紹介。 ↑のキャプチャは# bcandullo.com。 SimpleBits Blog.SpoonGraphics Flyin’Web その他のリストは以下から。 » 25 Stylish Website Footer Designs スタイリッシュなフッターデザイン、チェックしてデザインの参考にしてみてはいかがだろうか。 先日GOOD DESIGN EXPOで紹介したGRid TAGのUSBメモリーが販売開始になったようですね。 興味のある方はぜひ〜。

  • デザイン講義4 – creamu

    よぅしデザインの授業4回目。 強さを出すには 強さを出したいときは暖色を選ぶ 豊かな表現 過去を思い出すと、豊かな表現ができるようになる ものの見方 彫刻家は、石ころ一つを見たときに物語を作ることができる ものを見るフィルタを変える訓練をすることで、パパッと切り替えられるようになる ただ、フィルタを切り替えすぎるととっちらかってしまう → 整理が必要 整理しながら発想する方法 1.三位一体 ボリューム、重みを均等にする 3はバランスがとりやすい数字(キリスト教の三位一体、雪月花、松竹梅、心技体など) 2つでバランスが悪いとき、もう一つ中間の要素を入れてあげるとバランスがとれる 2.三間連結 ホップ・ステップ・ジャンプの発想(だんだん大きくなる)、序破急。例:卵、ヒヨコ、ニワトリ 3.一種合成 アイディアに困ったら、ピカソとゴッホの画風を合成して自分のものにしてしまう、など アイディアに困っ

  • デザイン講義3 – creamu

    さて、デザインの授業3回目(先々週だけど)。また勉強になった。 いいデザインとは いいものはテーマ以上のいろいろなことを感じさせる 客観性 他人の目になって客観的に見る一番簡単な方法は、離れて見ること シンプル シンプルが一番難しい。シンプルができるとプロと言える。引くことができる力があるのかないのか バランスと破調 バランスは、安定・快い・美的な均衡 破調は、動き・変化・崩したポイント(に目がいく)・インパクト バランスとは バランスとは、重さの感覚。形(面積)と色(明度)に分けて考える コントラストと対立 コントラストは、動き・刺激・メリハリ・変化 「何かしまらないな」と思ったら、形か色でコントラストをつけてみる コントラストが強すぎると思ったら、間の要素(白と黒だったらグレー)を入れてみる メリハリをつける方法 メリハリとは、強弱 1.色のトーン(色調)に差をつける(特に明度差) 2

  • デザイン講義2 – creamu

    よぅし引き続き。 デザインの目的 ・メッセージを伝える ・人を幸せにする、喜ばせる ・生活に直接関与する ・美的な安らぎを与える(デザインは常に進化する。後退することはない) ・機能的な満足 デザインの役割 コミュニケーションジョイント 個人・モノ(ファッションデザインやプロダクトデザイン)・組織(企業のHP、ロゴやCIなど)・環境(建物や街、インテリア)を結びつける デザインの条件 ・大勢の人に受け入れられる ・多くの人に手渡せる ・人の目をとらえる(インパクト)、しばらく引きつける(パワー、訴求力)。 シンプルが原則 ・理解される 言いたいことを持っている。うまく行かない場合はここがあやふや デザインは結局この4つができればいい 表現とは 自分の気持ちを相手に伝えること 五感に訴えるものを使う。デザイナーが使うのは視覚だから、視覚について敏感になる必要がある 五感を常に意識すると、審美

  • デザイン講義1 – creamu

    少し前からデザインの授業を受けているのでまとめておきます。ほんとはニューヨークかカナダで学びたいんだけど、ひとまず日で。来年こそアメリカ行きたいな。 デザインの力とは デザインの力とは、造形と色彩をとらえること 発想力をつけるには 発想力をつけるためには、自分の生活や趣味を超えるものを見てみる 技術と発想力 デザインには、技術と発想力が必要。技術だけなら誰でもできる。デザイナーに問われるのは発想力。これがないとデザイナーに頼む意味がない プロになる条件 ・自分を否定しない ・他人と比較しない ・完全を求めない これらをすべて否定すると、この世界で能力がないんじゃないか、才能がないんじゃないかと思ってしまう。脳科学者の茂木健一郎氏が言っていることと合致するが、自分はバカだと言っていると当にバカになる レオナルド・ダ・ヴィンチの言葉 レオナルド・ダ・ヴィンチは、「自分で納得できる作品は一つ

  • Photoshopでモックアップを作るためのTips10選 – creamu

    Photoshopでサイトのモックアップが作りたい。 そんなときにおすすめなのが、『10 Tips For Creating Website Mockups In Photoshop』。Photoshopでモックアップを作るためのTips10選だ。 以下にいくつかご紹介。 フォントはアンチエイリアスをオフにする Windowsはアンチエイリアスがかからないので、オフで作成。 フォントには鮮明のアンチエイリアスをかける このアンチエイリアスが一番ブラウザのレンダリングに近い。11pxか12px以下の場合、ほとんどのブラウザではスムースフォントに対応していないため、アンチエイリアスはオフにした方がいいだろう。 (*追記(08.09.13)コメントをいただいて気付いたんですが、完全に記事を読み間違えていましたm(_ _)m修正、及び追記します ) テキストはWebセーフフォントを使う MSゴシッ

  • CSSでベストな「&」を指定してみるサンプル『Use the Best Available Ampersand』 – creamu

    フォントごとの「&」のデザインが知りたい。 そんなときにおすすめなのが、『Use the Best Available Ampersand』。CSSでベストな「&」を指定してみるサンプルだ。 このエントリーは、OSごとに「&」がどのように表示されるかを教えてくれる。 ↑はWindows Vista。 Mac OS X (10.5) Windows XP CSSは以下のように指定すればOKだ。 <span class="amp">&amp;</span> span.amp { font-family: Baskerville, Palatino, "Book Antiqua", serif; font-style: italic; } CSSでベストな「&」を指定してみるサンプル、チェックして参考にしてみてはいかがだろうか。 カフェに行ってまったりしてたんだけど、カウンターだったのでマスター

  • PEAR Cache Liteを使ったキャッシュ

    さて、ここ2,3日でブログのパフォーマンス向上に取り組んでいるのでレポートです。 久々に手を加えると気持ちいいですね。ディテールに凝る感じがとても気分がいい。 しかもかなり結果が出たのでうれしいです。 CREAMUへのアクセスの体感速度が上がったと思うんですがいかがでしょうか? 今までソースをバンバン書いたり、動的なものを起きっぱなしにしたりしていたので、表示に時間がかかっていました。 サーバを移転したきっかけでパフォーマンスをもっと上げたくなったので、いろいろとやってみました。 大きくは以下の2つです☆ (1) 不要なjsファイルを削除する。 (2) PHPで動的に呼んでいるところをキャッシュする。 さて、(1)ですが、Ajax系の動きを紹介するためにバンバン<head>にjsを読み込んでいたんですが、特に必要のないページがほとんどなので、一旦不要なjsファイルを削除しました。 エントリ

  • 似ている企業ロゴ特集『When logos look alike』 – creamu

    ロゴをデザインしたい。 そんなときに参考になるのが、『When logos look alike』。似ている企業ロゴ特集だ。 以下にいくつかご紹介。 その他のリストは以下から。 » When logos look alike 似ている企業ロゴ特集、チェックしてぜひ参考にしてみてはいかがだろうか。 遅くなってしまった。。すみません! ここ数日Javascriptな毎日。idとかわけわからなくなってくるが整理して進めていこうっと。 あと昨日はまた朝まで作業してしまった。。開発は終わってるのでコンセプトから考え直してデザイン & CSSをがっつり。まずまずかな。

  • 無料で使える素晴らしい紙の背景&テクスチャ30選『30 Great Free Paper Backgrounds and Textures』 – creamu

    Design 無料で使える素晴らしい紙の背景&テクスチャ30選『30 Great Free Paper Backgrounds and Textures』 紙のテクスチャ探している。 そんなあなたにおすすめなのが、『30 Great Free Paper Backgrounds and Textures』。無料で使える素晴らしい紙の背景&テクスチャ30選だ。 以下にいくつかご紹介。 その他のリストは以下から。 » 30 Great Free Paper Backgrounds and Textures All of these textures should be free for commercial use, but to be absolutely sure, check each web site usage terms and license before downloading

  • 無料で使えるかわいいアイコンセット55選『55 Free High Quality Icon Sets』 – creamu

    かわいいアイコンを探している。 そんなあなたにおすすめなのが、『55 Free High Quality Icon Sets』。無料で使えるかわいいアイコンセット55選だ。 以下にいくつかご紹介。 » Concept Icons .08 256×256pxでPNGフォーマットのアイコン12選。Roberto Abril Hidalgoによるデザイン » Eico Studio Anniversary Icon Pack かわいいアイコン16選。デザインエージェンシーの1周年記念に作成。ico、png、icnsフォーマット » Kidaubis 3D Icon – Blue series メール、ミュージックボックス、ツールボックスのとてもかわいいアイコンセット » Mac Icons Illustrator CSでデザインされたMacライクなアイコン集。pngフォーマット » Weathe

  • 無料で使えるとてもかわいいベクターアイコンセット『Milky』 – creamu

    かわいいアイコンを探している。 そんなあなたにおすすめなのが、『Milky』。無料で使えるとてもかわいいベクターアイコンセットだ。 『Milky』は、↑のようにとてもかわいいアイコン集。先日紹介したBright!の続編のようだ。 You can use Milky for personal and commercial projects at free of charge, if you use Milky for your websites, backlinks and credit are appreciated. 個人利用、商用利用に関わらず無料で使える。サイトで使う場合はバックリンクかクレジット表記をしてくれるとうれしい。 とのことだ。 とても使えるアイコンセットではないだろうか。 無料で使えるとてもかわいいベクターアイコンセット、チェックしてぜひ使ってみていただきたい。 百式田口

  • 無料で使える素晴らしいアイコン集『Best of the Best Free Icons』 – creamu

    かわいいアイコンが使いたい。 そんなあなたにおすすめなのが、『Best of the Best Free Icons』。無料で使える素晴らしいアイコン集だ。 以下にいくつかご紹介。 » Monofactor Icon Set 1 クオリティの高い25個のアイコン。illustrator8以上で使えるベクターデータ » IcoJoy ブログやサイトにぴったりのアイコンが4セット。.ico, .icns, .tif, .gif, .bmp, .pngといった6つのファイルタイプで提供 » Webappers Web Application Icon Set シャイニーなエフェクトのアイコン集。↑のキャプチャはこのサイト » Asp.Net Icons PNGファイルで300アイコンを提供 無料で使える素晴らしいアイコン、チェックしてぜひ使ってみてはいかがだろうか。 をいろいろ購入。雰囲気のい

  • Webデザイナーなら見ておきたいコメントデザイン30選『30 Must See Comment Designs for Web Designers』 – creamu

    Design Webデザイナーなら見ておきたいコメントデザイン30選『30 Must See Comment Designs for Web Designers』 コメントのデザインをチェックしておきたい。 そんなあなたにおすすめなのが、『30 Must See Comment Designs for Web Designers』。Webデザイナーなら見ておきたいコメントデザイン30選だ。 以下にいくつかご紹介。 ↑のキャプチャはThomas Finley。 Intype Bartelme Nimbupani Darkmotion その他のリストは以下から。 » 30 Must See Comment Designs for Web Designers Webデザイナーなら見ておきたいコメントデザイン、コメントをデザインするときに参考にしたいですね。 久々にスタジオに入った。中々完成度が高