webデザインのセンスを磨く『○○系のwebデザインまとめ』の総まとめ

  • 2010/11/22
  • このエントリーをはてなブックマークに追加

スポンサーリンク

webデザインサンプルまとめ
webデザインを学ぶならwebデザインから。
と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。
この、○○系と言うのは、例えば『ファッションサイト』『ライトエフェクト』『ECショップ』等のテーマが決められたwebサイトのデザインをさします。

週末のお供にいかがでしょうか。
IT/Web業界に強い転職サイトGreen

webサイトデザインを学べる30のテーマ


今回ご用意したのは多種多様な30のテーマ。
さらに、今回は特別にポートフォリオサイト検索サイト、ECサイトデザイン検索、iPhoneサイトデザイン検索の検索サイト3つをお付けしました。

お好きなデザインから召し上がるもよし、順番に料理していくもよし、検索で探すもよし、webサイトのサンプルをお求めの時には是非お楽しみあれ。

因みに、海外で活躍中のwebクリエイターボックスの中の人は、一週間である程度のサイトデザインをブックマークへ追加。週末に、約30~40のwebデザインをみて、その中で気になったサイトを全画面で撮影→フォトショップで圧縮→evernoteに保存と言うのを、勉強とかではなく『趣味』でやっているそうで。
さらにEvernoteに保存した気になったデザインのサイトを、今度は『なぜ美しいのか』をデザインの原則から考察し、解決するまで眺めるそうです。

デザインの要素と原則 | Webクリエイターボックス

彼女のエピソードには結構面白いものが多いです。
道端に咲いていた花にグラデーションがかかり、あまりにも綺麗だった為、その花がどうして綺麗なのか、答えが出るまで30分ほど花を眺めていた事があります。最終的には「花びらの裏の黄色がアクセントで、それが透けて見えて、表面の色が滑らかになり、全てを綺麗に見せている」と熱く語られたことがありました。彼女いわく「なぜ綺麗かがわかって引き出しにしまっておけば、いつでも使えるようになる!」との事です。皆さんも一度、なぜ綺麗なのかを考えて見るといいかもしれませんね!


#1
アパレル系デザイン
アパレル系デザインのまとめエントリー。


#2
拡大背景デザイン
大き目の画像を背景にめいっぱい使用しているサイトの例30個。


#3
ファッションサイト集50
ファッションサイト50のまとめ記事。
商品の見せ方、ピックアップの仕方に注目。


#4
グラウンジ系デザイン集
グラウンジデザインのサイト30。
グラウンジ系で注目すべきはやはり背景テクスチャの使い方と、全体的な配色方法になりますね。


#5
グラウンジ系Eコマース
汚れ感を生かしたEコマースデザイン集35。汚れを汚れのまま見せるとアウト。


#6
ミニマルwebデザイン集
ミニマルなwebデザイン60個。
ちょっとミニマルとは言えない、シンプルなデザインもありますが、参考までに。ミニマルデザインで注目すべきはやっぱりスペースの使い方ですね。


#7
透明感のあるデザイン
透明感のあるwebデザイン集。背景を透かすテクニック満載の40サイト。


#8
ショッピングサイト120まとめ
とにかく大量にあります。


#9
コーポレーションサイト
たくさんの企業サイトがずらりと並んで居ます。
一番最後にAppleを持ってくるあたりが、このブロガーの魅力ですねぇ。


#10
グリッドデザイン集
グリッドサイトデザイン70サイトまとめ。
かなり勉強になります。


#11
単一ページデザイン集
単一ページのみを50サイト集めたまとめ。AjaxやFLASHによって動的なページも単一になっちゃってるところはある。


#12
昭和風レトロデザインサイト
昭和風のレトロサイト。懐かしい香りがするレトロ感たっぷりのデザインが堪能できます。


#13
セクシーで機能的なデザイン
どうも海外の方とお話していると、海外トレンドでいうセクシーデザインと、私達のいうセクシーデザインの意味合いが若干違うみたいで、ご自身の目で見て確かめてくださいませ。


#14
フード、ドリンクサイト集
食品、ドリンクやお酒などのwebサイトデザイン30個です。


#15
美しいヘッダー特集
とにかくヘッダーのみに焦点を合わせたエントリー。
非常にクリエイティブなヘッダーデザインのサイトがまとめられてます。


#16
斬新で新しいデザイン
今回の選考でいれるか悩んだエントリ。新しいデザインというだけでは今回のテーマとはあわないので、フレッシュ、New系は、はぶいているのですが、このエントリーのデザインがまたクリエイティブなデザインが多かったため掲載。


#17
ポートフォリオデザイン
ポートフォリオサイト。それは個人を売り込むショーケース的なwebサイトです。
多くの斬新なポートフォリオデザインがここにあります。


#18
ダークポートフォリオ
ダークポートフォリオサイト集。ダークと言っても黒をベースにしているという事で、闇とか裏とかそっちではありません。


#19
ペーパーデザイン
ペーパーデザインのまとめ記事。ネタ帳のやつです。去年のなので、若干デザインかわってたらご愛嬌です。


#20
スタッフ紹介ページのデザイン
スタッフ紹介ページのまとめという非常にマニアックなまとめ。


#21
自動車のwebサイト集
自動車サイトのまとめ50個。
注目すべきはスペースの使い方かと思います。高級商品の場合、高級感を作るために色やスペースに力を入れています。


#22
コーヒーショップのwebデザイン
コーヒーショップのwebデザイン集。飲みたくなりますね・・・。


#23
フード、レストランデザイン
レストランのwebサイト集まとめ58個。作る機会も増えてきましたねー。
食品をいかにおいしく見せるかにこだわりが感じられます。


#24
女性向け情報サイトデザイン
女性向け情報サイトを、Googleで検索してもあまり見つからなかったらしく、フォロワーにたずねて完成したエントリー。なかなかステキです。


#25
女性クリエイターデザイン
女性webクリエイターのデザイン集50個。
去年の記事なので、サムネイルと、現在のwebデザインが変わっているサイトも多いですが、どのようにリニューアルしてるのかも見れて、なかなか楽しいです。非常にシンプルに変更しているサイトの方が多いみたいですね。


#26
ライトエフェクトデザイン集
幻想的でファンタジックなライトエフェクトデザインのまとめ。
こちらも去年のエントリーですが、とてもお勧めですね。


#27
マガジンスタイルのwebデザイン
マガジンスタイルのwebデザイン。
グリッドで整理されているものや、ブラウザサイズによって、横幅の使い方が変わるなど、色々参考になる部分が多いです。


#28
横長のwebデザイン集
使いやすいかどうかは別にして、横長のデザインを作るという試みがステキ。
制作するときは一度参考にしてみるといいかもしれないですね。


#29
チョコレート販売サイトのwebデザイン
チョコレート販売サイトのwebデザイン集。
甘い甘い、スイーツの味がwebから感じれるかどうかがポイントですかね。


#30
コンプレックス配色をうまくつかったデザイン
コンプレックス配色を上手く活用したサイトデザインのまとめ記事。
そもそもコンプレックス配色って何って人は上のリンク先記事にリンクが貼られているので語確認を。



以下、記事ではなくデータベースサイト
#31
iPhoneのwebデザイン
iPhoneのwebデザインを探すならここ。
記事ではないが、デザイン参考の場としては最高のまとめサイト。


#32
ECサイトのwebデザイン
ECサイトのwebデザインのまとめサイト。


#33
ポートフォリオサイト検索
ポートフォリオサイトだけが登録されていくデータベース。
ポートフォリオサイトのみ見て回りたいと言う人はこちらで。


以上です!
気に入ったものはありましたか?
デザイナーさん向けにwebデザイナーの色彩スキルを磨くエントリーまとめもお勧めです。

それでは、また。



この記事を書いた人は、結構普通のアラサーです。
Yamada (yamada_nt) on Twitter


スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする人はクリック

webデザインのセンスを磨く『○○系のwebデザインまとめ』の総まとめ

こんな記事を見つけました。 ホームページを使って仕事をされている人は、参考にしてみたらいかがでしょうか。 webデザインのセンスを磨く『○○系のwebデザインまとめ』の総まとめ http://e0166.blog89.fc2.com/blog-entry-817.html

SPAの副業:2010-11-22 12:46

Twitter 人気のつぶやき 11/20~11/26 2010

WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみ?...

Webクリエイターボックス:2010-11-27 11:32

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html