Archive for the ‘ デザイン全般 ’ Category
「画像なしでのまとめサイト紹介」シリーズ第二弾。
以前紹介したものもありますが、やっぱりまとまっていると便利なのでご紹介。
アイコンまとめサイト18選です。
» Collection of Sites Providing Free Web Icons and Buttons
キュートなアイコン満載です。ライセンスをご確認の上、ご利用ください。国旗のアイコンとか見るとなんかウェブサービス作りたくなりますね・・・。
さきほどのチュートリアルとあわせて、サイトを作るぞ、というときに知っておくと便利ですね。
こ、これはかなり使えます・・・。
が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。
『Web2.0風デザインのためのチュートリアル68選』です。
» Web 2.0 Webdesign-Tutorials | Dr. Web Weblog
以下の7つのカテゴリーにわかれています。
サイトをこれから作るぞー、という人には大いに参考になる素晴らしきチュートリアルかと思います。
個人的には1、2、12、13、40、41あたりが好きですね。今後使えそう。
しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ？」と思われがちですし、そうはいっても速報性は大事にしたいし・・・。
ただ、一つ言えるのはこのページを作った人はこれを広めたいと思って書いているわけで（かな？ですよね？）、その人の立場で考えると、自分のコンテンツがたとえそのままだったとしても日本語で紹介されるだけでかなりうれしいのではないかな、と思ったりもします・・・（※）。個人的な意見ですが・・・。
» Web 2.0 Webdesign-Tutorials | Dr. Web Weblog
■ 追記（2007-02-20 11:15)
※ ちょっと追記。「自分のコンテンツがたとえそのままだったとしても日本語で紹介されるだけでかなりうれしいのではないかな」というのはちょっと意図するところと違いました。自分のコンテンツまったくそのままでは微妙ですね。自分のコンテンツ＋コメント、がうれしいですよね。
「コンテンツそのまま」というのは使われている画像や動画という意味でした。自分のコンテンツを引用してもらうときに自分が作った画像を使ってもらうのはコメント付で紹介してもらうなら良いかな、と思ったのでした。
画像なし紹介記事を書きたかったので画像のことを考えすぎていて言葉足らずになりました。訂正しておきます。
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="height: 17px; left: 0px;">17</li> <li class="p1" style="height: 99px; left: 40px;">99</li> <li class="p2" style="height: 74px; left: 40px;">74</li> <li class="p3" style="height: 54px; left: 40px;">54</li> ... </ul>
ちょっと見栄えの良いページを作りたい人にはおすすめです。よろしければ。
今までいろいろなToDoリストを見てきましたが、Zirr.usのインターフェースはちょっと斬新。ToDoをタグクラウドで表現しています。なるほど、という組み合わせですね。
» Zirr.us
↑ 優先度によってサイズが変わり、タグによって色分けされるという寸法。
↑ 名前や日付、優先順位でタグクラウドのソートもできます。
タグクラウドの表現はどうあるべきか？というエントリーを最近書きましたが、タグクラウドの応用についても考えられそうですね。
ToDoを大きさで分類すると言う意味では百式管理人考案のバブルマップにも似ていますね。
» バブルマップのすすめ ～ ストレスすっきり解消型ToDo管理手法 ～
登録も無料ですし、操作もAjaxで快適なので気になる人はちょっと試してみては・・・（ただ、日本語が通らないのですが・・・）。
» Zirr.us
12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。
その24 waysから一つご紹介。
フォントの色と大きさと背景色についてのTipsです。
わかりやすく例を出していきましょう。
架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。
■ 薄い背景に明るいフォントの場合
さて、下に2つのロゴがあります。
左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしています。しかし、テキストの色が薄すぎるように思えませんか？
そこで右のロゴをご覧ください。社名とテキストの色が同じように見えると思います。しかし、実際にはここでテキストの色は社名より濃いものを使っています。
↑ 左は両方「#6699CC」。右は社名に「#6699CC」とテキストに少し濃い「#4477BB」を使っています。
このように背景が薄い色でフォントが薄い色の場合は、小さいフォントは濃い色にする必要があります。
■ 薄い背景と濃いフォントの場合
次に濃いフォントの場合はどうでしょう。下記の左のロゴのテキストの色は社名と比べて濃すぎるように思いませんか？
そこで右のロゴのテキストは社名よりも薄い色を使ってみました。社名と同じ色のように見えないでしょうか。
↑ 左が「#330000」。右は社名に「#330000」とテキストにそれより薄い「#550000」を使っています。
このようにフォントが濃い場合は、上記の薄い場合と反対に小さいフォントに薄い色を使う必要があります。
■ 濃い背景の場合
さて、今まで薄い背景の場合を見ました。では濃い背景の場合はどうでしょう。
下記のフォントは「薄い背景に明るいフォントの場合」で使ったものと同じものの背景を濃くしたものです。
ご覧の通り、上記では右のロゴの方が統一感がありましたが、今回の右のロゴはテキストの色が濃すぎるようです。
↑ 左の方が社名とテキストの色が同じように見えます。
ここからわかるように濃い背景の場合は、社名とテキストの色を変えない方が良いことがわかりました。
このようにRGB値が同じでも背景やフォントの大きさ、組み合わせる色が異なればその色が持つ印象も変わってきます。ある要素が変わればまた違う色の組み合わせが必要となってくるのです。
» 24 ways: Cheating Color （24 waysでは他にも役立つTipsがたくさんあります。よろしければどうぞ！）
色を決める際はマニュアルを鵜呑みにせず、実際に自分の目と頭で確かめるほうが大切なのかも知れませんね。
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。
Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。
15の項目でまとめられていますね。
それぞれの項目は画像などの事例つきで詳しく説明されていますね。なかなか参考になります。
で、最後まで読んだときに「あぁ、このサイトも確かにそうだな・・・」と気付きました。綺麗なサイトですものね。そう思ったので衝動的にエントリー。
あなたのサイトもこのリストにあわせてチェックしてみては。
■ 関連記事
このブログはクラウド時代のレンタルサーバー、EX-SCALEによってホストされています。
