Notion でノーコード Web ページを作成する方法: ステップバイステップ ガイド

Notion でノーコード Web ページを作成する方法: ステップバイステップ ガイド
あなたのような読者は、MUO のサポートを支援します。当サイトのリンクを使用して購入すると、アフィリエイト手数料が発生する場合があります。 続きを読む。

シンプルでコードのない Web ページが必要な場合は、Notion が最適です。利用可能な最高のメモ作成および生産性ソフトウェアの1つであるだけでなく、それらのまったく同じツールを使用してランディングページを作成し、顧客やフォロワーにあなたを見つける場所を知らせることもできます.





今日のメイク動画

まだ試していない場合は、一般的なワード プロセッサを使用するのと同じように使用できます。それがどのように機能するか知りたいですか?この段階的なチュートリアルに従って、Notion で独自のノーコード Web ページを作成します。





コードなしの概念の Web ページを開始する

Web ページ ドキュメントを作成するには、次の場所に移動します。 新しいページ 画面の左下隅にある 空のページ .ビジネス、製品、サービスの名前など、ウェブページの内容を反映したタイトルをページに付けます。何か違うことを考えた場合は、後で戻って変更できますが、適切な場所にいることを人々に知らせたい.





Instagramで誰があなたのフォローを解除したかを確認するアプリ

Notion ページにカバー画像を追加する

表紙の画像は、フォロワーや顧客がウェブページを認識できるようにするための優れた方法です。追加するには:

  1. タイトルの上の任意の場所にカーソルを置き、オプション カバーを追加 現れる。
  2. Notion はページの上部にランダムな画像を配置します。
  3. カーソルを画像の上に移動して選択します 表紙を変える .
  4. カバー メニューでは、Notion ギャラリーからの追加、独自のアップロード、リンク、または Unsplash を検索して見つけることができます。
  5. ギャラリーのいずれかを使用している場合は、目的の画像、色、またはグラデーションをクリックします。
  6. それ以外の場合は、 アップロード リンク 、 また アンスプラッシュ Notion の指示に従います。
  メモ作成ソフトウェアに画像オプションを追加する

ビジネスのブランドを表すビジュアルがない場合でも、配色に合うものを選ぶか、何かをデザインすることができます。 無料の写真編集ソフトウェア カンバのように。画像がまったく必要ない場合は、カバー メニューに戻り、右上隅にある [削除] をクリックします。



  メモ作成ソフトウェアに画像メニューを追加

使用する画像に行き詰まっている場合は、後でこれに戻ることができます。

Notion ページにヘッダーとテキストを追加する

Web ページを作成するとき、できるだけ多くの情報を 1 つの場所に詰め込みたいという誘惑に駆られることがよくあります。しかし、あなた自身の読書習慣について考えてみてください。 1 ページに情報が多すぎる場合、またはテキストの壁を見ている場合は、メッセージを見つけるのがより困難になります。





目標は、Web ページをスキミング可能にして、フォロワーや顧客が次のステップに進むための十分な情報を提供することです。また、その情報をヘッダーの下に整理すると、すばやく見つけられるようになります。色、太字、斜体などを使用して、重要なテキストを強調できます。 叫ぶ また 見積もり ブロック。さらに、次のことができます。 Notion でフォントを変更する デフォルトのものがうまくいかない場合。

  メモ作成ソフトウェアのテキスト レイアウト

Notion を使用すると、ページ上の任意の場所をクリックして入力するだけで、どこにでも簡単にテキストを追加できます。ヘッダーの場合、入力する前にコマンドを使用してブロックをヘッダーに変更するか、後でテキストを強調表示して書式設定ツールバーを使用して入れ替えることができます。





  メモ作成ソフトウェアのテキスト書式設定ツールバー

サイズのオプションは見出し 1、2、または 3 で、H1 が最大で H3 が最小です。見出しのサイズは、Web ページの階層を示すのに役立ちます。メインの最も重要なタイトルは H1 であるため、H2 をタイトルに使用し、H3 をサブタイトルに使用して、競合しないようにする必要があります。

さらに、Personal Pro アカウントを持っていて、スイッチをオンにすることにした場合 検索エンジンのインデックス作成 、ヘッダーを使用して情報を整理し、ページごとに 1 つの H1 ヘッダーのみを使用することは、優れた SEO プラクティスに従います。

テキストにリンクを追加するには、それを強調表示してクリックします リンク 書式設定ツールバーで電子メールにいいねするには、「mailto:」と入力してから自分のアドレスを入力します。これにより、潜在的なクライアントのコンポーザーが開き、その場所に配置されます。たとえば、mailto:example@makeuseof.com です。必ずテストして、スペルが正しいことを再確認してください。

  メモ作成ソフトウェアの電子メール リンク オプション

ソーシャル メディア ページ、ポートフォリオ ページ、または潜在的なクライアントやフォロワーがインターネット上であなたを見つけることができるその他の便利な場所など、追加したいリンクもあります。

とあなたの概念ページへのビデオ

ノーコード Web ページを構築することは、それが基本的である必要があるという意味ではありません。コマンドを使用して、ページの任意の場所に画像やビデオを挿入できます。

  1. スラッシュ ( / ) をキーボードで入力し、入力を開始します 画像 また ビデオ 、どちらでも構いません。
  2. ブロックメニューから選択します。
  3. 画像を追加する場合は、アップロード、リンクの埋め込み、スプラッシュ解除のいずれかを選択し、Notion の指示に従ってください。
  4. 動画を追加する場合は、[埋め込み] または [アップロード] を選択すると、Notion が残りの手順を案内します。
  メモ作成ソフトウェアに画像オプションを追加する

画像またはビデオをページに配置したら、ハンドル (ブロックの左側にある 6 つのドット) を使用して任意の場所にドラッグ アンド ドロップできます。別のブロックの横に配置して列を作成することもできます。列のサイズを変更するには、ブロックの上にカーソルを置き、両側のガイドを使用します。画像やレイアウトをいじって、気に入ったものを見つけてください。

ノーコード概念のウェブページを公開する

  メモ作成ソフトウェアでページのオプションを共有する

ウェブページの準備ができたら、次の場所に移動して起動します シェア 画面の右上隅にある Web で共有 .誰かがあなたのウェブサイトをテンプレートとして使用したくない場合は、編集とコメントをオフにし、複製もオフにします.これで、リンクを使用して、好きな人と共有できます。

  Web ブラウザーでの Web サイトの例