paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

スラッシュコマンドで手軽にWebサイトを作成できるノーコードサービス「Typedream」を使ってみた!

f:id:paiza:20211215113516j:plain

どうも、まさとらん(@0310lan)です!

今回は、簡単な操作で高機能なWebサイトを素早く構築できるサービスをご紹介します。

Webサイトを構成する各パーツをスラッシュコマンドから素早く呼び出して、イメージするコンテンツをどんどん作っていける操作感が特徴的なサービスです。

また、便利な機能を提供する他のWebサービスとの連携もしやすいので、オリジナルサイトの作成にご興味ある方はぜひ参考にしてみてください!

Typedream

f:id:paiza:20211215113605j:plain

■「Typedream」の使い方

それでは、「Typedream」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトに配置されている【Start now】ボタンをクリックして、無料のユーザー登録を済ませておきます。

f:id:paiza:20211215113624j:plain


メールアドレスと簡単なアンケートに回答すればOKです。

f:id:paiza:20211215113634j:plain


登録したメールアドレス宛に認証コードが届くので、それをコピペすれば完了です!

f:id:paiza:20211215113645j:plain


そのままWebサイトを作れるので、これから作成したいカテゴリを選択して画面下部のボタンをクリックします。

f:id:paiza:20211215113659j:plain


いくつかテンプレートが提供されており、好きなものを1つ選択できます。

f:id:paiza:20211215113713j:plain


サイト内にページを追加できる画面が表示されますが、あとからでも追加できるのでひとまずそのまま画面下部のボタンをクリックします。

f:id:paiza:20211215113726j:plain


サイトの名称を設定し、公開時のURL末尾を好きな英数字に変更しておきましょう。

f:id:paiza:20211215113738j:plain


するとWebサイトの編集エディタが表示されます!

f:id:paiza:20211215113752j:plain

あとはこの画面上で、コンテンツを自由にカスタマイズできるようになります。

ページの追加やWebサイトの公開作業などもこの画面から行えるので、早速どのようなコンテンツを作成できるのか見ていきましょう。

■スラッシュコマンドでWebサイトを作ろう!

さきほどの編集エディタには、すでにテンプレートのコンテンツが表示されているはずです。

このまま各パーツを編集できるのですが、せっかくなので空っぽの新しいページを追加してどのようなコンテンツが作れるのかを解説していきます。


ページを追加するには、エディタ左側のメニューから【+ Add Page】をクリックします。

f:id:paiza:20211215113817j:plain


新規ページが表示されるので、「/(スラッシュ)」を入力してみてください。

すると以下のようなコンテンツメニューが表示されて、作りたいパーツを選択できるようになります。

f:id:paiza:20211215113830j:plain

これが「スラッシュコマンド」と言われる操作方法で、慣れてくるとキーボードから素早くテキスト・画像・ボタンなどのコンテンツを作成できるようになります。

絞り込み検索も可能で、例えば、「/bu」と途中まで入力すれば「Button(ボタンコンテンツ)」がメニューのトップに表示されます。ドキュメントサービスの「Notion」を使い慣れている方であれば、このような操作方法はお馴染みだと思います。


テキストは通常の「pタグ」や「h1〜h3」などを自由に配置できます。

f:id:paiza:20211215113848j:plain

他にも、リスト表示やチェックボックスなども挿入でき、フォント・サイズ・カラーなどのスタイルについても細かく調整可能です。


次に、スラッシュコマンドから「image」を選択してみましょう。

f:id:paiza:20211215113904j:plain


手持ちの画像をアップロードしたり、URLや無料のイラストリソースから画像を埋め込むことができます。

f:id:paiza:20211215113916j:plain


画像を配置したら、ドラッグ操作でサイズの変更が可能です。

f:id:paiza:20211215113931j:plain

もちろん、画像にリンクを挿入したり、「alt属性」を追加したりなどもできるので便利です。


今度はスラッシュコマンドから「Button」を選択してみましょう。

f:id:paiza:20211215113946j:plain


ボタンも同じようにアイコンの変更やサイズ・カラーなどを調整できます。

f:id:paiza:20211215113956j:plain

このようにスラッシュコマンドからさまざまなコンテンツを組み合わせることで、自分のイメージするWebサイトを作っていくのが基本的な流れとなります。

ただし、ゼロからすべてを構築するのは大変なので、よく使われるWebサイトのコンポーネントはテンプレート化されています。


スラッシュコマンドから「Section Template」を選択してみてください。

f:id:paiza:20211215114013j:plain


メニューが表示されて、さまざまなコンポーネントがカテゴライズされているのが分かります。

f:id:paiza:20211215114023j:plain


好きなものを1つ選択するとサイトに配置されます。

f:id:paiza:20211215114035j:plain

これらのコンポーネントも各パーツごとに編集が可能なので、ここからオリジナルのコンテンツを作っていくと便利です。


また、エディタに配置したすべてのパーツは、ドラッグ操作で位置を変更したり移動させることも可能です。

f:id:paiza:20211215114054g:plain

1つのコンテナ内に複数のパーツをまとめたり、カラムを横方向に増やしたりなどもすべてドラッグ操作で直感的に操作できるようになっています。


ナビゲーションメニューを作る場合は、エディタ上部の【Add Navbar】ボタンをクリックします。

f:id:paiza:20211215114122j:plain


自動的にメニューが追加されるので、あとはロゴ・タイトル・リンクなどをカスタマイズするだけで作れます。

f:id:paiza:20211215114133j:plain

追加したページをリンク先に設定するのも簡単なので、複数のページで構成されているWebサイトも手軽に構築できます。

■Webサイトを公開してみよう!

「Typedream」で作成したWebサイトは簡単にネット上へ公開できるので、その手順について解説していきます。

ただし、その前に作成したWebサイトの全体像を確認しておきましょう。


エディタ上部にある【X-Ray Mode】をクリックしてください。

f:id:paiza:20211215114156j:plain


すると各パーツごとに枠線が表示されて、コンテンツの重なり具合や位置関係などが明確になります。

f:id:paiza:20211215114207j:plain

この機能を利用して、全体的なバランスや余白などを再確認しておくといいでしょう。


そして、このまま公開する場合はエディタ上部の【Publish】ボタンをクリックします。

f:id:paiza:20211215114222j:plain


ポップアップメニューが表示されるので、もう一度【Publish】ボタンをクリックします。

f:id:paiza:20211215114233j:plain

これで公開用のURLが生成されるので、あとはこのURLをシェアすれば誰でも閲覧できるようになるわけです。

■多彩なWebサービスを組み合わせよう!

「Typedream」は埋め込みコンテンツにも対応しているので、例えばチャットボットやメールフォームなどをサイトに埋め込んで活用できます。

公式サイトにも数十種類のWebサービスとの連携方法が公開されており、より高機能なWebサイトの開発が誰でも手軽に行えます。


そこで、さきほど作成したWebサイトにメールフォーム機能を追加してみましょう。

利用するのはノーコードで手軽にフォームを作成できる以下のサービスです。

Tally

f:id:paiza:20211215114310j:plain

こちらのサービスもスラッシュコマンドから好きなフォーム要素を追加して、独自のフォームを簡単に構築できるサービスです。ブログで記事を書くようなドキュメントエディタを利用して誰でもフォームを作成できるのが魅力です。


「Tally」の詳しい使い方については、以下の記事でも解説しているので合わせて参考にしてみてください。

paiza.hatenablog.com


フォームを作成したら、最終的にシェア用のURLが生成されるのでこれをコピーしておきましょう。

f:id:paiza:20211215114332j:plain


次に「Typedream」のエディタに戻り、スラッシュコマンドから「Embed」を選択します。

f:id:paiza:20211215114344j:plain


さきほどコピーしたURLを貼り付ければ完了です!

f:id:paiza:20211215114356j:plain


すると「Tally」で作成したフォームがWebサイトに配置されるのです。

f:id:paiza:20211215114406j:plain

これで「Publish」ボタンをクリックすれば、フォーム機能を搭載したWebサイトが公開できます。
(※問い合わせ内容は「Tally」のダッシュボードから確認できます)

他にも、順番待ちリスト、アンケート、ユーザーレビューなどにも活用できるでしょう。

また、「Stripe」や「Gumroad」を利用すれば決済機能を搭載できるし、「Memberstack」を使えば会員専用のページを作ることもできます。

このようにさまざまなWebサービスと連携することで、「Typedream」で作成できるサイトは無限の可能性を秘めているというわけです。


<参考リンク>
「Typedream」とWebサービス連携について

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、Go、Kotlin、JavaScript、HTML/CSS、SQLなど、プログラミング初心者でも動画で学べる体験・入門レッスンを公開しています。

Python体験編」「C#体験編」「ITエンジニアの就活準備編」といった人気講座は完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、「STEINS;GATE(シュタインズ・ゲート)」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!

■まとめ

今回は、スラッシュコマンドから誰でも簡単にWebサイトを作成できるサービスについてご紹介しました。

「Typedream」のサービス自体はまだ始まったばかりのベータ版ですが、活発にバージョンアップが行われているので今後も便利な新機能が搭載されるはずです。

類似のノーコードサービスと比較しても、直感的に分かりやすくて誰でも扱える便利なサービスだと思います。

企業や個人サイトに限らず、イベントページやコミュニティページの作成にも活用できるので、ぜひみなさんもオリジナルのWebサイトを作って公開してみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.