Follow me
Bookmark
RSS講読
Webデザイン関連(
RSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。
フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ
カテゴリ » WEBデザイン, インスピレーション
書いた日 » 水曜日, 2月 17th, 2010
ヘッダーだけ、フッターだけみたい、
というように、部分的にデザインの
例を見たいことが多いのでそんな
記事をまとめました。まとめのまとめ
です。少し重いかもしれません。
主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。
ヘッダーデザイン
ユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。
30 Creative Website Headers
クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。
27 Stunning Examples of Header Design Inspiration
こちらも素敵なヘッダーの良まとめ。Dragon Interactiveが秀逸です。
70+ Visually Impressing Header Graphics
ぶわーっと70個のヘッダー。グラフィック系デザインのまとめです。色使いが上手いですね・・
27 Trendy And Unique Website Header Designs
ユニークなヘッダー27個。 Juan Diego Velascoかわいい。
Big Header – The Power of beautiful web design – Showcase of the best 20
ビッグヘッダーのデザインベスト20。記憶に残るデザインばかりです。
Big Header – The Power of beautiful web design – Showcase of the best 20
フッターデザイン
僕もデザイン変更しましたが、フッターはかなり手抜きに・・以下のまとめを参考にします。
40 Beautiful and Creative Website Footers
クリエイティブで美しいフッターデザイン40個。ペーパーデザイン多いですね。
Geek Trends: 15 Footers with great usability
一応いいのが揃ってるので紹介しますが、時間が経つとリダイレクトされます。。なぜ。
20 GREAT WORDPRESS FOOTER DESIGNS FOR INSPIRATION
WPのフッターデザイン20個。いいですねー。
フッター要素のデザイン集のまとめ
日本のブログ、css lectureさんのフッターデザインまとめ。Arrival Designいいな。
Put Your Best Foot Forward: 19 Gorgeous Website Footers
ユーザビリティを意識したフッターデザインまとめ。SEOmozの記事。
Footers In Modern Web Design: Creative Examples and Ideas
Smashing Magazineの良まとめ。モダンでクリエイティブなフッターデザイン例です。
50 Excellent Blog Footer Designs
他のまとめと被ってるサイトが多いのですが、数が多めなのでご紹介。
25 Stylish Website Footer Designs
スタイリッシュ、とありますがどちらかというとクリエイティブな印象のフッターデザイン。
ナビゲーションデザイン
メニューなどナビゲーションデザイン例。
45 Photoshop Tutorials for Better Navigation
Photoshopで作るナビのボタンなどの作成チュートリアルを紹介しています。実用的。
40 Beautifully-Designed Navigation Menus
凄く参考になるまとめです。見やすいもの多数。ボタンごとに注釈入れるのはいいユーザビリティですよね。
Creative and Unusual Layouts and Navigation Designs
見やすいレイアウトを意識したクリエイティブなナビゲーションデザインの例。Flashだけど、Got Milkやばい。
50 Beautiful And User-Friendly Navigation Menus
こちらもSmashing Magazineのまとめ記事。ユーザーフレンドリーなナビゲーションを紹介しています。
50+ Gorgeous Navigation Menus
実用的なナビゲーションばかりで凄く参考になります。これは見ておきたい。
50 Stylish Navigation Menus for Design Inspiration
こちらも素敵なナビゲーションデザインが50個も。かっこいいなぁ。。
コメント部分
ブログなどののコメントデザイン例。コメント部やコメントフォームなどなど。
30 Must See Comment Designs for Web Designers
コメントデザイン30個。海外はコメント一杯入りますよね・・
30 More Must See Comment Designs for Blog Designers
さらに！30個のコメントデザインです。すっきりしたものが多いので実用的かも。
Blog comments design considerations
コメントデザインに関するあれこれ。レイアウトとかいろいろです。
25 Beautiful Blog Comment Designs
美しいコメントデザイン25個。工夫が見られて参考になります。
77 Inspiring Blog Comment Form Designs – Good Examples
コメントのフォーム部分のデザイン例です。77個も！見ごたえありますね。
25 Design Ideas for the Comment Section
こちらもフォームデザインです。時間が有ったら手をつけようかな・・
その他
そのほかいろいろです。
Creative Web Form Designs: Ideas And Realizations
フォームデザイン。コメントや検索窓、メールなどなど。
Web Form Design: Modern Solutions and Creative Ideas
こちらもコンタクトフォームやログインフォームなど、フォームデザイン例のショーケース。
100 Outstanding Login Forms
ログインフォームが100個もあります。きっといいのが見つかるハズ。
Pagination Gallery: Examples And Good Practices
ページネーション部分のデザインです。いつか個人的に記事書きたい。
全体
全体のデザインも少しだけご紹介。記事が多すぎるので絞っています。
100 Nice And Beautiful Blog Designs
100個のブログデザイン。
細かいところまで素敵なデザインのブログ5つ
ネタ帳さんの良記事。細かいところの説明も分かりやすい。
30 More Excellent Blog Designs
綺麗目デザイン30個。Verbalizedいいなぁ。
Elements of Design
特殊なサイトなのでカテゴリ分けせずに独立させました。サイトのパーツ別にデザイン例を紹介するギャラリーです。
以上、パーツ別のデザイン例のまとめのまとめでした。
追記・パーツごとのデザインが盛り沢山で参考にできる「Pattern Tap」
PHPSPOTさんで紹介されてたサイトもパーツごとにデザインを見ることが出来るみたいです。ぜひ。
サイト内検索
- コンプレックス配色をうまく使った、素敵なWebデザイン例
- 広報用アカウントなどを複数人で管理できる企業向け国産Twitterクライアント・ツイートデスク
- 最近知ったフリーのHTML5テンプレート6個
- デザインとか加工とか出来ないからなんかいいの教えて、と言われて教えたツールいろいろ
- シンプルなショートコードのみで動画ギャラリーを作成出来るWPプラグイン・TubePressが凄い！
- グリッドレイアウトが美しい上に、UIも素敵なフリーのWrodPressテーマ・The Columnist
- スクリーンショットを撮るChromeエクステンションはAwesome Screenshotが一番良かった
- AmazonやFlickrのように、画像に範囲を指定してメモやURLを加える事が可能なjQuery-Notes
- 横に飛び出るjQueryメニュー・Horizontal Slide Out MenuをIE対応にする
- jQuery+CSSで実装するナビゲーションメニュー総集編
RSSフィード
ブックマーク
Twitter
Web Tips on Twitter
まとめ記事 on Twitter
【フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ】へのコメント 2
トラックバック
TRB:この記事のトラックバックとURL
URL:TRB:
お気軽にコメントして下さい
*は必須です