Google Fonts + Japanese • Google Fonts + 日本語
Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。 膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts を通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。 Google Fonts provides an intuitive and robust directory of open source designer web fonts. Japanese typeface design and font development presents ma
超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】 - F Lab.
ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。 今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。 紹介の前に フォント選びの基準とコツ ロゴ用と文章用の区別 Googleフォントは重い？ 万能フォント 技術系 ロゴ用 文章用 美容・ファッション系 ロゴ用 文章用 飲食・料理系 ロゴ用 文章用 スポーツ系 ロゴ用 学問系 ロゴ用 文章用 生活系 ロゴ用 文章用 Googleフォントの導入方法解説 Googleフォントにアクセス 使用したいフォントをコレクションに追加する 選んだフォントの詳細情報を指定 WebページにGoogleフォントを導入 CSSファイルにコピペし、Googleフォントを実装！ 紹介の前に フォント選びの基準
WordPress初心者が間違いなくハマる7つの罠と回避方法
みなさん、こんにちは！ タカハシ(@ntakahashi0505)です。 2015年2月にWordpressでブログを初めています。 先人たちの知恵のおかげでなんとかまだ続けることもできていますし、記事数もまずまずカタチになってきたと思ってホっとしています。 WordPressは簡単に扱えるように設計されているのですが、初心者だと間違いなく落ちてしまう罠がいくつかあるのです。 私が実際にキレイにハマった罠とその解決法について紹介をします！ 記事がないのにサイトの公開 WordPressをインストールしたのが2015/2/12。その後テーマを入れたり、プラグイン入れたり…最初は何の記事を書こうかなぁ…などとボヤボヤしていて、最初の記事を公開したのが2015/2/16。 知らなったのですがWordPress…インストール時点で既に公開状態なんです。 当然、公開後すぐのブログで告知もしていなけれ
一番簡単な、Googleモバイルフレンドリー対応の方法
2015/4/21 より、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。 Google 検索 – モバイルでの検索がさらに便利に 私が運営しているサイトのアクセスを調べてみると、どのサイトも、モバイルデバイスからのアクセスが半数を超えてきています。モバイル対応をしていないと、モバイルのランキングが下がってしまい、アクセス数が大きく減少してしまう可能性があります。 レスポンシブに対応したデザインを一から作るのがベストですが、もう時間がありません。とりあえず手っ取り早くモバイルフレンドリー対応をする方法をご紹介します。 サムリさんが紹介している方法が簡単です。 WPtouchはもういらない？プラグインに頼らずCSSの切替でスマホ対応サイトを用意する方法 1) ヘッダにviewportとcss切替えのタグを設置 下記コードをヘッダ<head>〜<
Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 初代編集長ブログ―安田英久 | Web担当者Forum
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト（太さ）が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
マテリアル デザイン関連の動画に日本語字幕が付きました
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Googleのマテリアルデザインで使える色が並び、クリック一発でカラーコードのコピーも可能な「Material UI Colors」
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
マテリアルデザインのガイドラインが最高に実践的だった
「2014年にグッときたコレ」がテーマになる Fenrir Advent Calendar 2014 の24日目です。 マテリアルデザイン デザイナーの大西です。マテリアルデザインそのものへの記事は既に多くの方々が取り組まれているので、少し目先を変えてガイドラインについてです。 このガイドラインが最高に実践的でグッときました。 UI・UXについてのガイドラインは面白くて勉強にもなるのですが、理解して実践するところにまで到達するのには中々のエネルギーを使いませんか？ マテリアルデザインは英語のドキュメントなので最初は尻込みしましたが、読み進めるうちに内容の充実っぷりに引き込まれました。ここまで親切なガイドラインは珍しいと思います。和訳も欲しいところですが、用例として画像がたくさん挙げられているので翻訳サイトを使えば充分理解できると思います。 豊富なテンプレートと素材 750種類以上のアイコン
必ず設定したい！Googleアナリティクスを導入したら最初に行うべき基本設定
Googleアナリティクスは、Googleが無料で提供しているウェブサイト分析ツールであり、多くの企業や個人が導入しています。 しかし、Googleアナリティクスは、簡単に導入できるということもあり、最初にトラッキングコードだけ設置して設定などは特にしていない、となっているサイトも多いのではないでしょか。 Googleアナリティクスをうまく活用すれば、他の有料の分析ツールに負けないくらいの機能を利用することができます。 今回は、トラッキングコードを設置した後、一番最初に設定しておくべき4つの基本設定をご紹介します。 Googleウェブマスターツールと連携する サイトに関する様々な情報を知ることができるGoogleウェブマスターツールですが、Googleアナリティクスと連携すると非常に便利です。 【Googleウェブマスターツールについては下記参照】 【保存版】Googleウェブマスターツー
Material Designを見てみた - クックパッド開発者ブログ
モバイルファースト室の @kaa です。 Googleが先日IOで発表したMaterial Designについての資料を見て、元Flasherの視点で いまさら思った事などまとめてみます。 Material design - YouTube アニメーション、スタイルのページについてメモです。 レイアウトのページ以降はまた次回に。 Introduction http://www.google.com/design/spec/material-design/introduction.html メタファーは紙？ カードは紙をイメージ、という話ですが、どうでしょうか？ もし紙だったらテクスチャの質感や表示時に傾く、ゆれる演出が入るんじゃないかと思います。 四角形がゆがむことはないので紙の見え方とは少し違いますし、紙のやわらかさがないですよね これのMaterial responseとか 紙ですと均
なぜインターネットでは「青色」が多用されているのか？
普段何気なく使用しているインターネット上のさまざまサービスをよく見てみると、至る所に「青色」が使われていることに気づきます。なぜ、インターネットではこれほどまでに青色が多用されているのか、IT関連のニュースサイトThe Awlがその理由を公開しており、興味深い内容になっていました。 Internet, Why So Blue? - The Awl http://www.theawl.com/2014/06/internet-why-so-blue こちらはGoogleが頻繁に自社のサービスに使用している青色です。カラーコードをHTMLなどで使う16進数で書くと「4385f5」になります。 試しに、Google検索を確認してみると、至る所に上記の青色が使用されているのがわかります。実は、Googleのデザイナーは上記の青色とは違う種類の青色をサービスのメインカラーに選んだのですが、上司から「
Experiments with Google
A note to our community Experiments with Google was born out of a simple idea, but you all turned it into something beyond anything we could have ever imagined. You filled it with thousands of experiments that inspired people everywhere - from the classroom to the surface of Mars. When it comes to the internet, 14 years is a long time. So in the spirit of experimentation we’re trying something new
【完全版】Google Analytics のディメンション＆指標チートシート | Ledge.ai
はいどーも中村です。 今回は、いつの間にかしれっと増えていたGAの指標＆ディメンションをまとめてチャートシート式PDFにして紹介し、かつそれぞれのデータを取得するためのタグカスタムなどについて一気に解説しきってみようかと思います。 【Download】Googleアナリティクス指標＆ディメンションチートシート 既にディメンションや指標をガリガリいじっている方はとりあえず上記をダウンロードして便利に使ってください。 が、「そもそもディメ…なんだって？」という方も多いかと思うので、そんな時は以下の解説を参照ください。 知っていれば色々捗る！GAディメンション＆指標 普通に使っていればまぁあんまりいじくる事はないんですが、主にカスタムレポート作成時などに知っているとすんごく重宝するのがGoogleAnalyticsのディメンションと指標軸。 例えば・・・ 複数あるランディングページのセッションを
Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive
デモページ Responsive（レスポンシブ） Adaptive（アダプティブ） Liquid（リキッド） Static（スタティック） Responsive（レスポンシブ） レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わせた一種のリキッドレイアウトであると考えることもできます。 Liquidapsive: Responsive Adaptive（アダプティブ） アダプティブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。レスポンシブとは異なり、単にレイアウトを変えるだけではありません。ユーザーのコンテクスト（環境・状況・目的など）に応じて表示するコンテンツ（レイアウト）
左サイドバーと右サイドバーとサイドバー無し、どれが好き？サイドバーの目的について - 鈴木です。別館
ここ最近、はてなブログを見ていると左サイドバーが多く感じるようになりました。つい1ヶ月くらい前までは左サイドバーは稀だったというのがボクの印象です。 好みや慣れという事もあるのですが、個人的にはブログなら右サイドバーが好きです。 サイドバー無しというのは、結構自分としてはハードルが高いため採用しないな～と思っています。サイドバー上部のクリック課金型広告を出したいから使用しない サイドバーがあるといろんな情報が読み取れるので便利ですよね。 上記の写真より 上記の写真を見てもらうと、右の空白よりも左のダンボーに最初に目が行く方が多いかと思います。 人は、ネットだと左から右に目を運ぶ習性があると言われています。 サイドバーの効果 サイドバーのあるブログのメリットはいろいろありますし、UIを考えた時にはサイドバーはあった方が良いと思っています。 もちろん、好みや主張を持ってサイドバー無しをされてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tiff - a visual typeface diff tool.
マテリアルデザインを用いたデザインリニューアル [フリル編]![マテリアルデザインを用いたデザインリニューアル [フリル編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/76b9f2cd58f69ba8f3d551f88dcafb865fb05912/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fdroidkaigi-150425032816-conversion-gate02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
Chrome Experiment 1,000 by Google Data Arts Team - Experiments with Google
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
