Webデザイン

他サイトの構成・デザインを分析する3つの方法

2017/11/18

インターネットで素敵なサイトを見つけて、
「こんなすごいサイトどうやって作ったらいいんだろう」
「いったいどんな技術が使われているんだろう…。」
と思う時ありますよね。
そんな時に役立つ3つの方法をお伝えします。

1.使用されているシステムを調べる「wappalyzer」

まずはこちらのWappalyzer
これはFirefoxのアドオンまたはChoromeのプラグインとして公開されています。

使い方は簡単。

上記のFirefoxあるいはChromeのリンクからインストールして有効化するだけ。
インストール後ツールバーの右端に「Wappalyzer」アイコンが現れます。
こちらはメインで使用されているシステムのアイコンになっています。
クリックすると、サイトに使用されているシステムが一覧で見れます。

このサイトの場合は次のような感じです。

wappalyzer01

wappalyzer01

WordPressなのか、Joomlaなのか、あるいはBootstrapなのか。使用されているCMSを調べられたり、javascriptが使われているのか、Google Analyticsは入っているかなどを調べることが出来ます。

2.Wordpressのテーマを調べる「WHAT WORDPRESS THEME IS THAT?」

次に、使われているテーマがWordpressだった場合、どのテーマが使われているのかを調べてくれるサイトがあります。

WHAT WORDPRESS THEME IS THAT?
↑こちらです。

こちらも使い方は簡単。
WHAT WORDPRESS THEME IS THAT?のサイトに飛んで、調べたいサイトのアドレスを入力してクリックするだけ。

そうするとサイトに使用されているテーマとプラグインの一覧を表示してくれます。

こんな感じです。

whatwpthemeisthat

WordPressで作られた素敵なサイトがあったら、これで使用されているテーマを調べて同じものを使ってみるのもいいですね。

3.使用されているフォントを調べる「Typesample」

3つ目はサイトで使用されているフォントを調べるTypesample
Webフォントもかなり広まってきて、多くのサイトで使われるようになりました。
自分もこのフォント使ってみたい、でもなんていうフォントかな?
このフォント素敵だけど、Webフォントかな、画像かな?
このフォントでタイトルを作ったらどんなイメージになるだろう?

そんな時に便利なのがこちらのTypesampleです。

使い方は簡単。

typesample

Chromeであれば、上の青いボタンのInstall for Chromeからインストールするだけ。
別のブラウザであれば、下のType Sampleと書いた青いボタンをブラウザのお気に入りバーにドラッグするだけです。

登録したType Sampleを起動し、確認したい文字にカーソルを当てるだけで使われているWebフォントの名前が表示されます。

typesample01

さらにクリックするとその書体の試し打ちが出来ます。
その場で使用した際のイメージまで確認できるのは非常に便利ですね。

typesample02

以上、他サイトの構成・デザインを分析する3つの方法でした。
ぜひいろんなサイトを参考にして、自分だけのオリジナルデザインを見つけてくださいね!

この記事を書いた人

Nao
NaoNao Creative 主宰
早稲田大学卒業後、代官山のデザイン事務所にもちこみをしてデザイナーのキャリアをはじめる。その後20代後半でロンドンの美大セントマーチンズに社会人留学。約10年間グラフィック&Webの仕事を続けており、趣味はネットショッピングというWEB大好き人間。

【主な仕事】
WEBの制作・運営/Nao Creativeの商品企画・制作
提供中のメニューはこちら

-Webデザイン