ホームページを作る人のネタ帳

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

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

週末のお供にいかがでしょうか。

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
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply

Trackbacks 2

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

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

    2010.11.27 (Sat) 11:32 | Webクリエイターボックス