どうも、ハガネ屋(@hagane_ya)です。

海外のWebサイト・ブログで、「ヘッダーデザイン」「トップページデザイン」が素晴らしいと感じたものを100サイトほどピックアップしてみました。どれもこれも、うっとりするような凝りに凝ったデザインです。

流行りもあってか「フラットデザイン」系のサイトが若干多めですが、これだけサンプルがあれば、さすがに好みのデザインは一つぐらい見つかるかと思います(笑)よろしければ参考にしてみてください。

ちなみに、ヘッダー同様「フッターデザイン」もかなり手が込んでいるところが多いです。気になったサイトは実際に訪問して、隅から隅まで研究しまくってみると面白いですよ。

スポンサードリンク

 

検索結果から無作為に選ぶ、海外ブログヘッダーデザイン例100選!

※クリックで各項目へ飛びます(戻る時は右下のBACK TO PAGETOP)

    1. Alan Horne

Webデザイナーのポートフォリオサイト。赤ヘッダー×黒×グレーが基調。

    1. Andersson Wise Architects

建築家(空間デザイナー)の作品集。黒背景にタイル状の建築写真が並ぶ。

    1. Applecrumbs

Webデザイナーのポートフォリオサイト。黒地に青緑色の円がトレードマーク。

    1. Audio Vroom

音声学習ツールのサイト。原色(オレンジ・赤・青・緑)のフラットデザイン。

    1. Award

超党派による非営利組織サイト。各種ウインドウの影が初代Macintosh風。

    1. Bel50

シカゴにある、ワッフルのファーストフード店の公式サイト。オレンジ色。

    1. Buffalo

Webデザイナーのポートフォリオサイト。白地に六角形型のコンテンツが並ぶ。

    1. Build 2012

MSの開発者向けイベント「build Windows」公式サイト。橋の写真に白文字。

    1. Conch Associates

英国にある商標・ブランドデザイン会社の公式サイト・モノクロの切り絵風。

    1. Coopers Coffee

英国のコーヒーショップの公式サイト。モスグリーン系統のカラーで統一。

    1. Crafting Type

デザイナー向けワークショップの公式サイト。グレー背景に黄色の差し色。

    1. Creoly

オシャレ文房具のネットショップ。筆記体のショップロゴが映える。

    1. CSS Tricks

Webデザイナー・開発者向けTips集サイト。PCデスクトップ風のデザイン。

    1. Data Driven London

英ゲーム産業におけるデータ・解析の交流会サイト?ぼかし背景×白フォント。

    1. Deren Keskin

仏Webデザイナーのポートフォリオサイト。ライトグレーの布地っぽい背景。

    1. Design made in Germany Issue 5

独のレスポンシブWebデザインサイト。奥行きの概念を持ったTOP画像が凄い。

    1. Digital Atelier

Webデザイナーのポートフォリオサイト。インディゴ柄の背景に円が並ぶ。

    1. Doug Carpenter & Associates

米メンフィス発、コンサル会社のサイト。黒×白を基調に赤ラインの差し色が特徴。

    1. Erik Ford

Webデザイナーのポートフォリオサイト。白背景×タイル状に並んだコンテンツ。

    1. Etch

Webデザイナーのサイト。Pinboard×Instagramな雰囲気。淡い七色フォントがお洒落。

    1. Ethan Marcotte

Webデザイナーのポートフォリオサイト。クラシックが似合いそうなデザイン。

    1. Explanimate

Webデザイナーのポートフォリオサイト。米メロコアバンドの公式サイト風。

    1. Fhoke

Webデザイナーのサイト。ぼかし背景×文字背景ぬりつぶしの合わせ技。

    1. Fitbit

ワイヤレスなリストバンド型活動量計の公式。カラフルなフラットデザイン。

    1. Float

03年から続く、老舗Webデザイン系サイト。シンプルなタイルUI×筆記体ロゴ。

    1. Food Sense

海外版クックパッド(料理サイト)。料理写真を引き立たせるため、デザインは控えめ。

    1. Forefathers Group

商標・デザイン会社の公式。ダンボール風アイボリー背景×版画がモチーフ。

    1. Fork

「Fork」というCMSの公式サイト。青背景×デフォルメされた人魚キャラが印象的。

※CMS=コンテンツ・マネジメント・システム(または「コンテンツ管理システム」)の略。HTMLをあまりよく知らなくても、比較的簡単にWebサイトが作れるソフトウェアのこと。なお、WordPressやMovableTypeなども、CMSにあたる。

    1. FortyOneTwenty

サンディエゴ発、映像制作会社の公式。コンテンツスライダーをすべて動画で再現。

    1. FreeAssociation

Webデザイナーのポートフォリオサイト。端末毎のプレビュー画像が並ぶ。超シンプル。

    1. Free People clothing’s Holiday Boutique

女性ファッション系サイト。スクロールによる場面転換が神技レベル。全背景が主役級。

    1. Friends of the Web

Webデザイン&アプリ開発者のサイト。マウスオーバー時のギミックが面白い。

    1. Future Insights Live

デザイナー向けワークショップの公式サイト。Windows8(Modern UI)を彷彿とさせる。

    1. Future of Web Design 2013

↑の姉妹サイト(おそらく)。こちらは、上記サイトの「赤」バージョン。

    1. Ginger Whale

子供向け学習絵本の公式サイト。昔懐かしの「Flash」を彷彿とさせるギミック。

    1. Graffiti Collaborative

Webデザイナーのポートフォリオサイト。黒背景×海水風テクスチャ文字がクール。

    1. Grey Goose

仏産ウォッカ「グレイグース」の公式。清涼感最強。スクロールによる場面転換あり。

    1. Heathlife

英国ハムステッド・ヒース公園の写真サイト。航空写真を大々的に使ったサイトデザイン。

    1. Hicksdesign

Webデザイナーのポートフォリオサイト。4カラム。右上のカラーパレットバーがお洒落。

    1. Inky

電子メールクライアント「Inky」の公式サイト。OSX風ウインドウ×フラットデザイン。

    1. Insomnia Coffee Co

米国発、コーヒー会社の公式兼ネットショップ。スキューアモーフィズム・デザイン。

    1. It’s a Shape Christmas

Webデザイナーのポートフォリオサイト。選挙掲示板を彷彿とさせる、淡色のタイルUI。

    1. Ivo Mynttinen

Webデザイナーのポートフォリオサイト。ぼかし写真×フラットデザイン。全体的に淡色。

    1. Jessica Hische

タイプ・デザイナー「Jessica Hische」の公式サイト。上品さが漂うサイトデザイン。

    1. Kava Ruzova

チェコのコーヒーショップ公式。航空写真の緑地帯が左サイドバーの茶色と絶妙に合う。

    1. Kings Hill Cars

英国発、タクシー・レンタカー会社の公式。ありがちな車系サイト感が逆にそそる。

    1. Knits & Knotts

米シカゴ発、アパレル系の公式。メンノン系雑誌をそのままWebサイト化した雰囲気。

    1. Lab Fiftyfive

Webデザイナーのポートフォリオサイト。公式は謙虚、手掛けた作品群がハイセンス。

    1. Lancaster University

英国、ランカスター大学の公式サイト。赤を全面に押し出したこだわりのデザイン。

    1. Larkef

オランダのロゴ・デザイナーの公式。意図的に原色を抑えており、カラーセンス抜群。

  1. LayerVault
  2. LogicSpot – web design agency
  3. Lorenzo Verzini
  4. Manos
  5. MetroTwit
  6. Microsoft
  7. Naldz Graphics
  8. NATL
  9. oak.is
  10. Oliver Russell
  11. Performance Marketing Awards 2013
  12. Pete Firman – Magician / Comedian
  13. Photoworks Interactive Photo Booths
  14. Production Locations
  15. Quartz
  16. Rdio
  17. Seminal Responsive Web Design Example
  18. Shiny Demos
  19. Siyelo
  20. Snowbird
  21. Somewhat
  22. SpellTower
  23. Sphero
  24. Stacked Font
  25. Standbuy
  26. Stuff & Nonsense
  27. Supereight Studio
  28. Swerve Media Hub
  29. SWIMFIT Trajes de Bano
  30. Symbolset
  31. Taylor Herron Photography
  32. teamgeek
  33. The Gently Mad Podcast
  34. The Next Web
  35. The Ocean Grove Church
  36. The Onward Store
  37. Thibault Jorge
  38. Thomas Schrijer
  39. TIME
  40. Treasure of FrontEnd Island
  41. Trent Walton
  42. True
  43. TypographyShop
  44. United Pixelworkers
  45. Web Agency Fe-el srl
  46. Web Designer Wall
  47. William Csete
  48. William Leeks
  49. Windows Phone
  50. Xero

 

Alan Horne

af0592

 

Andersson Wise Architects

af0608

 

Applecrumbs

af0560

 

Audio Vroom

af0629

 

Award

af0571

 

Bel50

af0558

 

Buffalo

af0598

 

Build 2012

af0586

 

Conch Associates

af0565

 

Coopers Coffee

af0556

 

Crafting Type

af0594

 

Creoly

af0555

 

CSS Tricks

af0634

 

Data Driven London

af0603

 

Deren Keskin

af0620

 

Design made in Germany Issue 5

af0615

 

Digital Atelier

af0614

 

Doug Carpenter & Associates

af0542

 

Erik Ford

af0579

 

Etch

af0593

 

Ethan Marcotte

af0640

 

Explanimate

af0541

 

Fhoke

af0585

 

Fitbit

af0584

 

Float

af0589

 

Food Sense

af0632

 

Forefathers Group

af0616

 

Fork

af0639

 

FortyOneTwenty

af0622

 

FreeAssociation

af0574

 

Free People clothing’s Holiday Boutique

af0546

 

Friends of the Web

af0588

 

Future Insights Live

af0583

 

Future of Web Design 2013

af0607

 

Ginger Whale

af0627

 

Graffiti Collaborative

af0564

 

Grey Goose

af0635

 

Heathlife

af0637

 

Hicksdesign

af0619

 

Inky

af0582

 

Insomnia Coffee Co

af0548

 

It’s a Shape Christmas

af0599

 

Ivo Mynttinen

af0580

 

Jessica Hische

af0638

 

Kava Ruzova

af0610

 

Kings Hill Cars

af0626

 

Knits & Knotts

af0559

 

Lab Fiftyfive

af0618

 

Lancaster University

af0631

 

Larkef

af0606

 

LayerVault

af0596

 

LogicSpot – web design agency

af0553

 

Lorenzo Verzini

af0600

 

Manos

af0543

 

MetroTwit

af0591

 

Microsoft

af0567

 

Naldz Graphics

af0581

 

NATL

af0604

 

oak.is

af0595

 

Oliver Russell

af0623

 

Performance Marketing Awards 2013

af0611

 

Pete Firman – Magician / Comedian

af0562

 

Photoworks Interactive Photo Booths

af0563

 

Production Locations

af0554

 

Quartz

af0572

 

Rdio

af0602

 

Seminal Responsive Web Design Example

af0621

 

Shiny Demos

af0609

 

Siyelo

af0624

 

Snowbird

af0568

 

Somewhat

af0630

 

SpellTower

af0601

 

Sphero

af0633

 

Stacked Font

af0566

 

Standbuy

af0570

 

Stuff & Nonsense

af0613

 

Supereight Studio

af0587

 

Swerve Media Hub

af0561

 

SWIMFIT Trajes de Bano

af0550

 

Symbolset

af0577

 

Taylor Herron Photography

af0557

 

teamgeek

af0544

 

The Gently Mad Podcast

af0590

 

The Next Web

af0625

 

The Ocean Grove Church

af0552

 

The Onward Store

af0547

 

Thibault Jorge

af0575

 

Thomas Schrijer

af0569

 

TIME

af0617

 

Treasure of FrontEnd Island

af0628

 

Trent Walton

af0551

 

True

af0578

 

TypographyShop

af0545

 

United Pixelworkers

af0597

 

Web Agency Fe-el srl

af0549

 

Web Designer Wall

af0636

 

William Csete

af0612

 

William Leeks

af0576

 

Windows Phone

af0605

 

Xero

af0573

スポンサードリンク