pinterest（ピンタレスト）のデザインってかっこいいですよね。特に写真のサイズがそれぞれあえて違うサイズの一覧になっているようなグリッドデザインになっていて、素敵ですよね。こういうデザインはノーコードでも作れるのでしょうか？
ピンタレスト風のグリッドレイアウトを作成するには、ノーコードのFlutterFlowが非常に便利です。ピンタレストのデザインは、美しいイメージやコンテンツが互いに重なり合い、魅力的なレイアウトを作り出しています。このようなデザインを手軽に実現するためには、プログラミングの知識がなくても利用できるノーコードツールが最適です。
それでは早速ノーコードFlutterFlowで簡単にピンタレスト風のアプリを作る方法を書いていきたいと思います。
ピンタレスト風グリッドデザインのイメージ
以下のアプリ画面のように、画像のサイズが横長だったり縦長だったりの画像が入り混じってますよね。こんな感じのピンタレスト風のデザインのことを言っています。
こんなのを作るとなったら、、、すごく複雑そうだし、ノーコードではできないんじゃないか、、、って思っちゃいますよね？
ですが！これがFlutterFlow であればあっという間に作れてしまうんです！
ノーコードFlutterFlowでピンタレスト風デザインのアプリの作り方
StaggeredViewウィジェットを使う
staggeredViewウィジェットを使うだけです。
もうこれだけで例のピンタレスト風のデザインになります。
以下のようにAdd Elementから検索し、
以下のようにListViewと同様に、Query Collectionでデータを持ってきて、中の画像に設定してあげれば良いだけです。
簡単ですね！
FlutterFlow すごい、、、！
Youtube動画でFlutterFlowのピンタレスト風デザイン・StaggeredViewの使い方について詳しくみたい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。