『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
Webページの表示を高速化するために無料ツールWebPagetestを使って表示パフォーマンスを確認する方法を解説しているこの記事は、前後編の2回に分けてお届けしている。後編となる今回は、「ウォーターフォールの高さを縮める」「レンダリングの開始時間を早くする」方法や、「サーバーの速度」「CDN」などについて解説する。 ウォーターフォール図やWebPagetestについては、前編を参照 高速化ポイント2 ウォーターフォールの高さを縮めるウォーターフォール図が縦に長い場合は、ブラウザがページを読み込むのに大量のリクエストを行わなければならないことを示している。リクエストの数を減らす最善の方法は、ページに含まれているすべてのコンテンツを見直して、そのすべてが本当に必要かどうかを判断することだ。例を挙げてみよう。 CSSファルやJavaScriptファイルがたくさんある場合。 以下はAOLサイトの
Webページの表示を高速化するための無料ツールWebPagetestを使って、「どこに問題があり、どう解決するのか」を調べる方法を解説する。 画像・JavaScript・CSSといったページを構成する要素こそが表示パフォーマンスの要因であり、HTTPリクエストの数やTCP接続・1バイト目までの時間（TTFB）などを調べれば、遅い原因がどこかわかるのだ。 今ではだれもがよく知っていることだが、SEOとユーザー体験の観点から見て、ウェブページの表示速度は非常に重要だ。ページの表示が速いほど検索エンジンによる検索順位も上がるし、ウェブサイトの動作が速ければユーザーが離脱せずにたくさんのページを見て、コンバージョン率も高くなる可能性が上がる。 要するに、賢明なWeb担当者やSEO専門家なら、コンテンツと同様にページ表示速度の最適化についても考慮しなければならない。 ウェブサイトの表示速度（パフォー
こんにちは！みぞれ（@xxmiz0rexx）です。 たまに見かける「記事の内容を丸ごとコピーされた！」という嘆き。 「大変だなぁ…」なんて眺めていた私ですが、今回なんと記事の文章どころか、サイトが丸ごと不正コピーされる(URL以外で判別がつかない)というとんでもない被害に遭いましたので、私が行った対処法をまとめておきます。 経緯 事の始まりは10/21。 Googleの検索結果を見ていたら、わたしの運営するフリー写真素材サイト『GIRLY DROP』のタイトルの下に見知らぬURLがついてました。 「むむ…？」と思いクリックしてみると、そこにはうちのサイトがありました。 「？？？？」 さらに、表示されている写真をクリックして詳細ページを確認してみようと思いました。 カチッ 思いっきりイケナイ大人のWEBサイトが表示されたんですがこれは( ﾟдﾟ)ﾎﾟｶｰﾝ トップページ、写真のダウンロードペ
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
アクセシビリティって、スクリーンリーダーに対応することでしょ、間違いではありませんがそれはほんの一部です。 分かりにくいナビゲーション、思ったように操作できないインタラクション、入力が困難なフォーム、内容が理解しにくいコンテンツなど、すべての人が快適にアクセスできるよう改善の手助けとなるオススメの本を紹介します。 本書は以前紹介した「コーディングWebアクセシビリティ（紹介記事）」の姉妹書で、「コーディングWebアクセシビリティ」はスクリプトを使用したWebアプリが中心でしたが、今回の「デザイニングWebアクセシビリティ」はHTMLとCSSで作られた静的なWebページが中心になっています。 発売は、週明けの27日予定です。早いとこだと週末に書店に並んでいるかもしれませんね。 追記（2015/7/24）：書店行ったら、ありました。
以前、Twitterでも少し話をしましたが、redo.me.ukというサイトに三十路男の悪あがきブログは全記事パクられています。 厳密に言えば【サイト丸ごと】コピーされています。 以下、自身のサイトで試す事に対する弊害があった場合でも、私は一切の責任を負いません。 それでも確認したい人は自己責任の下で確認してください。 ※確認しなくても、間違い無くアナタのサイトも表示されます。 redo.me.ukを知ったキッカケ 先日GRCを回していると、殆どのキーワードで順位が下がっていました。 ※redo.me.ukが理由なのかは不明 「特定ジャンルに割って入ったから、何かネガティブでも食らったかな～。」程度の軽い気持ちで被リンク先を洗い出しました。その中の１つがredo.me.ukです。 怖い物見たさでURLをクリックすると「あら、不思議」。 三十路男の悪あがきブログがもう１つ存在していました。
『そういえば、あの業界のシェアは結局どこが一番多いんだっけ……？』 そんな疑問を抱いたことがあるすべてのビジネスマンに捧ぐ連載。仕事でも利用できる業界ランキングや業界地図を私、高橋暁子が手っ取り早く紹介します。＜連載目次＞ Chromeはすでに過半数越え 皆さんは、パソコンなどでブラウザーは何を利用しているだろうか。ブラウザーは1991年に生まれて以来激しいシェア争いが続いており、「ブラウザー戦争」などとも呼ばれている。世界、日本におけるブラウザーのシェア、バージョンごとのシェアを見ていこう。 StatCounterによる、世界のデスクトップPCにおけるブラウザーシェアを見ていこう。それによると、2008年7月は、1995年に登場して以来市場を席巻していたInternetExplorer（IE）のシェアが約68.57％でトップ。続いてFirefoxの26.14％などとなっていた。 ところが
2015/05/26 [データ] スマートフォンからのインターネット利用者、2015年冬にはPCを超える可能性 ～ ニールセン、最新のインターネット利用状況を発表 ～ - 2014年度、スマートフォンからのネット利用者数は19%増加し15年4月で4,800万人に - PCからのネット利用者は5,100万人程度で横ばいに推移 - 1日あたりのインターネット利用時間はスマートフォンの1時間48分に対し、PCは54分 視聴行動分析サービスを提供するニールセン株式会社（本社：東京都港区、代表取締役社長兼COO：宮本淳）は、スマートフォン視聴率情報Nielsen Mobile NetView（ニールセン・モバイル・ネットビュー）、および、PC版インターネット視聴率情報Nielsen NetView（ニールセン・ネットビュー）のデータをもとに、最新のインターネット利用動向を発表しました。 それによると
この記事は自分が勤めている会社の社内文書として esa に書いたものです。外に出しても問題なさそうな内容なので、Qiita のほうにほぼ変更なしで転記しました。 内容の確認はそこまで深くしておらず、実際の動きを軽く見た程度であり、間違いが含まれているかもしれません。なにかわたしの認識に誤り等がございましたら、編集リクエストをしていただけますと幸いに思います。 Firefox 40 の Developer Edition が出ました。現時点での Firefox の安定版は 38.0.1 ですので、実際に 40 が安定版として出るのはしばらくは先になるかと思います。 とはいえ情報として今から認識しておいたほうが良い点がいくつかありますので、JS や CSS を書くかたは Firefox 40 サイト互換性情報 - Mozilla | MDN を一読しておくと良いかと思います。 この記事では実サ
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
「TLS暗号設定ガイドライン」は、TLSサーバの構築者や運営者が適切なセキュリティを考慮した暗号設定ができるようにするためのガイドラインです。「様々な利用上の判断材料も加味した合理的な根拠」を重視して、TLS通信での実現すべき安全性と必要となる相互接続性とのトレードオフを考慮した3つの設定基準（「高セキュリティ型」「推奨セキュリティ型」「セキュリティ例外型」）を設けており、各々の設定基準に対応して、TLSサーバで設定すべき具体的な要求設定（「遵守項目」と「推奨項目」）を決めております。 本ガイドラインは安全なウェブサイトの作り方とともに適切な暗号設定をする資料の一つとしてお使いいただけます。 なお、本ガイドラインは、暗号技術評価プロジェクトCRYPTRECで作成されました。 「TLS暗号設定ガイドライン」の内容 1章と2章は、本ガイドラインの目的やSSL/TLSについての技術的な基礎知識を
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
今日は、ちょっと技術的な話を。「meta referrer」という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。 グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。 でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS（ふつうのHTTP）のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。 これは、RFC 2616で、「セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない」と定められているからです（セクション15.1.3）。 とはいえ、Web担のようなメディアでは、「Web担のページから、うちのサイトにけっこう来る人いるんですよ」という反応も大
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ: 太田良典, 伊原力也: 本
Amazon.co.jp: これからの「標準」を学ぶ マルチデバイス対応サイト構築 (Web Designing BOOKS): エ・ビスコム・テック・ラボ: 本
