スライダーでブログの過去記事を検索できるインターフェース | SiMPLE*SiMPLE
スライダーでブログの過去記事を検索できるインターフェース August 23, 2007 5:30 AM written by Gen Taguchi Save the assistants.comのブログのインターフェースがちょっと気になります。過去記事へのアクセスをスライダーで行うことができるのです。 ↑ こんな感じ。Ajaxな感じで、スライドさせると動的にページをロードしてくれます。 「次のページ」「1 > 2 > 3 >」といったインターフェースより直感的でよいですね。 » save the assistants Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
スクロールしても消えないドロップシャドウの作り方 July 30, 2007 4:40 PM written by Gen Taguchi メモ書きもかねてエントリー。ページをスクロールしていってもページの上や下にドロップシャドウを貼り付けておく方法。 ↑ このようなドロップシャドウですが・・・。 ↑ スクロールしても付いてきます。 サイトに立体的な効果をつけたいときに使えそうですね。いろいろ応用も利きそうです。 なお、PNGの透過部分を使っているのでInternet Explorerでは動きません。実際に動いているデモはこちらから。 詳しい作業ステップは以下のサイトからどうぞ。 » Scrolling Drop Shadows | Zooiblog Info: デザイン全般 | 固定リンク | コメント (0) | トラックバック (2) | ↑ この記事のトラックバックURL （
本文の下のほうをFade Outしてフッターを際立たせる方法 | SiMPLE*SiMPLE
本文の下のほうをFade Outしてフッターを際立たせる方法 May 9, 2007 8:08 AM written by 8maki fortuitousというブログには、ちょっと楽しい小細工が。 本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。 ちょっと実現方法がユニークなので皆さんも考えてみてください。 実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。 なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。 たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。 » fortuitous ■ 追記（2007-05
小粋なインターフェースを実現する25のコード （パート4） | S i M P L E * S i M P L E
先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 小粋なインターフェースを実現する25のコード （パート3） 今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。 新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)
小粋な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種類。 タブでのナビゲーションを実現したり、インラインでの編集を可能にしたり、☆での評価ができたり、先進的なウェブでよく見るインターフェースばかりですね。 ただ、このサイトがすべて準備したわけではなくて、それぞれ他のサイトへのリンクになっています。 おっと、リンク集かよ・・・
フォームの入力値チェックをしてくれる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
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
クールなアクア風ボタンのベクトルデータが無料で72個！ | SiMPLE*SiMPLE
クールなアクア風ボタンのベクトルデータが無料で72個！ すぐに使えそうなアクア風ボタンのベクトルデータが無料で公開されています。イラストレーターなんかで編集すればぱっと使えそう。 » 72 Free Vector Glass Buttons and Bars ファイル形式はAI、PNG、EPS、SVG。環境にあわせて必要なものを使うとよいでしょう。ただ手元のIllustrator 10ではAIが開けなかった・・・最新版じゃないとだめなのかな。 どちらにしろこういうベクトルデータの公開はうれしいですね。 CS3 で開けたので試しに Illustrator 10 形式で保存し直したところ、警告メッセージは出ますが特に何かが劣化するようには見えませんでした。(見落としているかもですけど) CS3 を持ってる人を探してファイル形式を変換してもらうと良いかもしれません。
いらないときは隠すインターフェース | SiMPLE*SiMPLE
いらないときは隠すインターフェース January 11, 2007 8:00 AM written by watanabe シンプルさを追求するには、削れるものをそぎ落としていく作業と同時に、きちんと意味が伝わるような工夫が必要なのかなと思います。 そういう意味で、シンプルなスペルチェッカーspellifyは参考にできそうです。 ↑ 画面には、フォームしかありませんが・・・ ↑ フォームをクリックすると使い方の説明がすーっとあらわれ、フォームの外をクリックするとすーっと消えます。 あまり使い慣れていない画面ではどうかと思いますが、検索窓のようにある程度何をするかわかっているところで、こうした「隠れ説明」が必要なときだけ出てくるというのも悪くないですね（少なくともちょっとした驚きがありました）。 場所にもよるかと思いますが、「必要なときには表示して、いらないときには隠しておく」というインタ
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
『ウェブ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
1997年から2006年までのGoogleトップページの変遷まとめ | SIMPLE*SIMPLE
Google創業から8年が経ちましたが、トップページも少しずつ変わってきました。シンプルなサービスが人気ですが、Googleは最初から今のようにシンプルだったのでしょうか？ その変遷がこちらにまとめてありましたので、simple*simple的視点からちょっとご紹介。 まず、97年から98年の初期にかけて。 ↑ 見覚えのない（懐かしい？）ロゴ。「!」マークつきです。tableの背景色を使って色分けがされています。この頃はまだURLがgoogle.stanford.eduだったようで。 つぎに、98年。 ↑ 色使いも増え、企業情報やGoogleのロゴのページへのリンクなども。このロゴは、創業者のサーゲイ氏がGIMPで書いたものらしいです。 そして、99年。 ↑ ロゴと検索窓のシンプルなカタチになりました。でも“search the web using Google”という説明書きは残していま
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ページを開く
