Form Design フォームデザイン

さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。

そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。

流れ的には

• インスピレーションデザイン集
• CSSによるフォームの変更方法
• JavaScriptによるフォームデザイン

という感じでお送りいたします。

すごいとしか言い用がない。無性に紹介したくなった。

既に多くの方が知っている事は、なるべく紹介しないというのがスタンスなんだけども、今回ばかりはただただ紹介したい。

『プログラミング大会』というよりもMega Demo Partyだったらしいけど、そもそもメガデモを説明するのが面倒なのでプログラミング大会としておきましょう。

わずか4キロバイトのプログラムで作成された音と映像がＹｏｕＴｕｂｅでアップされ、話題を読んでいる。動画が以下です。

問題。これはいったい何をするものでしょうか。
いやーはじめて見た時は驚いて早くブログに書かなきゃー!ってなりました。

なにかと後で使えそうなエントリがありましたのでご紹介。
既に何度か見たことあるものもありましたが、まとまると見やすいですね。

すごすぎるよ！

ほんとギーク達の仕事っぷりはすさまじい情熱を感じますね。
63 Awesome Computer Case Modsという海外のエントリーが面白かったので思わず脊髄反射。

以下お気に入り10個を抜粋しております。

ギークって何！？っていうひとはこの記事の一番下でギークなお姉さんのべにぢょさんが語ってくれます。（YouTube）

design by Shinybinary v2.1 - Art and designs of Nik Ainley

3Dで飾られた色とりどりのデザインを堪能できるまとめエントリがありました。
まとめエントリの法では、デザイナーのデザインをある程度抽出してまとめてありますので、非常に参考になります。

今回は、その抽出されているデザイン以外を、いくつか気に入ったものがあったので同時にご紹介いたします。

おなかいっぱいになりますね。
ちょっとしたデザインのインスピレーションを受ける為に活用してはいかがでしょうか。

詳細は以下で。

すごい〜。
70個まとめた作者に敬意。
これは参考になりました。

日本国内でも、結構利用者の多い海外ブログ。
改めてよく見ると、なかなか細かいところまで作りこまれている事に気が付きます。

今回はそんな素敵ブログの、細かいところに焦点を当ててみます。

このデザインが、実は約8000万（79,302,017個）のイメージから作り上げたものだと言う事で驚きました。
面白かったのでさっそくご紹介。

15 Excellent Examples of Web Typography. Part 1 | i love typography
スマートなCSSとHTMLを使った15の優秀なウェブサイトという記事が人気を呼んでいる。

私も見させていただいたけど、すごい人はすごい。

A List Apart: A List Apartというウェブデザイナーの為のウェブサイトをお気に入りに追加してしまったくらい参考になる事があった。

そんな中カリフォルニア州立大学バークレー校の教授のブログがすごい事になっていた事に気がついた。

なにか不明なアドレスを入力されたとき、通常は404エラーとして、ページが表示できませんとかでる味気ないものだろう。

そんな偶発的な404エラーをデザインする達人達から、学べることは無いだろうか？
そんな達人達のページをまとめて紹介していたのはSMASHINGブログだ。

今回はその中からおすすめしたいものを抜粋してご紹介しますが、ぜひとも本家のブログで全てを見て回ると良いですね。

素敵なデザインのまとめエントリーがありました。


木目デザインのウェブサイトと、モノクロデザインのウェブサイトです。
ただただエントリーのみを紹介しておきます。

それにプラスして、非常に参考になるデザインエントリーも追加しておきます。

あくまでも静的デザインの噴出し。
浮き上がってくるアレではありません。

タイトルやコメント等、ちょっとした飾りに使ってみはいかがでしょうか？

今回もTUTORIALBLOGさんのまとめを、まとめました。
新たに追加されたピンク、イエロー、オレンジの配色サイトまとめ。
各３０サイトずつ９０サイトありますので、WEBデザインの参考にどうぞ。

前回まとめた『緑・赤・青・茶・黒』もあわせると240サイトのデザインを学べます。

これまで、統一カラーサイト３０選・緑、赤、青をシリーズで公開しているブログをご紹介してきましたが、さらに茶色と黒が追加された為、計150となりましたのでまとめてご紹介していきます。

様々な統一されたサイトのセンスやWebの形を盗み、それでも尚足りないと思う人もいるかもしれませんので、HTML＆CSSのフリーテンプレートサイト『OpenWebDesign』をご紹介しておきます。

書店に売っているデザイン参考書を読む前に、一度目を通しておいても損は（きっと）ないですよ。

Pictures of Geek Culture

マニアの芸術という画像集を見つけた。
私の会社の席の前に座っている彼はハードマニアです。
そんな彼が見て興奮していたので、記事に。

何気なく見ているだけで噴出しそうなものもありましたが、面白いことをする人もいるなぁと。中でも、ピアノを改造した人なんかはほんと尊敬します(笑)

詳細は以下です。

またまた海外で色シリーズを更新された。
勉強になりますね。

FC2blogrankingのWeb製作部門を見ておく人はこちら

30 Green Websites
こちらが緑のサイト３０。
記事本文を見ると･･･

Carrying on with the color websites series, today we take a look at green websites…

なにやら色のシリーズをやっているようだ。

赤色サイトも30サイト集めていらっしゃったので参考までに。


30 Red Websites

赤は色が強いだけに使い所が難しい。
それをサイト全体で表現されるというのは、これを見て非常に素晴らしいとおもいました。

私の中でのベスト

ここいいですねぇ。
コップの泡とろうそくの光にうっとりしてしまいました。

あのWINDOWSペイント・・・なのかどうかがよくわからないのですが、見た感じペイントを使って、上のような画像を作り上げてた動画。2時間半を5分で表示しています。
かなり勉強になりました。

その他鉛筆をつかったデッサン風景を2本。

見た目の印象が強かった海外サイト１０を選んでみました

筆者の独断と偏見で集めたサイトです。
ご参考までに。

いつかこういう素敵なサイトを作ってみたいという海外スタイリッシュデザインサイトのご紹介です。

FC2Blogrankingはこちら

30 Great Website Designs (Part1)
↑こちらで参照してください

関連エントリー

• 無料で使える画像を検索する『picfindr』の大まかな使い方


• WINDOWSペイントを使ってモナリザの絵を2時間半で描いた映像早送り＋鉛筆デッサン2本


• デザイナーは自分の欠点に目をつぶると、かえって長所が伸び悩む


• 心理トリック-人は見た目に思った以上に左右されてしまう


• 見た目に印象が残るインパクトのある海外１０サイトまとめ

前回photoshopのまとめを掲載したところ、設計や、デザインの仕事している取引先に大変評判が良かったんです。

考えてみると、実際にまだ私の周りには『はてな』を知っている人が意外と少ないことに気がつきました。ネットにどっぷりとつかって為、どこかで『はてなの記事を使わないようにしないとなぁ』なんて考えていたのかもしれません。

そこで今回は私の周りの人たちのために、はてなブックマークのエントリーからillustratorに関する記事をピックアップしてみることにします。

ホームページ作成、WEBデザインは、インターネットで作業を行うWEBデザイナー達にとって、いつも新しい『形』を探すためのキーワードとなっている。

これまで、様々なデザインの呼び名が存在しています。

まず基礎となるホームページの形

ボックス型

Ｆ型2カラム

3カラム式

と、大まかにこの３つが基盤として使用されている全体の形です。

Ｆ型2カラムについては、人はインターネットのＷＥＢサイトを見た時に、Ｆ字を描くように文字を見る為、その配置にメニューなどを入れる方法とされ、今では最も使われている手法。逆Ｆ型2カラムも人気です。

カラムとは、簡単に表すと縦列の数で、当サイトのような形を2カラムと言います。

ボックス型とは、中央に箱を作り、その中でのみ変動して閲覧するタイプです。コンパクトですが、情報量が少なくなってしまう為、現在のＳＥＯとの相性が悪く、最近あまり見かけ無くなりました。

そこにてきて、ＷＥＢ全体を支配するＣＳＳ（スタイルシート）の登場が、デザインを大きく変動させていきました。

さらにＷＥＢ２.０デザインなどという言葉も誕生。
世のＷＥＢデザイナーさんが勉強しなくてはいけない事がかなり増えてしまって、なかなか大変な世の中です。

そこで、簡単ですがＷＥＢ２.０デザインを、ステルスデザインとの定義を比べ、最も今使われている手法をまとめてみました。