写真を丸く切り取るシンプルなツール『画像丸抜きくん』を公開しました♪

写真を丸く切り抜くシンプルなツール「画像丸抜きくん」を公開しました。
画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNSのプロフィール写真などにどうぞ。

 

最近、丸く切り抜いた写真を使ったサイトをよく見ませんか?

比較的新しいサイトとかWebサービス系に多いですね。

↓こういうのとか。
TimeTicket
(「TimeTicket」の画面。写真は開発者の山本大策さん。)

↓こういうのとか。
Airbnb
(「Airbnb」のレビュー画面)

ちょっと技術的な話をしてしまうと
これって丸い画像を表示してるんじゃなくて
四角いふつうの画像を丸くくり抜いたように
ブラウザが勝手に処理して表示してくれてるんです。

「CSS3」ってやつです。

見た目もなんかいいですよね。

自分でも丸い画像を使いたい!

で、自分でも使いたいなーと思って
実はこのサイトでも使ってます。

そうめい

ほら、こんなかんじ

これもCSS3を使ってます。

自分で作ったサイトであれば、CSS3を組み込めば丸抜き画像が表示できます。

 

でも困るのが外部のサイト。
自分でカスタマイズができないサイトには、CSS3を使った方法は使えません。

FacebookとかTwitterとか
SNSでも丸いプロフィール写真を使いたいと思ってたんですが
そうするとこの方法は使えないんです。

じゃあどうするかというと
「丸い写真を自分で用意する」
しかありません。

四角い写真を丸く表示してもらうんじゃなくて
丸い写真を自分で用意してそれを表示してもらう、
ということです。

ということで、私は画像加工ソフトを使って丸い画像を作って
Facebookのプロフィール写真にアップしました。

みんながカンタンに使えるツールを。

でもふつうこれって、けっこうハードル高いですよね。

「CSS3ってなんのことかわかんないし
 画像を加工するソフトも技術も持ってない!」
という人も多いと思います。

で、だいたいこういうのって、
「なんとかジェネレーター」とか名前が付いた便利なWebツールを
どこかの親切な人が公開していたりするもんです。

なので、よくわかんない人はそういうツールを使えばいいんです。

 

・・・と思って、私もいろいろ探してみたんですが
あんまり見つからなかったんですよね、そういうツール。
意外。

「じゃあ作っちゃえ」
と思って作ったのが「画像丸抜きくん」です。

カンタンに丸いプロフィール写真が作れますので
ぜひ使ってみてください♪

画像丸抜きくん

 

P.S.

完成してみてから
「よく考えたら、そういうスマホアプリ使えばいいじゃん」とか
「Macで超簡単に作る方法あったし!」とか
いろいろ思うところはあるのですが・・・(^_^;)

まぁ、PHPプログラミングの勉強中だったこともあり
私のツール作成練習を兼ねたものだと思ってもらえると助かりますm(_ _)m

LINEで送る
Bookmark this on Yahoo Bookmark
[`buzzurl` not found]
このエントリーをはてなブックマークに追加

About the author:

そうめい

そうめいです。読んでくれてありがとうございます。 まだいろいろと整備中なブログではありますが、徐々に整えていきますので長い目でみていただけるとありがたいです。 フォローはこちら→ Twitter / Facebook

7 comments on “写真を丸く切り取るシンプルなツール『画像丸抜きくん』を公開しました♪

  1. すみません。
    画像丸抜き君を前から使用させていただいていたのですが、
    二週間ほど前から丸抜き君のサイトを開いても
    真っ白なままで使用できなくなりました。
    対処法はありますか?

    • こちらで確認した限りでは正常に使えているようです。
      真っ白状態が確認できないのですが、
      ご使用状況を教えていただけますか?
      ・PC(Win/Mac、バージョン)
      ・ブラウザとバージョン
      ・その他

      詳細いただければ、あらためて調査してみます。
      よろしくお願いいたします。

  2. ありがとう。公開にカンシャです。

    返還後、
    背景が白になるのですが、
    丸く切り取った画像、背景が白でなく、
    丸くだけの画像も、選択できるとありがたいです

    • 切り抜いた画像はすべて、丸の外側背景は透明になる仕様です。
      PNGファイルでダウロードできてますでしょうか?
      今一度ご確認いただけますと幸いです。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です