WEBディレクター兼エンジニアが選ぶ、WEBサイトの制作時に便利すぎる厳選WEBサービス10選。

こんにちわ。ノリット・ジャポンでWEBディレクター兼エンジニアをさせて頂いてる阿部です。最近はこの自社サイトやお客様のWordPressのディクションと制作、UMAMY❐のような自社ブランドサイトの構築に携わらせて頂いてます。楽しいです。ありがとうございます。今までの経験と日々身につけてる技術の一歩先行くものや、今までのマーケティング経験を活かした、サイト制作をしていきたいと思っています。

そこで今日は、WEBサイトを制作するにはものすごい量の知識経験が必要なのではないか?自分のChromeのSpeed Dial❐の画面をみて実感したこともあり、私が日々利用してるWEBサービスを厳選して10個紹介させて頂きたいと思います。

ディレクター、デザイナー、コーダー、プログラマー、マーケターなど完全分業で制作が進めば良いですが、そのような体制でなく全て一人でWEB担当のようなあいまいなポジション、または自営業などでこなさないといけない場合も多数あると思います。
そんな方のために、便利なWEBサービス、痒いところに手が届くサービスを厳選して紹介します!少しでもお役に立てれば幸いです。

*Speed Dial❐ = とても使いやすいChromeのスタートページ。ブックマークを写真付きで表示するサービスです。

ではスタート!!

まずはブラウザのシェアは今、一体どうなってるの?ってことで。

1.ユーザの利用してるブラウザシェアがわかる
– StatCounter GlobalStats –

[two_fourth class=”” last=”no” ]
statscounter
[/two_fourth]

[two_fourth class=”” last=”yes” ]
ユーザ環境を理解するのはWEBサイトをつくる上ではとっても大切です。
ということでブラウザのシェアがわかるWEBサービスを紹介!

2013年4月から現在までのクロームとFirefoxのバージョンを合わせたグラフ表示例です。こちらの設定を一番よく利用します。❐

IE10が7%ほどまで急激にさがり、IE11が急激にシェア率が伸びてます。ユーザは順次アップデートしてるみたいですね。

*ブラウザ = インターネットをみるアプリケーションです。Internet ExplorerやChrome, Firefox, Operaなど。

[/two_fourth]

[clear]

2.競合サイトのアクセス数がまるみえ
– SimilarWeb –

[two_fourth class=”” last=”no” ]
similarweb
[/two_fourth]

[two_fourth class=”” last=”yes” ]

なんと、こちらのSimilarWeb❐は競合サイトのアクセス数がわかってしまうという、とんでもないサービスです。
どういう技術で計測してるか不明ですが、規模感がわかるのは参考になると思います。
アクセスが少ないと、アクセス数は表示されずランキングのみの表示になります。

試しにAmazonと楽天のアクセス数を比べてみました!❐

Amazonが楽天の約6倍のアクセスがあるみたいです。

まだ弊社ノリット・ジャポンはランキングしか表示されません!(泣)
まだまだがんばらないとですね!

[/two_fourth]

[clear ]

3.高品質なサイトが並ぶギャラリーサイト
– MUUUUU.ORG –

[two_fourth class=”” last=”no” ]
muuuuu.org クオリティが高い縦に長いサイト
[/two_fourth]

[two_fourth class=”” last=”yes” ]

ブラウザシェア、競合のアクセスをみたら、どんなサイトにするかまずは他のサイトを眺めてみましょう!
ビジュアルを大きくとって、縦に読ませていくサイトは近年すごく主流になってますので、こちらのサイトはとっても重宝します。
眺めてるだけで楽しいです。みなさんほんと良いデザイン作りますね!

フォントの使い方、レイアウト、キャッチコピー、動的な動きなど参考になることがたくさんあると思います。

MUUUUU.ORG❐さん! うちのUMAMYも載せてもらえないでしょうか?❐お願いします!!

[/two_fourth]

[clear ]

4.配色を抽出してカラーコードを表示する
– Web Colour Data –

[two_fourth class=”” last=”no” ]
webcolourdata
[/two_fourth]

[two_fourth class=”” last=”yes” ]

MUUUUU.ORGでサイトを眺めたら自分のサイトをどのような配色にするかも考えてみましょう!
その際にこちらのWeb Colour Data❐ を利用してみましょう!
気になったサイトのURLを入れて、GET COLOURSのボタンを押すとそのサイトで利用しているカラーコードがわかる優れものです!

[/two_fourth]

[clear ]

5.背景色を替えて透明なテクスチャのCSSを貼るだけですぐに使える
– TRANSPARENT TEXTURE –

[two_fourth class=”” last=”no” ]
transparenttexture
[/two_fourth]

[two_fourth class=”” last=”yes” ]

テクスチャ(物の表面の質感・手触りなどを指す概念 wikipediaより)はWEBサイトの背景や見出しの背景などうまく使うととても効果的にサイトの雰囲気を作り上げることができます。
こちらのTRANSPARENT TEXTURE❐は背景色を簡単に変更しながら、山のようにあるテクスチャをすぐサイト内に表示し確認することができます。かつそのテクスチャのCSSがリアルタイムで生成されてますので、コピーするだけで自分のサイトですぐに使うことができます。

素晴らしすぎる!

[/two_fourth]

[clear ]

6.HTMLのマークアップを元にCSSセレクタを出力する
– OneClickCSS –

[two_fourth class=”” last=”no” ]
OneClickCSS
[/two_fourth]

[two_fourth class=”” last=”yes” ]

サイトの構築するさいにはHTMLを書きますが、その時に便利すぎるのが、OneClickCSS❐です。OneClickCSSはHTMLのマークアップを元に、id,class名が付与されたStyleSheetを自動生成するとてつもなく便利なサービスです。このサイトがあるのでひとまずダーっとHTMLをマークアップする癖がつきました。

なんとSassやSCSS,LESS形式で出力することもできます!

便利すぎる!!

[/two_fourth]

[clear ]

7.CSSでかっこいいボタンがすぐに作れる
– Button X –

[two_fourth class=”” last=”no” ]
button-x
[/two_fourth]

[two_fourth class=”” last=”yes” ]

ボタンを1からデザインするのは時間がかかります。WEBサイト上のボタンを触った時や押した時のボタンも作成するなら、尚更です。でもこちらのButton X❐があれば、おしゃれなボタンが簡単にすぐ作れます。CSSのコードも出力してくれるので、コピペするだけです。

おおまかなデザインを左のプリセットから選んでもらって、細かいBorder Radiusやフォントサイズ、 Box Shadowなどもページ右側のバーをドラックして操作して変更できます。

ほんと便利すぎる!!

[/two_fourth]

[clear ]

8.JpegやPngからすぐにFaviconがつくれる(透過対応)
– FavIcon Generator –

[two_fourth class=”” last=”no” ]
favicon-generater
[/two_fourth]

[two_fourth class=”” last=”yes” ]

いまはたくさんあるのかもしれませんが、手軽に透過のFaviconがつくれるサービスが見つからなかったのですが、こちらのFavIcon Generatorに出会えました。こちらをつかえば、正方形のサイトのロゴなどをアップロードをするだけで透過Faviconがつくれます。

Faviconがないとサイト表示したときのブラウザのタブ部分が空白になり寂しい感じがするのでサイト制作時には必ずいれましょう!

[/two_fourth]

[clear ]

9.サイト制作後に表示速度が遅い要因を知る
– GTmetrix –

[two_fourth class=”” last=”no” ]
gtmetrix
[/two_fourth]

[two_fourth class=”” last=”yes” ]

サイトを公開した後もやることはたくさんあります。近年ではスマートフォンからのアクセスも多く、サイトの表示速度の高速化も重要になってきました。Googleはサイトの表示速度も検索結果に影響すると言っています。なので、こちらのGTmetrix❐をつかって、何がボトルネックになっているのか要因を探りましょう。

ページ上部のボックスにURLを入れると解析を開始します!
画像のキャッシュ設定や圧縮、gzip転送、JSやCSSの圧縮、HTTPリクエストの削減など高速化もなかな奥が深いです。

[/two_fourth]

[clear ]

10.301リダイレクト設定やwwwありなし設定を.htaccessでするなら
– .htaccessEditor –

[two_fourth class=”” last=”no” ]
htacccess
[/two_fourth]

[two_fourth class=”” last=”yes” ]

サイト公開後、特にリニューアルした場合は昔のページからの訪問者が必ずいます。その訪問者に404のページを表示するのではなく、新しいサイトで適合したページに誘導します。htaccessをいじれない場合もあるかと思いますが、利用できる場合にとっても役に立つのが、こちらの.htaccessEditorです!

サイトURLのwwwあり、なしの統一や、301リダイレクトの設定が行えます。下部のテキストエリアにhtaccessの内容が表示されるので、そちらをコピーして自分のhtaccessに貼り付ければ大丈夫です!

[/two_fourth]

[clear ]

まとめ

いかがでしたでしょうか?WEBサイト制作時に便利なWEBサービスを厳選して10個紹介しました。他にも便利なサービスはたくさんあるので、ブックマークやSpeed Dialなどを利用してすぐに引き出せるようにしておくのが良いと思います。

そして最後に便利なサービスを生み出してくれて、かつ無料で提供して頂いてる心の広いエンジニアの皆様に感謝致します。ありがとうございます。

思い切り使わせて頂き、世に素晴らしいWEBサイトを生み出していきます!