フリーウェアでもシェアウェアでもない「ケアウェア」 | SIMPLE*SIMPLE
ソフトウェアの使用条件にはフリーウェアやシェアウェアがありますが、Kolorooは「ケアウェア」という新しい（のかな？）概念を提唱しています。 ↑ なんだか微笑ましいアイコン。 で、この「ケアウェア」、次のように説明されています。 This software is careware. It’s free. That’s right, free … with one tiny catch (isn’t there always). Before you download it, you must agree to do something nice for someone. 超訳すると「無料だけど、ダウンロードするかわりに誰か他の人に親切にしてあげてね」という条件です。ダウンロードされるたびに世界に明るい話題が一つずつ増えていく、という素晴らしい試みですね。 ちなみにKolorooのサイトに
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） | SiMPLE*SiMPLE
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） November 6, 2007 3:41 PM written by Gen Taguchi ※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 今回ご紹介するのはレシピサイト、Cookpad.comの事例です。Cookpad.comでは有料会員（月額300円）があるのですが、その会員数が伸び悩んでいました。 そこでbeBit社に相談するのですが、それまではかわいいバナーをどーんとサイドバーに貼っていました。 ↑ なかなかかわいらしいバナーです。凝っていますよね。 しかしユーザビリティ調査をしてみると、そのバナー広告がほとんど見られていないことがわかりました。最近は「広告＝邪魔なもの」というイメージがありますよね。 そこでbeBit社ではこのバナーのかわりに次のテキスト
もうPhotoshopは要らない？ブラウザだけでできるグラフィックジェネレータ15選 | S i M P L E * S i M P L E
そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。 これはメモしておかねば。 Buttonator ボタンがいろいろ作れます。設定がいろいろあって良いですね。 RoundedCornr: Rounded Corner and Gradient Generator いわゆる角丸パーツを作れます。 Web 2.0 free buttons maker! 2.0っぽいボタンが作れます。 glassy buttons こちらもボタンジェネレータ。 Ajaxload – Ajax loading gif generator Ajaxのローディング中のパーツが作れます。 Web2.0 Logo Creator by Alex P Logo Maker : Web 2.0 Stylr 2.0っぽいロゴ
わかりやすくて好感が持てる『このブログにアフィリエイトを貼っている理由』 | SiMPLE*SiMPLE
わかりやすくて好感が持てる『このブログにアフィリエイトを貼っている理由』 March 26, 2007 9:00 AM written by Gen Taguchi 最近お気に入りのブログ、「となりのインテリア」。内容もそうですが、デザインがかなり素敵です。 そのブログのサイドバーに「アフィリエイト報酬の行方」という説明があります。この説明が好感度高いです。 ブログにアフィリエイト貼っていると「あさましい・・」と思われがちですが（そうでもないかな・・・）、こういう風にかわいく説明してもらうと「どうぞ、どうぞ」という気になりますね（と、僕は思います）。 ↑ 「てまひま」ってとこがいいｗ。 このようにさりげなく人間味あふれるパーツを配置したいものですね。うまいなぁ、と思ったのでご紹介でした。 あと、おまけですがアクセス解析のところも吹いた。 ↑ 懐かしい・・・。 「となりのインテリア」は以下よ
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
印象に残るメニューのデザインまとめ March 8, 2007 10:02 PM written by Gen Taguchi 良いメニューは印象に残りますよね。 ということで今日はメニュー系のデザインをまとまた人の記事をご紹介。 » 8 web menus you just can't miss 全部で8つありますね。個人的に気に入ったものをピックアップ。 ↑ シンプルかつスタイリッシュ。 ↑ ちょっとB-BOY風（謎）。 ↑ ウルトラシンプル。悪くないですね・・・。 ↑ Mac OS風。 ↑ diggっぽい？ 以上のデザインはこのサイトでダウンロードもできますよ（.rar形式なんでちょっとマニアックですが・・）。よろしければどうぞ。 » 8 web menus you just can't miss Info: ナビゲーション | 固定リンク | コメント (0) | トラックバッ
小粋なDHTMLとAJAXのスクリプトが36種類！『mixiAjax.com』 | S i M P L E * S i M P L E
小粋なDHTMLとAJAXのスクリプトが36種類！『miniAjax.com』 February 27, 2007 3:39 PM written by Gen Taguchi これは覚えておくとちょっと便利そう。 miniAjaxではちょっと小粋なインターフェースをつくるためのDTMLやAjaxを紹介しています。 » MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts 提供されているのは今のところ36種類。 タブでのナビゲーションを実現したり、インラインでの編集を可能にしたり、☆での評価ができたり、先進的なウェブでよく見るインターフェースばかりですね。 ただ、このサイトがすべて準備したわけではなくて、それぞれ他のサイトへのリンクになっています。 おっと、リンク集かよ・・・
ローディングをコンテンツ化してしまった『Picnik』 | SiMPLE*SiMPLE
ローディングをコンテンツ化してしまった『Picnik』 February 6, 2007 11:20 AM written by watanabe pop*popでも紹介したPicnikですが、角度を変えればsimple*simple的小ネタになります。 Picnikでは最初にコンテンツをロードするのですが、そのローディング画面がなかなか素敵です。「ロード中・・・」のテキストがなんだか癒し系なのですｗ。 ↑ 「凧をとばしています」 ↑ 「花を咲かせています」 ↑ 「草を育てています」 などなど、いろんな微笑ましいネタが用意されています。ローディングのときも飽きさせないような工夫。たまっていくゲージを題材として、隠れた腕の見せどころにできそうですね。 » Picnik Info: FLASH | 固定リンク | コメント (0) | トラックバック (0) | ↑
無料で使えるベクターデータを配布しているサイト27選 | S i M P L E * S i M P L E
拡大縮小しても画質が劣化しないベクターデータは何かと便利です。 Tutorial Blogで無料で使えるベクターデータを配布しているサイトが紹介されていました。全部で27あります。 ふきだし風のパーツやアクア風のボタン、国旗やトランプなど、さまざまな用途に使えそうです。 ↑ こうしたサイトデザインに使えるようなものや・・・。 ↑ ちょっといいのかな、これ？というものとか・・・。 ↑ 自分ではとっても作れなさそうなやつとか・・・。 形式はAIやSVG、PDFなどさまざまですね・・・それってただのアイコンでベクターデータではないのでは？というのも若干混じっていますがそこはご愛嬌。 よろしければ下記サイトからどうぞ。 » Free Vector Downloads – Photoshop Tutorial
フォームの入力値チェックをしてくれるJavascriptのライブラリ『Validate.js』 | S i M P L E * S i M P L E
これは便利そう。 『validate.js』ではフォームのさまざまな入力をチェックしてくれます。URLやメールアドレスなどのよくあるチェックに加え、ISBNかどうかといったマニアックなチェックもできます。 マニュアルに載っている命令をご参考までに。 hasValidChars isSimpleIP isAlphaLatin isNotEmpty isIntegerInRange isNum isEMailAddr isZipCode isDate isMD5 isURL isGuid isISBN isSSN isDecimal isplatform addRules Apply サイトでは動作チェックのデモもあります。コードも見れますよ。 ↑ こんな感じでさまざまなチェックができます。 詳細＆ダウンロードはこちらからどうぞ。 » Mutationevent :: Validate.js
Web2.0風デザインのための秀逸チュートリアル68選 | S i M P L E * S i M P L E
こ、これはかなり使えます・・・。 が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。 『Web2.0風デザインのためのチュートリアル68選』です。 » Web 2.0 Webdesign-Tutorials | Dr. Web Weblog 以下の7つのカテゴリーにわかれています。 サイトをこれから作るぞー、という人には大いに参考になる素晴らしきチュートリアルかと思います。 ビジュアル効果系（1～11） ロゴ系（12～25） テキスト（26～33）系 バッジ系（34～39） ボタン系（40～46） レイアウト系（47～60） Web2.0まとめ系（61～68） 個人的には1、2、12、13、40、41あたりが好きですね。今後使えそう。 しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ？」
クールなアクア風ボタンのベクトルデータが無料で72個！ | SiMPLE*SiMPLE
クールなアクア風ボタンのベクトルデータが無料で72個！ すぐに使えそうなアクア風ボタンのベクトルデータが無料で公開されています。イラストレーターなんかで編集すればぱっと使えそう。 » 72 Free Vector Glass Buttons and Bars ファイル形式はAI、PNG、EPS、SVG。環境にあわせて必要なものを使うとよいでしょう。ただ手元のIllustrator 10ではAIが開けなかった・・・最新版じゃないとだめなのかな。 どちらにしろこういうベクトルデータの公開はうれしいですね。 CS3 で開けたので試しに Illustrator 10 形式で保存し直したところ、警告メッセージは出ますが特に何かが劣化するようには見えませんでした。(見落としているかもですけど) CS3 を持ってる人を探してファイル形式を変換してもらうと良いかもしれません。
フォントの色と大きさと背景色の微妙な関係 | S i M P L E * S i M P L E
フォントの色と大きさと背景色の微妙な関係 December 26, 2006 10:00 AM written by 8maki 12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。 その24 waysから一つご紹介。 » 24 ways: Cheating Color フォントの色と大きさと背景色についてのTipsです。 わかりやすく例を出していきましょう。 架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。 ■ 薄い背景に明るいフォントの場合 さて、下に2つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい
『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
勝手ながら『Web 2.1のデザインパターン』を考えてみた | S i M P L E * S i M P L E
さてデザイナーでもなんでもないのでかなり個人的な主張ですが、「Web 2.0っぽいデザイン」の次を考えてみました。 名づけて『Web 2.1のデザインパターン』ｗ。 個人的には「角丸の次って何よ？」と常々思っていたので、最近新しく出てきたサイトに共通するいくつかの特徴をまとめてみました。 かな～り主観なので「そうかぁ？」と思われる方もいらっしゃるとは思いますが・・・間違いを恐れずにメモ書き程度にエントリーです。 では早速。僕が感じている「次っぽいデザイン」の特徴は4つ。 【1】 極太ストライプ（Bold Stripe） ストライプはWeb 2.0っぽいデザインでも流行っていますが、それをもちょっと太くしたやつを最近よく見ます。 ↑ タイトルと背景が太いストライプに。 ↑ 細いストライプはWeb 2.0っぽかったですが、最近はちょっと太めが流行りかな。 【2】 極太枠線（Bold Borde
【無料ミニアイコン集】 サンタからのちょっと早い贈り物『Mini Icon 2』 | S i M P L E * S i M P L E
かわいらしいミニサイズのアイコンを配布しているBrand Spanking Newのサイトで一足早いクリスマスプレゼントが配布されていました。 113の超ミニアイコンです。サイズは10×10。かわいらしいすね。 これらを使ってなんかのアプリ作っちゃおうかな。携帯アプリとかいいかも。 ダウンロードは下記のサイトからどうぞ。 » HoHoHo! （mini Icon 2） また、Mini Icon 2とうたうからには他にもあります。よろしければどうぞ。どれもいい感じっす。 » Doc Type Icon » Mini Icon Pack 1
退会後のアカウントはどうなる？のまとめ | S i M P L E * S i M P L E
退会後のアカウントはどうなる？のまとめ December 7, 2006 4:07 AM written by Ryuhei So これだけネットの利用が日常的になると、よく使うサービスのアカウント名が自分を表す別名として機能してきます。 ただ、このアカウント名が退会後にどうなるか気になったことはありませんか？ 自分（と他の人）が慣れ親しんできたこのアカウント名を他の人が使うことができるのでしょうか？それとも永久にそのアカウントは使われないのでしょうか？ そこで今回はGmail、Hotmail、Yahoo!、Skypeの4つのメールサービスおよびメッセンジャーサービス、さらにBlogger、はてなダイアリー、Typepadの3つのブログサービスについて、自分の別名として機能していたアカウント名の退会後の取り扱いをまとめてみました。 ■ メールおよびメッセンジャーサービス 各サービスのヘルプ
CSSだけで文字にドロップシャドウをつける方法（あまり良くない方法） | SIMPLE*SIMPLE
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips
Web 2.0のデザインパターン | S i M P L E * S i M P L E
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。 さて、ではポイントをば。 ■ グレーの次はグリーンだ！ 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命！ Rounded Cornersは新しい標準す。 ■ 「無料！」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は？素材集す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
