ありがたい事に配信開始から５ヶ月の2010年新年早々にフォロワーが1000人を突破いたしました。フォロワーの皆さん本当にありがとうございます。そしてこれからもよろしくお願いします。

さてTwitter的に言えばフォロワーが1000人というは特に多いわけでもないのですが、なんとなくキリが良いのでまとめてみようと思います。まずは初回というか、まとめ一発目なので経緯を。(実際にやってみた感想は次回)

そもそも何故Twitterでweb制作系のサイトやブログを紹介し始めたかというと、実は僕はとても自堕落な人間でして、自分でも本当にビックリするほどに。でも何かを作ったり誰かの役に立ちたいという気持ちは人並みにもっていまして、毎日のように怠け者の自分と相反する欲求を抱えて悶々としてました。

天性もなく勤勉でもない者がクリエイティブな活動をするほど不幸な事はありません。

本来ならば自分の守備範囲（webデザイナー）の話題を噛み砕いて紹介する事が一番なのですが、ここは当代きっての怠け者のこの私。あいにく人様に見て頂くほどのテクニックも知識も持っておりません。

そんな中「何か人様に見て頂いて恥ずかしくないモノは」と考えると「そういえば(僕は)結構多くのweb制作系のサイトを見ているんじゃないだろうか」と思ったわけです。

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

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

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

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

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

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

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
詳しく解説してくれています。

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

しばらくはネタリストに溜まったままの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以上のミニマルなカラースキームのウェブサイト

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

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

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

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

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

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

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

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

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

<div class="fximgcow"></div>

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

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

<div class="fximgcow"><img src="test2.jpg" alt="牛さんですよ" width="460" height="250" /></div>

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

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

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• [追記]CSSでロールオーバーをするときは
• [XHTML+CSS]CSS Spriteで表現する角丸

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

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

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

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• [フリー素材]20pxの小さいプリンターの画像
• [フリー素材] 小さいアイコン+α
• [フリー素材] ダウンロード用HDDアイコン
• [フリー素材] PDFの小さいアイコン

今更なんですが、久しぶりにTypeProjectのサイトをのぞいたら、1月14日に美しい日本語フォントAXISの試用版が1種類増えてたんですね。

TypeProject – 試用版ダウンロード

AXISといえばApple日本語サイトの見出しフォントや任天堂wiiなどで使われていることで有名ですね。

新しく加わったファミリーはAXIS Compressedという名前で正体に比べ横幅が60％弱になってるということで、ほっそりして可愛いです。情報を詰め込みたいときに使えそうですね。

チーフ！うちもこれ買いましょうよ！

関連する投稿

• [フリー素材]20pxの小さいプリンターの画像
• [フリー素材] 小さいアイコン+α
• [フリー素材] ダウンロード用HDDアイコン
• [フリー素材] PDFの小さいアイコン
• [フリー素材] CL Button Icon

携帯サイト Coding&Design
高木 悠介 (著)

この本は携帯サイト制作の入門書です。僕の仕事は今のところPC用サイトが中心なんで、差し迫って携帯サイトについて勉強しなければならないわけではないんですが、前々から携帯サイトの作り方には興味があったので今回この本を読んでみました。

この本の良いところは、僕のようなPCサイトはそこそこ作れてHTMLとCSSをある程度理解している人に対して書かれている事です。ですので、今までPC用サイトを含めwebサイトを作った事がない人にはちょっと敷居が高いかもしれません。

しかしwebサイトを作りなれてる人にとっては、PCサイトの作り方を例に出しながら携帯サイトの作り方を説明してくれるのでとても理解しやすいです。

また誰もが頭を悩ませるキャリア別の表示結果も3キャリアの実機の写真を用いて説明してくれるので、作りなれない間はそれを見るだけで実機確認が減り、無駄な時間を減らす事が出来るでしょう。

何より一番ありがたいのは、携帯サイトならではの文字の使い方のノウハウ。これはちょっとやそっと作ったくらいでは気づかない部分なのでそのページだけでもお金を出す価値があると思います。

興味が沸いた方は、一度アマゾンのレビューに目を通してみてはいかがでしょうか。

Amazon – 携帯サイト Coding&Design 高木 悠介 (著)

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 今風のグラデーションを使ったボタンを作る方法 – 基礎
• 今週のweb制作情報ランキング | WDS 04

ネタ元は有名所コリスさんのこれ
コリス CSS 一枚の画像で、四隅が角丸のパネルを実装するスタイルシート
そのネタ元はコリスさんの方から見れる。

私は最近DesignWalkerさんのエントリーを読んでからCSS Spriteに興味がありまして、自分の仕事の中で可能であればコッソリしこんでます。これ系のテクニックってよく使いながらも、総称のようなものを知らなかったので、知って目からうろこというかなんというか。でもこれ複数人でコーディングする場合は混乱を招く可能性があるんでそこは注意を。

これも有名所DesignWalkerさん。CSS Spriteの簡単な説明と利点。
DesignWalker CSS Spriteを活用しよう

でまぁ今回のネタについてはコリスさんを読んでいただくとして、これをテストしてみました。まず、Demo2をダウンロードして試した感想としては「こりゃ凄い！」という驚き。無駄なタグがない！。ありそうでなかった発想に脱帽。僕のようにjavascriotがまったく使えない人間でも、スライスしてDivをテーブルレイアウトの様に配置しなくても簡単に実現できる所が良いです。(他にもやり方ありますけどね)とりあえず日本語向けにCSSをカスタマイズしてみた。

Demo

こんな感じです。何処かで見たことがあるというか、はてな丸パクリですが、まぁお遊びということでお許しください。fontは僕の好みでh2のみメイリオです。で、これに使ってる画像はこれ一枚です。

実サイズの画像(448バイト)
画像次第でサイズを落とすことも可能でしょう。

で、ここで「やったー出来た出来た」と喜んでいたんですが、コリスさんのコメントを見るとどうやらIE5.5では崩れるらしい。まぁぶっちゃけ「Ie5.5は無視しよっかな・・・」と思ったんですが、とりあえず問題はPを背景として使うから生じるんだから、pのwrapを作って背景を指定すれば崩れないなと。(wrapper+inner否定派の方ごめんなさい)

で、Pを包んだ結果がこれ。

Demo2 ついでに画像も入れてみた。

Demo2の主なCSS

body, div, address, p, h2 { margin: 0; padding: 0;}

body { font: 100%/1.231 Arial, Helvetica, sans-serif;}

.contentbox {
width: 350px;
background: url(画像) no-repeat left bottom;
padding-bottom: 15px;
margin: 0 auto;
}

.contentbox h2 {
width: 320px;
background: url(画像) no-repeat left top;
padding: 0 15px;
font-family:"メイリオ";
color: #fff;
font-size:108%;
font-weight:bold;
line-height: 2;
height: 35px;
}

.contentbox p {
width: 318px;
background: url(画像) repeat-y right top;
padding: 10px 16px 0 16px;
letter-spacing: 0.1em;
line-height: 1.5;
font-size: 85%;
}

Demo2のhtml

<div class="contentbox">
<h2>タイトル</h2>
<div class="IE55"><img alt="" />

文章

</div>
</div>

IE5.5用にdivが一つ増えてる。もっと良い方法があるかも。

これならIE5.5でも崩れずに表示可能です。ただしIE Testerの5.5でしか確認してないんで、実機では不明。いけるかな？で、例のごとくソースが殴り書きなんで整理整頓せれてなくて汚いです。これだけの手間で角丸が使えてフレキシブルなら、常用できるテクニックだと思うんだけどどうでしょうか。

関連する投稿

• 横幅960pxのグリッドレイアウト
• 今週のweb制作情報まとめ | Web Design Scratch 01
• リキッドレイアウトの最大横幅を固定する-minmax.js
• [追記]CSSでロールオーバーをするときは
• [Webデザイン] 企業サイトの横幅はどれくらい？～住宅メーカー編～