同業他社サイトデザインを参考にする。スクショをガサっと盗む

「同業のデザインを一気に見て、いいコンセプトは盗みたいなぁ。いい方法ないかな。」

そんな疑問にお答えします。

本記事の内容

他者デザインを参考にセンスを磨くコツがわかる
同業のURLを抜き出してスクショをガサッととる方法がわかる

私は日々、クライアントへサイト制作や集客支援を行なっています。今回は、競合他社サイトのデザイン調査法を紹介します。自分で開発したスクリーンショットを一括取得することができるチャットワークのボット「スクショ泥棒」を利用します。実際にスクリーンショットを自動取得している動画です。

スクショ泥棒にてスクショを一括で取得する画像 — スクショ泥棒にてスクリーンショットを一括で取得しています。Googleにて「東京　美容室」ででてくるホームページをゲットして、チャットワークのスクショ泥棒にて自動取得を進めています。

また取得したスクリーンショット画像は下記に置いておきます。「美容室　東京」でGoogle検索上位100くらいをガサっと盗ってみました。
保存先はこちら

制作デザインのセンスを磨くコツ→見れば見るほどGood

WEBサイトを制作する際に、最低10個は同業他社のサイトを見ます。同業のサイトを見ていると新しい発見があります。デザインの雰囲気や料金やキャンペーンの打ち方といったこと、他社にないサービスを出して差別化しているサイトや、どの商品を一番推しているのかなどわかります。

業界の常識を知ることができ、差別化要因を考えるきっかけにもなります。

こうした作業を繰り返してセンスは磨かれます。そして、10個他社のサイトよりも100個他社サイトを見る方がさらによい。以下紹介するのは、100個他社サイトをみるときに、スクショを取るのを最短で行う方法です。

必要なツール・準備するもの

チャットワークアカウント

スクショ泥棒

Python

Pythonのライブラリ「Selenium」

自動制御用webdriver

プログラミングが難しいと思われる方はお問い合わせを。

他社サイトのスクリーンショットを一括で取得

それでは、100個のスクリーンショットを一括で取得することを目標とします。まず同業他社サイトのURLはなんなのか？それをGoogleの検索結果から取得します。コードは下記です。

# Googleで検索順位100位まで取得するコード

import requests
import bs4
import csv

list_keywd = ['建設', '東京']
resp = requests.get('https://www.google.co.jp/search?num=100&q=' + '　'.join(list_keywd))
resp.raise_for_status()

soup = bs4.BeautifulSoup(resp.text, "html.parser")
link_elem01 = soup.select('.r > a')

import re
r = re.compile("(.*)(&sa=U&)(.*)")
link = [x.get('href').replace('/url?q=', '') for x in link_elem01]
link2 = [r.match(y).group(1) for y in link]

# Googleで検索順位100位まで取得するコード

import requests

import bs4

import csv

list_keywd = ['建設', '東京']

resp = requests.get('https://www.google.co.jp/search?num=100&q=' + '　'.join(list_keywd))

resp.raise_for_status()

soup = bs4.BeautifulSoup(resp.text, "html.parser")

link_elem01 = soup.select('.r > a')

import re

r = re.compile("(.*)(&sa=U&)(.*)")

link = [x.get('href').replace('/url?q=', '') for x in link_elem01]

link2 = [r.match(y).group(1) for y in link]

はいこれで、100個の「美容室　東京」で検索した場合のURLを取得することができました。続きまして、スクショ泥棒にこのURLを送っていきます。ちなみに入力ルールは下記のようになっています。

1. 最初に「スクショ」or「スクリーンショット」or「screenshot」と指令して改行
2. 複数URLの場合は改行が必要
3. URLは上限10個/回まで

–以下入力例–

スクショ
https://www.yahoo.co.jp/
https://www.google.co.jp/
https://www.bing.com/

スクショ泥棒がzipに固めてPC・SPのスクリーンショットが返送します。自動で入力していくコードはこちらです。

 Seleniumでスクショ泥棒を半自動化するコード

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time

URL = 'https://www.chatwork.com/login.php'
driver = webdriver.Chrome('ディレクトリ')
driver.get(URL)
driver.find_element_by_name('email').send_keys("メールアドレス")
driver.find_element_by_name('password').send_keys("パスワード")
driver.find_element_by_class_name('btnPrimary').click()
driver.find_element_by_xpath('//*[@id="_roomListArea"]/roomlist/ul/li[4]').click()
#driver.find_element_by_id('_chatTextArea').click()
driver.find_element_by_tag_name('textarea').click()
for e in range(20):
    driver.find_element_by_tag_name('textarea').send_keys('スクショ')
    driver.find_element_by_tag_name('textarea').send_keys(Keys.ENTER)
    for o,i in enumerate(link2):
        driver.find_element_by_tag_name('textarea').send_keys(i)
        driver.find_element_by_tag_name('textarea').send_keys(Keys.ENTER)
        link2.pop(0)
        if o == 4:
            driver.find_element_by_id('_sendButton').click()
            break

Seleniumでスクショ泥棒を半自動化するコード

from selenium import webdriver

from selenium.webdriver.common.keys import Keys

import time

URL = 'https://www.chatwork.com/login.php'

driver = webdriver.Chrome('ディレクトリ')

driver.get(URL)

driver.find_element_by_name('email').send_keys("メールアドレス")

driver.find_element_by_name('password').send_keys("パスワード")

driver.find_element_by_class_name('btnPrimary').click()

driver.find_element_by_xpath('//*[@id="_roomListArea"]/roomlist/ul/li[4]').click()

#driver.find_element_by_id('_chatTextArea').click()

driver.find_element_by_tag_name('textarea').click()

for e in range(20):

driver.find_element_by_tag_name('textarea').send_keys('スクショ')

driver.find_element_by_tag_name('textarea').send_keys(Keys.ENTER)

for o,i in enumerate(link2):

driver.find_element_by_tag_name('textarea').send_keys(i)

driver.find_element_by_tag_name('textarea').send_keys(Keys.ENTER)

link2.pop(0)

if o == 4:

driver.find_element_by_id('_sendButton').click()

break

これで下記Googleドライブのように、画像を取得できました。お疲れさまでした。
保存先はこちら

ミニ業務用アプリ作成依頼受けます

「プログラミングも入って難しい。あと、ちょっと改良した業務用アプリも作りたいな」

そんな方いらっしゃいませんか。弊社Indentではアクセス解析レポーティングの自動化アプリやＧoogleドライブを使ったデータベース管理アプリなど、業務負担を軽減するミニ業務アプリを作成しています。下記サイトのフォームからなんなりとご相談ください。ご相談料無料、アプリもお安く作成しています。
合同会社Indentへのお問い合わせはコチラ

この記事のURLとタイトルをコピー

同業他社サイトデザインを参考にする。スクショをガサっと盗む

制作デザインのセンスを磨くコツ→見れば見るほどGood

必要なツール・準備するもの

他社サイトのスクリーンショットを一括で取得

ミニ業務用アプリ作成依頼受けます

この記事に関連する記事