切り抜きの後にやる、ひと手間。
デザイン制作の中で、もはや必須とも言える「画像の切り抜き」。最近はPhotoshopやFigmaで、速く、正確に切り抜けるようになりました。ありがたい。 では、早速Photoshopでこの画像を切り抜…
Design
モバイルアプリの定番UIパーツ
モバイルアプリのデザインや開発を進める中で、「このパーツの名前は何だっけ？」「どれを使うのが適切なのだろう？」と迷うことはありませんか？この記事では、モバイルアプリで頻繁に使用される定番のUIパーツを…
【Figma/Photoshop/Web】AIで簡単！画像の背景を削除してトリミングする方法
今回は、Figma・Photoshop・Web上で画像の被写体の背景を削除して、トリミングする方法を３つご紹介します。あくまで一例なので、普段使っているデザインツールや画像との相性に合わせて使い分けて…
重力とレスポンシブ
Webサイト上にはこの宇宙に浮かぶ惑星と同じく、重力があります。 ここでいう「重力」とはざっくりというとものは下方向にぶら下がる力のことと思ってもらうのがよく、つまりHTMLの内部で上に置かれているも…
デザインツールの点と線の話
Photoshop：Illustrator ＝ 点：線 フォトショ＝ビットマップ（点）：イラレ＝ベクター（線）。ん？Figmaはどっち？フィ？フィグ？もしや、フィマ？ 意外とここ、考えてなかった気がす…
その画像、本当にSVGでしょうか？
SVG画像はベクター形式なので劣化がなくてキレイかつ便利！とお思いのみなさま、突然ですがSVG画像の「中身」を見たことはありますでしょうか。 SVG画像が上記のような特徴を持つのは、画像としても扱える…
正円には勝てん話
デザインしていると、ふと、どうしようもない無力感に襲われる。虚無。その虚無の原因のひとつが“正円（真円）”ではと気づいた話。 正円は、あまりにも、強い 例えば、ロゴのシンボルを正円の中に収めようとした…
After Effectsで桜吹雪を作ろう
4月になりオフィスの前の公園にも桜が咲く季節になったので、今回はAfter Effectsを使用して桜吹雪のアニメーションを作ってみようと思います。 作り方の手順 簡単に作り方の手順をまとめると、 桜…
方眼紙のような背景をCSSで作る
課題 方眼紙のような背景を画像で実装していたが、実機で拡大すると下記の通り途切れたように見える部分がある。 原因 ピクセルのズレと丸め誤差スマホの画面に合わせたり、ピンチアウトで拡大したりすると、ブラ…
ミイラ取りがミイラのミライをつくる話
“AIがデザイナーやエンジニアの仕事を奪う”そんな言葉を見聞きするたび、「ミイラ取りがミイラになる」のようで、なんだかモヤモヤ。 AIは、どこからか急に現れた存在じゃない インターネットも、スマートフ…