「ノーコードでWebサイトをつくる」

似たようなツールは、世の中にたくさんあります。

テンプレートを選んで、写真を差し替えて、文字を入れて、公開する。

とても便利で、誰でも簡単に、すぐにカタチにできます。

でも。

dpdpは、ちょっと違います。

たとえばWixやWebflow、STUDIOなど多くのノーコードツールは、テンプレートやパーツを

組み合わせてWebサイトを構築する、いわば “高度化されたHTMLエディター” といえます。

一方で、dpdpは 「ノーコードツールにデザイン機能を追加する」 のではなく、

「デザインツールの出力先をウェブにする」 という、まるで正反対の思想から生まれたツールです。

だから、テンプレートや、パーツの決まった置き場所はなく、パーツが強制的にグリッドに吸着されることもありません。キャンバスに置かれた白紙のステージに、自由に要素をレイアウトしていけます。

FigmaやSketch、illustratorのようなデザインツールの操作感とワークフローを実現しつつ、

その裏でリアルタイムにWebページ化してくれる──。

そんな唯一無二のスタイルを持ったdpdpは、“本当の自由”をあなたに提供できるツールです。

※ たとえば、従来のノーコードツールがHTMLエディターの制約に従って、

Webページの領域の中だけで作業させる条件で自由度を提供するのに対し、dpdpは

このように領域内でも領域外でもレイヤを置いて自由にデザインできる唯一無二のツールです。

ページの中でも外でも作業ができて、外で組み上げたパーツを再びページの中に配置する

ーーーこの“デザインツール“としてのUIこそが、dpdpの神髄です。

dpdpでは、画像も動画もテキストも、強制的にグリッドに吸着されることなく、好きな場所に置けます。 テキストも0.01em単位で調整できますし、1ピクセルのズレさえも気になるというプロのデザイナーの感覚にも完全に応えることができます。

Web制作というより、“キャンバス上で自由にデザインする”という行為を普通に行える。そして、今、見ているその画面が、裏側ではリアルタイムにコード化されている。 あなたが自由に配置したものが、そのままWebページになるのです。これは、従来のノーコードツールにはない設計思想です。

dpdpは、“自由にレイアウトしたものを、そのまま公開できる“ことを徹底して追求しています。

ただ、オンリーワンだからこそ、従来のノーコードツールに慣れている方は、使い方にちょっと戸惑うかもしれません。逆に、FigmaやSketch、illustratorといったデザインツールを使い慣れてる人にとっては、dpdpのインターフェースはわりと親和性が高いといえるでしょう。

このチュートリアルでは、dpdpの基本的な使い方や考え方を順を追って説明していきます。

それでは、dpdpの世界へ一歩踏み出してみましょう！