現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

ブログで画像や、gifなどを使う時に便利なツール。
ウェブサイト、使い方。まるまるセットでの紹介です！

無料の画像素材

記事冒頭に画像を置くと、記事が楽しいイメージになるので、よく使っています。
この記事の頭にある画像も、Pixabayでダウンロードしてきたものです！

今から紹介する3サイトは、会員登録不要・無料なので是非使ってみてください。

Pixabay

pixabayでは、使用無料の画像やビデオを探す事ができます。 商用利用が可能で、帰属表示も必要ありません。

Pixabay

Pixabayでは、使いたい画像を、

• 文字検索
• 人気順
• 色あい
• サイズ
• 向き

で絞り込む事ができて、非常に便利です。

画像サイズも選択する事ができます。

PAKUTASO

PAKUTASOさんは20000枚以上の画像を無料利用する事ができ、日本人の方の画像素材が多いのが特徴です。
PAKUTASO

アクセス数の天使！ 「河村友歌」さんは皆さん一度は見たことがあるのではないでしょうか?!
河村友歌さん素材

イラストや

ご存知の方も多いと思います。可愛いイラストを無料配布してくれているサイトです。
イラストや

ScreenShotの撮影 & 裏技

Macではcommand + shift + 4で、範囲選択したスクリーンショット（png形式)を撮ることができます。
全画面もcommand + shift + 3で撮ることができます。

一枚の画像にできるだけ多くの情報量を撮影したい時は、GoogleChromeの検証機能を利用します。

二本指クリック　> 検証と進むと上部にGoogleChromeの上部に以下のような画面が現れます。
Responsive 50%を選択すると、画面に写る情報量を増やして、スクリーンショットを撮影できます。

そのほかにも、異なるデバイスでの表示を撮影したい時に、GoogleChromeの検証機能は大活躍します。

webサイトの画面全体を撮影するには、検証画面の上部右側にある縦3つの点をクリック　> Capture fullsize screenshotを選択します。

gifの撮影

gifの撮影にはGIPHYCaptureを使用しています。
詳しい解説はこちらの記事でしているので、興味のある方は是非読んでみてください。

macでgifを撮るのに便利【GIPHY Capture】

gifは文字や写真などよりも情報性が高いから是非うちのブログでも使いたいなぁ？使ってみたいなぁ、、、とお考え中のそこのお姉さん！GIPHY CaptureはMacで簡単にGifを撮れる最強のアプリです。今回は、そんなGIPHY Captureの導入、使い方を紹介していきたいと思いま...

Iphoneの画像の取り込み

Iphoneで撮影した画像を使用する場合は、Slackを使って送ったり、GoogleDriveにアップしています。
まとめて、画像を取り込見たい時は、イメージキャプチャアプリが便利です。

使い方は、usbでMacとIphoneを接続。
アプリケーションからイメージキャプチャを起動
保存先を指定して、全てを読み込むを選択します。

画像加工Skitch

Skitchとは、Evernote社が提供する画像編集 アプリ で、Evernoteの中の機能の一つとして利用が可能です。2016年1月22日以前は、Mac版以外も利用が可能でしたが、現在はMac版のみダウンロードが可能です。Windows版、iOS版、 Android 版のサポートは終了しています

Skitchをダウンロードすると、command + shift +5でスクリーンショットを撮ってから、そのまま画像編集をする事が出来ます。

Skitchでできる画像加工

• 文字入れ
• モザイク
• トリミング・回転
• 画像形式の変更
• お絵かき
• 図形書き込み

画像を保存する時は、ファイル > エクスポートを選択します。

Skitchは以下のリンク先でダウンロードする事ができます。
Skitch

画像圧縮

gifや、スマートフォンで撮影した画像などは容量が大きいので、圧縮するように心がけています。
画像を圧縮するときは、iLoveIMGが便利です。
iLoveIMGはドラッグ&ドロップするだけで利用する事ができ、一度に15枚まで対応しています。

画像名の一括変更

画像名を一括変更する場合は、Finderから画像を保存しているフォルダに移動します。
ctrl +a で全てを選択し、そこで二本指クリック　> 〇〇項目の名前を変更する　
で置換をする事ができます。

WordPress上での使い方。

altタグは必ず指定しています。

ホームページ内に画像を設置する際は必ずalt属性のタグを設置し、altタグへは画像に合った説明文を入れましょう。
alt（オルト）タグとは、ウェブページ内の写真データやイラストデータなど画像データに設定する際に挿入する画像の説明文になります。

表示に関しては、border,mediumというクラスを用意しています。
borderは、枠。mediumは、max-width:350px;です。

もし、画像加工や、gifを撮るならこっちのが便利だよ！などのご意見等ありましたら、是非コメント欄にて教えてください!

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日