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

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

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

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

でも。

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

たとえばWixやWebflow、STUDIOなど多くのノーコードツールは、

徹底したブロック設計に基づいてコンポーネントやパーツをブロックに入れ込み

Webサイトを構築する、“高度化されたHTMLエディター” です。

一方で、dpdpは 「HTMLエディターにデザイン機能を盛る」 のではなく、

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

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

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

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

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

※ たとえば、従来のノーコードツールは HTMLエディター特有の設計により

Webページの領域の中だけで作業するのが一般的ですが、dpdpでは

このように領域内でも領域外でもレイヤを置いて自由にデザインすることが可能です。

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

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

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

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

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

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

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

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