小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
小粋なインターフェースを実現する25のコード - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
まとめ系エントリーが続きますが、ウェブ職人のためのネタ帳を目指しているのでご容赦くださいませ・・・。 さて、25 Code Snippets for Web Designersなる記事をご紹介。角丸やら噴出しやら、CSSでのグラフなどなど、すぐに使える小技がたくさんです。 ちょっとサイトにスパイスを・・・というときに眺めると便利ですね。このサイトで既に紹介したものもいくつか含まれていますね。よろしければ。 » 25 Code Snippets for Web Designers (Part1) Part 1なので続編もありそうですね。続編が出たらまたお知らせします。
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) | トラックバッ
Error 404 - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
グリッドレイアウトのためのちょっと便利な背景画像 March 8, 2007 9:42 AM written by Gen Taguchi 情報をきれいに配置するためのグリッドレイアウトは大事ですよね。その資料がいろいろまとまったサイトでちょっと便利そうな背景画像を紹介されていました。 » Web Page Layout Grid | Smiley Cat Web Design テストの時にはこれを使うと便利かもですね。スタイルシート的にはこんな感じかな（ファイル名は適当に変えてくださいな）。 body { margin: 0; padding: 0; background:transparent url(/images/background-grid.gif) repeat 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
CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E
※ 下記の記事に誤りがありました。謝罪＆修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。
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
タグクラウドの表現はどうあるべきか？ | SiMPLE*SiMPLE
タグクラウドの表現はどうあるべきか？ December 26, 2006 9:26 AM written by watanabe GiftTaggingのタグクラウドが綺麗です。タグクラウドって便利そうだけどあんなに文字が並んでもねぇ・・・という方は参考にされてはいかがでしょうか。 ↑ タグを本当の「タグ」で表現してみました。 ↑ タグづけの表示にも、タグのアイコンが。 タグクラウドはまだ出てきたばかり。どんな表現手法が良いか、貪欲に試行錯誤していきたいですね。「タグ」を直感的に「タグ」とわからせるこうした手法もいいのではないでしょうか。 ちなみに元ネタはこちら。37signalsのこのブログでは「Screens aroud town」というコーナーがあって、参考になります。Simple*Simpleでも今後とりあげていきたいと思います。 » [Screens around town] F
『ウェブ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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
