SEO対策の第一歩！競合サイト分析の方法をコンサルタントが解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディアコンサルタントの太田です。 オウンドメディア運用のノウハウをお伝えしている私の記事ですが、今回は「競合サイト分析」について解説しています! 私もふだん、業界研究も兼ねて競合サイト分析を必ずおこなっています。この記事をご覧のみなさんも、たとえばなにかはじめてのことに挑戦するとき、事前に他社の事例を調べたりしたことがあるのではないでしょうか。それも一種の競合分析です。 というわけで今回は、プロ目線での競合サイト分析の方法を紹介します！ 分析時に意識したいことについてもお話しするので、ぜひ参考にしてみてくださいね。 そもそも競合サイト分析とは？ “競合サイト”の定義 一概に「競合」というと、いわゆる同業他社のような形で、自社と類似するサービスや商品を展開する他企業を指します。 しかしWebサイトにおいては、これが少し異なります。 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は今までになかった新しい解像度ですね。
エンジニア出身ディレクターが語る！サイト制作前に押さえておきたいポイント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万個以上の機器に脆弱(ぜいじゃく)性が見
問い合わせから提案までを爆速に！Webサイト提案で使える分析解析ツール9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ デザイナー・ディレクターのありさんです。 お客様からのリニューアルのご相談、サイト改善を行うときに、営業提案資料を作っています。今回は資料作成で私が調査・分析に使っているWebツールを紹介します！ NDA締結前はGoogleアナリティクスやGoogle Search ConsoleなどGoogle系ツールを共有してもらうことできないので、外部の調査ツールを使うことが多いです。 提案を行う際によく使うWeb解析ツールの概要や活用例、おすすめの種類などについてを紹介します！ Googleアナリティクス GoogleアナリティクスではPVや訪問数、直帰率など、Webサイトに訪問したユーザーの行動がわかります。 目標設定を行なっている場合は、目標完了数、目標完了率を確認することが可能です。 NDAを結んでいてGoogleアナリティクスのデータを見せてもらえる場合は、提案資料に活用しま
無料で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キーを押すとショートカットの一覧が表示・非
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
任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリ・「Font of Web」 - かちびと.net
Font of Webは任意のWebサイトで使われているWebフォントを調査、ダウンロードも可能なWebアプリです。 解析したいWebサイトのURLを入力すると、そのサイトで利用されているWebフォントやCSSを割り出してくれます。 Webフォント自体のダウンロードが可能なリンクも提供してくれますが、この件に関しては本アプリにて以下のように記述されています。 This tool is for educational use and downloaded fonts may require additional licensing for personal or commercial use あくまで教育用としてのツールの提供との事で、実際にフォントを利用する場合は追加ライセンスが必要な場合もあるとの事。詭弁に感じなくもないですがフォントを利用する場合はライセンスにご注意ください。 Font
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法 - by Takumi Hirashima
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法を紹介します。 画像の自動生成を確認 GDライブラリーの確認方法 画像の自動生成を確認 まずは FTP でサーバーにアクセスして、メディアのアップロードで画像がアップロードされているかを確認。 そこで、サムネイルや他のサイズの画像が自動生成されているかどうかを確認します。 画像が自動生成されていない場合、PHP のGDライブラリー（画像ライブラリー）がインストールされていない可能性があります。 GDライブラリーの確認方法 GDライブラリーが環境にインストールされているかを確認するには、現在表示中のページのテンプレートに以下のコードを追加します。 <?php phpinfo(); ?> phpinfo() は現在の PHP の設定を確認することができます。 コードが正しく動くと、PHP の設定が表示されるので
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
Disk-Arbitrator - macOS用のディスクイメージ管理
macOSを使っているとディスクイメージを使う機会が多いのではないでしょうか。殆どの場合、アプリケーションが内包されており、ドラッグ&ドロップでインストールを行います。 そんなディスクイメージの管理、詳細を確認できるのがDisk-Arbitratorです。 Disk-Arbitratorの使い方 ディスクイメージの一覧です。 情報を表示しています。通常よりも細かく、様々な情報が確認できます。 Disk-ArbitratorはmacOS標準のディスクユーティリティよりも細かく情報を確認できます。アプリケーションを配布したいと思う人は持っていると役立ちそうです。また、開けないイメージファイルがあった際にも調査で利用できそうです。 Disk-ArbitratorはmacOS用、Objective-C製のオープンソース・ソフトウェア（BSD）です。 aburgh/Disk-Arbitrator:
Malware & URL Scanner - 危険性のあるURLかどうかチェックするGoogle Chrome機能拡張 MOONGIFT
マルウェアや、それを配布するURLは怖いものです。訪問するだけでマルウェアに感染するサイトもあります。Googleの検索結果などではそれらを警告したりしますが、思わず踏んでしまったという経験がある人もいるでしょう。 今回はGoogle Chrome機能拡張を使って害あるURLをスキャンしてくれるMalware & URL Scannerを紹介します。 Malware & URL Scannerの使い方 インストールしました。 URLを入力してチェックします。 DNSやヘッダー、Googleのセーフブラウジングなど様々な情報が確認できます。 Malware & URL Scannerはスキャン機能がメインになるようです。怪しいサイトがあればチェックしてみると良いでしょう。逆に自分のサイトが怪しいと判定されていないかチェックするというのもお勧めです。 Malware & URL Scanner
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Domains | Official Site – Google Domains
Caninclude
)
CSS Spider - CSS設定を素早く確認、編集 MOONGIFT
様々なブランドのロゴに使用されているフォントを紹介する・「Font In Logo」 - かちびと.net
Instant Username Search