Photoshop学習にもおすすめ! 22のサムネイル参考サイト・SNSアカウント
PhotoshopやIllustratorは非常に多機能ツール。基本操作を覚えた後は、何をするかによって学習の優先順位が変わります。「次は何を学ぶべきかわからない」という状況になった時に、おすすめなのがサムネイル作りです。サムネイルには写真補正や加工、文字入れと様々な技術が使われています。
デザインスキルも学びつつ、自分のサイトやアカウントのクオリティも上がるので一石二鳥！ということで、今回はサムネ作りの参考にしたい素敵なサイトやSNSアカウントを紹介します。
Webデザイナーを目指すなら、サムネにも注目
複数の記事や動画が並んでいる時。
目を引く・内容に期待を持てるサムネイルがあれば、つい見てしまいますよね。
You Tubeでも、視聴回数の多い動画・人気YouTuberは魅力的をサムネイルが設定されています。ブログサイトなどでも、サムネイルが魅力的だとサイト内回遊率が改善します。
コンテンツをユーザーに見てもらいたければ、魅力的なサムネイルが必須なのです。
このため、サムネイルの制作には個人から企業まで力を注いでいます。制作のお仕事としても需要があり、サムネイル担当のデザイナーがいる企業もあれば、外注としてクラウドソーシングで募集案件が出ていることも珍しくありません。
Webデザイナーの総合的な学習として、よくバナーデザインが取り上げられます。が、実はサムネイル・アイキャッチの制作も同じ。デザイン知識・理論、Photoshopなどのデザイン制作スキル、マーケティング感性の全てが必要です。
サムネイルは広告バナー以上に身近、目にする機会が多い存在。
「Photoshopでこれを作る場合、どういう工程になるのかな」
「どんなユーザーが対象（ターゲット）かな」
と意識して見ることで、デザイン・Web制作の学習にも繋がります。
デザイン別：サムネイルの参考アカウント・Webサイト
サムネイルを作成するには、写真やテキストなど「サムネイルを構成するパーツ」が必要です。今回は使用する素材から、デザインのタイプを大きく4タイプに分け、それぞれのサムネイルが素晴らしいサイト・アカウントをご紹介します。
- 写真ベース
- イラストベース
- テキスト主体
- 組み合わせ（コラージュ・グリッド）
1.写真ベース
コンテンツにかかわる写真、動画から切り抜いた画像などをベースにしたサムネイルです。
ヒントマガジン - ハンズ
ハンズの『ヒントマガジン』で使われているサムネイルは、写真が主体。Webマガジンやブログサイトの、オーソドックスなサムネイルスタイルと言えるのではないでしょうか。
写真のクオリティが高く、きれいなギャラリーのようにも見えますね。写真だけで分かりにくいものはテキストが加えられている、店舗限定のご案内は店名の入ったフレームを使う、などマガジンとしての工夫もされています。
タロサックの海外生活ダイアリーTAROSAC - YouTube
外国人へのインタビュー動画が人気のタロサックさんのチャンネルでは、動画のワンシーン＋キャッチーなコピーのサムネイルが使われています。フチ付きの大きめな文字でユーザーの興味をひく文言を入れる、ザ・You Tubeというサムネイルですね。
特に日本のYou Tubeではよく使われている、テンプレと言っても良いデザイン。ユーザーにとって見慣れていることは、分かりやすさや安心感に繋がります。興味のある内容であればつい見てしまうでしょう。
くまの限界食堂 - YouTube
チャンネル登録者数100万人超えのレシピ動画チャンネル、くまの限界食堂さん。テキストは白一色、読みにくい時は背景に半透明の黒を入れる…というルールでサムネが作られているので、料理が主役として立っています。
テキストと画像どちらも見やすく、まとまっていますね。サムネイルに統一感があるので、多数のチャンネルを登録しているユーザーも「あのチャンネルの新作が来た」と分かりやすいこともメリット。
monograph/ 堀口英剛 - YouTube
ガジェットなどの紹介動画を公開されているmonographさんのYou Tubeチャンネル。こちらも文字色は白で統一されていて、紹介アイテムを引き立てるデザインになっています。
同じフレームを使うことでサムネイルの統一感もありますね。幅広いユーザー層に好まれる、シンプルで洗練された印象のサムネイルです。
みき ✈︎travel writer | 大人の癒し旅ガイド - Instagram
フリーライターみきさんのインスタアカウントは、写真を全面に使い文字を入れるタイプのサムネイル。写真自体もとても良いですが、写真上に配置されているテキストによって統一感とオリジナリティがアップしています。
フォントサイズや縦書き・横書きを使い分けられているので、旅行雑誌の表紙のような印象になっています。そのまま広告バナーなどにも使えそうなデザインですね。
2.イラストベース
イメージイラストを全面、もしくはメインに使用したサムネイルです。
WP EXPLORER
WP EXPLORERはWordPressのテーマやプラグイン、運用のためのトピックスなどを紹介されている海外サイト。
ブログのサムネイルはイラストで統一されています。
文字入れなどもされていない、イラストのみのシンプルなサムネイルですが、どんな内容なのかはパッと見て把握できますね。写真だと内容が表現しにくいような内容でも、イラストベースだとニュアンスが伝わりやすいですね。
INITIAL
スタートアップ向けの情報プラットフォームINITIALでは、イメージイラストとタイトルやコピーを組み合わせたサムネイルが多く使われています。写真だと表現しにくいコンテンツの場合、イラストを活用するとイメージを伝えやすいですね。
イメージ写真ほど大げさ・嘘っぽく見えないのもイラストのメリット。
お役立ち資料 | ONLYSTORY
経営・営業支援のプラットフォームONLYSTORYの、資料サムネイルもイメージイラストが上手く活用されています。タイトルの文字、イメージイラストのどちらもわかりやすく、クラデーションや配色でシンプルすぎないデザインに仕上がっていますね。
ホワイトペーパー系のサムネイル、表紙はイラストが使われている物が多いです。イラスト系のサムネイルの参考を探す場合は、メディアサイトやSNSだけではなく、お役立ち資料・無料DL資料などのページも見てみましょう。
3.テキスト主体
タイトルや内容を示すキャッチコピーの「文字だけ」でもサムネイルは作れます。
ぴったりな画像やイラストが見つからない、そこまでサムネにお金や労力を割けない…なんて方も、参考にしやすいのではないでしょうか。
楽しく働くを語るラボ - Parque（パルケ）
働き方や作業効率化に関する情報を発信している“楽しく働くを語るラボ ”では、ジオメトリックな背景画像に文字を載せたサムネイルが多く使われています。
文字のみのサムネイルは単調・それぞれの記事の区別がつきにくいなどのデメリットがありますが、色を変えるなどの工夫で一覧表示も見やすくなりますね。
英語聞き流し | Sakura English - YouTube
You Tubeでも、あえて文字主体のサムネイルが設定されることもあります。
検索結果をぱーっと流し見しているユーザーの目にも止まりやすい、You Tubeっぽいデザイン。英語聞き流しチャンネルのサムネイルでは、イラストや写真が使われているものも、文字のみのデザインもあります。
きるたいむ- Killtime - Instagram
きるたいむさんのアカウントでは、手書き調のアイコンと、コンパクトなコピーで構成されたシンプルなサムネイルを使われています。
インスタで使われているサムネイルは、全面を使ったものが大半。写真系は言うまでもなく、文字だけのサムネイルでも正方形のスペースを広く使っているものが多いでしょう。そんな中で、この余白が強いデザインは逆に目を引きますね。
4.コラージュ、グリッド
コラージュデザインは、写真や画像などバラバラの素材を組み合わせて1つの作品にするデザイン技法です。
グリッドデザインは、決められたスペースを水平線と垂直線で分断し、できた格子を組み合わせアイテムを配置していくデザイン手法。コラージュの素材配置にも使われます。
はな 女子力上げる自分磨き- Instagram
ザ・グリッド、というレイアウトでデザインされたサムネイルを使われています。
複数アイテムの紹介・比較などの時に、グリッドで写真を配置していくとスッキリと見えて良いですね。紹介アイテムが見やすいので「掲載アイテムが気になっている人」「そのジャンルで良いものを探している人」両方のアクセスが期待できます。
森の家 / Mori's house - YouTube
比較ランキングや、同系等のアイテムをまとめて紹介しているYou Tubeチャンネル。全体的にナチュラルなテイストで統一されています。
こちらも複数の画像をグリッド配置していますが、画像の切り抜き・透過はなし。テイストが近いため写真そのままでも見やすく、サムネイルから「動画の雰囲気」と「情報量が豊富」ということがわかります。
HOUYHNHNM
オウンドメディアで使うサムネイルのお手本にしたいWEBマガジン、HOUYHNHNM（フイナム）。アイキャッチとサムネイルに同じ画像が使われており、どの画像もハイセンス。グリッドデザインのサムネイルも多く見られます。
LDK編集部【公式】- Instagram
コラージュデザインの代表格と言っても過言ではない雑誌LDK。
公式インスラグラムでもLDKらしさ全開の、掲載商品を並べたサムネイルが使われています。
LDK公式Webサイトの方では、写真をベースにしたシンプルなサムネイルのほうが多く使われています。たくさんのアイテムを並べたデザインが見たい場合は、インスタアカウントのほうが探しやすいですね。
メルカリマガジン
メルカリマガジンのアイキャッチ/サムネイルでも、グリッドデザインは使われています。
『教えて✗✗先輩！』ではコラージュ、『MY REAL KEYWORD』では写真+フレームなど、連載毎にサムネイルが統一されています。色々なパターンのデザインをみることができ、オウンドメディアで“テンプレート”的なデザインを使うメリットも体感できます。
CULTIBASE
CULTIBASEは、企業やウェビナーで使えるような落ち着いたデザインが多いです。
抽象的な背景画像やイラストと、出演者の写真を組み合わせたサムネイルは業種問わず使えるデザイン。文字の入れ方が美しく、読みやすさと画像の綺麗さが両立されています。
そのほかサムネイル制作に役立つサイト
色々なサムネイルを見るなら
SAMUNE
色々なサムネイルを見たい、サムネ制作のお仕事を受けたけどアイディアが……なんて時には、サムネイルデザインを専門にしたギャラリーサイト『SAMUNE』がおすすめ。
Categoryから業種やテイスト、色調ごとでの絞り込みもできます。
アーカイブされている量が豊富なので、困ったらまずこちらを確認すると良いでしょう。
Canvaテンプレート
オンラインのグラフィックデザインツール『Canva』は、テンプレートを使って誰でも簡単に画像を作成できるのがウリ。用意されているテンプレート数も非常に多いので、アイディア探しに役立ちます。
Vook（ヴック）
Vook（ヴック）は、映像クリエーター向けのナレッジ共有サービス。
映像クリエーター向けだけあって、サムネイルのクオリティがとても高いです。
サムネイル参考にも役立つサイト
サムネイルのデザインアイディアは、SNSやメディアサイト、Googleなどで検索することもあります。とは言え、1つずつ検索していくと非常に時間がかかります。以下のようなWebサービスやサイトも活用すると、効率よくデザインの引き出しを増やしていけるでしょう。
Pinterestは、Webサイト上にある画像を集めてブックマークできるサービス。自分が保存した画像をまとめてシェアするなどの使い方が主ですが、実は画像検索機能がものすごく優秀。デザインアイディア探しにもよく使われています。
サムネイル+デザイン、サムネイル+SNS名、アイキャッチ、などのワードで検索すると、サムネイルやデザインに役立つアイディアが見つかります。
Parts.
Parts.はLPをパーツごとに分けて掲載してくれている、便利なデザインアーカイブサイト。
そのものズバリな「サムネイル」のカテゴリーはありませんが、ブログ記事や資料ダウンロードなどに掲載されているスクリーンショットはサムネイルの参考にもなります。
そのほかに、Wwbデザインやバナーデザインのギャラリーサイトなども参考になります。
Web上に限らず、雑誌・本の表紙・商品パッケージなど、私達の周りにはデザインの参考になるものが溢れています。お仕事で必要な時にパッと調べられるのはもちろんですが、普段からちょっと意識しているとネタに詰まりにくくなります。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月28日まで