Commit Lab » Web Design

以前から日課としてRSSを1日500前後ほど読んで、そして後々参考になりそうなブログ記事をはてなブックマークで保存して歩くという行為を繰り返していました。ヘビーブックマーカーからしてみればRSSの消化が1日500前後というのは特に多くなく、普通の人からしたら暇人と思われる程の中途半端な数字ではありますが。

これをはてブとは違う形で吐き出す事で、誰かの役にたてないだろうか。もっと言えば「存在しなくても困らないが、存在してればそれに超したことは無い」という小さな存在感を示せないだろうかと思ったのです。

そんな中、ちょうど僕はその頃Twitterにはまっていまして「それなら僕のはてブをTwitterの人たちに見てもらおうか」と思ったのです。

とてもお粗末ではありますが、こうしてtwitterでのweb制作系ブログの紹介が始まりました。

長くなったので続きは Twitterで６ヶ月間web制作情報を配信してみたまとめ編として分割します。

フォント･クラウド？Typekitを試してみた。

しるべっと — Fri, 13 Nov 2009 16:06:33 +0000

今巷でやんわり話題のtypekitを試してみました。typekitとは@font-faceを簡単に利用することが出来るサービスです。@font-faceとはCSSに記述する事で

Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。mozilla developer center @font-face – MDC

という事になります。従来ならデザインされたフォントを使った見出しなどは画像で作っていたのですが、これによってテキストで表現出来るようになります。

しかし新しいブラウザでしか表示できなかったり、フォントの権利問題などによりなかなか使用しにくいものでした。

今回試したtypekitは権利周りがクリアなフォントを簡単に@font-faceとして使用できるというサービスです。

プランは無料のものから用意されており、気軽に使用出来るようになっています。(無料版はサイト右下にtypekitのバナーが出現)

ちなみに無料のTrialだと69種類(現在)の欧文フォントの中から２種類のフォントが利用できます。日本語のブログだと欧文フォントは２種類で十分な場合も多いのではないでしょうか。(残念ながら日本語フォントはありません)

設定も簡単で、typekit側が用意したJavaScriptのコード２行をheadに書き込んで、後はtypekit editerから反映させたいセレクタを指定するだけ。今回はブログタイトル(h1)とサイドバーの見出し(h3)に指定してみました。本当に10分くらいで作業が終了。

使用前

使用後

たった数分でこんなにも見出しの印象が変わりました。しばらくこのまま使ってみようと思います。

参考
typekit
TypeKit で広がる Web デザインの可能性 | WWW WATCH
詳しく解説してくれています。

650+のよりシンプルでミニマルなwebデザイン

しるべっと — Mon, 09 Nov 2009 09:28:31 +0000

お久しぶりです。ここ数ヶ月はTwitterやゲームで遊んでばかりで、ブログのことをすっかり忘れていました。今後は肩の力を抜きつつ、初心に戻ってぼちぼち更新していきたいと思います。

しばらくはネタリストに溜まったままのWebデザイン系ブログ記事のまとめや、日記が多くなると思いますがよろしくお願いします。

今回は海外のミニマルなwebデザインのまとめです。まずミニマルとは。

ミニマリズムとは美術・建築などの造形芸術分野において、1960年代のアメリカに登場し主流を占めた傾向、またその創作理論であり、最小限（Minimal)主義（ism）から誕生し、必要最小限を目指す手法である。
ミニマル – Wikipedia

必要最小限のデザインということで、シンプルなイメージとタイポグラフィのバランスが大切になってきます。

タイポグラフィが大切といえば、先日モジックスZeroジャンキーさんがまとめられた”ウェブデザインの95％はタイポグラフィ”というエントリーも参考になるかもしれません。

＜インフォメーションデザインとは、タイプフェースの善し悪しを論じることではありません。タイポグラフィの善し悪しの話なのです＞。

＜優れたウェブデザイナーであれば、テキストを単なるコンテンツとしてだけではなく、ユーザーインターフェイスとして扱うことを知っているはずです＞。

ウェブデザインの95％はタイポグラフィ – Zopeジャンキー日記

詳しくは引用元を読んでいただくとして、このような考え方こそが素晴らしいミニマルデザインのサイトを作る近道なのかもしれないですね。

40 Killer Minimalist Blog Designs

40人のミニマリストのブログデザイン

100+ Clean, Simple and Minimalist Website Designs
100+のシンプルかつミニマルウェブサイトのデザイン

60+ Beautiful Websites Showcasing Minimalist Design
60以上のミニマルデザインの美しいウェブサイトです

Webdesign Trend Hunting – 27 Bright Websites Using Popping Colors | Inspired Magazine
ポップな色を使った27のウェブサイトです。明るい色を使ったミニマルなサイト集

35 Marvelously Minimal Websites | Design Shack
35の驚くほどミニマルなウェブサイト

minimalsites | minimal design website gallery
ミニマルなデザインのウェブサイトを集めたウェブサイト。

10 Super-Simple Web Designs | Web Design Blog
とてもシンプルな10のウェブサイト

20 Light Minimalistic Website Designs
20のライトなミニマルなウェブサイト

70 Typographic, Clean And Minimalist Color Scheme Web Designs
70のクリーンでミニマルなカラースキーム(色彩設計)のウェブサイト

35 Beautiful Minimal Websites – Part 6 | Vandelay Design Blog
35の美しいミニマルなウェブサイト

40 Beautiful Examples of Minimalism in Web Design
40のミニマリズムなウェブデザインの美しい例

40 Stylish, Minimal and Clean Free WordPress Themes : Speckyboy Design Magazine
40のスタイリッシュでミニマルでクリーンなWordpressのフリーTheme

20 Examples Of Dark & Minimalist Website Designs With Great Typography | Spyre Studios
20のダークでミニマムな素晴らしいタイポグラフィのウェブサイト。

50 Minimal Sites | Web Designer Wall
50のミニマルなウェブサイト。

35+ Websites with Minimal Color Schemes | Vandelay Design Blog
35以上のミニマルなカラースキームのウェブサイト

2009年6月のwebデザインショーケースのまとめ

しるべっと — Tue, 09 Jun 2009 04:08:52 +0000

deviantARTからの感銘を受ける30のデザインレイアウト

30 Inspiring Web Design Layouts from deviantART

40以上の美しいポートフォリオ

Web Designer Help » Over 40 Beautiful Portfolios

人気のあるwebデザインのトレンド

A Showcase of Popular Web Design Trends | My Ink Blog

50以上のオフィス用品を使った美しいwebデザイン

50+ Beautiful Website Designs Using Office Stationery | Showcases | instantShift

25の教育機関に相応しいwebサイト

25 of the Best Websites for Educational Institutions | Vandelay Design Blog

30の自然からインスパイアされた美しいwebデザイン

30 Beautiful Web Designs Inspired by Nature

webデザインにおいてのミニマリズムの美しい例40

40 Beautiful Examples of Minimalism in Web Design

50の素晴らしいwebサイト

50 great websites designs for your inspiration | Design daily news

35の教会のwebサイト

35 Amazingly Well-Designed Church Websites | Spyre Studios

40の素晴らしいNPOのwebサイト

40 of the Best Websites of Non-Profit Organizations | Vandelay Design Blog

とりあえず今日はここまで。
ちなみに日本のサイトのお勧め実例集はこちらです。
実例だから使える「ウェブデザイン見本帳」 | Commit Lab

ウェブデザイン見本帳実例で学ぶWebのためのレイアウト基礎

著者／訳者：オブスキュアインク

出版社：MdN( 2008-11-21 )

定価：￥ 2,625

Amazon価格：￥ 2,625

大型本 ( 160 ページ )

ISBN-10 : 4844360167

ISBN-13 : 9784844360162

そういえば今月のweb creatorsが

しるべっと — Fri, 08 May 2009 02:54:12 +0000

お久しぶりです。暇っちゃー暇だけどkillzone2で忙しい僕です。そういえば今月のweb creatorsの特集が、前回(先月)紹介したウェブデザイン見本帳の簡易版のような感じでいい見本になると思います。

双方とも装丁が同じ青系の色で、正方形を取り入れたデザインなんで意識して合わせてあるのかなと。とりあえず安い本ではないので、興味がある方はweb creatorsの6月号を読んでみてはいかがでしょうか。

ブログの方は書きかけのエントリーは何本かあるのですが、中々書ききることができません。まぁぼちぼち更新していこうと思ってますので、不定期ですがどうぞ宜しくお願いします。

CSSで簡単に画像をリキッドな表現に

しるべっと — Wed, 04 Mar 2009 14:50:55 +0000

リキッドデザインをするならやっぱり画像も伸び縮みしたほうが良いよね。文字だけフレキシブルだとスペースをもて余したりすることもあるし、何より横幅が広がるほど文字が読みにくくなるしね。

って事で足りない頭を使ってCSSで考えてみた。

.fximgcow {
background: #fff url(test1.jpg) no-repeat center;
height: 250px;
text-align: center;
}

よし！これで画像もリキッドだ！・・・divの中身が無いけどね・・・
htmlだけじゃ画像かどうか解らないし、さすがにこれはちょっとなぁ。
そうだ！こうしたら空タグじゃなくなる！

.fximgcow {
background: #fff url(test1.jpg) no-repeat center;
height: 250px;
text-align: center;
}

demo
うん、なんとかやりたかった事は表現できた。なんか不必要なdivがあるような気がするがきっと気のせいだ。でも1つの画像の為に2種類の画像を読み込んでるってのは重さが心配。しかもよくよく考えたら、画像を使ったサイト全体のフレキシブルな背景を作る方法とまったく同じだった。

でもこれワンポイントでならサイズ次第で使えるような気がしたりしなかったり。画像が少ないページならアリかな。ただいま当ブログでは[これはひどい]をお待ちしております。

フリーで商用可の高機能メールフォームcgi

しるべっと — Sat, 07 Feb 2009 05:58:01 +0000

以前取り上げた事がある、フリーで商用可能!!しかも著作権表示も無しで使えるSYNCK GRAPHICA/札幌さんの高機能版メールフォームが先月アップデートしてました。機能など詳しくはメールフォームプロ CGIでご確認を。

サンプルを見ればわかると思いますが、「えっ？マジでこれ無料で使っていいの？」というレベルです。そもそも利用規約からして超男前です。今一番儲かって欲しい会社ランキング第1位です。

SYNCK GRAPHICAさんは他にも簡易版メールフォーム(むしろこれでも十分)やダウンロードログCGI,RSS掲示板など、多くのフリーCGI&javascriptを配布しているのでオススメです。

Commit Lab » Web Design

カワイイ or カッコイイ 雑貨屋さんのWebデザイン:19選

ゲームソフトのクールなWebサイト:10個

女子のための情報サイトデザイン21+4