タグ

2017年11月7日のブックマーク (14件)

  • UIデザインに最適化されたフリーフォントが素晴らしい!小さいサイズでもくっきり綺麗に表示される -Inter UI

    以前紹介した「Interface」が名前を改め、さらにくっきり綺麗に表示されるよう進化したUIデザイン用のフリーフォントを紹介します。 パソコンやスマホのモニターで、文字サイズが小さくてもくっきり美しく、綺麗に表示されるようデザインされています。 The Inter UI font family Inter UI -GitHub Inter UIの特徴 Inter UIフォントファミリー Inter UI 2.2の変更点 Inter UIのダウンロード Inter UIの特徴 Inter UIUIでよく使われるRoboto, San Francisco, Lucida Grandeにインスパイアされ、小さいサイズでより機能するようにデザインされています。

    UIデザインに最適化されたフリーフォントが素晴らしい!小さいサイズでもくっきり綺麗に表示される -Inter UI
  • 【Webデザイン】配色に悩んだ時に見て欲しい便利なサイト5つ紹介 - YUUU BroG

    2018.6.20 更新 突然ですが、Webサイトを作成する時や、ブログのデザインをカスタマイズするときに「どんな色を使うか」で悩んだことはありませんか? 背景色、文字色、メニューの色、見出しの色...何となく決めてしまいがちですよね。デザインを決めるうえで配色というのは、見た人に与える印象を決定づけるもので、とても大切な要素です。 パソコンのモニターが表示できる色の数は「約1677万色」あり、数ある色の中から理想の配色をピックアップするのは非常に困難です。 「明るくて柔らかい印象を与えられるような配色にしたい」 「青系をメインカラーとし、クールなサイトを作りたい」 漠然とした理想や、イメージはあるものの、どうやって決めていけばいいのか悩みますよね。 そんな悩みを解決してくれるかも!?配色に悩んだときに見てほしい、無料のオススメなサイトをご紹介します! 配色に悩んだときに見てほしいサイト

    【Webデザイン】配色に悩んだ時に見て欲しい便利なサイト5つ紹介 - YUUU BroG
  • あなたの知らない CSS ベストプラクティス - Frasco

    ReactAngularVue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能

    あなたの知らない CSS ベストプラクティス - Frasco
  • Googleタグマネージャでアナリティクスのイベントを管理しよう!設定方法まとめ|Goodpatch Blog グッドパッチブログ

    Webサイトやアプリを運営してる方にとっては馴染みのある「Googleアナリティクス」。日々の目標を追ったり施策の分析で … Googleタグマネージャでイベント管理するメリット 前回の記事でも少し書きましたが、「取りたい数字が開発なしにすぐ取得できる」、「イベント管理が煩雑にならない」が大きなメリットです。 今までは、ソースコード上に直接以下のイベントを埋め込んでいました。 ga('send','event','[カテゴリー]','[アクション]','[ラベル]','[値]'); 小規模でスピード感のあるサービスであれば、この運用でも構いません。ただし、規模が大きいサービスの場合、イベントを埋め込むまでに時間を要したり、どこでイベントが発生しているのか管理が煩雑になります。 これらをGoogleタグマネージャで行えば、エンジニアに依頼しなくても取りたい情報をすぐに取得できますし、どこで何

    Googleタグマネージャでアナリティクスのイベントを管理しよう!設定方法まとめ|Goodpatch Blog グッドパッチブログ
  • 無料SSL(Let’s Encrypt)を設定したい | さくらのサポート情報

    このマニュアルでは、さくらのレンタルサーバで無料SSL(Let’s Encrypt)を導入する手順についてご案内しています。 無料SSL機能は米国の非営利団体であるInternet Security Research Group(ISRG)の運営するLet’s Encryptを利用しています。 利用には提供元のポリシーに同意する必要があります。 SMTP over SSL や POP over SSL などのメール機能についてはご利用になれません。 発行された証明書及び秘密鍵はお客様にて厳重に管理してください。 紛失、期限切れ等のトラブルについては一切の責を負いかねます。 環境変数の扱いに一部制限があります( mod_rewriteの扱い等 ) さくらインターネットが所有するドメイン( sakura.ne.jp や tank.jpなど )では、SSLをご利用できません。 独自ドメインを取得

    無料SSL(Let’s Encrypt)を設定したい | さくらのサポート情報
  • さくらのレンタルサーバーで、.htaccess を使って http を https へリダイレクトして、www も無しで統一する - Latele Blog

    クセの強さに定評のある、さくらのレンタルサーバーで http → https と www 有無のリダイレクトを頑張ってやって、なんとか形になったって言うお話です。 タイトルが長い...! 弊社のサイトをリニューアルしたタイミングで何気にSSL化をしたんですが、http → https はちょっと調べたら見つかったので問題なかったのに、www 付きでアクセスした場合のリダイレクトがうまくいっておらず、しばらく放置してましたがやっと解決したので備忘録兼ねて投稿です。 はじめに この記事を読んで実際に試して何らかの問題が生じても責任は一切負いません。試される場合は、自己責任でお願いします。 ボク自身、.htaccess はテキトーにググッて最低限の記述をコピペしてくる程度のレベルなので、今回の方法がベストなのか分かりません。 より最適な方法やパフォーマンスが良い方法をご存知でしたら教えて頂けると

    さくらのレンタルサーバーで、.htaccess を使って http を https へリダイレクトして、www も無しで統一する - Latele Blog
  • htaccessでHTTPSにリダイレクトする - Qiita

    RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] このなかでRewriteRuleの最後に書いてある[R=301,L]のとこなのですが、Rがリダイレクトを指しており、=301を省略すると302がデフォルトになります。 用途に応じて使い分けると良いでしょう。 [R=301,L] 永久的なHTTP→HTTPS [R,L] 一時的なリダイレクト ロードバランサー(80,443対応)の配下にある場合 これはAWS環境でELBがある場合や、その他のプロプライエタリなロードバランサ(LoadMaster、BigIP、Coyote、A10など)の場合に適用できます。もちろんNginxなどのリバースプロキシを使う場合も有効です。 基的には上流の

    htaccessでHTTPSにリダイレクトする - Qiita
  • GAのデータに興味のない上司や同僚にレポートを見てもらうには? メールを自動配信する方法2つ[第60回] | 衣袋教授の新・Googleアナリティクス入門講座

    自分がGoogleアナリティクスを利用していろいろなことを発見していても、上司や同僚がデータにほとんど興味を示さず苦慮している方も大勢いるだろう。興味がない人にデータを見る習慣を植え付けるのはなかなか難しく、また興味があっても能動的にGoogleアナリティクスにログインしてデータを見てもらうのはハードルが高い。 そうした場合、たとえば「大きな変動が見つかったときに」あるいは「月に1回定期的に」自動的にメールが届くという仕組みを作るのはどうだろう。メールが送られたタイミングで、あわせてその上司や同僚に声をかけて軽く説明し、徐々に興味を持ってもらえるようにしてみよう。今回紹介する機能は次の2つだ。 大きな変動が見つかったときにメールで知らせる → 「カスタムアラート」機能月に1回定期的にメールで知らせる → 「共有」機能ただし、毎日のように送り付けるのは禁物だ。かえってうっとうしがられないよう

    GAのデータに興味のない上司や同僚にレポートを見てもらうには? メールを自動配信する方法2つ[第60回] | 衣袋教授の新・Googleアナリティクス入門講座
  • 【Google AdWords】プロモーション表示オプションが便利そうな件 - リスティング広告運用代行|カルテットコミュニケーションズ

    皆さんこんにちは。 気付くともう11月に入り、年末ももうすぐそこですね。 ウィンターセールやクリスマスセールを計画している広告主様も多いのではないでしょうか。 そんな方にとっておきの広告表示オプション「プロモーション表示オプション」が、先日Google AdWordsにて使用可能になりましたので紹介したいと思います。 プロモーション表示オプションって何? 通常の広告文の下に、「30%オフ」「\1,000オフ」など割引率や割引額を設定して商品のセール情報を追加することができます。対象となるのは最上部と最下部に表示される広告です。 ※ベータ版の管理画面からのみ設定が可能です。 セール実施時に新たに広告文を作成・入稿する必要がなく、またセール内容を目立つ形で表示できるため、広告主様にとってもユーザーにとっても便利な機能ではないでしょうか。 設定してみる。 早速設定してみましょう!ということで、ベ

    【Google AdWords】プロモーション表示オプションが便利そうな件 - リスティング広告運用代行|カルテットコミュニケーションズ
  • GTMの新機能「要素の表示(スクロールイン)」を使って汎用的なGAイベントを設定してみた - Qiita

    つい先日、GoogleTagManager(Googleタグマネージャ、GTM)に、主にスクロール挙動に対する機能である「スクロール距離」と「要素の表示」のトリガーが追加されました。 サイト内改善を行っていくにあたって、欲しいと思う場面の多い機能だったのでありがたいですね。(つい先日同じ機能をjsで書いてしまったばかりですが…) 今回早速「要素の表示」トリガーを使う機会があって、汎用的なGAイベントトラッキング用のタグを設定してみたので、社内共有も兼ねて記事にします。 設定したタグの仕様 「gtm_scroll_in_event」というCSSクラスを付与した要素が画面内に表示された時に、GoogleAnalyticsのイベント計測のタグ配信が行われる。 「gtm_scroll_in_rate」という属性に数値を設定することで、要素の何%が画面内に入った時にタグが配信されるかを設定できる。

    GTMの新機能「要素の表示(スクロールイン)」を使って汎用的なGAイベントを設定してみた - Qiita
  • Facebook広告でコンバージョンを獲得するためのアカウント設計ガイド|アナグラム株式会社

    Facebook広告に限りませんが、プラットフォームによる自動化・最適化を利用する場合は「適切な設定がされているか」が広告の成否に大きく関わります。しかしこれまでFacebook広告についてご相談いただいた中で、設定一つで大きな改善が見込めるケースは少なくありません。 この記事ではFacebook広告のコンバージョン最適化のメリットを最大限活かすための適切な設定や広告アカウント設計の考え方を解説します。長くなりますが、どれも重要なことばかりなのでお付き合いください。 コンバージョンデータの重要性 まず非常に重要な前提として、Facebook広告で継続的に成果をあげていくためには一週間あたり約50件のコンバージョンを各広告セット(キャンペーンではなく広告セットです)で獲得し続ける必要があることを知ってください。これは経験則ではなく、Facebookの公式ヘルプにコンバージョン最適化のために必

    Facebook広告でコンバージョンを獲得するためのアカウント設計ガイド|アナグラム株式会社
  • プロトタイプにも最適! 誰でもWebサイトを爆速開発できる無料Webサービスをまとめてみた! - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、誰でも簡単に最近のトレンドを意識したWebサイトを作成できる無料のWebサービスを厳選してみました! 短時間で美しいサイトが作れるので、プロトタイピングにも最適です。 各サービスの特徴や使い方などを簡単にまとめているので、これからWebサイトを作ろうと考えている人はぜひ参考にしてみてください! ■「Bootstrap 4」ベースのWebサイトを作れるサービス! 【 Pingendo 】 マウスでポチポチクリックしていくだけで、いつの間にか「Bootstrap 4」ベースのWebサイトが作れてしまうのが「Pingendo」の面白いところ。 当初はシンプルなWebエディタとしてリリースされていましたが、活発にバージョンアップを繰り返して多機能なサービスに変化しています。 豊富なテンプレートやコンポーネントが搭載されており、ファイルの書き出し

    プロトタイプにも最適! 誰でもWebサイトを爆速開発できる無料Webサービスをまとめてみた! - paiza times
  • CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld

    以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と

    CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
  • 速報!Google Optimizeに2つの新機能が追加 | 株式会社プリンシプル

    記事で触れているGoogleアナリティクスは、ユニバーサルアナリティクス(UA)を前提としています。 GA4を対象とした記事ではございませんので、ご注意ください。 【2つの機能アップデート】 2017年9月にベータ版が公開された無償版Google Optimize(以下、単にOptimize)ですが、2017年7月にアナウンスされた全ユーザーへの無償版Optimize開放に続き、2017/10/26のアップデートでかなり便利な機能が2つ追加されました。 ※Optimizeの使い方については下記ページをご参考ください。 速報!Google Optimize(グーグル・Optimize)使用感レポート 今回追加された便利機能は、 ① カスタム目標 ② AdWords連携機能(ベータ版) の2つです。 【追加機能1:カスタム目標】 『OptimizeのA/Bテスト設定手順』 Optimizeの

    速報!Google Optimizeに2つの新機能が追加 | 株式会社プリンシプル