Illustratorで立体的な金属オブジェクトを作ろう
今回は「風船のように膨らませた形」と「引き伸ばして奥行きを加えた形」の2種類の作り方を解説します。 風船のように膨らませた形 ステップ1 テキストを選択した状態で、「3Dとマテリアル
Design
【Figma】自動で無限ループするアニメーションをつくる
今回は、Webサイトでよく見かける ロゴが流れて無限ループするアニメーション をFigmaのプロトタイプで再現します。実装者にアニメーションイメージを共有する時に使ってみてください
バランスをうまく取りなって。
“UI/UXデザイン”とかイキがる前に、もっとシンプルに考えてみましょうよ。っていう、今回もデザインポエムです。 ボタンを“押す”のと“押させる”の。 ボタン（広義の意味でのそれ）を押すと
Adobe Fontsの導入手順
コーディングでカンプを確認するとGoogle fontsではなくAdobe Fontsが使われていた...どうやって使おう？と困った方も多いのではないでしょうか。本記事ではAdobe Fontsの基本
たぶん、パンク。
デザインシステムやカラースキームをどれだけ緻密に設計したとしても、それだけでいいデザインになる。わけじゃない。1つのアイディア（≒ちょっとした思いつき）に突き動かされて、衝動的に描ききってしまったよう
オートレイアウト依存から脱却しよう
皆さんはWebサイトを制作する際、どのツールを活用していますか？弊社では主にFigmaを活用して制作しています。私は入社前までスマホアプリのデザインを中心に制作していましたが、入社後はランディングペー
〇〇パ。じゃないほう。
デザインの考え方の話かもしれませんし、ヒトとしての個人的なクセかも知れませんが、誤解を恐れず私見をひとつ。 デザインは、手数が少ないほうが良いと思っています。 昨今、「タイパ」や「コスパ」
切り抜きの後にやる、ひと手間。
デザイン制作の中で、もはや必須とも言える「画像の切り抜き」。最近はPhotoshopやFigmaで、速く、正確に切り抜けるようになりました。ありがたい。 では、早速Photoshopでこの画像を
モバイルアプリの定番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は、どこからか急に現れた存在じゃない インターネットも