スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン
さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。
そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。
流れ的には
- インスピレーションデザイン集
- CSSによるフォームの変更方法
- JavaScriptによるフォームデザイン
わずか4000バイト（4000文字）で作られた3分35秒の映像プログラム
すごいとしか言い用がない。無性に紹介したくなった。
既に多くの方が知っている事は、なるべく紹介しないというのがスタンスなんだけども、今回ばかりはただただ紹介したい。
『プログラミング大会』というよりもMega Demo Partyだったらしいけど、そもそもメガデモを説明するのが面倒なのでプログラミング大会としておきましょう。
わずか4キロバイトのプログラムで作成された音と映像がＹｏｕＴｕｂｅでアップされ、話題を読んでいる。動画が以下です。
世界のユニークな商品アイデア
30の無料で高品質なアイコン・イラストPSDファイル
ギーク達の飽くなき狂気なパソコンケースいっぱい＋軽くギーク特集
すごすぎるよ！
ほんとギーク達の仕事っぷりはすさまじい情熱を感じますね。
63 Awesome Computer Case Modsという海外のエントリーが面白かったので思わず脊髄反射。
以下お気に入り10個を抜粋しております。
ギークって何！？っていうひとはこの記事の一番下でギークなお姉さんのべにぢょさんが語ってくれます。（YouTube）
クオリティの高いグラフィックデザイン色々
design by Shinybinary v2.1 - Art and designs of Nik Ainley
3Dで飾られた色とりどりのデザインを堪能できるまとめエントリがありました。
まとめエントリの法では、デザイナーのデザインをある程度抽出してまとめてありますので、非常に参考になります。
今回は、その抽出されているデザイン以外を、いくつか気に入ったものがあったので同時にご紹介いたします。
浴びるほど刺激的で素敵なデザインが襲ってくる『DesignFlavr』
華麗なヘッダーを持つ70サイト
細かいところまで素敵なデザインのブログ5つ
日本国内でも、結構利用者の多い海外ブログ。
改めてよく見ると、なかなか細かいところまで作りこまれている事に気が付きます。
今回はそんな素敵ブログの、細かいところに焦点を当ててみます。
約8000万ものイメージから作り上げた一つのイメージ
カリフォルニア大学バークレー校の教授のブログデザインがすごいことに
15 Excellent Examples of Web Typography. Part 1 | i love typography
スマートなCSSとHTMLを使った15の優秀なウェブサイトという記事が人気を呼んでいる。
私も見させていただいたけど、すごい人はすごい。
A List Apart: A List Apartというウェブデザイナーの為のウェブサイトをお気に入りに追加してしまったくらい参考になる事があった。
そんな中カリフォルニア州立大学バークレー校の教授のブログがすごい事になっていた事に気がついた。
404エラーをデザインする為のインスピレーション
なにか不明なアドレスを入力されたとき、通常は404エラーとして、ページが表示できませんとかでる味気ないものだろう。
そんな偶発的な404エラーをデザインする達人達から、学べることは無いだろうか？
そんな達人達のページをまとめて紹介していたのはSMASHINGブログだ。
今回はその中からおすすめしたいものを抜粋してご紹介しますが、ぜひとも本家のブログで全てを見て回ると良いですね。
木目デザインとモノクロデザイン20サイトとデザインの参考になる45のウェブサイト
素敵なデザインのまとめエントリーがありました。
木目デザインのウェブサイトと、モノクロデザインのウェブサイトです。
ただただエントリーのみを紹介しておきます。
それにプラスして、非常に参考になるデザインエントリーも追加しておきます。
木目デザインのウェブサイトと、モノクロデザインのウェブサイトです。
ただただエントリーのみを紹介しておきます。
それにプラスして、非常に参考になるデザインエントリーも追加しておきます。
CSSとJavaScriptで飾りつけする吹き出し風デザイン
WEBデザインまとめ２。カラー統一された９０サイト−ピンク・オレンジ・イエロー
今回もTUTORIALBLOGさんのまとめを、まとめました。
新たに追加されたピンク、イエロー、オレンジの配色サイトまとめ。
各３０サイトずつ９０サイトありますので、WEBデザインの参考にどうぞ。
前回まとめた『緑・赤・青・茶・黒』もあわせると240サイトのデザインを学べます。
WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト＋2200以上の無料HTMLテンプレ
これまで、統一カラーサイト３０選・緑、赤、青をシリーズで公開しているブログをご紹介してきましたが、さらに茶色と黒が追加された為、計150となりましたのでまとめてご紹介していきます。
様々な統一されたサイトのセンスやWebの形を盗み、それでも尚足りないと思う人もいるかもしれませんので、HTML＆CSSのフリーテンプレートサイト『OpenWebDesign』をご紹介しておきます。
書店に売っているデザイン参考書を読む前に、一度目を通しておいても損は（きっと）ないですよ。
おもしろ！Geek達の芸術・・・パソコンを改造した成れの果て
Pictures of Geek Culture
マニアの芸術という画像集を見つけた。
私の会社の席の前に座っている彼はハードマニアです。
そんな彼が見て興奮していたので、記事に。
何気なく見ているだけで噴出しそうなものもありましたが、面白いことをする人もいるなぁと。中でも、ピアノを改造した人なんかはほんと尊敬します(笑)
詳細は以下です。
青で彩られたWebデザイン設計３０サイト
デザイン視覚の参考に。緑と赤のBESTサイト全６０サイト
30 Green Websites
こちらが緑のサイト３０。
記事本文を見ると･･･
Carrying on with the color websites series, today we take a look at green websites…
なにやら色のシリーズをやっているようだ。
赤色サイトも30サイト集めていらっしゃったので参考までに。
30 Red Websites
赤は色が強いだけに使い所が難しい。
それをサイト全体で表現されるというのは、これを見て非常に素晴らしいとおもいました。
私の中でのベスト
ここいいですねぇ。
コップの泡とろうそくの光にうっとりしてしまいました。
WINDOWSペイントを使ってモナリザの絵を2時間半で描いた映像早送り＋鉛筆デッサン2本
あのWINDOWSペイント・・・なのかどうかがよくわからないのですが、見た感じペイントを使って、上のような画像を作り上げてた動画。2時間半を5分で表示しています。
かなり勉強になりました。
その他鉛筆をつかったデッサン風景を2本。
見た目に印象が残るインパクトのある海外１０サイトまとめ
いつかは作ってみたい海外スタイリッシュサイト30選
いつかこういう素敵なサイトを作ってみたいという海外スタイリッシュデザインサイトのご紹介です。
FC2Blogrankingはこちら
30 Great Website Designs (Part1)
↑こちらで参照してください
illustratorに関する記事をはてなから７つ再発掘してみます
前回photoshopのまとめを掲載したところ、設計や、デザインの仕事している取引先に大変評判が良かったんです。
考えてみると、実際にまだ私の周りには『はてな』を知っている人が意外と少ないことに気がつきました。ネットにどっぷりとつかって為、どこかで『はてなの記事を使わないようにしないとなぁ』なんて考えていたのかもしれません。
そこで今回は私の周りの人たちのために、はてなブックマークのエントリーからillustratorに関する記事をピックアップしてみることにします。
Web2.0デザインをステルスデザインと比較する。
ホームページ作成、WEBデザインは、インターネットで作業を行うWEBデザイナー達にとって、いつも新しい『形』を探すためのキーワードとなっている。
これまで、様々なデザインの呼び名が存在しています。
まず基礎となるホームページの形
ボックス型 Ｆ型2カラム 3カラム式
と、大まかにこの３つが基盤として使用されている全体の形です。
Ｆ型2カラムについては、人はインターネットのＷＥＢサイトを見た時に、Ｆ字を描くように文字を見る為、その配置にメニューなどを入れる方法とされ、今では最も使われている手法。逆Ｆ型2カラムも人気です。
カラムとは、簡単に表すと縦列の数で、当サイトのような形を2カラムと言います。
ボックス型とは、中央に箱を作り、その中でのみ変動して閲覧するタイプです。コンパクトですが、情報量が少なくなってしまう為、現在のＳＥＯとの相性が悪く、最近あまり見かけ無くなりました。
そこにてきて、ＷＥＢ全体を支配するＣＳＳ（スタイルシート）の登場が、デザインを大きく変動させていきました。
さらにＷＥＢ２.０デザインなどという言葉も誕生。
世のＷＥＢデザイナーさんが勉強しなくてはいけない事がかなり増えてしまって、なかなか大変な世の中です。
そこで、簡単ですがＷＥＢ２.０デザインを、ステルスデザインとの定義を比べ、最も今使われている手法をまとめてみました。
これまで、様々なデザインの呼び名が存在しています。
まず基礎となるホームページの形
と、大まかにこの３つが基盤として使用されている全体の形です。
Ｆ型2カラムについては、人はインターネットのＷＥＢサイトを見た時に、Ｆ字を描くように文字を見る為、その配置にメニューなどを入れる方法とされ、今では最も使われている手法。逆Ｆ型2カラムも人気です。
カラムとは、簡単に表すと縦列の数で、当サイトのような形を2カラムと言います。
ボックス型とは、中央に箱を作り、その中でのみ変動して閲覧するタイプです。コンパクトですが、情報量が少なくなってしまう為、現在のＳＥＯとの相性が悪く、最近あまり見かけ無くなりました。
そこにてきて、ＷＥＢ全体を支配するＣＳＳ（スタイルシート）の登場が、デザインを大きく変動させていきました。
さらにＷＥＢ２.０デザインなどという言葉も誕生。
世のＷＥＢデザイナーさんが勉強しなくてはいけない事がかなり増えてしまって、なかなか大変な世の中です。
そこで、簡単ですがＷＥＢ２.０デザインを、ステルスデザインとの定義を比べ、最も今使われている手法をまとめてみました。
FC2ブログ
Yamadaです。この機能はまだ試験中で中身は予告なく思い切り変えるかもしれません。