「ノーコードでWebサイトをつくる」──そんなツールは、世の中にたくさんあります。 テンプレートを選んで、写真を差し替えて、文字を入れて、公開する。 とても便利で、誰でも簡単に、すぐにカタチにできます。

でも。

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

たとえばWixやWebflow、STUDIOといった有名なノーコードツールは、みな全て“HTMLエディター”です。 あらかじめ用意されたパーツや構造を、誰でも簡単に組み立てられるように最適化されています。

一方で、dpdpはまるで正反対の思想から生まれたツールです。 テンプレートも、パーツの決まった置き場所もありません。 キャンバスに置かれた白紙のステージに、自由に要素をレイアウトしていく（もちろん白紙の外でも作業できます）。 FigmaやSketch、illustratorのような“デザインツールの手ざわり”のままデザインができて、しかも同時進行で勝手にWebページ化してくれる──dpdpは、そんな唯一無二のユニークな存在。そして、“本当の自由”をあなたに提供できるツールです。

他のノーコードツールがWebページの中だけで作業させるのに対して、dpdpはWebページの中でも外でも自由にレイヤを置いて好き勝手にデザインできる、唯一無二のユニークな存在です。

※ ページの外を作業領域として使うことができ、ページ外で出来上がったブロックをページの中に配置するーーーこの“デザインツール“としてのUIこそ、dpdpの神髄です。

dpdpでは、テキストも画像も動画も、強制的にグリッドに吸着されることなく、好きな場所に置けます。 0.1%単位で調整できて、1ピクセルのズレさえも気になるようなデザイナーの感覚にも完全に応えることができます。 Web制作というより、“キャンバス上で自由にデザインする”という行為を普通に行える。

そして、見えているその画面が、裏側ではコードとして組み上がっている。 あなたが自由に配置したものが、そのままWebページになるのです。これは、従来のHTMLエディターにはできないことです。

dpdpは、“自由にレイアウトして、そのまま公開できる“ことを徹底して追求してきました。オンリーワンだからこそ、HTMLエディターに慣れている人は、最初は使い方にちょっと戸惑うかもしれません。 でもその分、デザイナー自身が “表現したいものをそのまま表現できる” という感覚を味わえるはずです。

逆にFigmaやSketch、illustratorといったデザインツールを使い慣れてる人にとっては、dpdpのインターフェースは親和性が高いといえるでしょう。

このチュートリアルでは、dpdpの基本的な使い方や考え方を、 できるだけ順を追って、わかりやすくお伝えしていきます。

次の記事では、dpdpを使うための動作環境についてご案内します。

では、最初の一歩を、一緒に踏み出しましょう。