Adaloで直角三角形のデザインを作るアイデア

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツール「Adalo」で直角三角形のデザインを作る方法を紹介します!

こんな人におすすめです

  • フリマアプリで売り切れた商品の画像につける「SOLD」という文字が斜めで入った直角三角形をAdaloでどう実現するのかアイデアを知りたい人
  • Adaloの「Vector」コンポーネントで三角形を作ろうとしたけど挫折した人
  • Adaloでフリマアプリを作りたい人

結論から言うと、デザインツールFigmaで直角三角形の透過画像(PNG)を作って、それをAdaloのImageコンポーネントにアップロードして該当箇所に重ねるといったイメージです!

動画解説バージョンはこちら

目次
無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ
【一分で完了】資料をダウンロード

実装イメージ

売却済みの商品画像の左上に表示させるためのSOLDバッジです。

商品画像のコンポーネントは以下の構成になってます。

実装手順

Adaloで直角三角形のデザインは以下の手順で実装します。

  1. デザインツールのFigmaで直角三角形のPNG画像を自作する
  2. Figmaで作った画像をAdaloのImageコンポーネントで挿入する

デザインツールのFigmaで直角三角形のPNG画像を自作する

動画で実演解説はこちら

動画で実際に画像を作っている様子を見たいかたはこちらご参考にどうぞです。

テキストと画像で解説

まず、Figmaで比率1:1の正方形を作ります。例では260px × 260pxとしました。

次に、図形にホバーしたときに出てくる丸をダブルクリックします。今回は右下をダブルクリックです。

つづけて右下の丸ぽちをクリックして、デリートキーなどで削除します!

削除するとこうなります。

ペンツールで左下の丸と、右上の丸を繋げて、「完了」をクリックします。

最後に直角三角形に色をつけてPNGで書き出しましょう(エクスポート)。

直角三角形の上に斜め文字で「SOLD」とつけたい場合はFigmaのプラグイン「SkewDat」で文字を傾けて直角三角形の上に載せ、グループ化してから書き出せばOKです!

Figmaで作った画像をAdaloのImageコンポーネントで挿入する

Figmaで自作したSOLDの直角三角形画像をAdaloでImageコンポーネントに「Uploaded Image」でアップロードします。

Image Croppingは「Show Full Image(Don’t Crop)」です。

直角三角形の画像のサイズは1対1で40px × 40pxなどよしなに設定お願いいたします!

無料で資料をダウンロード

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次