Googleフォントを利用している、参考お手本Webサイトデザインまとめ

30googlefont_top

 

Googleフォントは、無料かつオープンソースとなっている、数百ものWebフォントを提供しているサービスです。デザインに幅をもたせることができ、さまざまなWebサイトで利用されています。

 

 

海外デザインブログDesignInstruct.comで、Googleフォントを利用した、お手本になる参考Webサイトデザインを30個まとめたエントリー「Beautiful Use of Google Fonts: 30 Inspiring Examples」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

Googleフォントの使い方

 

Googleフォントを、Webサイトで利用する手順はこちらからどうぞ。シンプルな設定のみで利用できる点も、人気の理由なのかもしれません。

 

まずはお好みの書体を、Googleフォントより探しましょう。今回は、Montserratをサンプル例にご紹介します。利用したいフォントにチェックを入れたら、次に進みましょう。

howtofont1

 

 
次に自動的に発行されたコードを、HTMLファイルのhead内に記述しましょう。以下より、ひとつの方法を選択することができます。

 

通常スタイル

[crayon] [/crayon]

 

@Import スタイル

[crayon]@import url(http://fonts.googleapis.com/css?family=Montserrat);[/crayon]

 

JSスタイル

[crayon]<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ ‘Montserrat::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script>[/crayon]

 

 

つづけて、CSSにスタイリングを追加したら準備は完了です。今回は、h1タグにフォントを設定しています。

 

CSS

[crayon]h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }[/crayon]

 

 

 

Googleフォントを利用した、参考お手本Webサイトまとめ

 

サンプル Dadaab Stories

丸みのある極太スタイルで、見出しタイトルなどに利用することで、よりコンテンツを強調しています。

google_fonts_example_12dadaabstories

利用フォント Google Fonts Nunito

 

 

 

サンプル Vespillow Le Film

文字間をひろげることで、エレガントなロゴデザインや、見出しタイトルにも利用できる、太字スタイルのWebフォント。

google_fonts_example_27vespill

利用フォント Google Fonts Montserrat

 

 

 

サンプル Selective Few

高級感のある雰囲気を演出してくれるシンプルな書体で、使いやすさも◎。

google_fonts_example_14selectivefew

利用フォント Google Fonts Roboto

 

 

 

サンプル Juliana Bicycles

商品タイトルの表示に利用されており、読みやすさとデザイン性を兼ね備えた書体。

google_fonts_example_18julianabicycles

利用フォント Google Fonts Roboto Concensed

 

 

 

サンプル Pulp Fingers

どこかコミカルな印象を与える、ラインが不揃いなスタイルが、ポップな太字フォント。

google_fonts_example_07pulpfingers

利用フォント Google Fonts Londrina Solid

 

 

 

サンプル Google Fonts Pacifico

まるでロゴのような、太字でできた筆記体スタイルは、アイキャッチ素材としても活用できそうです。

google_fonts_example_02housecreative

利用フォント Google Fonts Pacifico

 

 

 

サンプル Fabrizio Michels

高級感のある筆記体デザインを、お探しの方にオススメしたい書体のひとつ。

google_fonts_example_15fabwebdesign

利用フォント Great Vibes

 

 

 

サンプル Scytale

細字スタイルの書体は、昨今のフラットデザイントレンドにも、よく馴染デザインが魅力的。

google_fonts_example_28scytale

利用フォント Google Fonts Source Sans Pro

 

 

 

サンプル Archie Wilkinson Cycle Speedway Equipment

書体の豊富さは、Webデザインの統一感を持たせるうえで、重要な要素となりますが、こちらは全部で9種類の太さが用意されています。

google_fonts_example_26archiewilkinson

利用フォント Google Fonts Raleway

 

 

 

サンプル The Aardvark Brigade

やや横長スタイルの書体は、ヘッドラインや見出しタイトルなどを想定したデザインとなっています。

google_fonts_example_11aardvarkbrigade

利用フォント Google Fonts Syncopote

 

 

 

サンプル TEDxGUC

今回紹介するフォントの中でも、特に利用されている機会の多い書体。10種類のスタイルがある点もポイント。

google_fonts_example_22tedxguc

利用フォント Google Fonts Lato

 

 

 

サンプル Johan Reinhold

フォントの端にデコレーションを施し、タイトル文やロゴデザインなど、スタイルを複数組み合わせると素敵に仕上がりますよ。

google_fonts_example_17johanreinholdghost

利用フォント Google Fonts Rokkitt

 

 

 

サンプル Rule of Three

書物などに使われていそうなセリフスタイルは、高級感だけでなく、権威のあるトラディショナルなイメージを表現するのにも適しています。

google_fonts_example_29ruleofthree

利用フォント Google Fonts Sorts Mill Goudy

 

 

 

サンプル Vicreative

どんなデバイスで閲覧したときにも、読みやすさを損なわないデザインフォント。

google_fonts_example_25vtcreative

利用フォント Google Fonts Merriweather

 

 

 

サンプル Hashima Island: A Forgotten World

見出しタイトルとして利用されており、テキスト本文との切り替えにも便利な書体。

google_fonts_example_05hashimaisland

利用フォント Google Fonts Pathway Gothic One

 

 

 

サンプル Tonic

太字の縦長スタイルは、見出しタイトルだけでなく、ロゴデザインなどにも採用できそうです。

google_fonts_example_24tonic

利用フォント Google Fonts Droid Serif

 

 

 

サンプル Crowd Interactive

細長い書体を使い、タイポグラフィーポスターのようなデザインを展開しています。

google_fonts_example_30crowdinteractive

利用フォント Google Fonts Six Caps

 

 

 

サンプル 2014 Honda Battle of the Bands

読みやすく、インパクトのある太字デザインフォントで、見出し文などにも最適です。

google_fonts_example_20hondabattlebands

利用フォント Google Fonts Jockey One

 

 

 

サンプル Alessandro Camdda

まるでイメージ画像を使って表示しているような、美しい仕上がりがたのしめる、細長の太字スタイルフォント。

google_fonts_example_09thisonlineportfolio

利用フォント Yanone Kaffeesatz

 

 

 

サンプル Kansas City CreepFest

手書きの質感を残した、筆記体スタイルのフォントになっています。

google_fonts_example_16kccreepfest

利用フォント Google Fonts Homemade Apple

 

 

 

サンプル Valerie Letens

こちらも手書き感のある筆記体フォントで、よりエレガントな印象を演出してくれます。

google_fonts_example_03valerieletens

利用フォント Google Fonts Dancing Script

 

 

 

サンプル Bel 50

レトロ、ビンテージな印象を再現するときに、便利な細長スタイルの書体が人気です。

google_fonts_example_10bel50

利用フォント Google Fonts Enriqueta

 

 

参照元リンク : Beautiful Use of Google Fonts: 30 Inspiring Examples – DesignInstruct.com