たかが画像？サイトの評価は写真や画像で劇的に変化。ブログやアフィリエイトでは文章の次に重要度が増しています。良いサイトには必ずイラストや写真がありますね？成功できる人はここに時間をかけてきます。レベルの高いイケてるサイトを作るなら加工方法が大切。かんたんなやり方を紹介します。
Yukiです。私のサイトでは画像も凝って、ユーザーに受けるような図や表を作っています。文字だけだとメリハリないですね。見ている人に好印象を与えることが成功の秘訣です
フリー写真素材イラスト
◆pixabay
高画質写真が無料でダウンロードできます。外国人、外国の風景など珍しい画像があるのが特徴。見事な写真でプロ並みの素材が手に入ります。ぱくたそや日本のフリー素材以外の一番の選択肢です。
◆イラストレイン
イラスト素材が無料ダウンロードできます。ゆるいキャラでかわいい素材が豊富。アイコン素材などの画像になります。
◆無料イラスト素材.com
いろいろなジャンルの素材が手に入ります。サイドバーのメニューより選択しましょう。アイコン向きから図制作など多様な種類で役立ちます。アフィリエイトのランキング素材にもなります。
◆可愛い無料イラスト・人物素材
人物のイラスト素材が無料で利用できます。表情やバリエーションの違いが出せるため、マンガ向けにもなります。吹き出しのキャラクター用などにも使えます。
◆ぱくたそ
ネット広告やブロガー、アフィリエイターなど利用者多数。商用利用OKで無料。印象的な写真、個性的なモデルが魅力。アダルト等は掲載できません。
記事に写真やイラストがないと、あなたならどう思いますか？地味で物足りなく感じるでしょう。小さいキャラクターやアイコンがあるだけでも、サイトの魅力アップ。
ブロガーなら個性重視。文章も大事ですが、写真画像や動画が訴えかけるものもあります。アフィリエイト向けでも、1記事に1枚は画像を入れておくと良いでしょう。
アイコン作り
アフィリエイトの定番の「公式サイトこちら」「今すぐ申し込み」などアイコンの作り方を紹介します。
◆Cool Text
無料WEBアイコン作りサイト。日本語非対応があるがボタン、アイコンを自由に作れる
出来上がったアイコンの例
テキスト文、色、ボタンのレイアウトなどは自由に選択できます。
商品紹介、評価ページの「評価はこちら」。など自作ができます。
テキストリンクでは目立たないため、クリックされにくくなります。アフィリエイトやブログでも、画像広告よりはボタンやアイコン風がよくクリックされます。
画像広告はブロックされるため、自作するメリットがあるのです。
成約数、売上げアップはアイコンのテキスト文でも大きく違います。コピーライティングがあるだけで、CVRが1%以上上がる。アフィリエイト報酬でお悩みの方にはぜひ取り組んでもらいたい部分です
画像サイズを変更
スマートフォンでは横幅が320px。Wordpressのサーバー会社によっては、大きすぎると自動的にリサイズされます。
自分で変更しなくても、モバイル用に最適化されます。1000px以上の大きい写真は自分でサイズ変更すると良いでしょう。
画像のファイルサイズを小さくすることが求められるからです。サイトの表示速度が遅すぎると、評価が下がってアクセスが増えなくなります。
Windows10付属無料ペイントツール
⇒スタートメニュー（画面左下）
⇒Windowsアクセサリ
⇒ペイント
◆サイズ変更手順
⇒ファイル （画面上のメニューより）
⇒開く
⇒ファイル選択
⇒サイズ変更
⇒パーセント、ピクセル選択
サイズを大きくすることもできます。トップ画像を拡大する時にも使えます。
WEBサービスで変換
◆ILOVEIMG
無料のWEB版。リサイズや加工ができる。
HTMLタグ編集
アフィリエイトやブログでは、かんたんなHTML知識があると楽になります。自信がないなら、Wordpressビジュアルエディターで直感的にクリック作業しましょう。
編集加工
個人でサイト、ブログを作るなら無料ツールでも十分です。
プロ向けの有料ソフトをお求めなら、以下がおすすめです。
・Adobe Photoshop
・Adobe Illustrator
個人のアフィリエイトやブロガーだと、Windows付属のペイントツールでもかんたんな加工はできます。プロ向けのソフトを買っても、レイアウトやグラフィック制作はスキルが必要。
クラウドソーシングサービスで、画像制作依頼を出せます。1,000円以上で、ワーカーのスキルによって料金は変わります。
◆バナー工房
無料のWEB画像加工編集サイトです。出来上がりの画像を確認しながら、加工ができます。マウスクリックでリサイズやテキスト入れができる。写真をぼかしたり、エフェクトをかけてアレンジができます。スタンプや画像挿入してオリジナルのバナーが作れる！
バナー工房で画像加工した例
写真やイラスト素材に文字を入れたり、吹き出しを追加してマンガ風にアレンジできます。自分の好みでバナー画像や図などを作れます。直感的でマウス作業だけで好きな画像が作れます。
マウスで大きさを調節
◆OpenOffice
Word、Exelなど文書作成ができます。フリーでPCにインストールして使います。PDFファイル作成、表やグラフ制作、画像加工など用途はさまざま。当サイトの図はOpenOffice制作です。
OpenOfficeで図を作った例
OpenOfficeでグラフを作った例
右寄せ左寄せ
WordPressの場合
⇒メディアを追加
⇒画像ファイル選択アップロード
⇒画面右下の添付ファイルの表示設定
⇒配置
左寄せにした例
このように画像が左で
文章が周り込む
ただ注意点がある！
周り込み解除しないと
上のようにレイアウトが崩れてしまいます。
左寄せにしたあとは上記のタグを打ち込みます。右寄せの時はleftをrightに変更。
右寄せの例
同じように回り込み解除が必要
上は中央寄せにした例です。中央寄せになると、そのあとの文章は回り込みされません。
ビジュアルエディターの場合
WordPressのビジュアルエディターは直感的で作業ができます。かんたんにメニューアイコンをクリックして、画像のレイアウトを変更。初心者ならこちらで記事作成をおすすめします。
HTMLタグ打ち場合
ブログや普通のWEBサイトの場合は、自分でHTMLのタグを変更する必要があります。プログラムコードを直接編集しますが、不具合が出て表示が期待通りにならないこともあります。
右は全体幅の25%に指定した例
スマホの小さい画面でも25%サイズに変換。
CSSを使った例
CSSを使うのは難易度が上がり、初心者の方向きではありません。ただ、コードをコピーペーストするだけなので、覚えればかんたんにアレンジができます。
style.cssにコードを追加します。
◆Wordpressの場合
⇒外観
⇒テーマの編集
※CSSは記事の中ではなく、style.cssに記述します。headタグの中に記述することもできます。
◆サルワカ
見出しや囲み枠などコピーペーストで作れる！サイトに変化を与えて、ユーザー満足度も上昇。プログラマーではなくてもキレイなレイアウトがかんたんに作れます。
◆こぴぺっと
タブやリスト表示など多彩なCSSのバリエーションがあります。動作保証はないので、表示されない恐れもあることにご注意ください。
style.css編集する時はバックアップが必要になります。テンプレートによっても表示が変わることもあり、初心者向きではありません。覚えていくと、自分流にカスタマイズできて、個性豊かなサイトができます。
CSS編集ではエラーが起きることがあります。自信のない方は、テーマの編集で作業しないことです。トラブルが起きた時は、FTPソフトで修正が必要になるんですよ
画像を圧縮
なぜ圧縮が必要？
そのままでいけない？
高画質の写真だと、一つでも1MB以上の容量です。それではファイルの容量が大きすぎるので、圧縮して小さくします。モバイルでは回線速度が遅いので、圧縮して読み込み速度を上げます。
大きすぎると表示速度が遅い。
これがサイトの評価を下げてしまいます。
ブログ、アフィリエイトでもレイアウトが崩れていると評価ダウン。
◆tinypng
WEB上で無料で使える圧縮サービスです。ドラッグアンドドロップするだけでできるのでかんたん。
◆Caesium
フリーソフトで、パソコンにインストールして使います。英語版ですが、圧縮するだけならかんたんで日本語化は必要ありません。
100kb以下なら
圧縮しなくてもいい
大きいファイル（100kb以上）では圧縮が効果的。1000ピクセル以上の大きすぎる写真などは、大きさを調整して小さくすると良いでしょう。小さな努力が積み重なるとGoogleの評価も上がります。
目標 不労所得 想像してみてください
 | |
| 月いくら欲しい？望む金額稼ぐためには？今の自分を変えていく。解決方法こちら | |
