無料で使える日本語ウェブフォント9種類をGoogleが公開中
閲覧者のPCにフォントがインストールされていなくても指定したフォントを表示できるウェブフォントは、閲覧者の使用環境にウェブサイトのデザインが左右されないため非常に便利なのですが、アルファベットとは違い文字の種類が多いため日本語に対応したウェブフォントが少ないのも事実。そんな中、Googleが日本語フォント9種類をウェブフォントとして試験的に無料公開しています。 Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access https://googlefonts.github.io/japanese/ ウェブフォントとして利用できるようになったのは以下の9種類。もともとGoogleは独自開発したフォント「Noto Sans Japanese」を日本語フォントとして公開していましたが、今回はそれに加えて、「M+ FONTS」や
サイトのデザインに合わせたGoogle Mapを表示しよう | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ
こんにちは。 宮崎から景山がお送りします。 初めて宮崎に来ました。 自分がどこを歩いているのかさっぱりわかりません。 GoogleMapがなければ家にたどり着くことすらできなかったでしょう。 Google先生に感謝です。 GoogleMapに頼りまくりな私ですが、サイトにGoogleMapを表示させる事は多いはず。 そこで、本日はGoogleMapもサイトのテイストに合わせたデザインにカスタマイズする方法を紹介します。 まずは、何はともあれGoogleMapで表示させたい場所を表示させましょう。 普通にサイトにMapを表示させるだけなら、左上の三本線のメニューから 地図を共有または埋め込むから、埋め込むを選択してタグを埋め込めばよいです。 ですが、カスタマイズする場合はGoogleMap APIを使います。 【Google Map カスタマイズ】 マップの表示 デザインの適用 アイコンの変
ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
Googleのマテリアルデザインを使ったウェブサイトが作れる公式CSS/JS/HTMLコンポーネント「Material Design Lite」
Googleがモバイル向けOSの「Android 5.0 Lollipop」で採用し、同社の他の製品やサービスでも導入されている「Material Design(マテリアルデザイン)」は、見た目だけではなく使い勝手までも意識してデザインされたUXです。そのマテリアルデザインを使ったウェブサイトを作れるCSS/Javascript/HTMLコンポーネント「Material Design Lite」を、Googleが公開しています。 Material Design Lite http://www.getmdl.io/ Introducing Material Design Lite — Google Developers — Medium https://medium.com/google-developers/introducing-material-design-lite-3ce67098
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
GoogleとAdobeのフォントNoto Sans（Source Han Sans）の画期的なところ
2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ
あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT by Beeworks
※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
アイコンデザインの参考に。GoogleのUIパーツ・ガイドライン資料 | ビジュアルシンキング
Behanceに「Google Visual Assets Guidelines」の紹介がありました。 これは、Googleのプロダクト・アイコンや、サービス・ロゴ、UIパーツについて、形状や色のガイドラインを定めたものです。 アイコンのデザイン原理 丸や単純な矩形の組み合わせできています。 アイコンやピクトグラムをデザインする際はレゴで遊んでいたときのことを思い出すとよいです。 パーツの組み合わせのおかげで、アイコン間の統一感も生まれます。 image by Behance image by Behance image by Behance ほかにも3つルールをピックアップ。 3D禁止 image by Behance 影のルール 真っすぐか45度、ソリッドに。 image by Behance 色のコンビネーション・ルール image by Behance こうした資料は、アイコンやロ
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
18 Cool Redesign Ideas for Popular Websites
Design plays a pivotal role in the success of a website, acting as the crown to the content’s kingship. It’s not just about looks; design shapes how we interact with content. A poor design can lead to a frustrating user experience and a decline in website traffic. As web designers, we often face a balancing act. In our pursuit of creating the perfect website, we find ourselves weighing aesthetics
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Google Design
Google Bootstrap has moved!
サイトを作った時に絶対にやるべき10の事 | 無料SEO対策のススメ