WordPress で最初に入れておきたい必須プラグイン 基本編

Wordpress Logo

最近はWordpressが非常にポピュラーな物になってきましたね、他のCMS(コンテンツマネージメントシステム)を差し置き、使い勝手の良さからNo.1のシェア率になっています。ウェブ制作時でもコストを抑えたテーマをカスタマイズしたウェブサイトの制作、またはオリジナルでもクライアント側が自身で更新が可能なように自作テーマ作成、なんていうウェブサイトの構築もかなり一般的に行われていると思います。またアフェリエイトの場においても自分のドメインを取得して自分のブログをWordpressで制作している人も多くなってきましたね。

WordPressにはプラグインという機能があり、自分の好みの機能を無料または有料でダウンロードし、付け加える事が簡単にできます。かくいう私も本当に様々なプラグインを試してきました。プラグインには本当に色々なジャンルがありますが、今回は基本編という事でこれだけは最低限いれておきたいという物を自己判断で紹介したいと思います。

Contact Form 7

Contact Form7

配布元

超といっていいほど有名なプラグイン、わずらわしいPHPを書く必要もなく、メールアドレスを指定し、後は自分の入れたい項目を指定するだけでコンタクトフォームを短時間で構築できます。制作者は日本人の Takayuki Miyoshi さんという方で、世界的にも有名なプラグインとなっています。

StatPress Reloaded

StatPress Reloaded

配布元

高機能のアクセス解析プラグイン。大変使い勝手がよく、グラフ形式でサイトに訪れた人数を見る事ができます。更に何を検索して自分のサイトに訪れたか、またどのリンクから自分のサイトにやってきたかも見る事ができます。Google Analystic ももちろん素晴らしいですが、こちらは登録する必要もなくただ、プラグインをインストールして有効化するだけで設置できるので、お勧めです。

Antivirus

Antivirus

配布元

WordPressは非常に便利なのですが、多人数が使うという事はおぞずと悪意を持った人間も出てきます。テーマファイルにウイルスが仕組まれている可能性もあり、自分のWordpress、また閲覧者に知らず知らずのうちに被害を与えてしまうことがあります。このプラグインはスキャンをし、テンプレートファイルにウイルスが仕組まれていないかチェックする事が可能です。

Acunetix WP Security

Acunetix WP Security

配布元

上記にも書いたようにこちらもセキュリティ系のプラグイン。パスワード制でダッシュボードの中に入れるWordpressはどうしてもセキュリティに問題がある場合があります。そんな時このプラグインを使いスキャンをするとセキュリティの脆弱性を判断してくれ、セキュリティ対策に取り組む事が可能になります。

All in One SEO Pack

All in One SEO Pack

配布元

SEO対策に欠かせないタイトル・キーワードの設定を投稿ページ毎に簡単に行う事が可能なプラグイン。大体Wordpressに慣れている人なら入れているではあろうと思います。キーワード選定などは自分で行う必要があるにしろ、このプラグインの使い勝手は非常にいいです。

とりあえず今回は5つを紹介しましたが、まだまだお勧めのプラグインはたくさんありますのでまた次の機会に紹介します。ただ、入れれば入れるほどWordpressが重くなるのも事実。自分の用途に応じて本当に必要なプラグインを使い分けるのがいいのかもしれません。

ウェブデザインに欠かせない本当に使える無料ソフト、ウェブサービス 画像圧縮・加工編

Jpeg Mini

最近はウェブサイト制作も様々な便利なツールが出回っていますね。特に無料で公開されているものもたくさんあり、ウェブ制作での効率化には欠かせません。筆者は基本は Adobe のソフトをを使用してウェブサイトを制作していますが、場合によっては Adobe のソフトの機能を使うよりも効率、完成度が上がる事が多々あります。今回はそんな管理人が使用する無料ソフト、ウェブサービスを画像圧縮・加工の分野で紹介します。

Jpeg Mini

Jpeg Mini

ウェブサイト

最近は横長、縦長のウェブサイトも増えてきて、非常に大きいサイズの画像を使う頻度も上がってきました。ウェブサイトの表示速度に非常に大きく依存する、画像の容量。こちら、ほぼ画質を落とす事なく画像の容量を下げる事が可能です。このウェブに直接画像をアップロードする形でも行けますし。ソフトダウンロード版も一部無料で使えます。(制限有り)

Tiny PNG

Tiny PNG

ウェブサイト

こちらは上記がJpegであるのに対し、PNGファイルの圧縮ができます。こちらもほとんど画質を下げる事なく画像の容量を下げる事が可能です。

リサイズ超簡単!Pro

リサイズ超簡単!Pro

ウェブサイト

こちらは国内産の一括リサイズが可能なソフト、例えばスライダー、ギャラリー制作で2種類の違ったサイズの写真が必要な場合、一括縮小が可能です。こちら無料ダウンロードで使用でき、使い方もいたってシンプル。縮小したい画像をドラッグ&ドロップして後は変換したいサイズをピクセルで指定し、実行するだけです。シンプルかつ高機能で是非お勧めのソフトです。

Placehold. It

Placehold. It

ウェブサイト

ウェブサイトを制作中、レイアウトを制作した時にダミーの画像を入れられる事ができるサイト。使いかたも超簡単で、上記から画像リンクを持ってきて、後はサイズを指定するだけです。例えば 200px x 200 pxの画像を表示したいとき img src=”http://placehold.it/200×200″ とコピペするのみ。例えばクライアントにここにこういうサイズの画像を入れたいと見せる時などに活用しています。

GIMP

GIMP

ウェブサイト

言わずとしれた無料画像加工のソフト。Photoshopと比べるとやはり機能の制限はありますが、画像の色を加工したい、簡単なバナーを自分で制作したい人には持ってこいのサイトです。やはり無料ダウンロードというのが非常に嬉しいです。

今回は画像という分野に絞って紹介してみましたが、いかがでしたでしょうか?今後も別ジャンルも含め、ウェブデザインに欠かせない本当に使える無料ソフト、ウェブサービスを紹介していこうと思います。

ウェブデザインに欠かせない本当に使える Google Chrome 拡張機能 01

Google Chrome Icon

最近世界中で Google Chrome のシェア率も拡大しております。アメリカではシェア率は他のブラウザを上回り1位となっていますね。それはやはりGoogle Chrome のウェブサイト表示の速さ、豊富な拡張機能のお陰ではないでしょうか。日々Chromeの制作に携わっている人々、また拡張機能を開発している人には本当に頭が上がりません。
かくいう管理人も約3年前にChrome ユーザーになり、様々な拡張機能を使ってきました。今までもウェブデザインで使える拡張機能は色々目にしたと思います。そんな中で今となってはもうこれなしではウェブ制作のに支障が出るほどの拡張機能を紹介します。


Eye Dropper

Eye Dropper Icon

拡張機能ウェブサイト

こちらはウェブサイト上のどんな色でもカラーコードを取得できるツール。色使いのきれいなウェブサイトを見て、色合いの研究にはもってこいです。

Image Properties Context Menu

Image Properties Context Menu Icon

拡張機能ウェブサイト

Chromeには右クリックで画像のプロパティを参照する機能がデフォルトではありません。手っ取り早く画像サイズや情報を取得したい人におすすめです。

MeasureIt!

MeasureIt! Icon

拡張機能ウェブサイト

こちらは立ち上げるとウェブサイトのどんなパーツでもピクセル形式で図る事が可能です。Inspect Elements を立ち上げる必要も無く、手っ取り早くウェブサイトのパーツのサイズを知りたい人に非常にお勧め。超便利です。

Lorem Ipsum Generator

Lorem Ipsum Generator Icon

拡張機能ウェブサイト

ウェブサイトを制作時レイアウトで仮文字を入れる事も多いかと思います。そんな時はわざわざ検索して文字を持ってくる必要もありません。たったワンクリックでレイアウト用の文字をコピペできます。(英語限定)

PageSpeed Insights (by Google)

PageSpeed Insights (by Google) Icon

拡張機能ウェブサイト

こちらGoogle Developerにあるウェブサイトのスピードを測定する機能です。立ち上げ方は Inspect Element を右クリックで立ちあげると、最上部に項目が見えると思います。その一番右にPageSpeedという項目が追加されています。後はクリックしてページスピードを測定すると、ページが何故重いかという原因を判定してくれます。

また正式にいうと拡張機能ではないのですが、右クリックのInspect Element(デバッグツール)は非常にお勧め、最近はこれで html/css をデバッグし、レイアウトの変更をした後CSSにファイルに直接張り付け。という流れでウェブサイトの制作をしています。こちらの詳しい使い方についてはまた後日記述したいと思います。


今まで様々な拡張機能を試してきましたが、上記の拡張機能は本当に使える拡張機能です。こんな便利ツールが豊富のGoogle Chromeはウェブサイト制作の効率化に欠かせません。まだの人は是非一度お試し下さい。

レスポンシブデザインの際の html/css デバッグについて

レスポンシブデザイン

最近レスポンシブウェブデザインが非常にポピュラーな物になり、制作をしている人も多いかと思われます。ただ、PC用のウェブサイトと違いデバッグが困難と考えている方々も多いのではないでしょうか?私はAndroidユーザーなのですが、調べたところタブレット、スマートフォンではウェブのデバッグのアプリは見当たりませんでした。そんな時に見つけたのが、


レスポンシブデバッグ http://www.jamus.co.uk/demos/rwd-demonstrations/

まず上記の様なPCからタブレット、スマートフォンなどのデバイスの表示が確認できるウェブサイトにアクセス、自分が制作しているサイトを表示する。(個人的には上記のサイトがシンプルで一番使い易いです。)


次にGoogle Chrome, Firefox等をたちあげ、それぞれのデバッグツールを立ち上げる。(ChromeならInspect Element, FirefoxならFirebug等)後は普段PCで行っているでバックをこのサイト上で行うだけです。本当にタブレットやスマートフォンで表示されるのと少し表示が違う事もあれど、私は今までレスポンシブコーディングを行う時はこの方法で行っています。非常に便利な方法になっていますのでお試し下さい。

はじめに

はじめまして。Los Angelesのウェブ制作会社の Samurai Web Works です。ブログを通じて普段ウェブ制作に必要な情報、またお役立ち情報、ツールなどを今後不定期で掲載していきますので、お楽しみ下さい。