Adaloで直角三角形のデザインを作るアイデア
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/adalo-right-triangle.jpg)
ノーコードツール「Adalo」で直角三角形のデザインを作る方法を紹介します!
こんな人におすすめです
- フリマアプリで売り切れた商品の画像につける「SOLD」という文字が斜めで入った直角三角形をAdaloでどう実現するのかアイデアを知りたい人
- Adaloの「Vector」コンポーネントで三角形を作ろうとしたけど挫折した人
- Adaloでフリマアプリを作りたい人
結論から言うと、デザインツールFigmaで直角三角形の透過画像(PNG)を作って、それをAdaloのImageコンポーネントにアップロードして該当箇所に重ねるといったイメージです!
動画解説バージョンはこちら
実装イメージ
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.04.37-1-1024x694.jpg)
売却済みの商品画像の左上に表示させるためのSOLDバッジです。
商品画像のコンポーネントは以下の構成になってます。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.06.32.jpg)
実装手順
Adaloで直角三角形のデザインは以下の手順で実装します。
- デザインツールのFigmaで直角三角形のPNG画像を自作する
- Figmaで作った画像をAdaloのImageコンポーネントで挿入する
デザインツールのFigmaで直角三角形のPNG画像を自作する
動画で実演解説はこちら
動画で実際に画像を作っている様子を見たいかたはこちらご参考にどうぞです。
テキストと画像で解説
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.20.35.jpg)
まず、Figmaで比率1:1の正方形を作ります。例では260px × 260pxとしました。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.22.17.jpg)
次に、図形にホバーしたときに出てくる丸をダブルクリックします。今回は右下をダブルクリックです。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.23.47-1.jpg)
つづけて右下の丸ぽちをクリックして、デリートキーなどで削除します!
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.25.05-1.jpg)
削除するとこうなります。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.26.06.png)
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.26.37.jpg)
ペンツールで左下の丸と、右上の丸を繋げて、「完了」をクリックします。
![](https://epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.29.10-1024x489.jpg)
最後に直角三角形に色をつけてPNGで書き出しましょう(エクスポート)。
直角三角形の上に斜め文字で「SOLD」とつけたい場合はFigmaのプラグイン「SkewDat」で文字を傾けて直角三角形の上に載せ、グループ化してから書き出せばOKです!
Figmaで作った画像をAdaloのImageコンポーネントで挿入する
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.10.33.jpg)
Figmaで自作したSOLDの直角三角形画像をAdaloでImageコンポーネントに「Uploaded Image」でアップロードします。
Image Croppingは「Show Full Image(Don’t Crop)」です。
![](https://nocodesemi.epic-s.co.jp/wp-content/uploads/2023/10/スクリーンショット-2023-10-26-11.10.45.jpg)
直角三角形の画像のサイズは1対1で40px × 40pxなどよしなに設定お願いいたします!