ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【Web制作】5分で作成!読者をひきつけるアイキャッチやスクショ編集方法

作成したアイキャッチ(犬と女性)

ブログは内容が一番大切ですが、文章を説明するためやイメージしやすいようにアイキャッチ画像や写真などを掲載した方が読者に優しいと思います。今回は私が実践してる画像の簡単な編集・加工方法を共有します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

写真などを編集・加工するのに有名なツールとして「Photoshop」があります。世界一周中に出会った人で写真にこだわる人の多くはこのツールを使ってると聞きました。しかし高すぎるので個人での利用には向きません。

ブログ掲載の写真・画像の編集をパターン化

いままで旅行ブログに掲載する写真などもあまり編集・加工してませんでした。暗い写真のみ少し明るくするくらい。でもこのブログではスクショ(スクリーンショット)を多く掲載するので画像編集が日常化しています。

最初はこの慣れない画像編集にかなり時間がかかりました。無料で便利なソフトやツールもいろいろ試しました。そして1ヶ月経ってやっと慣れてきました。編集方法もパターン化して今では1枚5分で編集できます!

アイキャッチ画像の探し方

スクリーンショットを使う場合は、私はGoogle Chromeの拡張機能(エクステンション)の「Webpage Screenshot」を使うことが多いです。キーボードショートカットに割り当てて使うこともあります。

それ以外のイメージ画像や写真を探すのは、次のサイトを利用しています。Flickrの写真を使う人も多いようですが、著作権掲載が義務付けられてたりと面倒なので、私は下のぱくたそか自分の写真を使うことが多いです。

PAKUTASO/ぱくたそ-WEB制作向けの無料写真素材/商用可

アイキャッチ画像を作成する時、一番時間がかかってるのが写真の選定です。加工時間は5分だけど、この選定時間は含まれてませんので。

私がMacで使用してる無料アプリ(フリーソフト)

さて写真を用意したらブログに貼り付けるためにサイズを調整したり、コメントを書いたりします。私は今は無料アプリしか使ってません。現在おもに使ってるフリーソフトは次の3つ。Windowsでは「IrfanView」を使ってました。

無料 (2013.07.10時点) 
無料 (2013.07.10時点) 
無料 (2013.07.10時点) 

まずはトリミング、枠、サイズ変更、明るくシャープに

ここまではPicasaで行います。ただPicasaの弱点としてJPGファイルしか編集できません。PNGなどのスクリーンショットも普通にPicasaで開けるけど、保存はJPGでしかできません。

JPGはファイルサイズを小さくできる利点はあるけど多少あらくなります。写真ならJPGで問題ないでしょう。

写真・画像をPicasaで開いたら、左の編集メニューから「切り取り」を選びます。私がPicasaを選ぶ理由の1つが「切り取り」つまり「トリミング」のサイズ指定が楽だからです。「4:3」「16:9」「正方形」「A4」「マニュアル」など自由自在。

アイキャッチ画像の編集方法2

次に背景が「白」に近いスクリーンショットなどの場合は、黒っぽい枠を付けます。私が好きなのは「ミュージアムマット」(編集メニューの一番右の一番下)で外線・内線とも太さ「0」にしたものです。

次にブログに貼り付ける大きさに変更します。Picasaの弱点です。その場で拡大縮小できません。だから「ファイル」メニューの「エクスポート」を使います。保存先、画像サイズ(縦横の長い方)を選ぶだけで良いです。

写真の場合は画質をカスタムで「55」まで下げてます。これでファイルサイズをかなり小さくできます。もちろん画質が悪すぎれば調節します。見た目とファイルサイズは「JPEG mini」という有名ソフトを利用した時と同じくらいです。

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

縮小した画像を開き直す必要がある点もPicasaのいけてないとこです。最後に「明るさ調整」をして、スクリーショット画像など文字がボヤケてる場合は「シャープ」で調整して保存しましょう。

かっこいい矢印や、ふちあり文字のコメントを付ける

上で保存した写真・画像を今度は「Monosnap」で開きます。最初は「Skitch」を利用してましたが最近のりかえました。かっこいい矢印が簡単に描けるソフトって意外と少ないです。文字にふちがあると写真の色と同系統色も使えて便利です。

位置情報・撮影日・カメラ情報などExifを取り除く方法

最近ではやっと利用者も敏感になってきた「写真に付く個人情報」。これを一括で削除してくれ、おまけにファイルサイズまで小さくしてくれるのが「ImageOptim」です。

いろいろ試したところ、JPGで圧縮率「55」で保存した写真はもうそれほどファイルサイズを圧縮できないようです。たぶん「ImageOptim」もそのくらいに圧縮してるのではないでしょうか。

しかしExif(写真についてる個人情報)をまとめて削除できるのは便利なので使用してます。ちなみにPicasaでもGPS情報は削除できますが、撮影日・カメラ情報なども削除したければ「ImageOptim」が便利です。

あとは画像・写真をアップするだけ

以上でアイキャッチ画像・写真の編集は完了です。あとはWordPressのアイキャッチに設定したり、Flickrにアップしたりして下さい。私はPicasa Albumを利用してるのでPicasaからすぐ転送できます。

これらは私の編集方法なので、参考にはしても各自で自分の方法を見つけてみて下さい。特にPhotoshopを使ってる人ならこれら作業を1つのソフトでもっと早くこなせるかもしれませんね(汗)

上の編集作業は最初は時間がかかるけど、慣れてくると1枚5分で実現できます。HTMLやCSSで引きつけたい場合は下の記事も参考にしてみてください。

【Web制作】見出し・引用・リストのデザインでサイト好感度アップ!人とGoogleに【Web制作】見出し・引用・リストのデザインでサイト好感度アップ!人とGoogleに

ブログ記事の中の見出し、リスト、引用などは視覚効果により文章をわかりやすくします…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【Web制作】カテゴリーとタグの違いと使い分ける4つのルール【Web制作】HTML5タグとCSS3のIE6-8対策方法!FacebookのOGP対応も:次記事»
ページ
↑先頭
ホーム