Advertisement

web-header-footer-design-idea-1

 

ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。

 

今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。

 

Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく
CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニック
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで

 

 

コンテンツ目次

 

記事向けヘッダーデザイン

 

CSS Animated Header

ヘッダー背景をスクロールに合わせてフェードアウトさせるCSSテクニック。

See the Pen CSS Animated Header by Nodws (@nodws) on CodePen.

 

 

 

Slanted Div, Fixed Header

斜めに入ったスリットラインが印象的なレイアウトで、こちらもCSSのみでスタイリング可能です。

See the Pen Slanted Div, Fixed Header by Andrew Bales (@agbales) on CodePen.

 

 

 

Fixed Disappearing Scrolling Header

見出しタイトル部分が写真の山並みに隠れる、ユニークなパララックスエフェクトを実現できます。

See the Pen Fixed Disappearing Scrolling Header by Dudley Storey (@dudleystorey) on CodePen.

 

 

 

Multi-Layered Parallax Illustatrion

イラストを何層にも分けることで、奥行き感をたっぷりのパララックスエフェクトを実現します。モバイル端末ではエフェクトは適用なし。

See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.

 

 

 

Parallax Scene with CSS Variables

こちらも上記スニペットと同様のアニメーションテクニックが披露されています。

See the Pen Parallax scene with CSS variables by Tobias Reich (@electerious) on CodePen.

 

 

 

Plankton – Particles Life

ランディングページなど他より目立たせたいときに確認したい、プランクトンのようなアニメーションが魅力的。

See the Pen PLANKTON – Particles life by Marco Dell’Anna (@plasm) on CodePen.

 

 

 

Hero Idea

スクロールに合わせて画像が滑らかにズームアップするテクニック。

See the Pen Hero idea by Jake Lundberg (@iamtheWraith) on CodePen.

 

 

 

Headings / Hero Image Typography Playground

タイポグラフィを活用した、10種類のヘッダーイメージの実践的なサンプル集。

See the Pen Headings/Hero image typography playground by Mirko Zorić (@fluxus) on CodePen.

 

 

 

Hero Zoom on Scroll

こちらもスクロールスピードに合わせてズーム付きのパララックス機能を調整できます。

See the Pen Hero Zoom on Scroll by Derek Palladino (@derekjp) on CodePen.

 

 

 

Neat Parallax Hero Effect

スクロールすると画像がフェードアウトをはじめ、見出しタイトルのみ固定されるテクニック。

See the Pen Neat Parallax Hero Effect by Dominic Magnifico (@magnificode) on CodePen.

 

 

 

Fixed Post Header

Instagramアプリなどで利用されているテクニックのひとつで、スクロールに応じてヘッダー部分のみ固定される仕組み。

See the Pen Fixed Post Header by White Wolf Wizard (@WhiteWolfWizard) on CodePen.

 

 

 

CSS Parallax Header Image

CSSのみで表現されたお手軽なパララックスエフェクトで、滑らかさも自由に調整できるのでテンプレートとしても最適。

See the Pen CSS Parallax Header Image by Bennett Feely (@bennettfeely) on CodePen.

 

 

 

記事向けフルスクリーン・ヘッダーデザイン

 

Hero Image Showcase

スクロールすると全画面表示された写真がふわりと奥に消えていく、スタイリッシュなデザインエフェクト。

See the Pen Hero Image Showcase by Art (@Skupienski) on CodePen.

 

 

 

Hero Effect Magazine

ウェブマガジンのトップページを想定したレイアウトで、ふわりと出現する見出しタイトルや画像のフェードアウトなど、ミニマルな魅せ方が素敵。

See the Pen Hero effect–Magazine by Cameron Campbell (@cdcampbell26) on CodePen.

 

 

 

Flexbox Hero Header

Flexboxプロパティを利用することで、どんな画面サイズにもぴったり表示される画像を簡単に設定できるようになりました。

See the Pen Flexbox Hero Header by Ana Vicente (@anavicente) on CodePen.

 

 

 

GLSL Glitch

フルスクリーンで表示した画像に、ブラウン管の砂嵐のようなグリッチエフェクトを追加します。

See the Pen GLSL Glitch by yoichi kobayashi (@ykob) on CodePen.

 

 

 

Full Page Parallax Scroll Effect

フルスクリーンで表示される画像をパララックス付きのスライドエフェクトで切り替えます。滑らかなコンテンツ遷移にも注目です。

See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.

 

 

 

Webpage Hero Header – Scroll Effects

スクロールすると画像がズームしながら、フェードアウト非表示となる合わせ技。

See the Pen Webpage Hero header – scroll effects by EricPorter (@EricPorter) on CodePen.

 

 

 

Simple Parallax Header with Blur

スクロールに応じて画像をぼかしながらフェードアウトさせるテクニック。

See the Pen Simple parallax header with blur by tsimenis (@tsimenis) on CodePen.

 

 

 

Hero on Scroll

スクロールするとトップ画面で表示された画像が飛ぶように消えていくアニメーションエフェクト。

See the Pen Hero OnScroll by verdzik (@verdzik) on CodePen.

 

 

 

Fullscreen Header + Bakcground Color Cycle

イメージ写真を画面いっぱいにフルサイズで展開し、淡いグラデーションカラーをアニメーション付きで重ねるCSSの小技テクニック。

See the Pen Fullscreen Header + Background Color Cycle by Kenny Sing (@KennySing) on CodePen.

 

 

 

Move Background Perspective on Mouse Move Effet

マウスの動きに合わせて背景がぐりぐりと動く、ユニークなアイデアを形にしたいときにどうぞ。

See the Pen Move background perspective on mouse move effect by Kriszta (@vajkri) on CodePen.

 

 

 

Continuous Scrolling Background on Sticky Header

見出しタイトル部分のみスクロールに合わせて残す可変レイアウトを実現します。

See the Pen Continuous scrolling background of sticky header by Robert Borghesi (@dghez) on CodePen.

 

 

 

Parallax Background

スクロールに応じて紙芝居のようにコンテンツを切り替えることができ、プレゼンテーションなどにもオススメのスニペット。

See the Pen Parallax Background by Ravi Dhiman (@ravid7000) on CodePen.

 

 

 

Evasion

細かい粒子がふわふわと飛び回っているようなエフェクトが特徴で、スクロールすると追加コンテンツが表示される仕組み。

See the Pen E V A S I O N by Fersho Pls (@fershopls) on CodePen.

 

 

 

固定ヘッダーデザイン

 

Responsive Scrolling Sticky Header

ヘッダーセクション下に配置されたナビメニューは、スクロールすることでページ上部に固定されます。

See the Pen Responsive Scrolling Sticky Header by Tommy Hodgins (@tomhodgins) on CodePen.

 

 

 

Scroll Header

マテリアルデザインの動きを再現した固定ヘッダーデザイン。

See the Pen Scroll Header by Blake Bowen (@osublake) on CodePen.

 

 

 

Responsive Scrolled Header

あらゆる画面サイズに対応の、スクロールに応じてヘッダー幅が変化するテクニック。

See the Pen Responsive Scroll Header by Dylan Macnab (@DylanMacnab) on CodePen.

 

 

 

Animate Header In/Out After Scrolling

一定量スクロールすることで、用意してあるナビメニューをふわりと表示するテクニック。

See the Pen Animate header in/out after scrolling by antwon (@antwon) on CodePen.

 

 

 

Header Fade

ヘッダー部分のみフェードアウトで消えていくナビメニュー用テクニック。

See the Pen Header Fade by Emmanuel Pilande (@epilande) on CodePen.

 

 

 

Fixed Header Scroll Effect and Smart Nav for One-Page Site

ブログ記事レイアウトなどに活用したい、スクロールすると見出しタイトルがページ上部に移動、固定されます。

See the Pen Fixed Header Scroll Effect and Smart Nav for One-Page Sites by Summer (@n400) on CodePen.

 

 

 

Auto Hide Sticky Header

スクロールに応じて自動で表示、非表示で切り替わるナビメニュー。

See the Pen Auto hide sticky header by jasper (@jboeijenga) on CodePen.

 

 

 

Sticky Header CSS Transition

見出し部分をのぞいたナビメニューのみ固定されるスクロールテクニック。

See the Pen Sticky Header CSS Transition by Brady Sammons (@soulrider911) on CodePen.

 

 

 

Top Sliding Nav

スクロールすることで上部から出現するアニメーション付きナビメニューの作りかた。

See the Pen Top Sliding Nav by Chris Gruber (@cgruber) on CodePen.

 

 

 

Fixed Header (Quick Hack)

CSSのみで実現できるお手軽な固定レイアウト用ハック。

See the Pen Fixed Header (Quick Hack) by Darcy Voutt (@darcyvoutt) on CodePen.

 

 

 

フッターデザイン

 

Parallax Footer

フッター部分をカーテン状に表示するパララックスエフェクト。

See the Pen Parallax Footer (Website Fixed Footer) by Austin Paquette (@mur) on CodePen.

 

 

 

Footer with Content Scale

ページ下まで到達すると、立体的にコンテンツを表示できるアニメーションが素敵なテクニック。

See the Pen footer with conent scale by Mātthīas (@mfritsch) on CodePen.

 

 

 

Social Media Footer

各種ソーシャルメディア用アイコンを並べたフッターデザイン。

See the Pen Social media footer by Andrew Canham (@candroo) on CodePen.

 

 

 

Simple Fixed Header

ページ下部に固定されたフッターデザインは、CSSのみで表現できるお手軽テクニック。

See the Pen simple fixed footer by Mātthīas (@mfritsch) on CodePen.

 

 

 

Fixed Footer

ページの一番最後までスクロールすると、隠されていたフッター用コンテンツが表示される仕組み。

See the Pen Fixed footer by Mads Håkansson (@madshaakansson) on CodePen.

 

 

 

Pure CSS Classy Footer

フッター部分に固定されたアイコンにマウスホバーすると、コンテンツが下からスライド式に表示されます。

See the Pen Pure CSS Classy Footer by Nick Braver (@nickbraver) on CodePen.

 

 

 

Beautiful Aurora Footer Lights

ゆらゆらと光るオーロラのようなグラデーションカラーが、アニメーション付きで変化していくテクニック。

See the Pen Beautiful Aurora Footer Lights by Amit Ashok Kamble (@amyth91) on CodePen.

 

 

 

ビデオヘッダーデザイン

 

React Video Header

ビデオ動画をヘッダー全体に表示するJSテクニック。

See the Pen React Video Header by Mark Sarpong (@Markus1607) on CodePen.

 

 

 

Video Header

背景全体に動画を配置し、カラーオーバーレイを重ねることで文字テキストやロゴなどの要素を読みやすくできます。

See the Pen video header by Alex (@rizer) on CodePen.

 

 

 

Herio Video

映画のオープニングシーンのようなエフェクトで、細かいパターンPNGを重ねることで、画質の荒い動画にも対応する工夫がされています。

See the Pen Hero video by Chris Simeone (@simspace-dev) on CodePen.

 

 

 

Fullscreen Background Video with Mix-Blend-Mode Overlay Text

ブレンドテクニックを活用することで、背景の動画に合わせた文字テキストが半透明に透けるテクニックが披露されています。

See the Pen Fullscreen Background Video with Mix-Blend-Mode Overlay Text by Dudley Storey (@dudleystorey) on CodePen.

 

 

 

Video Header Animation

まるで動画のようなつくりですが、実はCSSでアニメーションを実現したヘッダー向けデザインアイデア。

See the Pen Video Header Animation by Sylvia Maguia (@SMaguina) on CodePen.

 

 

 

Responsive Video Header with Gradient

レスポンシブでモバイル端末にも対応し、キラキラと輝く星空とグラデーションを動画に重ねた素敵テクニック。

See the Pen Responsive Video Header with Gradient by Jacob Davidson (@Reklino) on CodePen.

 

海外サイト Free Frontend で公開された 43 CSS Headers And Footers より許可をもらい、特にピックアップしたい作品を中心に転載、追加記述しています。

 

参照元リンク : 43 CSS Header And Footers – Free Frontend