WEBサイトを制作するときや運用するときに何かツールは、使用されていますか？
現在では、WEBサイト制作・運用で役に立つツールがたくさん提供されています。
今回は、必ず役に立つツールを紹介します。ツールを使用することで、作業の効率化が可能です。
フレームワーク・CMS
WEBサイト制作に便利なフレームワーク・CMSを紹介します。
Bootstrap
Bootstrapは、簡単にレスポンシブサイト制作するためのCSSのフレームワークです。
Bootstrapを使用することで、メディアクエリを使用しなくてもレスポンシブサイトを制作することができます。
(Bootstrapとメディアクエリを併用して使用することも可能です。)
Bootstrapは、公式サイトからファイルのダウンロードもしくはCDNを利用することで実装できます。
Bootstrap公式サイトURL:https://getbootstrap.com/
ここでは、簡単にBootstrapの使い方について説明します。
CDNを利用する場合は。下記のコードをhead内に記述してください。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
Bootstrapには、4つのブレイクポイントが用意されています。
| サイズ | Small | Medium | Large | xtra large |
|---|---|---|---|---|
| ブレイクポイント | 540px | 720px | 960px | 1140px |
| クラス名 | .col-sm- | .col-md- | .col-lg- | .col-xl- |
ブレイクポイントは上記の表を参考にしてください。
例えば、540pxでブレイクさせたい場合は下記のように記述します。
<div class="container">
<div class="row">
<div class="col-sm-3">
540px以下の画面サイズでレイアウトが切り替わります。
</div>
<div class="col-sm-3">
540px以下の画面サイズでレイアウトが切り替わります。
</div>
<div class="col-sm-3">
540px以下の画面サイズでレイアウトが切り替わります。
</div>
</div>
</div>
「col-」のクラス名を使用する場合、「container」と「row」を親要素にしなければなりません。
「container」と「row」を親要素にしていない場合は、正しく動作しないので、注意してください。
また、Bootstrapは12本のカラムで構成されています。
合計数が12になるように数字を指定することで、画面に表示される割合が変化します。
上の画像のように数字を指定することで、表示させる割合を変えれます。
これ以外にもテンプレートを使用して簡単にWEBサイトを制作することも可能です。
テンプレート一覧URL:https://themes.getbootstrap.com/
WordPress
継続的なWEBサイトの更新をおこなう場合、WordPressというCMSがおすすめです。
WordPress公式サイトURL:https://ja.wordpress.org/
CMSとは、コンテンツ・マネジメント・システムの略称になり、簡単に記事の更新やページの情報を更新できます。
CMSは、 WordPress以外にも様々なモノがありますが、特に有名なのがWordPressです。
WordPressでは、WordPressで使用できる既存のテーマを導入することで、簡単にWEBサイトを立ち上げることができます。
既存のテーマを導入する場合は、コードなどを記述する必要はありません。
(既存のテーマをカスタマイズする場合には、コードを記述する必要があります。)
なので、HTML・CSS・PHPなどの知識がなくてもインターネット上にWEBサイトを公開できます。
もちろん、オリジナルで制作したWEBサイトもWordPessを使用できます。
また、WordPressを使用することで、WordPress専用のプラグインを使用できます。
プラグインを利用することで、便利な機能を簡単に追加することが可能です。
以上がWordPressを利用するメリットですが、同じようにデメリットもあります。
WordPressのデメリットとして挙げられるのが、セキュリティの問題です。
WordPressは利用者が多いため、悪意のあるハッカーにも狙われやすいのが特徴です。
なので、WordPressを利用する際は、セキュリティを高く保つようにしましょう。
セキュリティを高くするためには、以下のような施策が考えられます。
・不必要なプラグインを導入しない
・予測されにくいパスワードを設定する
・二段階認証
・ログインURLの変更
・IP制限
上記の対策方法を順番に説明します。
不必要なプラグインを導入しない
WordPressを利用する際に気をつけたいのが、プラグインをたくさん利用することです。
プラグインによっては、PHPのバージョンが古くなっていることや更新がされていないモノもあります。
また、プラグインをたくさん導入することで、プラグイン同士がトラブルを起こす場合もあります。
なので、プラグインを導入する場合は慎重に、必要最小限にとどめるのがおすすめです。
予測されにくいパスワードを設定する
セキュリティを高くするためには、予測されにくいパスワードを設定することです。
基本的なことですが、とても重要です。
「12345」や「password」など簡単なパスワードに設定すると、ハッキングする可能性が高くなります。
こちらの記事によると2016年のハッキングされやすいパスワードトップ5は、このようになります。
第1位.123456
第2位.password
第3位.12345
第4位.12345678
第5位.football
二段階認証
不正ログインを防ぐ有効な手段として、二段階認証が挙げられます。
二段階認証とは、設定したIDとパスワード以外に、スマホ・タブレットなど違うデバイスで生成されるセキュリティコードを入力することで、ログインできる仕組みの総称です。
WordPressにも二段階認証を適用するのがおすすめです。
WordPressに二段階認証を適用するには、「Google Authenticator」が便利です。
プラグインを追加するために、管理画面の「プラグイン」から「新規追加」を選択します。
検索ウィンドウに「Google Authenticator」と入力してください。
「Google Authenticator」のプラグインが表示されるので、インストールして有効化しましょう。
続いて、違うデバイスに認証アプリをインストールしてください。
Android端末を使用している方は、「Google認証システム」というアプリをインストールしてください。
Google認証システムダウンロードURL:https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=ja
iOS端末を使用している方は、「Google Authenticator」というアプリをインストールしてください。
Google AuthenticatorダウンロードURL:https://itunes.apple.com/jp/app/google-authenticator/id388497605?mt=8
デバイスに認証アプリをインストールして、設定をおこなえばセッティング完了です。
ログインURLの変更
WordPressのセキュリティを高める方法の1つにログインURLを変更する手段があります。
WordPressの場合、以下のURLを入力することでログイン画面にアクセスすることが可能です。
http://ドメイン名/wp-admin/
http://ドメイン名/wp-login.php/
ログインURLがわかってしまうと、様々なツールを使って攻撃されます。
ハッキング攻撃を避けるためにも、ログインURLを知られないようにしましょう。
WordPressでログインURLを変更するためには、「WPS Hide Login」というプラグインをインストールします。
先ほどと同じように、管理画面から「プラグイン」の「新規追加」を選択してください。
プラグインのインストールが完了したら、有効化もしましょう。
有効化ができたら、ログインパスワードのURLを設定します。
管理画面の「設定」から「一般」を選択してください。
設定画面に「WPS Hide Login」という項目が追加されています。
デフォルトでは、以下のように設定されています。
http://ドメイン名/login/
「login」の部分を希望のURLに変更しましょう。
ここで設定したURLがログイン画面へのURLになります。
また、ログインURLを変更した場合は、設定したURLにアクセスしてURLの変更が反映されているか確認してください。
無事にログイン画面が表示されたらブックマークもしくはログインURLをメモしましょう。
(ログインURLを忘れるとログイン画面にアクセスできなくなるので、注意してください。)
IP制限
特定のIPしか管理画面にアクセスできないようにすると、セキュリティの高さが一段と高くなります。
例えば、会社でWordPressを使用している場合、会社のIPしかアクセスできないように制限するなどがおすすめです。
会社のIPしかアクセスできないように制限すると、部外者もアクセスできなくなる上に、従業員などが別のIPからアクセスすることができなくなります。
IP制限をかけるためには、「.htaccess」ファイルにコードを記述が必要です。
WordPressのディレクトリに、「.htaccess」ファイルがあります。
しかし、「.htaccess」ファイルは隠しファイルなのでデフォルトでは表示されていません。
WordPress直下の階層で「command + shift + .」と入力すると「.htaccess」ファイルが表示されます。
また、契約しているレンタルサーバーによっては、「.htaccess」ファイルを直接触れるところもあります。
例えば、エックスサーバーの場合、サーバーパネルにログインするとホームページのタブから「.htaccess」ファイルを編集することが可能です。
「.htaccess」ファイルには、下記のコードを追記してください。
server {
location /wp-admin {
allow xxx.xxx.xxx.xxx;
allow xxx.xxx.xxx.xxx;
deny all;
}
location = /wp-login.php {
allow xxx.xxx.xxx.xxx;
allow xxx.xxx.xxx.xxx;
deny all;
}
}
基本的にIP制限するのは、「wp-admin」ディレクトリと「wp-login.php」ファイルです。
「allow」の後ろに許可を与えるIPアドレスを記述します。
これで、IP制限の設定は完了です。
競合チェック・分析ツール
検索で上位表示するためには、競合をチェックする必要があります。
競合をチェック・分析するためのおすすめツールを紹介します。
ahref
競合チェック・分析ツールとして有名なのが「ahref」です。
公式サイトURL:https://ahrefs.com/
検索ウィンドウに調べたいサイトのURLを入力すると、そのサイトが上位表示されている記事やキーワードがわかります。
また、特定のキーワードに対する競合の多さなども知ることができます。
料金は以下のようになっています。
| 料金 | ライトプラン：99ドル(11,880円＊1ドル＝120円計算) | スタンダードプラン：179ドル(21,480円＊1ドル＝120円計算) | アドバンスドプラン：399ドル(47,880円＊1ドル＝120円計算) | エージェンシープラン：999ドル(119,880円＊1ドル＝120円計算) |
|---|---|---|---|---|
| ダッシュボード | 1ユーザー | 1ユーザー | 3ユーザー | 5ユーザー |
| ランキング計測 | 週ごとに500 | 5日ごとに1,500 | 3日ごとに5,000 | 3日ごとに10,000 |
SEOチェキ
無料で簡単に誰でも使用できる競合分析ツールと言えば、「SEOチェキ」です。
公式サイトURL:http://seocheki.net/
検索ウィンドウにURLを入力することで、以下の項目をチェックできます。
・title／meta description／meta keywords／h1タグ
・内部リンク数
・外部リンク数
・最終更新日時
・ファイルサイズ
・読込時間
・Alexaランキング
・Google
・Yahoo!のインデックス数
・利用ホスト
・ドメインの登録年月日
・各ディレクトリの登録状況
・Facebookの「いいね！」の数
・ソーシャルブックマーク登録数
・検索順位
・キーワード出現頻度
・Whois情報
・HTTPヘッダ情報
eMark+
公式サイトURL:https://www.valuesccg.com/
「eMark+」には、4つのプランが用意されています。
・「eMark+ Prp」
・「eMark+ Keyword Finder」
・「eMark+ Site Analyzer」
・「中国ネット分析サービス」
「eMark+ Prp」は、以下の項目を確認できます。
・UU数、CV数などの指標
・リスティング、バナー広告などの集客施策
・LPの効果
・性別、年代、エリアなどのサイトを訪問したユーザー属性
「eMark+ Keyword Finder」は、以下の項目を確認できます。
・検索ボリューム
・性別や年代で絞り込む
・分析データのダウンロード
・急上昇ワード
・スマートフォンからの検索ワード
「eMark+ Site Analyzer」は、以下の項目を確認できます。
・一般広告、リスティング、お気に入りからの検索流入元別のUU数やセッション数
・サイト内の人気コンテンツ
・サイト別の流入元の変化
・訪問者の推移
「中国ネット分析サービス」は、以下の項目を確認できます。
・広告出稿分析
・ECモール分析
・インターネット分析
競合分析ツールに珍しい「中国ネット分析サービス」を展開しているのが特徴です。
SimilarWeb
公式サイトURL:https://www.similarweb.com/ja
シンプルなユーザーインターフェイスと、使いやすさで知名度を上げているのが「SimilarWeb」です。
このツールを使用することで、以下のような項目を取得できます。
・アクセス数
・平均滞在時間
・平均ページビュー数
・直帰率
・流入先
・検索キーワード
・検索エンジン
・ソーシャルの流入
無料でも使用できるので、気になる方は試しに使用してみてください。
| 無料ユーザー | プレミアム |
|---|---|
| ・指標ごとの結果5件 ・1ヶ月分のモバイルアプリデータ ・3ヶ月分のウェブトラフィックデータ |
・指標ごとに無制限の結果 ・最大28ヶ月分のモバイルアプリデータ ・最大3年分のウェブトラフィックデータ ・グローバルおよび国レベルのデータ ・デスクトップ、モバイルウェブ分割 ・モバイルアプリのエンゲージメント ・人気のあるページ ・キーワード分析 ・業界分析 ・ユニーク訪問者数 ・複数のユーザー |
WEBサイト制作に役立つツール
ここからWEBサイト制作に役に立つツールを紹介します。
gridpx
公式サイトURL:http://www.kenjisugimoto.com/gridpx/
コンテンツの幅に合わせたカラム数やマージンなどを入力するだけで自動的に計算してくれます。
コンテンツの幅を960px・カラムの本数を12本・マージンを18pxに設定すると、カラムの幅は63.5pxです。
カラムを使用するときは、こちらのツールがおすすめです。
GuideGuide
公式サイトURL:https://guideguide.me/
このツールは、Photoshop・Illustrator・Sketchなどのデザインツールで使用できるエクステンションです。
有料ツールですが14日間は、無料で使用できます。
とても簡単に使用することができます。
上段に表示されているアイコンから説明します。
左から順番に以下のような機能です。
・アートボードの一番左にガイドを引く
「アートボードの左右中央にガイドを引く
・アートボードの一番右にガイドを引く
・全てのガイドを消す
・アートボードの一番上にガイドを引く
・アートボードの上下中央にガイドを引く
・アートボードの一番下にガイドを引く
次に、ウィンドウ中央の左列のアイコンを上から順番に説明します。
・アートボードの左端から指定したピクセルの間隔にガイドを引きます
・アートボードの右端から指定したピクセルの間隔にガイドを引きます
・カラムの本数を指定します
・カラムの幅を指定します
・カラムとカラムの間のマージンを指定します
料金は7ドルで1ドル120円で計算すると840円です。
非常に使いやすく、簡単にガイドを簡単に引けるので、WEBサイト制作を本格的にする方はぜひ導入しましょう。
bad-company
公式サイトURL:http://www.bad-company.jp/box-shadow/
このツールは、box-shadowとborder-radiusのジェネレーターになります。
ページの下部には、直感的に操作できるバーが用意されており、それらを操作することで自動的にbox-shadowとborder-radiusを生成してくれます。
実際にこのツールを使って以下のようなボックスが作成できました。
CSSのコードは以下のようになります。
CSS
/* box-shadow */
box-shadow:11px 0px 6px 3px #5b3482;
/* border-radius */
border-radius:18px;
/* border */
border:4px solid #731b1b;
/* react native */
{
shadowColor:"#5b3482",
shadowOffset:{width:11,height:0},
shadowOpacity:1,
shadowRadius:6,
borderWidth:4,
borderColor:"#731b1b",
borderRadius:18
}
他にもこのようなボックスを生成しました。
CSS
/* box-shadow */
box-shadow:28px 0px 21px 3px #c7b4b4;
/* border-radius */
border-radius:18px;
/* border */
border:4px solid #222222;
/* react native */
{
shadowColor:"#c7b4b4",
shadowOffset:{width:28,height:0},
shadowOpacity:1,
shadowRadius:21,
borderWidth:4,
borderColor:"#222222",
borderRadius:18
}
Placehold.jp
このツールはダミー画像を生成するためのツールです。
ダミー画像は、WEBサイト制作のデザインの段階で使用することがあります。
使えておいて損はしないツールなので、ぜひ使ってみてください。
公式サイトURL:http://placehold.jp/
使い方は非常に簡単で、左側に表示されている欄に指定したいピクセルを入力するだけでURLが生成されます。
そのURLをコピー&ペイストするだけでダミー画像が表示されます。
例えば、横幅を600px・縦幅を400pxに指定した場合このようなURLです。
http://placehold.jp/600×400.png
上記のURLをimgタグのsrcに入力することでダミー画像が表示されます。
<img class="alignnone size-full wp-image-3026" src="http://placehold.jp/600x400.png" >
また、URLの末尾に「?text={表示したい文字列}」を追加することで設定した文字列もダミー画像の中に表示されます。
http://placehold.jp/600×400.png?text={この画像はダミーです。}
<img class="alignnone size-full wp-image-3026" src="http://placehold.jp/600x400.png?text={この画像はダミーです。}" >
Font Awesome
このツールは、アイコンを使用できるツールです。
公式サイトURL:https://fontawesome.com/
検索ウィンドウに使用したアイコンを入力します。
例えば、「like」と入力すると、このようなアイコンが表示されます。
使用するためには、headのタグ内に以下のコードの記述が必要です。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
使用したいアイコンを選択して、コードをコピー&ペイストすることで使用できます。
<i class="fas fa-thumbs-up"></i>
また、アイコンの色、形、背景色もある程度自由に変えることができます。
とても便利なツールでサイト制作の時間を短縮できるので、ぜひ使用してみてください。
まとめ
いかがでしたか？
今回はCSSのフレームワーク・CMS・競合チェックツール・WWEBサイト制作に便利なツールなどを紹介しました。
WEBサイト制作から運用までそれぞれの場面に合ったツールがあります。
それらのツールを使用することで作業のスピードアップ・質の向上が期待できます。
今回、紹介したツールをぜひ参考にしてみてください。