フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ

スポンサーリンク

ヘッダーだけ、フッターだけみたい、
というように、部分的にデザインの
例を見たいことが多いのでそんな
記事をまとめました。まとめのまとめ
です。少し重いかもしれません。

主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。

ヘッダーデザイン

ユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。

30 Creative Website Headers

parts-design01
クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。

30 Creative Website Headers

27 Stunning Examples of Header Design Inspiration

parts-design02
こちらも素敵なヘッダーの良まとめ。Dragon Interactiveが秀逸です。

27 Stunning Examples of Header Design Inspiration

70+ Visually Impressing Header Graphics

parts-design03
ぶわーっと70個のヘッダー。グラフィック系デザインのまとめです。色使いが上手いですね・・

70+ Visually Impressing Header Graphics

27 Trendy And Unique Website Header Designs

parts-design04
ユニークなヘッダー27個。 Juan Diego Velascoかわいい。

27 Trendy And Unique Website Header Designs

Big Header – The Power of beautiful web design – Showcase of the best 20

parts-design05
ビッグヘッダーのデザインベスト20。記憶に残るデザインばかりです。

Big Header – The Power of beautiful web design – Showcase of the best 20

フッターデザイン

僕もデザイン変更しましたが、フッターはかなり手抜きに・・以下のまとめを参考にします。

40 Beautiful and Creative Website Footers

parts-design06
クリエイティブで美しいフッターデザイン40個。ペーパーデザイン多いですね。

40 Beautiful and Creative Website Footers

Geek Trends: 15 Footers with great usability

parts-design07
一応いいのが揃ってるので紹介しますが、時間が経つとリダイレクトされます。。なぜ。

Geek Trends: 15 Footers with great usability

20 GREAT WORDPRESS FOOTER DESIGNS FOR INSPIRATION

parts-design08
WPのフッターデザイン20個。いいですねー。

20 GREAT WORDPRESS FOOTER DESIGNS FOR INSPIRATION

フッター要素のデザイン集のまとめ

parts-design09
日本のブログ、css lectureさんのフッターデザインまとめ。Arrival Designいいな。

フッター要素のデザイン集のまとめ

Put Your Best Foot Forward: 19 Gorgeous Website Footers

parts-design10
ユーザビリティを意識したフッターデザインまとめ。SEOmozの記事。

Put Your Best Foot Forward: 19 Gorgeous Website Footers

Footers In Modern Web Design: Creative Examples and Ideas

parts-design11
Smashing Magazineの良まとめ。モダンでクリエイティブなフッターデザイン例です。

Footers In Modern Web Design: Creative Examples and Ideas

50 Excellent Blog Footer Designs

parts-design12
他のまとめと被ってるサイトが多いのですが、数が多めなのでご紹介。

50 Excellent Blog Footer Designs

25 Stylish Website Footer Designs

parts-design13
スタイリッシュ、とありますがどちらかというとクリエイティブな印象のフッターデザイン。

25 Stylish Website Footer Designs

ナビゲーションデザイン

メニューなどナビゲーションデザイン例。

45 Photoshop Tutorials for Better Navigation

parts-design14
Photoshopで作るナビのボタンなどの作成チュートリアルを紹介しています。実用的。

45 Photoshop Tutorials for Better Navigation

40 Beautifully-Designed Navigation Menus

parts-design15
凄く参考になるまとめです。見やすいもの多数。ボタンごとに注釈入れるのはいいユーザビリティですよね。

40 Beautifully-Designed Navigation Menus

Creative and Unusual Layouts and Navigation Designs

parts-design16
見やすいレイアウトを意識したクリエイティブなナビゲーションデザインの例。Flashだけど、Got Milkやばい。

Creative and Unusual Layouts and Navigation Designs

50 Beautiful And User-Friendly Navigation Menus

parts-design17
こちらもSmashing Magazineのまとめ記事。ユーザーフレンドリーなナビゲーションを紹介しています。

50 Beautiful And User-Friendly Navigation Menus

50+ Gorgeous Navigation Menus

parts-design18
実用的なナビゲーションばかりで凄く参考になります。これは見ておきたい。

50+ Gorgeous Navigation Menus

50 Stylish Navigation Menus for Design Inspiration

parts-design19
こちらも素敵なナビゲーションデザインが50個も。かっこいいなぁ。。

50 Stylish Navigation Menus for Design Inspiration

コメント部分

ブログなどののコメントデザイン例。コメント部やコメントフォームなどなど。

30 Must See Comment Designs for Web Designers

parts-design20
コメントデザイン30個。海外はコメント一杯入りますよね・・

30 Must See Comment Designs for Web Designers

30 More Must See Comment Designs for Blog Designers

parts-design21
さらに!30個のコメントデザインです。すっきりしたものが多いので実用的かも。

30 More Must See Comment Designs for Blog Designers

Blog comments design considerations

parts-design22
コメントデザインに関するあれこれ。レイアウトとかいろいろです。

Blog comments design considerations

25 Beautiful Blog Comment Designs

parts-design23
美しいコメントデザイン25個。工夫が見られて参考になります。

25 Beautiful Blog Comment Designs

77 Inspiring Blog Comment Form Designs – Good Examples

parts-design24
コメントのフォーム部分のデザイン例です。77個も!見ごたえありますね。

77 Inspiring Blog Comment Form Designs – Good Examples

25 Design Ideas for the Comment Section

parts-design25
こちらもフォームデザインです。時間が有ったら手をつけようかな・・

25 Design Ideas for the Comment Section

その他

そのほかいろいろです。

Creative Web Form Designs: Ideas And Realizations

parts-design26
フォームデザイン。コメントや検索窓、メールなどなど。

Creative Web Form Designs: Ideas And Realizations

Web Form Design: Modern Solutions and Creative Ideas

parts-design27
こちらもコンタクトフォームやログインフォームなど、フォームデザイン例のショーケース。

Web Form Design: Modern Solutions and Creative Ideas

100 Outstanding Login Forms

parts-design28
ログインフォームが100個もあります。きっといいのが見つかるハズ。

100 Outstanding Login Forms

Pagination Gallery: Examples And Good Practices

parts-design29
ページネーション部分のデザインです。いつか個人的に記事書きたい。

Pagination Gallery: Examples And Good Practices

全体

全体のデザインも少しだけご紹介。記事が多すぎるので絞っています。

100 Nice And Beautiful Blog Designs

parts-design30
100個のブログデザイン。

100 Nice And Beautiful Blog Designs

細かいところまで素敵なデザインのブログ5つ

parts-design31
ネタ帳さんの良記事。細かいところの説明も分かりやすい。

細かいところまで素敵なデザインのブログ5つ

30 More Excellent Blog Designs

parts-design33
綺麗目デザイン30個。Verbalizedいいなぁ。

30 More Excellent Blog Designs

Elements of Design

parts-design32
特殊なサイトなのでカテゴリ分けせずに独立させました。サイトのパーツ別にデザイン例を紹介するギャラリーです。

Elements of Design

以上、パーツ別のデザイン例のまとめのまとめでした。

追記・パーツごとのデザインが盛り沢山で参考にできる「Pattern Tap」

parts
PHPSPOTさんで紹介されてたサイトもパーツごとにデザインを見ることが出来るみたいです。ぜひ。

パーツごとのデザインが盛り沢山で参考にできる「Pattern Tap」

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services