SEO対策の第一歩！競合サイト分析の方法をコンサルタントが解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディアコンサルタントの太田です。 オウンドメディア運用のノウハウをお伝えしている私の記事ですが、今回は「競合サイト分析」について解説しています! 私もふだん、業界研究も兼ねて競合サイト分析を必ずおこなっています。この記事をご覧のみなさんも、たとえばなにかはじめてのことに挑戦するとき、事前に他社の事例を調べたりしたことがあるのではないでしょうか。それも一種の競合分析です。 というわけで今回は、プロ目線での競合サイト分析の方法を紹介します！ 分析時に意識したいことについてもお話しするので、ぜひ参考にしてみてくださいね。 そもそも競合サイト分析とは？ “競合サイト”の定義 一概に「競合」というと、いわゆる同業他社のような形で、自社と類似するサービスや商品を展開する他企業を指します。 しかしWebサイトにおいては、これが少し異なります。 Webサイトにおける競合とは「狙う顧客が近い需
【入門編】SEO対策に必須のキーワード調査方法を無料ツールで実践します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 好きなうどんは温玉ぶっかけうどん。香川県出身のメディアコンサルタント太田ジョーです。クライアントのオウンドメディアを中心としたマーケティングの支援をしております。 讃岐うどんのコシのように強いWebサイトをつくるには、SEO対策が欠かせません。要するに自然検索の流入のことです！ 自然検索からの流入を得るためにまず必要なことは、効果的な「キーワード調査」でしょう。キーワード調査とは、Webの世界における市場調査にあたります。 この記事では、SEO施策をするなら必須のキーワード調査の方法を、実際にキーワード調査をしながら詳しく解説します。 今回は入門編として無料ツールを使ったキーワード調査の方法をご紹介させていただくので、初心者の方もぜひ参考にしてみてください。 キーワード調査とは？ 基本概念や目的を整理します。 キーワード調査とは、冒頭でお伝えしたとおり、Webの世界における市
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
iPhone, iPadの最新機種まですべてを網羅、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes
Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスのスクリーンサイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 2022年の最新モデル、iPhone 14シリーズ、iPad Air(5th Gen), Apple Watch Series 8をはじめ、最新機種から初代までの情報が網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 アクセスして、サイドバーから欲しい情報にアクセスするだけです。 iPhone 14 Pro Maxは今までになかった新しい解像度ですね。
ディレクター必見！Webサイト制作の精度を高めるためのリサーチとは？ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、ビールです。エンジニア上がりのディレクターのビールです。ビールというあだ名の人です。 今回は、Webサイト制作をスタートする前に、アウトプットの精度を高めるためのリサーチというところに焦点を当てた記事になります。 ビジネスにおいて、どんなプロダクトを作るにあたってもリサーチが重要であることは変わりません。Webサイト（プロダクト）が担う役割を明確にし、役割に対する精度を高めるために適切なリサーチを行いましょう。 リサーチの種類 一言に「リサーチ」と言っても、世の中には実に多くのリサーチ手法があります。私たちに関連性が高く、Webディレクターとしてぜひ知っておきたいところで言えば、「マーケティングリサーチ」や「UXリサーチ」などでしょうか。 僕も上手く説明できないので、こちらの記事を参考にしました。 なるほど。簡単に説明すると、「マーケティングリサーチ」は製品を「売る」ための調査。「
駆け出しデザイナー・エンジニアにこそ見ていただきたいWordPressの脆弱性とセキュリティ - Qiita
WordPressは世界で1番使用されているCMSかつオープンソースであるが故に、悪意のある第三者やプログラムから世界で1番攻撃されやすいCMSと言われています。 私自身も何度か攻撃を受けていて、実害に及ばなかったものから及んだものまで様々でした。クライアントの稼働しているWEBサイトに実害があった場合は、原因究明や報告、一次対応から恒久的対策までを行い、安全性を確保した上で再度稼働させる必要があり、その作業は簡単なものではありません。 被害があるのはクライアントだけではなく、そのサイトにアクセスしたユーザーに及びます。たとえ納品後の保守契約を結んでいなかったとしても、実装者の責任としてクライアント、ユーザーに安心して利用できるWEBサイトを目指さなければいけません。 私はセキュリティの専門家ではないもののWordPressを10年以上触っている中で様々な問題に当たり、対応してきました。そ
エンジニア出身ディレクターが語る！サイト制作前に押さえておきたいポイント3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのビールです。 はじめてのブログ執筆です！ 今回はフロント／バックエンドのエンジニアだった自分の経歴から、サイト制作前に押さえておきたい3つのポイントをまとめてみたいと思います。 「サイトの制作/リニューアルを検討しているが、何から手をつければいいかわからない……」ということでお悩みの担当者の皆さん、まずはこの3つのポイントを押さえておきましょう。 ドメインはどこで管理してる？ サイトを公開するにあたって必要不可欠な「ドメイン」。LIGのWebサイトで言うと、「liginc.co.jp」がドメインです（Webサイトの住所みたいなものだとよく言われますね）。 サイトのリリースにあたって、ドメイン管理画面に入って設定を変更する場合もあるので、自社で管理しているのか、あるいはサイトを制作した制作会社が管理しているのか、事前に把握しておくことが重要になります。 制作前に「ド
無料・インストール不要でルーターがマルウェアに感染していないか確認してくれるツール「am I infected?」を使ってみた
自宅でWi-Fiを利用する際に必要なルーターは、購入してセットアップしたら後は放置してしまいがちなもので、気付かないうちにマルウェアに感染して踏み台になっていることも。そんなルーターについて、メールアドレスを入力するだけでサクッとウイルスチェックができるサービスが「am I infected?」です。 am I infected? - マルウェア感染・脆弱性診断サービス https://amii.ynu.codes/ 「am I infected?」のページはこんな感じ。横浜国立大学の情報・物理セキュリティ研究拠点が運営しているサービスとのこと。 下にスクロールするとサービスの説明がされています。マルウェアがルーターに感染した場合、いわゆる「自覚症状」が無いため気付くのは難しく、知らないうちに外部に迷惑をかけていた……なんてことも。 日本だけでも17万個以上の機器に脆弱(ぜいじゃく)性が見
Chrome Devtools による フロントエンドパフォーマンスの計測
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです。 今回の記事では、皆さんおなじみの Chrome Devtools にある Performance タブで、フロントエンドのパフォーマンスを計測する方法について書きたいと思います。 はじめに フロントエンドのパフォーマンス・チューニングと言うとバックエンドと比べて後回しになりがちですが、フロントエンドにアプリケーションの複雑性が寄ってきている現在、フロントエンドがボトルネックでレスポンスのレイテンシーが発生することは往々にしてあると思います。 バックエンドではユーザー数の増加や大量の同時接続に耐えられる負荷対策やパフォーマンス・チューニングが中心となりますが、フロントエンドではプロジェクトサイズの増加による JavaScript ファイルのダウンロードやスクリプティング、レンダリング速度の低下等が
問い合わせから提案までを爆速に！Webサイト提案で使える分析解析ツール9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナー・ディレクターのありさんです。 お客様からのリニューアルのご相談、サイト改善を行うときに、営業提案資料を作っています。今回は資料作成で私が調査・分析に使っているWebツールを紹介します！ NDA締結前はGoogleアナリティクスやGoogle Search ConsoleなどGoogle系ツールを共有してもらうことできないので、外部の調査ツールを使うことが多いです。 提案を行う際によく使うWeb解析ツールの概要や活用例、おすすめの種類などについてを紹介します！ Googleアナリティクス GoogleアナリティクスではPVや訪問数、直帰率など、Webサイトに訪問したユーザーの行動がわかります。 目標設定を行なっている場合は、目標完了数、目標完了率を確認することが可能です。 NDAを結んでいてGoogleアナリティクスのデータを見せてもらえる場合は、提案資料に活用しま
SimilarWebでヒアリング前にクライアントのWebサイトデータを丸裸にする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのりくです。 有意義なヒアリングを行うために、事前調査って大切ですよね？ 今回はSimilarWebを使ってヒアリング前にクライアントのWebサイトを丸裸にする方法をまとめていきたいと思います。 そもそもSimilarWebってなに？ Webサイトのトラフィックやパフォーマンスを比較・分析することができるマーケティングツールです。Webサイトを丸裸にするための様々な機能を使うことができます。 事前調査時にSimilarWebやっていること 事前調査時にSimilarWebでやっていること・確認している点をご紹介いたします。 グーグルアナリティクス（GA）などのアクセス解析ツールと数値の乖離がある場合があるので、正確な数値を確認したい場合はグーグルアナリティクス（GA）などアクセス解析ツールのご利用をお勧めいたします。 SimilarWebでみている情報とその活
無料でAWSの料金をチェックして無駄を見つけてくれるサービス「Vantage」を使ってみた
By Thomas Hawk AmazonのクラウドサービスであるAWSは、コンピューティングやデータベース、ストレージなど、膨大で複雑なサービスで構成されており、必要なタイミングで必要なものを用意できるという点では優れているものの、長く利用していくにつれてだんだんと全貌の把握が難しくなっていき、無駄な支出がないか確認するのも困難になりがちです。そこで、AWSの利用データを自動で解析して支出を削減できそうな項目を表示してくれるサービス「Vantage」を使い、どのあたりのコストが削減可能なのか確認してみました。 Vantage - Manage Your Cloud Costs https://www.vantage.sh/ Vantageのサイトにアクセスし、「Get Started for Free」をクリック。 「名前」「アカウント名」「メールアドレス」「パスワード」を入力し、reC
全部まとめられていて便利！iPhone, iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes
Webサイト制作者・スマホアプリ開発者向け、Appleデバイスのスクリーンサイズ、各サイズを採用しているモデル、解像度、PPI、表示タイプ、比率、最後にサポートされたOS、セーフエリア、サイズクラス、ウィジェットのサイズ情報など、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 先週ローンチされたばかりのサイトで、2021年最新モデルのiPad Proから、2007年のiPhoneまで、最新機種から初代までのデバイスのサイズが網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 サイドバーからデバイスを選択し、スクリーンサイズあるいはモデルを選択します。 私が使用しているiPhone 12 Proを見てみました。 サイトはキーボードショートカットも用意されており、shiftキーを押すとショートカットの一覧が表示・非
Vue.js、Nuxt JSを学習するときにやったこと
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
ウェブページの読み込みが遅いときはLighthouseで改善案を見て速度改善する（ひとり DevTools Advent Calendar 2020 – 15日目） | Ginpen.com
15 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ウェブクライアント側のパフォーマンスは主に読み込み時と実行時のふたつに分けることができます。今回はそのうち読み込み時のパフォーマンス改善について。 Lighthouse パネルのボタン一発で改善案が出てきます。その指示に従うと良いでしょう。 先にまとめ DevTools Lighthouse パネルを使う ボタン押すだけ 速度以外にもアクセシビリティとか SEO とか計測できるツール 改善案を提示 改善前に計測して、改善後と比較する ファイルサイズを減らすのが基本方針 Lighthouse を使った計測 さて計測なんですが、Lighthouse が初手として一番簡単かつ最後まで効果的です。なんてったってボタンを押すだけ。 DevTools 内にあり、ボタンを押すだけで手軽 結果が
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
McAnswers
https://domains.google.com/registrar/search
Caninclude
