Kyu3’s Blog

Vivaldi のスピードダイヤル・サムネイルを簡単に作成できる WEBサービス「Vivaldi Thumbnail Generator」（※.以下「VTG」）を紹介します。なおこの記事の内容は、以前日本語フォーラムに書いた内容とほぼ同じです。( ´ ▽ ` )ﾉ


【目次】

1. 序文
2. 使い方
3. Tips & その他

1. 序文

Vivaldi のスピードダイヤルのサムネイルは、任意の画像に変更可能です。この機能を使って様々なアレンジをしてるユーザーがいます。

@vivaldibrowser
This Bowser is so satisfying 😍 pic.twitter.com/6j9tAMot7D

— RayAlpha (@GTATalkde) February 20, 2020

I commissioned @derptyme to draw a custom mascot for the @vivaldibrowser that I could use.
100% satisfied! Thanks! pic.twitter.com/niW9yAJTvK

— Player Slot Available (@PSA_Username) August 10, 2016

Certainement le meilleur Navigateur Web au monde ! #Vivaldi #VivaldiBrowser #Web #Internet pic.twitter.com/dVamwfmvmO

— THOMASHM61 (@THOMASHM26) June 16, 2019

使用する画像自体は、主要な画像のファイル形式（※. JPEG、PNG、GIF、アニメーション Gif も使用可能）であればどんな画像でもかまいませんし、それらの画像は画像編集ソフトを使っても作れます。しかしこの VTG を使えば完成イメージを確認しつつ、簡単にサムネイル画像を作る事ができます。

2. 使い方

使い方はとても簡単です！サムネイルにしたい画像をアップロードし、表示する大きさや背景を設定するだけです。まず最初に画面左下に表示されてる「Add Icons」ボタンをクリックします。すると以下の画面が表示されます。



この画面で「Select Files」ボタンを押して使用する画像を選択するか、四角い点線で囲われてる部分に画像をドラッグすると、その画像を使ったサムネイル作成画面に移行します。

なおこの画面には検索窓も表示されていますが、これは「Instant Logo Search」と言う別のサイトの検索窓です。ここに WEBサービスや企業の名前を入力して検索すると、そのサービスまたは企業のロゴ画像を簡単に入手する事ができます。もし WEBサービスや企業のロゴを使用したサムネイル画像を作成したい場合は、こちらのサービスを使ってみてはいかがでしょう？

話をサムネイル画像の作成に戻すと、画像をアップロードするとサムネイル画像作成画面に移行するのですが、画像の大きさの変更や背景色を変更するには、右上の「Settings」ボタンをクリックする必要があります。クリックすると以下の画像のように右側にメニューが表示されます。



このメニューの「Icon size」のスライダーで、画像がサムネイル内で表示される大きさを変更できます。そして「Background color」で、アップした画像以外の部分の背景色を変更できます。背景色は用意されてる色や透明の他に「Pick Custom Color」をクリックするとカラーピッカーが表示されるので、そこで自分の好きな色を使用することもできます。

画像の調整や背景色の設定が終わったら、右下の「Generate」ボタンをクリックします。すると作成した画像が一覧表示される画面になるので、そこで自分がダウンロードしたい画像をダウンロードするか、あるいは作成した画像ををまとめてダウンロードするかを選択できます。



ダウンロードが完了したら、あとはカスタムサムネイルの画像に設定するだけです。設定したいスピードダイヤルを右クリックし「サムネイル画像を選択」を選ぶだけです。( ´ ▽ ` )ﾉ

3. Tips & その他

最後に Tips やその他の情報について。まず VTG で作成される画像の大きさは「840 x 700」（※. 単位はピクセル）ですが、Vivaldi 公式ヘルプページによると、サムネイル画像の推奨サイズは「440 x 360」とのこと。

・Speed Dials：Vivaldi 公式 Help・・・ページの真ん中辺りに記載あり。

推奨サイズより大きめの画像になってる理由は、おそらく高解像度ディスプレイ対応のためと思われますが、使っていて気になるようであれば、画像編集ソフト等で少し小さくしても良いかもしれません。

それと VTG に関して、作者の Mateusz Hadryś さんが、Vivaldi 公式フォーラムにトピックを作っています。

・Custom Thumbnail Generator for Speed Dials：Vivaldi 公式フォーラム

もし VTG に関して意見や要望などがあれば、こちらのトピックに書き込みしてみてはいかがでしょう？ちなみに Mateusz さんへの寄付は、VTG 右下のコーヒーボタンから簡単に行えます。コーヒー 1杯 3ドル（※.日本円で約320円）〜 となっています。(*^^*)



あと Vivaldi 公式フォーラム内に、カスタムサムネイルを公開しているトピックがあります。

・I made a huge thumbnail pack ...：Vivaldi 公式フォーラム
・I'm creating some thumbnails for the Speed Dial, sharing ...：Vivaldi 公式フォーラム

両方とも異なる方が作成したトピックなのですが、作成されたカスタムサムネイルを同じ Google Drive で公開しており、誰でも以下のリンク先ページからダウンロードできます。

・Vivaldi SD Thumbnails ： Google Drive

まとめてダウンロードもできたので試したところ、昨日（2020年3月3日）現在で 610 個公開されていました。

ちなみに上記のトピックでは「このサイトのカスタムサムネイルが欲しい」と頼むと作ってくれるみたいなので、もし上記のリンク先や他のサービス（※.例えば最初のトピックで紹介した「Instant Logo Search」等）で見つられず、自分で作れる自信がない場合は、こちらで頼んでみてはいかがでしょう？






【関連リンク】
・Vivaldi Thumbnail Generator
・Instant Logo Search
・Vivaldiのテーマおよび外観に関するツイートまとめ：Togetter
・Vivaldiのスピードダイヤル・サムネイルを作成する方法：Vivaldi 公式フォーラム

【関連記事】
・VivaldiのスピードダイヤルをChrome拡張に置き換える方法 : Kyu3’s Blog

【追記（2020年3月5日）】

「1」の序文で紹介した 1番上のツイートの RayAlpha さんの場合、「Color Line TN Icon Pack」を使ってサムネイル画像を作成したとのこと。

I created the thumpnails from the Color Line TN Icon Pack.

— RayAlpha (@GTATalkde) February 28, 2020

検索したところ、一番上にヒットしたのが Android アプリ（※. 名前は少し違いますが…）だったので、Android アプリを用いたのかもしれません。

・「Color Line TN Icon Pack」で Google 検索

ちなみにフリーのアイコン素材も検索すると沢山ヒットします。なので、これらを使って作るのも 1つの手だと思います。

・「アイコン フリー」で Google 検索

【追記 その2（2021年1月31日）】

公式フォーラムで教えてもらったのですが、テキストを使って簡単にアイコンを作れる「文章を画像化できるWebツール」と言う WEB サービスがあるそうです。早速試したのですが、こちらもすごく簡単に作れました。興味ある方は、試してみてはいかがでしょう。

・文章を画像化できるWebツール！


【関連リンク】
・Vivaldiのスピードダイヤル・サムネイルを作成する方法：Vivaldi 公式フォーラム