こんにちは、マユハルです。
みなさんはブログやサイトを何で作っていますか?
無料ブログで作っていたり、WordPressで作っていたりしますよね。
ちなみに僕はWordPressで作っています。
WordPressは簡単にイケてるサイトを作れるのでオススメです。
といいつつ、僕のサイトのデザインあまり凝った作りにはなっていません。。
ネットを見てるとたくさんイケてるサイトはどうやって作っているんでしょう。
今回は気になるサイトのデザインがどのように作られているかを調べる方法をご紹介します。
[ad#mayuharu-ad1]
個人が作っているイケてるサイトを調べる
企業が作っているホームページならプロが手間暇かけて作っているところが多いでしょう。
しかし個人で作っていてもイケてるサイトはたくさんあります。
そんなサイトをどうやって作っているのか気になりますよね。
なんとか作り方を何とか知る方法はないものかと調べてみました。
作り方のポイントとして全体のデザインと使っているフォントを押さえておけばある程度似た雰囲気は作れそうです。
ということで今回は以下の3点で調べる方法をご紹介します。
- WordPressのテーマを確認する
- 使っているCSSのスタイルを確認する
- 使っているフォントを確認する
WordPressのテーマを確認する
まずはWordPressのテーマを確認してみましょう。
WordPressのテーマというのはサイトのデザインをテンプレートにしたようなものです。
無料で使えるテーマもありますし、おしゃれなデザインや豊富な管理機能、SEOに強いサイトなどを売りにした有料のデザインもあります。
WordPressを使っていないサイトもありますが、WordPressを使っている割合も結構高いです。
気になったらチェックしてみましょう。
サイトがどのテーマを使っているか調べるには、「WordPress Theme Search」を使います。
使い方はURLを入力して「Enter」を押すだけです。
すると使っているテーマを表示してくれます。
テーマだけでなく使っているプラグインも表示してくれますね。
ただしプラグインは全て表示されるわけではなさそうです。
僕のサイトだと「AFFINGER4 Child」と出ました。
バージョンは20160912になってますね、あれ最近更新したはずなのに・・・
プラグインは「Contact Form 7」と「Table Of Contents Plus」となっています。
確かにこの2つは入れていますが、他にももっとたくさん入れてるんですけどね・・・
この辺りは参考情報ということで。
気に入ったサイトのテーマを調べていると、大体同じテーマを使っていることがわかります。
今のテーマが使いにくいわけではないけれど、ちょっと別のテーマに変えてみようかなと検討中です。
使っているCSSのスタイルを確認する
WordPressのテーマや使っているフォントがわかって追加してみても、どうも同じようなサイトにならないということがあります。
ちょっとした表組や画像の見せ方などデザインが工夫されているんですよね。
見せ方を変える方法としてCSSを使っていることが多いです。
ということはそのCSSの書き方を参考にすれば同じようなデザインが作れるということになりますね。
FireFoxなら簡単に確認することができます。
「Ctrl」と「Shift」を押しながら「C」を押してみましょう。
するとFireFoxの下半分に「インスペクタ」という画面が開きます。
その状態でサイトにカーソルを持っていくと、青い網掛になってその部分のHTMLのコードが表示されます。
気になる部分にカーソルを持っていってクリックすると、右側にそこで使われているCSSが表示されます。
要素となっているのは、CSSファイルではなく直接HTML内にスタイルを書いている場合ですね。
CSSファイルに書いてある場合はファイル名と行番号が表示されています。
使っているスタイルが分かれば、自分のサイトのCSSに同じようなスタイルを追加して利用すればOKです。
使っているフォントを確認する
たまにサイトで使っているフォントがオシャレなページを見かけたりします。
そのフォントが何を使っているかを確認してみましょう。
フォントというのはパソコン上で表示する文字なので本来はパソコン自体に入っていなければ使うことができません。
しかしWebフォントを使うと、サイトを見ているパソコンにフォントがあるかどうかに関係なく指定したWebフォントでサイトを作ることができます。
昔は変わったフォントで表示させるために画像にしてたりしました。
そんな手間をかけることなく好きなフォントを使えるなんて、便利になったものですね。
それでは、サイトで使っているフォントを確認してみましょう。
確認には「WhatFont Tool」を使うのが便利です。
使い方はシンプルです。
ブックマークツールバーにドラッグして、フォントを確認したいサイトでブックマークをクリックするだけ。
すぐ下にあるテスト用の表示で動作確認してみましょう。
先ほどブックマークバーに追加したWhatFontをクリックしてTEST FIELDにカーソルを持っていきます。
すると黒いテキストボックスで使っているフォントが表示されます。
今回確認したTEST FIELDには”Georgia”フォントが使われていることがわかりますね。
クリックするとさらに詳しい情報が表示されます。
最優先は”Palatino”フォントでしたが、フォントがなかったので”Georgia”フォントを使っているということがわかります。
サイズや色なども確認できますね。
確認を終えるには右上に表示されている Exit WhatFontをクリックします。
他のサイトで使っているフォントで気に入ったものがあれば調べてみましょう。
フォント名で検索すると使用方法がわかるかもしれません。
まとめ
いかがでしょうか。
デザインを何もないところから考えるのはとても大変です。
そっくりそのままパクるのはダメですが、よいサイトを見習って自分のサイトも改善していきましょう。
最初のうちはCSSを修正してデザイン変更するのは時間がかかりますが、慣れてくればすぐにできるようになります。
記事を作る時のテンプレートを作ることができれば記事作成の時間短縮にもつながりますね。
やれることの幅も広がりますので挑戦してみましょう。