GoogleのUX指標「Core Web Vitals（コアウェブバイタル）」とは？LCP・FID・CLSを解説
Googleは2020年5月28日、検索ランキングの指標を「Core Web Vitals（コアウェブバイタル）」と既存のシグナルを組み合わせると発表した。今回はCore Web Vitalsを構成する3つの指標、LCP・FID・CLSについて解説していく。 Web Vitals（ウェブバイタル）とは まず、Web Vitalsとは、GoogleがWeb上で優れたユーザー体験を提供するために不可欠である考えであり、ユーザー体験を向上させるためのガイダンスを提供するための Google の取り組みだ。 Core Web Vitals（コアウェブバイタル）とは Web Vitalsの中でも特に重要な3つのことをCore Web Vitalsとしている。具体的には読み込み時間（LCP）、インタラクティブ性（FID）、ページ・コンテンツの視覚的安定性（CLS）が挙げられる。 Core Web Vi
劇的に写真映りが変わるPhotoshopのレタッチ47方法まとめ
ferret編集部：2015年5月13日に公開された記事を再編集しています。 近年、カメラ人気が高まりプロでなくとも写真を撮る方が増えています。 ビジネスの現場でも、素人ながら出来るだけいい写真を撮りたい、商品をもっと綺麗に見せたいという理由で、本格的な一眼レフを使って自社で写真を用意している会社も少なくありません。 しかし、どんなにいいカメラと機材を揃えて撮影しても仕上がりに納得いかないことだってあります。 特に屋内や人物を被写体とした撮影では、色かぶりや明るさ、人物の肌の荒れが気になるのはごく一般的なことです。 そこで覚えたいのが画像レタッチ（修正）のテクニックです。 画像修正ソフトであるphotoshopはとにかくあらゆる使い方が出来るので、全てを覚えるのは困難です。使いたい技術だけをチュートリアルに沿って実行すれば誰でも簡単に写真補正を行うことができます。 ここでは、使用頻度の高い
カテゴリ別に紹介！PhotoshopやIllustratorで使えるベクター素材サイトまとめ
デザインの際によく使われるパターン素材は、簡単にデザインの中に組み込むことができて非常に便利です。 しかし、Web上にはたくさんの素材がある反面、欲しい素材を探すために意外と面倒だったり、気に入ったデザインのものが見つからないこともあります。 今回は、Illustratorで使用できる素材を、よく使われるカテゴリ別に分類してご紹介します。 使用したい素材のテーマが決まっている時にはぜひ、検討してみてください。 リボン系 1.無料で使える、リボン・帯・ラベルのフリー素材まとめ 20選 http://designup.jp/free-ribbon-343/ ポップなデザインのリボンやラベルなどの素材集です。 2.少し高級感のあるリボンフレーム【無料イラスト素材】 http://vectorclub.net/0049.html 賞状などで使われるような、高級感のあるリボン素材集です。 3.デザイ
Googleタグマネージャー（GTM）とは？アナリティクスとの連携方法や使い方を解説
Googleタグマネージャー（GTM）とは？アナリティクスとの連携方法や使い方を解説 これから“BtoBマーケティング”を本格的に行いたいという方向けに、マーケティングの戦略設計や各種施策のノウハウを網羅した資料です。 1. Googleタグマネージャー（GTM）でどんな問題が解決できる？ サイト担当の皆様、日々の業務でこんな問題はありませんか？ ・タグを貼る度に、別の部署や制作会社に依頼しなければならない ・ 一つのサイトに様々なツールのタグが混在してカオス ・ どこにどのタグが記述されているか、把握しきれない ・複数人でサイトの管理しているので、最新状況が把握しきれない タグマネージャーを導入することで、これらの問題が解決できます。 CTAの効果計測、広告配信設定、外部ツールとの連携、チャットポット設置の際など、サイト運用上でタグを使うシーンは数多くありますので、サイト運用にはタグマネ
QRコードとは？無料で安全かつ手軽に作れる作成ツールと利用時の注意点を紹介
今回はQRコードの無料作成方法と利用方法を解説します。企業が活用する際に気を付けたい点もご紹介します。どのように運用していけばいいのか迷っている人は必見です。 ※QRコードは(株)デンソーウェーブの登録商標です。 QRコードとは QRコードとは、株式会社デンソーウェーブが開発した四角形のバーコードです。対応する機能を持った端末で読み取ることで、QRコードに含まれた情報を取得できます。 1994年に発表されて以来、空港などの公共機関含め多くの施設で利用されてきました。 読み取り機能を装備しているフィーチャーフォン（携帯電話）だけではなく、スマートフォンでもアプリをダウンロードすることで対応できます。 QRコードの特徴 QRコードは”クイック・レスポンス”を意味して名付けられているように、360° どの向きからでも素早くデータ読み取れるのが特徴です。 素早いだけではなく、小さな枠ながら数字・英
Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]
Webディレクターの仕事において、非常に大きな比重が置かれるワイヤーフレーム制作。皆さんはどのソフトウェアを使っていますか？ 多くの企業のPCに導入されているPowerPointをワイヤーフレーム制作に利用している方もいるかもしれません。Adobe XDといったワイヤーフレーム作りに特化したツールを使うとより作業が楽になり便利になります。 今回は、Adobe XDでワイヤーフレーム制作するなら知っておくべき機能について特徴を踏まえつつ解説していきます。 Adobe XDとは Adobe XDは、アドビ システムズ 株式会社が提供しているアプリケーションの1つです。Webサイトやモバイルアプリのワイヤーフレーム制作、デザインに適したアプリケーションです。 PowerPointやIllustratorなどと同じ様に図形や文字、画像などを使ってページの構成、サイトデザインを作成できます。 Ado
![Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8bc0eb4954e819f7e70ccfa075c8c16de7e2687a/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F10585%2Fog_image%2Fdefault-fa3d5d1dd26098b04b86477a87dee843.jpg)
ヒアリングシートで要望まとめが簡単便利！目的別テンプレート18選
Web制作をはじめ、クライアントの抱える問題を引き出す際、必要となるのがヒアリングシートです。 最低限、聞いておくべきことをヒアリングシートにまとめておくだけで聞き忘れ防止だけでなく、クライアントの希望・要望を正確に聞き出すことができます。 特にヒアリングシートを初めて作る際、何を聞けば良いのか分からない、という経験をしたことが一度はあるのではないでしょうか。 その場合はヒアリングシートのテンプレートが公開されているので、そちらをベースにして目的別に活用してみましょう。 Webサイト制作用テンプレート 1.WEB制作でクライアントへの確認漏れ対策！自分用・社内共有用のヒアリングシートを使おう https://designmemo.jp/lifehack/web-hearing-sheet.html 一般的なホームページを制作しようと思ったときに使いやすいテンプレートです。 クライアント情報
DropboxもSlackもたった1つのアプリで！Webサービスを統合管理できるmacOS用アプリ「Station」
SlackやGoogleドキュメント、Dropboxなど、便利なサービスが次々に登場しますが、それらが乱雑になって、結局使うのをやめてしまった。 そんな経験はありませんか？ 確かに、Webサービス・Webアプリケーションであれば、ブックマークに保存しておけばいい話です。 しかし、後で読み返したいたくさんの情報の中に、そうしたプロダクトのURLが混ざっていること自体に不快感を持っているひともいるかもしれません。 ところが、もしDropboxもSlackも、GoogleカレンダーもHerokuも、PocketもWordPressさえも、1つのアプリケーションに統合して、タブで切り替えるだけで簡単に立ち上げることができたら、どうでしょう？ それを可能にしたのが、今回ご紹介する便利なアプリ「Station」です。 今回は、その名の通り*この1本で仕事が完結しそうなmacOS用のWorkstatio
これでもう大丈夫！上司も納得する議事録の書き方を徹底解説｜ferret [フェレット]
会議や商談などにおいて、議事録は必要不可欠です。しかし、メモがしっかり取れない、どのような議事録を書けばいいのか分からないと悩んでいる方は少なくありません。議事録は、構成や書き方のコツを掴めば、文章が苦手な方でもきちんと書けるようになります。 今回は、議事録を上手に書くためのテクニックやコツについて解説します。すぐに始められることもあるので、議事録の書き方に悩んでいる方はぜひ参考にしてみてください。また、本記事では議事録作成に便利なテンプレート・フォーマットやツールも紹介しています。こちらも合わせて活用してください。 議事録の目的 重要なポイントを押さえた議事録を書くためには、まず議事録の目的を理解しておかなければなりません。議事録には、大きく2つの目的があります。 責任の所在を明確にする 議事録が必要となる会議では、複数の参加者が順番などなく次々と発言します。意見を交わすうちに、そもそも
![これでもう大丈夫！上司も納得する議事録の書き方を徹底解説｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ca800514ad67db6d3dee38a6c80f0650c2129ce/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F886%2Fog_image%2Fdefault-3cbe2b831ba92956217b624f9411b911.jpg)
Googleインデックスのページを削除し検索結果で表示させない方法
皆さんは、Googleの検索結果に表示された自分のホームページのリンクを消したいと思ったことはないでしょうか。 ・間違えたURLが検索結果に出るようになってしまった。 ・検索結果に表示したくないページが出ている。 など、消したいケースは様々です。 ページ自体を削除しても、検索結果から表示がいつ消えるかどうかはGoogle次第ということもあり、運営側としては困りものです。そこで利用したいのがGoogleサーチコンソールにあるURL削除ツールです。 今回はURL削除ツールの使い方から、使ってはいけないケースまでご紹介します。 目次 URL削除ツールとは あくまでも一時的な削除 URL削除ツールの使い方 URLを検索結果から完全に削除するには URL削除ツールを使ってはいけないケース ハッキングされたサイトを削除するために使う 使われなくなった古いURLを削除するために使う ペナルティを受けたド
box-shadowはもう古い？CSS新時代の「影の落とし方」
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
Yoast SEOを使ってWordPressのSEO対策を実施しよう
インストール方法 WordPress左サイドバー「プラグイン」>「新規追加」を選択し、検索窓に「Yoast SEO」と入力します。プラグインの「今すぐインストール」をクリックします。 「有効化」をクリックします。 Yoast SEOの使い方 ウェブマスターツール（Google Search Console）連携 WordPress左サイドバー「SEO」>「ダッシュボード」を選択し、タブ「ウェブマスターツール」にてGoogle Search Consoleを連携します。 Google Search Consoleにて、新しくサイトを登録します。 所有権確認のページにて、タブ「別の方法」> HTMLタグを選択し、metaタグ内のcontent=以降、”（ダブルクオーテーション）の中身をコピーします。 WordPress > Yoast SEOに戻り、コピーした内容をGoogle Search
ネーミングに悩んだら？活用すべき発想法・企業事例や便利なツールまとめ
会社名、店名、商品の名前にいたるまであらゆるシーンでネーミングは重要です。一度決めてしまったネーミングは何度も変更しづらいので、よく吟味して納得できるものを考える必要があります。 しかし、なかなかアイデアが浮かばないという方も多いのではないでしょうか。今回はそんな方のために、ネーミングを決めるときに参考になる発想法やコツ、企業事例に加え、悩んだ時に使えるツールをまとめて紹介します。 ▼ネーミングに便利なツールは3ページ目で紹介 ネーミングの重要性 今でこそ多くの人に定着しているネーミングもありますが、中には発売当初は全く認知されずに売れなかった商品もあります。 例えば、「お～いお茶」でご存知の伊藤園の緑茶飲料も発売当初の商品名は、缶煎茶（かんせんちゃ）でした。しかし、全く売れないことからアンケートを実施し、ネーミングにある「煎茶」が読みにくい・読めないということが分かりました。 その後の追
絶対に見逃さない！ホームページ公開前に必ず押さえたいチェックリスト項目
ちゃんと丁寧に確認したつもりなのに、いざ公開してみると、リンクが切れていたり、誤字脱字が見つかったり……と後から問題に気付いた経験、皆さんはいかがでしょうか。 思わず"ウンウン"と頷いてしまった方も少なくないのではないでしょうか。 構想段階から時間をかけて、膨大なコスト・リソースを投入して制作したホームページ。 それだけにできれば完成したとならば早く公開したいですが、ここは改めて今一度、公開前の最終チェックを行わなければなりません。 焦って公開してしまい、思わぬミス・トラブルを引き起こさないためにも、必ず実施することをオススメします。 そこで今回は、立ち上げ時にスムーズかつしっかりとチェックをするためにも最低限確認しておくべき項目をリストアップしてご紹介します。 ホームページ立ち上げ時に確認すべき基本チェック項目 1. 誤字脱字などの細部をチェックする どんなに気をつけて書いていても後から
Googleフォームの作成と使い方｜アンケートの回答確認方法まで紹介
日々ユーザーが使用しやすいように、アップデートを続けているGoogleの関連サービス。Googleのサービスのひとつ「Googleフォーム」もアップデートにより使用しやすくなっているサービスのひとつです。 Googleフォームを使用すれば、アンケートフォームや問い合わせフォームを手軽に作成できます。また、集計を自動で行う機能があるため、分析にかける時間を多く確保できるというメリットがあります。 今回は、Googleフォームの作り方やメリット・デメリット、便利な機能、おすすめな利用シーンなどを徹底解説します。 目次 Google（グーグル）フォームとは 【7ステップで完了】Googleフォームの作成方法 Googleフォームの回答を確認する方法 Googleフォームの便利な使い方を6つ紹介 アンケートを作成する際のポイント3つ Googleフォームの利用がおすすめなシーン 【よくある疑問】G
休日に一気にマスター！Webデザイン・Webアプリケーションを学びたい人のためのUdemyオススメ講座9選
WebデザインやWebアプリケーションについて学ぶとき、10年前の主流は「書籍で学ぶ」か「スクールに通うか」のどちらかだったでしょう。しかし今では、空き時間にスマホがあれば簡単に学ぶことができます。 65,000以上のさまざまなジャンルのオンラインコースを無料から受講できる「Udemy」というプラットフォームがあります。。Udemyを使うことで、空き時間を有効活用しながらスキルアップを目指すことができます。 今回は、講座の中から、Webデザイン・Webアプリケーションを学びたい方のためのUdemyオススメ講座9選をご紹介していきます。初心者から中級者・上級者まで、さまざまな講座が用意されています。自分の難易度に合わせたぴったりの講座を見つけてみましょう。 Udemyとは？ Udemyは、2010年にアメリカでスタートした、動画などを活用して学習を行うことができる、オンデマンド学習プラットフ
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
スマートフォンをはじめとしたモバイル端末でホームページを表示することを想定するとき、Viewportと呼ばれるタグを挿入します。 タグを挿入する時、例えば以下のようなコードを*コピー＆ペーストしている方は多いのではないでしょうか。 貼り付けるだけでも問題ありませんが、構造を理解すれば好きなようにカスタマイズすることも可能です。 今回は、Viewportの基本的な概念から設定に関する具体的なコツをご紹介します。 Viewportとは？ Viewportとは表示領域のことで、ブラウザにおける仮想のカンバスサイズを決めて、サイトの表示の仕方を制御する役割があります。 例えば、上記のようなホームページがあるとします。 モバイルのViewportを指定していない場合は、デスクトップサイトで表示される横幅をモバイル端末の横幅と合わせてしまうので、以下のように非常に小さくて閲覧しにくい状態で表示されてし
ココだけ欲しい！Webデザインのパーツをまとめたギャラリーサイト36選
この記事は2015年10月22日に公開された記事を再編集したものです。 デザイン作業に慣れてくると、どうしても自分の癖が出てしまい、似たようなデザインばかりになってしまいがちです。特にWebデザインのパーツは、毎回同じようなデザインを作ってしまうことも少なくありません。しかし、自分が持っているアイデアだけでは、なかなか新しいデザインは浮かんでこないものです。 そこでオススメしたいのがギャラリーサイトです。その中でもパーツごとに収集したギャラリーサイトは、デザインの「部分」だけでも参考にすることができるため非常に便利です。デザインアイデアが欲しい時こそ、多くのヒントが詰まっている素材サイトを活用しましょう。 今回は、Webデザインのパーツをまとめたギャラリーサイトを36個まとめてご紹介します。 ※サイトによっては素材やソースコードなどを配布・掲載しているものもあります。ご利用の際は、必ず利用
Gyazoとは？撮った画像をその場で相手と共有できるツールの使い方を解説
無料プランと有料プラン、どちらがおすすめ？ Gyazoの無料プランでは、画像・GIF動画の撮影や画像URLの共有などの基本機能が使用できます。ただし、確認できる画像数に制限があり、大量の画像を確認することはできません。ビジネスでたくさんの画像をやりとりする必要がある人は有料プランを検討してみましょう。 Gyazoの始め方 今回は、WindowsでGyazoの始め方を解説します。 TOPページ中央か右上の「今すぐダウンロード」をクリックします。 「Gyazoをダウンロード中…」とメッセージが表示され、ダウンロードが始まります。ダウンロードが完了したら、「実行」をクリックしてインストールを進めます。 インストールが完了すると、デスクトップ上に「Gyazo」と「Gyazo GIF」という2つのアイコンが表示されます。「Gyazo」がスクリーンショットを撮るツールで、「Gyazo GIF」がGIF
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
