デザイン全般 Archive

Facebookネタ。

Facebookでは友達にメッセージを送る時にURLを入れると自動的にそのサイトの簡単な説明を文末につけてくれます。しかもその説明に使う画像をサイト内から引っ張ってきてくれます。

↑ メッセージ中にURLを入れるとこうした画面に。

↑ 実際に送られるメッセージ。こういう風に見えます。わかりやすい。

引用したサイトのタイトルとメタタグを引っ張ってきているようですね。単にURLが書かれているとそこをクリックするかどうか迷いますが、こうして説明がついていると良いですね。

良くできているなぁ・・・。

» Facebook | Compose New Message （要ログイン）

メモ書きもかねてエントリー。ページをスクロールしていってもページの上や下にドロップシャドウを貼り付けておく方法。

↑ このようなドロップシャドウですが・・・。

↑ スクロールしても付いてきます。

サイトに立体的な効果をつけたいときに使えそうですね。いろいろ応用も利きそうです。

なお、PNGの透過部分を使っているのでInternet Explorerでは動きません。実際に動いているデモはこちらから。

詳しい作業ステップは以下のサイトからどうぞ。

» Scrolling Drop Shadows | Zooiblog

お引越し支援サイトのmoveme.comのエラーメッセージがちょっと変わっています。

普通エラーがあると赤い文字で「正しく入力してください」とか、フォームの枠が赤くなったりしますが、このサイトではフォーム自体が左右にブルブルと震えてエラーだということを教えてくれます。

↑ テキストボックス自体が横にブルブル震えますｗ。

ちょっとかわいいですね。実際の動作は以下からどうぞ。

» moveme.com – the site that makes moving simple

シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。

• 小粋なインターフェースを実現する25のコード
• 小粋なインターフェースを実現する25のコード （パート2）

今回も全部で25個ありますが、気になったものをいくつかピックアップ。

↑ Flickrのようにクリックするとその場で編集できるようにする方法。

↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。

↑ CSSだけで上のようなボタンを作る方法。

↑ CSSだけでリストをこのようなツリーのようにする方法。

全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。

» 25 Code Snippets for Web Designers (Part3)

「小粋なインターフェースを実現する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なので続編もありそうですね。続編が出たらまたお知らせします。

情報をきれいに配置するためのグリッドレイアウトは大事ですよね。その資料がいろいろまとまったサイトでちょっと便利そうな背景画像を紹介されていました。

» Web Page Layout Grid | Smiley Cat Web Design

テストの時にはこれを使うと便利かもですね。スタイルシート的にはこんな感じかな（ファイル名は適当に変えてくださいな）。

body {
  margin: 0;
  padding: 0;
  background:transparent url(/images/background-grid.gif) repeat 0 0;
}

↑ コードを書くとつっこまれやすいのでちょっと怖い・・・が、勉強だと思って晒しておきます。

これを配置しておけばちょっと新しいパーツを作りたいときに簡単にサイズの見当をつけられたりするかもですね。

グリッドレイアウト（グリッドシステムって言うのかな？）に関するほかの資料はこちらをどうぞ。

» Grid systems in Web Design

■ 追記（2007-03-08）

あきやんがこれのブックマークレットを作ってくれました・・・便利かも。素敵。よろしければどうぞ！http://www.akiyan.com/cgi/mt/mt-tb.cgi/330

» グリッドレイアウトブックマークレットを作りました : akiyan.com

テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。

細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ（CSSとJavascript）で実現できます。ダウンロードもできます。

» Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS

応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。

個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。

setTimeoutとかこう使うのねー、と読みときながら、これを元にいろいろなエフェクト作成にチャレンジしてみてはいかがでしょうか。

以前読んだ三宅氏のコラムに、こんなことが書いてありました。

最近書き込まれた記事は普通に表示されるのに対して、古い記事になればなるほどフォントの色がセピア色にあせていき、最後には記事が消えてしまう機能があればいいかもしれない。

この記事での文脈とはちょっと違うかもしれませんが、指定したURLのFaviconを画像に自動変換できるFavicon APIでは、そんなアイデアの一つの実装例を見せてくれているのではないでしょうか。

» Favicon API

ここの「最新の20件」のところにご注目。

↑ 過去のものがだんだんかすれていってます。

「下にいくほど過去のもの」とは頭ではわかっていますが、かすれてくれると視覚的にわかりやすいですよね。ぱっと見たときの情報量も減らせますので、シンプル化もできてよさそうです。

タグクラウドではないですが、これまで何気なく同じレベルの情報として並べていたものに、さりげなく強弱をつけてみてはいかがでしょう。

» Favicon API

拡大縮小しても画質が劣化しないベクターデータは何かと便利です。

Tutorial Blogで無料で使えるベクターデータを配布しているサイトが紹介されていました。全部で27あります。

ふきだし風のパーツやアクア風のボタン、国旗やトランプなど、さまざまな用途に使えそうです。

↑ こうしたサイトデザインに使えるようなものや・・・。

↑ ちょっといいのかな、これ？というものとか・・・。

↑ 自分ではとっても作れなさそうなやつとか・・・。

形式はAIやSVG、PDFなどさまざまですね・・・それってただのアイコンでベクターデータではないのでは？というのも若干混じっていますがそこはご愛嬌。

よろしければ下記サイトからどうぞ。

» Free Vector Downloads – Photoshop Tutorial