Tagged: タイポグラフィ

1

Google Fontsの使い方【2018年版】

2月もあっという間に折り返してしまい、え?え?うそ。。。となっているカテリーナです! Buongiorno! 今日は以前、読者さんのシノハラさんより質問を受けていた「グーグルフォントの使い方」についてザザーっと解説してみたいと思います。 上の無意味なスライド画像なんですが、なんとなくそこにいてもらいたいので動作が重くなろうが入れさせてもらいます。すみません! 1.使いたいフォントを決める とりあえず説明するのが面倒くさいので、シノハラさんは、HTMLやCSS、Google Fontsが何であるかはご存じである!という前提で始めたいと思います。ええ。   まずはGoogle Fontsに飛び、どのフォントを使うか決めます。 何せ800種類以上のフォントがひしめき合っていますので、これだけあると「どれをつっかおうかな~♪」とか迷うかと思いきや、自分の気に入っているフォントを毎回使ってしまうという馬鹿の一つ覚え状態。。。 2018年はもう少し冒険したいと思います。 今回シノハラさんにはわたしの馬鹿の一つ覚え状態の「Montserrat」と「Lobster」の2つのフォントを使っていただきましょうか(笑)。 こんな感じで選びます。   この要領で「Lobster」フォントも選んじゃいましょう。 その後、こういう画面を出します。 選んだ2つのフォントが並んで見えますね?   ここで、次の段階に進みます。 2.Google FontsのAPIをHTMLに埋め込む 字が小さくて少し見にくいので、下に大きく書いておきます。 <link href=”https://fonts.googleapis.com/css?family=Lobster|Montserrat” rel=”stylesheet”> これをHTMLコードのHEADタグの中に下のように入れます。 <!DOCTYPE html><html> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1″> <meta name=”author”...

Best Resources for Web Design and Development 4

Webサイトを作成時によくお世話になるサイト&サービス:素材編

どうも~ 恒例の月曜やる気ゼロなカテリーナです!Buongiorno! 今回は「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。   ぶっちゃけ自分用のリストなんですが(笑)。   あんだけしょっちゅう使うのに、何故かブックマークもせず使うたびに検索してるサービスもあったりして何やってんだわたし、みたいな。 とにかく一同に全てのリソースが集まっていると結構便利なんですよね。 かなり長いリストなので、画像も何も入れないシンプルなものにし、かつ「素材編」「Webデザインに役立つサイト編」「コーディングに役立つサイト編」「その他お役立ちサービス編」の4回に分けます。 前もってお断りしておきますが、ほとんど全てのサイトは英語です。日本語の場合は注記します。 素材編Webデザインに役立つサイト コーディングに役立つサイトその他お役立ちサービス WEBサイトを作るときにお世話になっている便利なサイトリスト 素材編 フォント Google Fonts: これはもうCSSのスタイリングなどでは必須というか。約800種類のフォントがあるので色々と遊べます。 Creative Blog: Webデザイナーだけでなく、グラフィック、DTPデザイナーなど全てのデザイナーにとって使える無料フォントのリスト。結構更新されてます。 Font Pair: Google Fontsから「こんなフォントの組み合わせはどう?」と提案してくれるサイト。 色々デザインしていると、お決まりのフォントの組み合わせばかり使うようになってくるので、こういう提案型サイトは刺激をもらえるというか。 Google Web Fonts Inspiration: ここもGoogle Fontsのペアリング提案サイトなんですが、何と言っても見ているだけで美しいサイトです。 Typogui.de: タイポグラフィの基本がここを読めば分かります。 Font Reach: ネット上に実際に公開されているサイトで、どのフォントがどの位使われているのかを表示するサイト。ここを見ると、どのフォントが今のトレンドなのかが一目瞭然です。 WhatTheFont!: 手持ちの画像の中の文字が何のフォントか分からない時に、アップロードして検索が出来る非常に便利なサイト。 カラー Palettes |...

Art & Design 0

2018年Webデザイントレンドを取り入れたページを作ってみたらこうなった

Web Design Trends for 2018 By John Bull(もちろん架空の人物です アハハ) どうも~ ちょっと腰が痛いカテリーナです!Buongiorno! 今回はタイトルの通り「2018年のWebデザイントレンド」を出来る範囲でちりばめてみたらどんなページになるんだろう?と思いまして。   というのも 年末から年越した1月は、毎年各デザインブログやデザイナーが「今年のWebデザインはこれが来る!!」とかって 結構言いたい放題言ってるんですが。   それを読んでる方としてはホントかよ?と思うようなものも結構あるんですね。   というわけで、 じゃあ30サイト調べて、それぞれが流行るって言ってるものを全部リストアップして、一番多かったものから10個のトレンドを取り入れたページを作るとどうなる? というわけで、こちらで独自調査結果の2018年Webデザイントレンド10をご覧ください。 Big, bold typography:大きく、大胆なタイポグラフィが来る。今年は本当に80年代90年代にイカしていたものが再来するようですね。 それとSan Serifが席巻していたところに、Serifが復権するようで。 フォントのペアリングを提案しているサイトなんかは今年大繁盛するんじゃないでしょうか。  フォント好きとしては、この上なく喜ばしい傾向です。 というわけで、上のフォントはDisplayタイプのLobsterで90pxという大きさにしてみました。 Asymmetry/Broken grid:アシンメトリー、グリッド無視のレイアウト。これはランディングページなんかで有効になってくる手法でしょうね。 ここはブログ記事なので、グリッド無視するのは非常に難しいので、とりあえずアシンメトリー要素だけ取り入れました。 Drop shadows and...

London Underground 2

アートが満載なLondon Underground

Buonasera! 今日もランチを食べ忘れてこんな時間になって焦っているカテリーナです。 みなさんLondon Underground(ロンドン地下鉄)と言えば何を思い浮かべます? 「いっつも遅れる」「いっつもどこかで信号が故障している」「行先が知らないうちに変わっていて気付いた時は手遅れ」とかそんなんばっかりだと思うんですが、今日はアートな方向から「あのロゴ」と「フォント」の事を書いてみたいと思います。 ちなみに「あのロゴ」というのはコレなんですが。 何を隠そう、ロンドン地下鉄は 開業が世界一古いだけでなく、そのロゴやフォントが出来たのも90年近く前という、まさにグラフィックデザインの先駆者的存在です。   もうフォントもロゴも路線図も、デザインのなにもかもがシンプルで分かりやすくカッコいい☆☆  路線図はHarry Beckさんによって何と1931年にデザインされたとのこと。  上の画像のような現在の路線図にもHarryさんの名前はしっかりこっそり印刷されてるよ。  1863年に開業した当初は複数の会社で運営していたようなんだけど、1910年代に1つに統合する時に出来たのが、今もほとんどデザインが変わらない 『Roundel(ラウンデル)』  と呼ばれるこのロゴ by Frank Pick。 この駅構内のモザイクタイルの壁面もすっごく良いよねー。  ロンドン地下鉄の駅って各駅で 全然表情が違うのが楽しい!  全駅の写真撮りにいこうかって半分本気で思ってる。   これもタイポグラフィ界の伝説(個人的に)ですが、 1915年にデザインされ、1916年に発表されたフォント『Johnston Underground』 by Edward Johnston。      このポスター下部に書かれているUndergroundという文字こそ元祖Johnstonフォントです。   そして1979年に元祖Johnstonを元に作られた『New Johnston』を経て、現在Undergroundを始めとする、ロンドン交通局(?)関連のロゴや印刷物などで使われて いるフォントは, 2016年Johnstonフォント100周年を記念してリニューアルされた『Johnston 100』というものです。   実はですね  ...