ウェブデザイン・ウェブ制作に欠かせない本当に使える無料ソフト、ウェブサービス 総合編 01

Adobe Kuler

ウェブ上には本当に様々な種類のウェブ関連のウェブサイト・ソフトが出回っています。前回は ウェブデザインに欠かせない本当に使える無料ソフト、ウェブサービス 画像圧縮・加工編 という事で画像に関する無料ソフト、ウェブサービスを紹介しましたが、今回は総合的に筆者がウェブ制作でよく使う無料ソフト、ウェブサービスを紹介したいと思います。

カラーツール編

Color Picker.com

Jpeg Mini

ウェブサイト

こちらは非常に使い勝手がいいオンラインカラーピッカー。カラーコードを確認する為にわざわざPhotoshopを立ち上げる必要もありません。筆者は大体これとGoogle Chrome の Inspect Elementでカラーコードを取得し、ウェブ上で色を確認しています。

Adobe Kuler

Adobe Kuler

ウェブサイト

こちらは様々な種類の色組み合わせの見本が見られるAdobeのサイト。バナー・ウェブサイト制作の時に色組み合わせに困った・アイデアが出ないと思った時はこちらを開いてイケていろカラーの組み合わせを見るのがいいと思います。見本をクリックするとカラーコードも取得できます。

FTPクライアント編

FileZilla

FileZilla

ウェブサイト

非常に有名なFTPクライアント。ウェブサイトを制作している人なら一回は耳にした事があるのではないでしょうか?接続も非常に速くドラッグ&ドロップでファイルをサーバーに上げる事ができます。こちらのサイトは英語になっていますが、基本的にWindows, Macバージョンをダウンロードし、インストールします。 日本語の説明ページ もあります。

レスポンシブデザイン編

Demonstrating Responsive Design

Demonstrating Responsive Design

ウェブサイト

レスポンシブデザインに欠かせないデスクトップ上でスマホ・タブレットの表示確認ができるサイト。非常にシンプルで確認したいサイトを右上で検索するだけ。後は上にあるスマホ・タブレットを選択するだけです。色々レスポンシブに関するウェブサイトを使って来ましたが、こちらが一番使い勝手がいいです。またこちらで スマホ・タブレット表示のデバック も可能です。

サイト速度測定編

GTmetrix

GTmetrix

ウェブサイト

こちらはWordpressでサイト制作した時に非常にお世話になったサイト。サイトの速度を無料で測定でき、何が原因で遅くなっているか確認できます。(英語になります。)測定は何度でも可能なので、Wordpressでプラグインを差し替え再度測定し、どのプラグインが高速化の妨げ、もしくは役立っているか判断する事もできますね。もちろん普通のサイトも測定できます。

Google Developers PageSpeed Insights

Google Developers PageSpeed Insights

ウェブサイト

こちらはGoogleのページスピード測定ツール。GTmetrixより測定後のアドバイスがシンプルで、また違った角度でサイト高速化のアドバイスをしてくれます。

今回は総合編という事で様々な角度から本当に使える無料ソフト、ウェブサービスを紹介してきました。様々なツールが溢れる中、本当に使えるサイトをこれからも紹介していこうと思います。

本当に効果があるWordPress高速化の設定・高速化プラグイン

Head Cleaner

WordPressは非常に便利にブログやウェブサイトを表示する事ができ、HTMLの知識が無くてもプロ級のウェブサイトも制作できるテーマも存在します。ただその半面、Wordpressをサーバーにインストールをすると表示が非常に遅くなる事が多々あります。筆者もこの現象に多々悩まされてきました。Wordpressが重くなる要因としては。

  • WordPressをインストールしているサーバーの環境。レンタルサーバー選びは実は非常に重要です。
  • テーマの種類。筆者も経験がありますが、無駄に他種類のスライダーや機能がついているもののは特に重いです。

ただし上記の問題は設定・プラグイン導入である程度改善が可能になります。ただ、上記に書いてある様にレンタルサーバー選びは非常に重要ですので、Wordpressを使用する際はある程度評判のよいレンタルサーバーを選ぶ事がベストです。ただし改善はできますので、以下改善策とプラグインを掲載しておきます。

DB Cache Reloaded Fix

DB Cache Reloaded Fix

配布元

こちらはデータベースとのやりとりをキャッシュしてくれるプラグイン。導入も非常に簡単でインストールした後チェックボックスをオンにするだけです。これだけでも結構効果があります。

Cloud Flare

Cloud Flare

配布元

実はこれを導入すると劇的に速度が上がります。CDNサーバーといい、Cloud Flareのサーバーで画像や動画をキャッシュさせ、速度を早くするみたいです。ただ、導入は少しした設定が必要。まず Cloud Flare ウェブサイトへ行き、無料登録をした後ドメインのネームサーバーを変更する必要があります。詳しい説明はまた次の機会に掲載しようと思います。登録後、こちらのプラグインをWordpressへインストールし、設定すると速度が劇的に速くなります。

Head Cleaner

Head Cleaner

配布元

こちらはhead内のCSS, Javascriptを整理してくれます。整理する=速度も速くなります。特に高機能のテーマはとんでもない数のCSS, Javascriptが存在する事があります。導入はインストールした後チェックボックスで設定する必要がありますが、上手くいけば非常にレスポンスが速くなります。※ただ設定やテーマによっては背景画像が消えたり、不具合が起きる可能性もあるので注意が必要です。個人的な経験ではテーマに依存されます。

H001 Prime Strategy Translate Accelerator

001 Prime Strategy Translate Accelerator

配布元

日本語Wordpressを使用している人にはこちらの導入をお勧めします。どうやらWordpressは一回一回翻訳ファイルを読み込んでいるみたいなので、その読み込みをキャッシュ化し速度が上がります。インストール後、設定する必要がありますが基本的には有効化にチェックすれば大丈夫です。

WP Hyper Response

WP Hyper Response

配布元

こちらは導入するだけで高速化するプラグインです。表だけでなく、更に管理画面も高速になります。

以上が筆者が導入しているプラグインです。尚、入れすぎもよくないらしく、同じような機能を持ったプラグインを導入すると逆に重くなります。上記の組み合わせでしたら問題はないと思います。

プラグイン以外での高速化対応

  • WordPressのテーマはなるべくシンプルな機能のものを選び、自分でカスタマイズする。高機能な物は便利な反面レスポンスが遅くなる物が多々あります。
  • 画像は以前の記事にも紹介した JPEGmini 等で圧縮する。
  • ある程度カスタムが完了したら、必要のないJavascriptは消去。これ実は結構効果があります。
Page Speed

上記の設定した結果このブログもロード時間が3秒まで短縮(時間帯にもよりますが)、またページスピードグレードもBまで上昇。これ以上はサーバーを変えるしかないと思います。。(Wordpressにあまり強くないサーバーを選んでしまっていましたが。。)以上Wordpressの高速化設定の記事です。今後も色々な情報を配信していきますのでよろしくお願いします。

追記・結局最終的に思い切ってレンタルサーバーを変えてみたところ、アクセスの速度が急激に上がりました。どんなにまずい食材をうまく料理しようとしてもうまくはならないように、やはり。。サーバー選びが非常に重要みたいです。レンタルサーバーの速度は個人的にFTPクライアントのレスポンス速度で分かると思います。筆者は多数のクライアントを抱えているので、幸い様々なサーバーを目にする事ができ、その中で速いサーバーを選びました。