どうも、まさとらん（@0310lan）です！
今回は、デジタルコンテンツなどを手軽に販売できる「Gumroad」のページを自分好みにカスタマイズできるWebサービスをご紹介します！
Gumroad単体だとシンプルな販売ページしか作成できませんが、このサービスを活用することで高品質なランディングページのようなものをノーコードで作成できるのが特徴です。
ご興味ある方はぜひ参考にしてください！
【 Wrapping Gum 】
■「Wrapping Gum」の使い方
それでは、「Wrapping Gum」をどのように使えばいいのか詳しく見ていきましょう！
まずはトップページにアクセスして、サイトの上部にあるボタンから無料のユーザー登録を済ませておきます。
ユーザー名、メールアドレス、パスワードを設定しましょう。
以下のようなダッシュボード画面が表示されたら準備は完了です！
この画面から新規のプロジェクトを作成したり、簡単なチュートリアルドキュメントも参照できるようになります。
■「Gumroad」と連携しよう！
「Wrapping Gum」で新規プロジェクトを作成する前に、まずは自分の「Gumroad」アカウントと連携する必要があります。
そこで、「Gumroad」にログインするか、アカウントを持っていない方は以下のリンクからユーザー登録をしておきましょう。
【Gumroad】
次に「Gumroad」を使って何らかのデジタルコンテンツを販売するページを作成しましょう。
写真・動画・音楽・ファイル…など、さまざまな商品を販売できるのですが、今回は有料メールマガジンを購読するページを作ってみました。
Gumroadだけだとこれで完了となり、あとはこのページをシェアするだけです。
しかし、「Wrapping Gum」を使うと、ここからさらに販売ページをカスタマイズしていくことができるわけです。
そこで、今度は「Wrapping Gum」のダッシュボード画面に戻り、新規プロジェクトを作成するボタンをクリックしてください。
自分の「Gumroad」アカウントと連携するボタンが表示されるのでクリックします。
【Authorize】ボタンをクリックすれば連携完了です！
もう一度、ダッシュボード画面から新規プロジェクト作成ボタンをクリックします。
さきほど「Gumroad」で作成した販売ページが表示されるので、それを選択してから【Continue】ボタンをクリックします。
すると、独自にカスタマイズ可能なWebサイト編集エディタに切り替わります。
ここから自由自在にコンテンツを編集できるようになっているので、どのような機能があるのかもう少し詳しく見ていきましょう！
■Webページを編集してみよう！
ここからは「Wrapping Gum」が提供する編集エディタを利用して、どのようなWebサイトを作成できるのかご紹介していきます。
エディタ上にマウスを近づけると、各セクションごとに【Edit content】ボタンが表示されるのでクリックしてみてください。
画面右側にコンテンツを細かく編集できるエディタが表示されます。
テキストの編集はもちろんのこと、画像ファイルをアップロードして差し替えたり、ボタンやリンクなどを編集したり、背景色を変更することが可能です。
また、【Add component】ボタンをクリックすると、よく使われるコンポーネントを新しく追加できます。
コンポーネントのリストが表示されるので、好きなものを選択しましょう。
ヘッダーセクションやギャラリーなど、Webページを華やかにしてくれるコンポーネントが用意されています。
販売ページに欠かせない価格表などのコンテンツも、テキストを編集するだけですぐに活用できます。
よくある質問などをユーザーに分かりやすく伝えるコンポーネントも提供されています。
これらのコンポーネントを組み合わせるだけで、手軽にランディングページが完成するので便利です。
最終的に完成したら【Publish】ボタンを1クリックするだけで、すぐにWebページとして公開されます。
完成イメージは以下のような感じです。
Gumroadで提供されている標準の販売ページとは大きく印象が変わるのではないでしょうか。
また、設定からドメインを変更したり、Googleアナリティクスとも連携可能です。ぜひ、みなさんもオリジナリティあふれる販売ページを作ってシェアしてみてください。
■エンジニア騎士とクエリの魔女公開中
paizaでは「エンジニア騎士とクエリの魔女」を公開しています。
異世界に勇者パーティーとして召喚された新人ITエンジニアの男女。
目覚めるとそこは、剣（コード）と魔法（SQL）が支配する世界だった。
騎士と魔法使いの冒険が、今始まる――
Python、PHP、JavaScript、C言語、Javaなど28言語で遊べるプログラミングゲームです。
あなたのプログラミング&SQLのスキルを解き放って異世界に平和をもたらしてください！！
■まとめ
今回は、Gumroadの販売ページを高品質なWebサイトに変えてくれるサービスをご紹介しました。
GumroadのWebページがあまりカスタマイズできないという点に目をつけているのが特徴で、類似のサービスもほとんどないので非常におもしろいプロジェクトだと思います。
Gumroad自体も多彩な機能を搭載しているので、これらのサービスをうまく活用してユニークな販売ページをぜひ作ってみてください！
＜参考リンク＞
・「Wrapping Gum」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
