検索結果が複数ページある場合のスマートな見せ方 April 3, 2007 4:15 PM written by watanabe CDやDVDのジャケットを検索できるAllCDCoversには、随所におっとするようなインターフェースの工夫が見られます。100SHIKI PR Board参加ブログであるsta la staでも紹介されていましたが、その検索結果が複数ページにわたっている場合の表示が印象的だったので、エントリー。 » AllCDCovers 検索結果が複数ページにわたっている場合、自分が見たい結果があるページを探すためには、一ぺージずつ見ていくか、「ここらへんか」と推測してページを選んでいくかしなければなりません。でも、このAllCDCoversでは、ページ番号にマウスをのせると、「○○～○○」とそのページの最初と最後のものを表示してくれます。 ↑ ページ番号にマウスをのせる
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。 さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。 ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。 » 25 Code Snippets for Web Designers (Part1) Part 1なので続編もありそうですね。続編が出たらまたお知らせします。
これは便利そう。 『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
クールなアクア風ボタンのベクトルデータが無料で72個！ すぐに使えそうなアクア風ボタンのベクトルデータが無料で公開されています。イラストレーターなんかで編集すればぱっと使えそう。 » 72 Free Vector Glass Buttons and Bars ファイル形式はAI、PNG、EPS、SVG。環境にあわせて必要なものを使うとよいでしょう。ただ手元のIllustrator 10ではAIが開けなかった・・・最新版じゃないとだめなのかな。 どちらにしろこういうベクトルデータの公開はうれしいですね。 CS3 で開けたので試しに Illustrator 10 形式で保存し直したところ、警告メッセージは出ますが特に何かが劣化するようには見えませんでした。(見落としているかもですけど) CS3 を持ってる人を探してファイル形式を変換してもらうと良いかもしれません。
いらないときは隠すインターフェース January 11, 2007 8:00 AM written by watanabe シンプルさを追求するには、削れるものをそぎ落としていく作業と同時に、きちんと意味が伝わるような工夫が必要なのかなと思います。 そういう意味で、シンプルなスペルチェッカーspellifyは参考にできそうです。 ↑ 画面には、フォームしかありませんが・・・ ↑ フォームをクリックすると使い方の説明がすーっとあらわれ、フォームの外をクリックするとすーっと消えます。 あまり使い慣れていない画面ではどうかと思いますが、検索窓のようにある程度何をするかわかっているところで、こうした「隠れ説明」が必要なときだけ出てくるというのも悪くないですね（少なくともちょっとした驚きがありました）。 場所にもよるかと思いますが、「必要なときには表示して、いらないときには隠しておく」というインタ
フォントの色と大きさと背景色の微妙な関係 December 26, 2006 10:00 AM written by 8maki 12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。 その24 waysから一つご紹介。 » 24 ways: Cheating Color フォントの色と大きさと背景色についてのTipsです。 わかりやすく例を出していきましょう。 架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。 ■ 薄い背景に明るいフォントの場合 さて、下に2つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 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.0っぽいデザイン」の次を考えてみました。 名づけて『Web 2.1のデザインパターン』ｗ。 個人的には「角丸の次って何よ？」と常々思っていたので、最近新しく出てきたサイトに共通するいくつかの特徴をまとめてみました。 かな～り主観なので「そうかぁ？」と思われる方もいらっしゃるとは思いますが・・・間違いを恐れずにメモ書き程度にエントリーです。 では早速。僕が感じている「次っぽいデザイン」の特徴は4つ。 【1】 極太ストライプ（Bold Stripe） ストライプはWeb 2.0っぽいデザインでも流行っていますが、それをもちょっと太くしたやつを最近よく見ます。 ↑ タイトルと背景が太いストライプに。 ↑ 細いストライプはWeb 2.0っぽかったですが、最近はちょっと太めが流行りかな。 【2】 極太枠線（Bold Borde
かわいらしいミニサイズのアイコンを配布しているBrand Spanking Newのサイトで一足早いクリスマスプレゼントが配布されていました。 113の超ミニアイコンです。サイズは10×10。かわいらしいすね。 これらを使ってなんかのアプリ作っちゃおうかな。携帯アプリとかいいかも。 ダウンロードは下記のサイトからどうぞ。 » HoHoHo! （mini Icon 2） また、Mini Icon 2とうたうからには他にもあります。よろしければどうぞ。どれもいい感じっす。 » Doc Type Icon » Mini Icon Pack 1
退会後のアカウントはどうなる？のまとめ December 7, 2006 4:07 AM written by Ryuhei So これだけネットの利用が日常的になると、よく使うサービスのアカウント名が自分を表す別名として機能してきます。 ただ、このアカウント名が退会後にどうなるか気になったことはありませんか？ 自分（と他の人）が慣れ親しんできたこのアカウント名を他の人が使うことができるのでしょうか？それとも永久にそのアカウントは使われないのでしょうか？ そこで今回はGmail、Hotmail、Yahoo!、Skypeの4つのメールサービスおよびメッセンジャーサービス、さらにBlogger、はてなダイアリー、Typepadの3つのブログサービスについて、自分の別名として機能していたアカウント名の退会後の取り扱いをまとめてみました。 ■ メールおよびメッセンジャーサービス 各サービスのヘルプ
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行をコードに加えるだけ。 <script src="http://bodytag.org/bt_melter/bt_melter.js" type="text/javascript"></script> するとbodyタグの中身全部に適用される。 なお、javascript自体はbodytag.orgからダウンロードできる。 日本語にも対応しているようなので、サイトにアクセントを加えるちょっとした小細工として使えそうですね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
