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）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
スマホサイトの横揺れ・横スクロール・見切れ・はみ出しの原因と対策 - Naifix
スマホ対応の WordPress テーマや HTML テンプレートを使っていても、広告や表が画面からはみ出してしまったり、ぐらぐらと横揺れしてしまうことがありますよね。 レスポンシブ web デザインはそうならないように設計されていますが、HTML タグの使い方や CSS の指定によっては表示が崩れてしまいます。 よくある横揺れの原因と具体的な対策方法、一発で解消できる CSS コードを見ていきましょう。 スマホの横揺れがおきる原因 横揺れは、Web サイトの幅（≒ スマホの画面幅）より大きな要素があるときに発生します。 枠内におさまっているように見えても、はみ出している要素のぶんだけ横スクロールが発生してしまうわけです。 どの要素が飛び出しているか探るときは、以下の CSS を追加してみてください（色や太さはお好みで）。
Search Console (サーチコンソール)の登録・使い方完全マニュアル
「Googleサーチコンソールに登録したけど、ほとんど使っていない…」 「そもそもGoogleサーチコンソールを使って何ができるんだろう…」 そんな悩みを持っているWebサイト制作者、担当者の方に伝えたいことがあります。 Google Search Console(サーチコンソール)は、Webサイトの運用や成長において必須のツールです。 しかし、「そもそもGoogleアナリティクスとの違いは何だろう？」と疑問を抱いたり、PV（ページビュー）やUU（ユニークユーザー）などの分かりやすい数値が見られるわけでもなかったりと、登録したまま活用しきれていない人が多いのも事実です。 そこで今回は、Webサイト運営に欠かせないGoogleサーチコンソールを使いこなせるようになるために、登録方法や機能の解説、使い方などをご紹介します。 Googleサーチコンソールとは Googleサーチコンソールは、Go
Googleマップのカスタマイズに挑戦してみた！
今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください！ それではどうぞ！ Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね！ そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go
あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT by Beeworks
※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se
レスポンシブ・ウェブデザインは上位表示に有利ではない、デメリットもある
[対象: 中〜上級] Googleが推奨するモバイルサイト構成はレスポンシブ・ウェブデザイン Googleは3つのタイプのモバイルサイト構成をサポートしています。 レスポンシブ・ウェブデザイン（同じURLと1つのHTML/CSS） 動的な配信（同じURLと別々のHTML/CSS） モバイル専用のURL（異なるURLと別々のHTML/CSS） このなかで、Googleがもっとも推奨する構成が1つ目のレスポンシブ・ウェブデザインです。 レスポンシブ・ウェブデザインには大小さまざまなメリットがあります。 なかでも、URLが1つ、リダイレクト設定が不要というのがいちばん大きなメリットでしょう。 重複コンテンツを生まないし、リダイレクトによるミス（Googleの人によれば非常に多いらしい）も発生しません。 検索エンジンにとっても都合がいいのがレスポンシブ・ウェブデザインになります。 レスポンシブ・ウ
グーグル 無料のウェブ制作ツール Web Designerを公開
Googleからものすごそうなツールが登場。Adobeのツールがすべて合体したようなツールです。Illustratorのようなパス描画を可能とし、3Dビューで編集まで可能、さらにAdMobの設定までできてしまい、タイムラインでHTML5のアニメーションまでできてしまうようです。 直感的ツールで作ったデザインをマルチデバイスに対応したウェブページとして吐き出してくれるようです。又、デザインツールで作られたコードをコードビューに切り替えて直接編集することまでできてしまい、まさにかゆいところの手が届く感じの機能が網羅されているようです。 新規ファイル作成画面 3Dビューを備えたイラストレーター的ツール チュートリアルがこちらで用意されています。 Google Web Designer Help これは使い込んで見て損はなさそうですね。恐ろしいツールが出てきてしまいました。Adobeはどう出る？
Google、スマートフォン向けサイトのランキングアルゴリズムを変更。誤った設定のサイトの評価を下げる、表示スピードが遅いサイトも対象に。
[対象: 全員] Googleは、誤った設定を行なっているスマートフォン向けサイトの評価を下げるアルゴリズム変更を実施することを発表しました。 日米のウェブマスター向け公式ブログでアナウンスが出ています。 Official Google Webmaster Central Blog: Changes in rankings of smartphone search results Google ウェブマスター向け公式ブログ: スマートフォン向け検索でのランキングの変更について 先週参加したSMX Advancedでも、米GoogleのMatt Cutts（マット・カッツ）氏とMaile Ohye（マイリー・オーイェ）氏から説明がありました。 この記事では、公式アナウンスとカンファレンスで僕が聞いた話を交えて、スマートフォン向けサイトを対象にしたランキングアルゴリズム変更の概要を解説します。
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からのアドバイス「高品質なサイト」とは？ チェックリストを公開 ::SEM R (#SEMR)
Googleからのアドバイス「高品質なサイト」とは？ チェックリストを公開 検索アルゴリズム的に「高品質なサイト」って何だろう？Googleが、高品質サイトを判断するための参考になる「質問集」を公開。 公開日時：2011年05月07日 09:03 米Googleは2011年5月6日、役に立たない低品質サイトの排除と同時に優れたコンテンツが検索上位に表示されるようにするためのアルゴリズム変更（パンダ・アップデート(Panda Update)）に関連して、同社が考える「高品質サイト」について言及している。 検索マーケティング業界で話題になっているパンダ・アップデートとは、いわばアルゴリズムで自動的にサイト品質（site quality）を判断しようとするGoogleの取り組みだ。低品質サイトの検索順位を低下させることにより、検索利用者が優れたコンテンツを探し出せるようにする狙いがある。 「アル
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
Googleアルゴリズム200項目全てを特別公開 – マーケティングブログ
Googleアルゴリズムの200の要素を発見しましょう！（Let’s Try to Find All 200 Parameters in Google Algorithm） は2009年に書かれた記事ですが、パンダアップデートが適用された今現在（2011年4月）でも重要項目が多く書かれているもので。 多くはGoogleの特許（合衆国特許出願0050071741）に基づいていますが、筆者のアンが自身の解析結果や予測を盛り込んでいる事で、より実践に近い内容になっています。 SEO初心者の方は、これからのウェブ制作の軸に、SEOエキスパートの方はもう一度自身のサイトを見直す目次として確認してみてはいかがでしょうか。 ドメインに関する13要因 ドメイン年齢 ドメイン取得からの長さ ドメイン登録情報（Who is情報）の表示/非表示 ドメイン種類（サイトレベルドメイン（.com や co.uk） ト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Googleの新しいUIで使われているボタンをCSSで実現する方法 | IDEA*IDEA