photopeaとは？

photopeaとは、オンライン上で操作できる画像編集ツールです。

ソフトの購入や会員登録も不要、誰でも無料で使用できます。

完全無料にも関わらず、多くの機能を兼ね揃えているphotopea。

今回は一部の簡単な機能を使用してサムネイルを編集できる方法をご紹介いたします。

簡単！サムネイルの作りかた

画面上で一覧表示するときに、内容を一目で分かりやすく見せるための縮小した画像をサムネイルといいます。

簡単に画像のサイズを調整してみましょう！

新規プロジェクトを選択

※もし表記が英語になっていた場合は上部にあるツールから「More」を選択

→一番上の「Language」にカーソルを当て、「日本語」をクリックします。

サイズを入力し、「作成」をクリックします。

※サムネイルのサイズはサイトのデザインによって違うので、

ここではサムネイルサイズは【幅640x高さ350】としておきます。

※Webで使用する場合は解像度は72dpiで大丈夫です。

画像をドラッグして入れます。

カンバスが作成され編集画面に入るので、サムネイルにしたい画像をマウスでブラウザにドラッグします。

画像を引き延ばします。

画像レイヤーが追加され、選択された状態になるので、altとshiftを押しながら引き延ばします。

alt=中心を起点に引き延ばし

shift=縦横比を維持した状態で引き伸ばし

という効果があります。

※Macの場合はoptionとShiftを選択してください。

※ここでもし選択を解除してしまった場合には、メニューから変形ツールを選択すれば同じ状態から始めることができます。

画像を書き出します。

トリミング位置が定まったら、上部のメニューから下記を選択し、書き出しモードに入ります。

ファイル＞別名保存＞jpg

の順番にクリックしていきます。

画像を保存します。

.画質を設定し、「保存」を押すと作成した画像がダウンロードできます。

※ページ容量を軽くするため、書き出し品質は50%～60%程度を推奨します。

文字を追加する方法

画像が保存できたら、今度は文字を追加する方法をご紹介いたします。

まず始めに、左側のバーからテキストツールを選択します。

お好みのフォントを選びます

お好きなフォントを選びいただけますが、いきなり何を選べばいいのかわからない、という方には２種類のフォントをお勧めさせていただきます。

しっかり情報を見せたい時は、ゴシック体→Noto Sans JP

柔らかい女性的な表現や、和風の印象のサイトに合わせるなら明朝体→Noto Self JP

サイトの雰囲気に合わせたり、内容によって変えてもいいかもしれません！

文字を入力して調節します

画面左上のピンクの部分で囲われているパネルの数値を変えることで文字の大きさを調節することが出来ます。

また、ブルーで囲われている右上の「文字ツール」を選択すると、

文字を一部分小さくしたり、2行になったときの空き具合を決めれるなど細かい設定が可能になります。

見やすいサムネイルにするポイント

文字を乗せたけれど文字が見えづらい…という方のために２つだけ文字みやすく見せる機能を紹介させていただきます。

ドロップシャドウ→文字のまわりにふんわりとぼかしを入れたり、影をつけることができます。

図形ツール→丸や四角など図形を引くことができます。

ドロップシャドウは画面右下の「eff」から選択します。

レイヤースタイルのパネルの数値や項目を変更することで、文字に効果をつけることができます。

見え方も変わりますので是非お試しください！

そして、アイコンのように見せたい場合には図形ツールを使用して文字の下に図形を引くことも可能です。

サムネイルの完成です

ご利用はこちらから

作りかたは以上になります。

今回は配置と簡単な機能だけをお伝えいたしましたが、

photopeaには画像自体を明るく加工することや、

切り抜きもできる便利な機能が他にも多く利用できます。

とても便利ですので是非お試しください！