まとめ
フリーフォントまとめ
テクスチャ素材まとめ
アイコン素材まとめ
チュートリアル関連まとめ
Webデザインまとめ
その他まとめ
ブラシ素材まとめ
パターン素材まとめ
アクション素材まとめ
PSDファイル素材まとめ
チュートリアル
テキストエフェクト
写真加工エフェクト
デザイン系エフェクト
無料ダウンロード
Illustrator素材
その他
新着順にみる
お問い合わせ
RSS
人気ベスト100
ウェブデザインのトレンドはめまぐるしく変化しています。
どんどん新しいデザインテクニックを利用したウェブサイトが増えており、デザインを把握するだけでも一苦労です。
海外デザインブログSpeckyBoy Design Magazineで、17のカテゴリーに700ウェブサイトを掲載、まとめたエントリー「The Complete Web Design Style Series」が公開されていたので、今回はご紹介します。
個人的にもウェブサイトデザインをカテゴリー別にまとめて見ることができれば、と考えながらまとめています。
それぞれのカテゴリーに50個のウェブサイトデザインがまとめられており、デザインのインスピレーション、参考にしていただくと良いかもしれません。
エントリーが長くなってしまったので、ブックマーク保存をしてから読んでいただくとよいかもしれません。
詳細は以下から。
ウェブデザイン完全スタイルガイド2010
■ 個人ブログウェブデザイン編
特にデザインを中心としたコミュニティではユニークで、一度見たら忘れることのできないウェブデザインを利用しているサイトが多く存在します。
こちらではクリエイティブな個人ブログデザインをまとめたエントリーとなっています。
以下は掲載されているウェブサイトの一部となっています。
参照元 : 50 Personal Blog Web Designs »
■ ショッピングサイトデザイン編
デザイン性の優れたオンラインショッピングサイトデザインをまとめたエントリー。
操作方法や支払い方法などユーサビリティの面においても参考にしたいテクニックが使われているかもしれません。
これからショッピングサイトデザインを制作しようと考えている人にオススメ。
以下は掲載されているウェブサイトの一部となっています。
参照元 : 50 Corporate Ecommerce Web Designs »
■ ポートフォリオサイトデザイン編
デザイナーの実績や問い合わせ先などをまとめたポートフォリオサイトの中でもクリエイティブなデザインを中心にまとめたエントリー。
ウェブデザイナーからグラフィックデザイン、写真家の方などで、個人ホームページを作成しようと考えている方は参考になるのではないでしょうか。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Personal Portfolio Websites »
■ ウェブデザイン会社のウェブサイトデザイン編
普段から多くのウェブサイトデザインを作成しているウェブデザインのプロフェッショナルでもあるウェブデザイン会社をターゲットにしたエントリー。
最新のHTML5やCSS3を使ったレイアウトデザインも多く見受けられました。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Professional Web Design Agency Web Sites »
■ マガジンスタイルウェブサイトデザイン編
こちらでは、グリッドを利用しブロックやカラムでコンテンツを分けた雑誌などのプリント媒体をモチーフにデザインされたウェブサイトをまとめたエントリー。
マガジンスタイルのレイアウトも利用することでユーザーに情報を分かりやすく伝えることができるので、利用しているサイトも多くなってきています。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Magazine and Newspaper Styled Web Designs »
■ ウェブアプリ＆サービス系ウェブサイトデザイン編
ウェブサービスを運営している大企業はどのようにしてそこまで有名になったのでしょうか。
答えは簡単です、シンプルで使いやすいデザインを利用することで他の競合サービスと差別化を図っています。
そんなウェブサービスを運営するときに参考にしたいウェブサイトデザインをまとめたエントリー。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Web Application and Service Web Site Designs »
■ ミニマルデザインのウェブサイトデザイン編
不要なパーツを可能な限りそぎ落とし、タイポグラフィーを中心としたレイアウトによってシンプルを極めたミニマルデザインをまとめたエントリー。
グリッドラインを利用しレイアウトすることで、すっきりとしたデザインを表現することが可能となっています。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Minimally Designed Web Sites »
■ ビンテージ&レトロデザインのウェブデザイン編
2009年あたりより多くのホームページ、ブログなどで利用されているデザインのひとつ、レトロ&ビンテージをテーマにしたサイトをまとめたエントリー。
ユニークで個性的なデザインが多く掲載されているので、デザインの参考にされると良いかもしれません。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Vintage and Retro Web Designs »
■ イラストを利用したウェブサイトデザイン編
手書きでイラストされたデザインを使うことで魅力的でオリジナル性の高いウェブサイトデザインとなります。
そんなイラストレーションを利用したウェブサイトデザインをまとめたエントリー。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Illustrative Web Designs »
■ タイポグラフィーを利用したウェブサイトデザイン編
フォントをうまく利用してデザインされたタイポグラフィーはデザインの世界だけでなくウェブデザインにおいても大きな影響を与えています。
ユニークなタイポグラフィーを利用したウェブサイトデザインをまとめたエントリー。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Effective Uses of Typography Within Web Design »
■ 背景に写真を利用したウェブサイトデザイン編
イメージ写真を背景に利用したウェブサイトでまず連想されるのが、写真家のポートフォリオサイトを中心としたデザイン関連ではないでしょうか。
しかし魅せ方次第では、ショッピングサイトやレストランなどの飲食店など色々な用途に利用することができそうなウェブサイトデザインをまとめたエントリー。
Photoshop VIPで以前ご紹介したこちらのエントリーも参考までにどうぞ。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Large Photography Backgrounds within Web Design »
■ カラフルな色使いのウェブサイトデザイン編
普段の生活のおいて「色」はさまざまな影響を人間に与えており、カラーコーディネーターという資格があるほど身近な存在でもあります。
こちらではカラフルで鮮やかな色使いが特長的なウェブサイトデザインをまとめたエントリーとなっています。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Bright and Vibrant Web Designs »
■ 黒をメインとしたダーク系ウェブサイトデザイン編
黒はウェブデザインにおいてテキストなどによく使われる基本色ですが、ポートフォリオサイトなどではダーク系ウェブデザインを多く見かけます
写真やコンテンツなどユーザーに集中してもらいたい部分を効果的に表現することができるウェブサイトデザインをまとめたエントリー。
以下は掲載されているウェブサイトの一部となります。
参照元 : 50 Examples of Black and Dark in Web Design »
■ クリエイティブな「404 Page Not Found Pages」デザイン編
ウェブサイトやホームページを運営されている方としてはあまりユーザーに404ページを表示する状況はあまり作りたくありませんが、検索ボックスや人気記事を表示するなど工夫する点もあるのではないでしょうか。
そんなクリエイティブな404ページをまとめたエントリー。
以下は掲載されているウェブサイトの一部となります。
