ミコトホドからWEBツール「Xアイコン作成ツール」を公開しました。
自分はX（旧Twitter）をよく使うSNSの一つとして利用しています。よく使うからこそ、以前からアイコン画像の設定仕様には思うところがありました。
アイコン画像を設定する時に、丸く表示された後の見え方を確認しにくく、設定後の画像が円から見切れてしまうことが何度もありました。そうなると、画像サイズを少し変えて、再び設定して、結果を見る。その結果も満足できるものにならない。
うまくいかず、最後は諦めて適当に設定してしまうこともありました。
画像を円形表示に合わせるためのXアイコン作成ツールの仕様
外側の丸ガイドは、400×400pxの正方形に内接する円として表示しています。
/* 外側の丸ガイドを作っているCSS */
.mkt-xicon-round-guide {
width: 100%;
height: 100%;
border-radius: 50%;
}内側の点線ガイドは、見せたい部分を中央寄りに配置するための目安です。X公式が定めた安全エリアではありません。
/* 内側の点線ガイドを作っているCSS */
.mkt-xicon-safe-guide {
width: 76%;
height: 76%;
}読み込んだ画像は、アスペクト比を崩さずにツール内で拡大・縮小できます。マウスや指を使って、画像の位置も簡単に移動できます。
PCでは右側、スマホでは下側のプレビューを確認し、見せたい部分が切れにくい位置に調整してから保存します。
実際にX（旧Twitter）のアイコンとして設定した結果を確認しても、ツールで編集していた時の丸表示プレビューと大きな違いは感じませんでした。
保存した時に出力される画像は400×400の正方形
画像は円形で保存されるわけではありません。X（旧Twitter）が推奨する400×400のサイズで、正方形画像として保存されます。
難しいことを考える必要はありません。自分で用意した画像や、使用権限のある画像をPCやスマホに入れた状態で、そのまま選択して読み込んでください。
それだけで、ツール上で画像を編集できます。
画像を保存した後も、特別な加工は必要ありません。X（旧Twitter）の編集画面を開き、Xアイコン作成ツールで作った画像を選択して設定するだけです。
ツール画面内は目的に特化した機能のみ
このツールは、X（旧Twitter）のプロフィールアイコンが丸く表示された時に、顔・ロゴ・文字などが欠けるのを防ぐためのトリミングツールです。
その一点を目的にしているため、目的から外れる機能は入れていません。
ツールページを開く時に不要なローディングもありません。ツールを使用するための登録も必要ありません。
Xアイコン作成ツールを利用する人へ
Xアイコン作成ツールは、一連の作業をブラウザ上で進められます。画像の読み込み、位置調整、保存まで、すべてブラウザ内で処理します。
選択した画像はサーバーへ送信されません。読み込んだ画像を、ミコトホド側で取得することもありません。
Xアイコン作成ツールは、以下のページから利用できます。
コメント