Web ページのデザイン

最終更新日 : 2026年5月1日

Adobe Express で web ページを作成する方法について説明します。

Adobe Express deeplink
Adobe Express deeplink
Adobe Express deeplink

アプリで試す
いくつかの簡単な手順で、web ページを作成します。

Adobe Express のホームページで、左側パネルのプラス アイコンを選択し、「Web ページ」を選択します。

Web ページタスクにポインタを合わせ、「テンプレートを選択」を選択します。

白紙から作成」を選択するか、お好みのテンプレートから始めます。

追加   アイコンを選択して、web ページにコンテンツを追加します。

  • 写真:Adobe Stock で無料の写真を検索したり、自分のライブラリ、Lightroom、Dropbox、Google フォト、Google ドライブから写真をアップロードしたりできます。
  • テキスト:テキストを追加し、必要に応じて書式とアラインメントを調整します。見出しを使用してコンテンツを明確なセクションとサブセクションに整理します。ページタイトルは常にメイン見出し(H1)であり、テキスト内の任意の場所にハイパーリンクを追加することもできます。Web ページの見出し構造は次のとおりです。
    • 見出し 1(H1):H1 はタイトルに使用できるメイン見出しです
    • 見出し 2(H2):主要なサブセクションです
  • ボタン:ボタンのテキストを追加し、URL を設定します。
  • GIF:Giphy からのリンクを埋め込んで、web ページに GIF を含めます。
  • 動画:Adobe Express、YouTube または Vimeo 動画からリンクを追加します。 注意:Adobe Express の動画の制限は 5 分です。動画がこの制限を超える場合、埋め込みバージョンでは最初の 5 分のみが表示されます。
  • マイファイル:Adobe Express のデザインを画像または写真グリッドとして埋め込みます。

ページのプラス アイコンを選択し、web ページに次のレイアウトを追加します。

  • 写真グリッド:複数の写真を追加してグリッドを作成します。 写真の移動やサイズ変更ができます。
  • スライドショー:写真をアップロードし、テキスト、ブロック引用、画像などをブロックコンポーネントに追加して、ストーリーを新たな形で伝えます。
  • レイアウトを分割:Web ページが 2 つのセクションに分割されます。そのうえで、写真、テキスト、ボタン、動画を追加します。
  • 目次:目次を追加して、web ページ上のコンテンツにさらにリンクを追加します。
  • ナビゲーションバー:ナビゲーションメニューを追加して、任意のページに簡単にジャンプできます。 

ヘッダーからテーマ  を選択し、ロゴ、フォント、カラーを適用するテーマまたはブランドを選択します。さらにカスタマイズするには、「新規テーマを作成」を選択します。

以下のツールを使用すると、web ページエディターでの編集が簡単になります:

  • 取り消し」を選択すると、変更を取り消すことができます。
  • やり直し」を選択すると、アクションを繰り返すことができます。
  • プレビュー」を選択すると、web ページを確認できます。
  • 全画面表示」を選択すると、全画面表示されます。

Web ページのデザインが完了したら、共有を選択します。 

共同編集者を招待」を選択すると、ファイルを他の人と共有できます。 ユーザーまたはグループを追加セクションに名前を入力し、アクセス設定を更新して、「リンクをコピー」を選択してファイルを共有します。 Web ページを公開するには、「Web に公開」を選択し、次に「リンクを作成」を選択します。

ヒント :
  • パスワード保護」を選択すると、web ページをパスワード保護付きで公開して、公開された web ページの保護を強化できます。
  • 他のユーザーによる編集を許可」を選択すると、ユーザーがプロジェクトのコピーを作成できるようになります。