サムネイルまとめその1

今までのサムネイルまとめ~その1~【11枚】

18:43・2021/02/09 公開

18:44・2021/02/09 更新

記事のサムネイルをillustratorで作っていたのが10枚くらい溜まったので、少し解説を加えながら紹介していきます。

それぞれ制作時間はだいたい30分〜1時間くらいです。

1

サムネイル処女作がこちら。(フォントはスランプだったかな……?)
GitHubのログインページをイメージしてます。

2

WordPressで読み込むCSSを期間ごとに変える

蜘蛛の巣、コウモリは作り方を調べて作りました。(かぼちゃは雰囲気で作った)
レイアウトが下手くそ。

3

JavaScriptで色相をループさせる

そのまんま、色相環をイメージしています。
白を透過してその上に文字を乗せるデザインが大好きなので、あとのサムネイルもほとんどこれ。

4

簡易マインドマップをJavaScriptでつくる

冬なので雪かなぁという安直な発想のデザイン。
個別に変更でランダムに配置する方法を覚えました。
マインドマップなんにも関係ない。

5

JavaScriptでつくるリストメニューの開閉

原稿用紙デザインが作りたかったので、原稿用紙風に。
ローマ字は2文字で1マスというルールがあるみたいですが、見た目の都合上無視(このマスに合わせると文字間が狭すぎる)。
もっと他に方法は無かったものか……。

5

おそらきれい〜2020冬〜

作ったものをそのまま上に載せただけのお手軽サムネ。
グラデーションも大好きです。

6

Wordpressの表示を更新順に変える

これはフリーグラデーションを利用したサムネ。
自分で色を選んだ割には馴染んでいるので、お気に入り。
グラデにカクっとした文字の組み合わせが好き。

7

Wordpressで更新日からの経過時間を反映する

文字が細すぎて潰れかけているやつ。
背景の写真も曇り空に工場の煙ってなんか暗い……冬っぽいと言えばなにか誤魔化せそうなので、そういうことにしておく。

8

擬似要素を使ってみる

明るい青空が素敵なサムネイル。
例の如くグラデにカクっとした文字の組み合わせが好きで、透過した白背景に文字を乗せるのが好き。

9

headerを三角形にしてみる

こちらも文字が細すぎて潰れかけている。
タイトルとデザインがリンクしている点は評価しておこう。

10

「html2canvas」を使ってスクリーンショットを作成、ダウンロードする

今ちょうどはちみつレモンを作っていて(そのうち記事にします)、バレンタインも近いということでカラーはチョコミントを連想した色に。
垂れてくる表現はもっと工夫できたかもしれない(楕円にパスのオフセットでラウンド効果を+30と-30で重ねがけして、土台の長方形と複合パスにしています)。

11

サムネイルまとめその1

サムネイルまとめのサムネイル。
写真はフォトショで明るくしておけばよかったなぁ、と今見返して後悔しています。
文字ではなく、文字の線にシャドウのアピアランスをかけています(偶然の産物)。不揃いなシャドウが透明感を出していて、気に入っています。

サムネイルの紹介はこれで以上です。
最後まで読んで下さりありがとうございました!