『ウェブ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
フォントの色と大きさと背景色の微妙な関係 | 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つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい
ToDoをタグクラウドで表現する『Zirr.us』 | S i M P L E * S i M P L E
今までいろいろなToDoリストを見てきましたが、Zirr.usのインターフェースはちょっと斬新。ToDoをタグクラウドで表現しています。なるほど、という組み合わせですね。 » Zirr.us ↑ 優先度によってサイズが変わり、タグによって色分けされるという寸法。 ↑ 名前や日付、優先順位でタグクラウドのソートもできます。 タグクラウドの表現はどうあるべきか？というエントリーを最近書きましたが、タグクラウドの応用についても考えられそうですね。 ToDoを大きさで分類すると言う意味では百式管理人考案のバブルマップにも似ていますね。 » バブルマップのすすめ ～ ストレスすっきり解消型ToDo管理手法 ～ 登録も無料ですし、操作もAjaxで快適なので気になる人はちょっと試してみては・・・（ただ、日本語が通らないのですが・・・）。 » Zirr.us
「ブロガーの足あと」がわかるブログパーツを配布する『MyBlogLog』 | S i M P L E * S i M P L E
「ブロガーの足あと」がわかるブログパーツを配布する『MyBlogLog』 January 9, 2007 10:00 AM written by watanabe mixiにログインすると、まずは誰が訪問してくれたのか、あしあとをチェックしたくなりませんか。 そんな「あしあと」機能をSNSだけでなく、ブログにも広げたのがMyBlogLogです。 » MyBlogLog たとえばRead/Write Webでは、↓のような感じ。 ↑ どこかで見たような人がちらほらと・・・ｗ。 なお、表示されているブロガーをクリックすると、そのブロガーのMyBlogLogのページが見れます。そのブロガーがどんなブログを運営しているのか一目瞭然です。 自分がよく見ているブログのオーナーも見ているんだ！と新しい発見がありそうですね。また「著名なブロガーに訪問されているブログは良いブログ」という公式も成り立ちそうな
『ちょっと間違えて印象づける』メソッド | SiMPLE*SiMPLE
『ちょっと間違えて印象づける』メソッド January 5, 2007 8:36 AM written by Gen Taguchi 完璧なホテルというのは印象に残らないそうだ。 逆に、ちょっとしたミスがあって、それを丁寧に埋め合わせるほうが印象に残るらしい。 結果として「完璧なホテルよりミスがあったホテルの方が感じがよかった」ということになるから人間の心理は不思議だ。 そう考えると「ちょっと間違えて印象づける」というメソッドがあるような、ないような気がする。 IP AddressからGoogle Mapを算出してくれるIP-Adressもそうだ。このサイトではロゴにわざわざ赤で修正をいれることによってドメイン名を印象付けている。 ↑ IP-Addressではなくて、「d」はないよー、ということを印象づけていますね。 なーるほど。ドメインが取れなかったからかもしれないが、こういう挽回の仕方
【無料ミニアイコン集】 サンタからのちょっと早い贈り物『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つのブログサービスについて、自分の別名として機能していたアカウント名の退会後の取り扱いをまとめてみました。 ■ メールおよびメッセンジャーサービス 各サービスのヘルプ
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の特徴。無料の文字もいれときましょう。 ■ は？素材集す
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
Adsense x Analytics - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
※ 百式管理人注：この記事、Simple*Simpleのテーマである「Smart Designs」のテーマからは逸れますが、うちの学生インターンくんが自主的に書いてくれました。こういう前向きな姿勢は高く評価したいので掲載してしまいます。いやぁ、最近の学生さんはみんな優秀だなぁ・・・。 あなたのブログでも導入しているかもしれないGoogle AdsenseとAnalytics。 » Track Google AdSense Clicks via Google Analytics – Free AdSense Tracker : SEO Book.com ではAnalyticsを利用してAdsenseのクリックを詳細に追跡する方法を紹介している。 「どのエントリーでクリック数が多いのか？」「どこから来たユーザーのクリック率が高いのか？」などAdsenseのレポート機能ではわからないことも完全で
お得感を演出する | S i M P L E * S i M P L E
ウィンドウサイズは常に一定。 その常識をひっくり返してくれるのが、このmotion-wave.comの作品です。 見ているだけで楽しいので是非実際に見てみてください。ポップアップウィンドウなのでブロックをしている人は外してからどうぞ。 音楽に合わせて、 こんな感じに次々と、 サイズが変化していきます。 いわゆるデザイナーさんのサイトなのですが、自己紹介（結構笑える）を軽快な音楽にのせて魅せてくれます。しかも、音楽にあわせてウィンドウサイズがどんどん変化していきます。気持ちいいですね。 いつもはいやな感じのするポップアップウィンドウですが、これは一気に魅せてくれますね。音楽と合わせて強烈なインパクトを狙いたいときに使える技かと。映画の公式サイトやコンサートやイベントページにもいいかもしれません。 ウィンドウサイズもデザインの一部、という考え方はアリですね。 » Motion-wave.com
ページをマトリックス風に表示するJavascript | S i M P L E * S i M P L E
これは新しい。 なんとあらゆるページをマトリックス風に表示してくれるのだ。（実際の動作はこちら） 実装するには以下の1行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
絵葉書風コメントフォーム | S i M P L E * S i M P L E
SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳