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

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

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

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

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

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

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


#1

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


#2

大き目の画像を背景にめいっぱい使用しているサイトの例３０個。


#3

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


#4

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


#5

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


#6

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


#7

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


#8

とにかく大量にあります。


#9

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


#10

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


#11

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


#12

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


#13

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


#14

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


#15

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


#16

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


#17

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


#18

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


#19

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


#20

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


#21

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


#22

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


#23

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


#24

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


#25

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


#26

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


#27

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


#28

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


#29

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


#30

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



以下、記事ではなくデータベースサイト
#31

iPhoneのwebデザインを探すならここ。
記事ではないが、デザイン参考の場としては最高のまとめサイト。


#32

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


#33

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


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

それでは、また。



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