Web制作ツールの使い方

サイトやブログを作るときに毎回必要になる、小さいけれど面倒な作業をまとめたカテゴリです。

ファビコン・アプリアイコン

favicon・アプリアイコン生成に正方形の画像を1枚入れると、ブラウザのタブ用(16・32px)、iPhone のホーム画面用(180px)、Android 用(192・512px)、Windows 用 ICO をまとめて出力します。HTML に貼るタグも一緒に生成されるので、コピーするだけで設置できます。

元画像は 512px 以上の正方形を用意してください。細い線や小さい文字は 16px では潰れるので、シンプルな形が向いています。

OGP画像(SNSでのシェア画像)

記事の URL を X や LINE に貼ったときに出る画像が OGP 画像です。OGP画像メーカーはタイトルを入れるだけで、推奨サイズの 1200×630px で作ります。配色は「おまかせ」でタイトルから自動で決まり、気に入らなければ選び直せます。

文字の縁取りや背景の模様も選べます。ブログのアイキャッチや YouTube のサムネイル(1280×720)にも同じツールが使えます。

QRコード

QRコード生成・読み取りは、URL や文字を入れるとその場で QR コードになります。印刷する場合は大きめのサイズで書き出し、周囲に余白を残してください。余白がないと読み取りに失敗します。

逆に、画像の中の QR コードを読み取ることもできます。スクリーンショットや写真を落とすだけです。

このページで紹介したツール