作り方・ツール

Adobe製品でホームページを作成する方法

Adobe製品でホームページを作る方法は一つではありません。HTML・CSSを編集して複数ページのサイトを構築するならDreamweaver、簡単な1ページをすばやく公開するならAdobe Express、作品を見せるサイトならAdobe Portfolioが主な候補です。PhotoshopやIllustratorは、サイトそのものではなく画像や図版の制作に使います。

とくにDreamweaverは、画面上の操作だけで完成するノーコードサービスではありません。コード編集、ファイル管理、ブラウザーでの確認、サーバーへの転送を一つの制作環境で行えるソフトであり、基本的なHTML・CSSと公開環境の理解が必要です。

このページでは、Adobe製品ごとの役割を分けたうえで、Dreamweaverを使ったホームページ作成の流れと初心者が選ぶ際の判断基準を解説します。

選ぶ前に確認すること

  • Adobe製品でホームページを作る主な方法
  • Dreamweaverでできることと必要な知識
  • サイト定義からサーバー公開までの流れ
  • PhotoshopやIllustratorで作る素材の使い方
  • Dreamweaverのメリットと注意点

Adobeでホームページを作る主な選択肢

Adobe製品は役割が異なるため、「Adobeを使いたい」だけでソフトを決めず、作りたいサイトと更新方法から選びます。

選択肢 主な用途 コードの知識 公開環境 向きやすいもの
Dreamweaver HTML・CSSなどの作成、サイトファイル管理、サーバー転送 基本知識が必要 サーバーとドメインを別途用意 静的な会社サイト、HTMLサイトの制作・修正
Adobe Express テンプレートを使った簡単なWebページ 基本的に不要 Adobe側でホスティング キャンペーン、プロフィール、作品紹介など1ページ中心の案内
Adobe Portfolio 作品を見せるポートフォリオサイト 基本制作では不要 サービスに含まれる 写真家、デザイナー、クリエイターの作品集
Adobe XD 画面デザイン、遷移、プロトタイプの作成 基本制作では不要 単独では一般公開サイトにならない 制作前の画面設計、操作イメージの共有
Photoshop 写真補正、画像加工、Web用画像の作成 不要 単独では公開不可 写真、バナー、背景画像
Illustrator ロゴ、アイコン、図版などの作成 不要 単独では公開不可 ロゴ、ベクター図版、SVG素材

Adobe XDなどで作った画面デザインは、完成サイトの見本やプロトタイプです。実際に公開するには、HTML・CSSなどで実装するか、CMS・ノーコードツールなどへデザインを再現する工程が必要です。利用できる製品、提供状況、サポート状況は変わるため、新規制作ではAdobe公式の現行情報を確認します。

Adobe Expressの公式ページでは、Web知識がなくても無料でWebページを作成でき、Adobeがホスティングすると案内されています。一方で、複数ページを必要としないプロジェクトに適した位置づけです。会社概要、サービス、料金、事例などを別URLで管理する本格的な複数ページサイトとは、要件が異なります。

Adobe Portfolioは作品展示に特化した選択肢で、公式サイトではCreative Cloudのサブスクリプションに含まれると案内されています。一般的な会社サイトや予約・ECサイトを作るための汎用CMSとは考えず、ポートフォリオとして必要な機能を満たすか確認します。

Adobe Museは提供が終了しているため、新しく作るホームページの現行候補には含めません。既存のMuseサイトを保守している場合は、別の環境へ移行できるよう、文章、画像、URL、ドメイン、公開ファイルを整理します。

Dreamweaverとは

Dreamweaverは、HTML、CSS、JavaScriptなどのコード編集と、Webサイトを構成するファイルの管理、プレビュー、サーバーへの転送を行うデスクトップアプリケーションです。

Dreamweaverでいう「サイト」は、インターネット上に公開されたページだけを指しません。制作パソコン内のローカルフォルダーをサイトとして定義し、必要に応じて公開先のリモートサーバーを関連付けます。これにより、HTML、CSS、画像などの位置関係を保ちながら管理できます。

Dreamweaverの編集画面には、コードを直接編集する方法と、表示を確認しながら作業するための機能があります。ただし、見た目の編集だけでHTML・CSSの理解が不要になるわけではありません。意図しない余白、スマートフォンでの崩れ、見出し構造、代替テキスト、読み込み速度などは、コードと実際のブラウザー表示を確認して整えます。

また、Dreamweaver自体はレンタルサーバーや独自ドメインではありません。作成したファイルを一般公開するには、公開先とURLを別に用意します。必要なものはホームページ用サーバーの選び方でも整理しています。

Dreamweaverで必要な知識と環境

Dreamweaverを使い始める前に、次の知識と環境を確認します。

項目 必要な内容
パソコン 現行Dreamweaverの動作要件を満たすWindowsまたはmacOS環境
Adobe契約 Dreamweaverを利用できるCreative Cloudの契約
HTML 見出し、段落、画像、リンク、表、フォームなどの構造
CSS 色、文字、余白、幅、配置、レスポンシブ表示
JavaScript 必要な動きや外部機能を実装・確認する場合
ブラウザー 公開前に実際の表示と操作を確認するための複数ブラウザー
サーバー HTML、CSS、画像などをインターネットへ配信する場所
ドメイン サイトのURL。長期運用する場合は独自ドメインを検討
転送情報 サーバー名、接続方式、ユーザー名、接続先フォルダーなど
素材 確定した文章、ロゴ、写真、図版、ファビコンなど

最初に最低限理解したいのは、HTMLが内容と構造、CSSが見た目、JavaScriptが動作を担当することです。コードの基礎はHTML・CSSでホームページを作成する方法で解説しています。

公開先へ接続する際は、契約しているサーバー会社が案内する方式を使用します。SFTPやFTPSなど暗号化された転送方式に対応している場合は、その利用を優先します。接続情報を原稿、チャット、公開ファイルへ書かず、パスワード管理と権限管理を行いましょう。

文章や画像の準備もソフトとは別に必要です。Dreamweaverを起動してから内容を考え始めると、コード修正と原稿修正が混ざります。先にページ一覧、各ページの目的、見出し、本文、使用画像を決めると制作しやすくなります。

Dreamweaverでホームページを作る手順

Dreamweaverでの基本的な流れは、ローカルサイトを定義し、ファイルを作り、ブラウザーで検証した後、サーバーへ転送する順番です。

サイトを定義する

まず、ホームページの全ファイルを置くローカルルートフォルダーをパソコン内に作ります。Dreamweaverで新しいサイトを設定し、サイト名とローカルフォルダーを指定します。

フォルダーの例は次のとおりです。

example-site/
├── index.html
├── about/
│   └── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    ├── logo.svg
    └── main.jpg

ファイル名とフォルダー名は、半角英数字とハイフンなど一定のルールで統一します。大文字・小文字、全角文字、空白、同名ファイルの混在は、サーバー上でリンク切れの原因になることがあります。

公開先もDreamweaverから管理する場合は、サイト設定のサーバー項目へリモートサーバーの情報を登録します。Adobe公式ヘルプでは、FTPアドレス、ユーザー名、パスワード、ルートディレクトリ、Web URLなどの設定項目が案内されています。実際の値はサーバー会社の管理画面・マニュアルで確認します。

HTML・CSSファイルを作る

トップページとなるindex.htmlと、共通スタイルを記述するCSSファイルを作ります。テンプレートや既存サイトを使う場合も、ファイルの利用条件とコードの内容を確認しておきましょう。

HTMLでは、見た目の大きさではなく文書の意味に沿って見出し、段落、リスト、リンクなどを使います。ページごとに固有のtitleと説明文を設定し、画像には内容に応じた代替テキストを付けます。

CSSでは、文字、色、余白、幅、配置を整えます。ページごとに同じ指定を複製せず、共通部分をCSSへまとめると変更しやすくなります。ヘッダーやフッターを全ページへ個別に記述する静的サイトでは、ページ数が増えるほど共通修正の手間も増える点に注意します。

問い合わせフォームは、HTMLで入力欄を置くだけでは送信・保存できません。サーバー側の処理や外部フォームサービスが必要です。入力値の検証、迷惑送信対策、通知、個人情報の管理まで含めて実装します。

レスポンシブ表示を整える

スマートフォン、タブレット、パソコンで読みやすくするため、CSSのメディアクエリーや柔軟なレイアウトを使います。Dreamweaverにはレスポンシブ制作を補助する表示やCSS関連機能がありますが、最終的な品質はコードと実機確認で判断します。

次の点を画面幅ごとに確認します。

  • 横スクロールが発生しない
  • 見出しや本文が小さすぎない
  • 画像が画面幅からはみ出さない
  • メニューをタップして操作できる
  • ボタンやリンクの間隔が狭すぎない
  • 表や地図、動画、埋め込みが収まる
  • 横並びの内容が自然な順番で縦に並ぶ
  • キーボード操作でも主要機能を使える

デスクトップのデザインを縮小するだけでは、スマートフォンで読みやすいページになりません。重要な情報の順番、画像のトリミング、メニューの操作方法まで見直します。

ブラウザーでプレビューする

Dreamweaverのプレビューは制作途中の確認に使えます。Adobe公式ヘルプでは、リアルタイムプレビューとブラウザーでのプレビューが案内されています。

公開前はDreamweaver内の表示だけで完了とせず、実際の複数ブラウザーで確認します。リンク、メニュー、フォーム、動画、文字化け、画像、404ページ、ページタイトルなどを確認しておきましょう。

ローカル環境では動いても、サーバーへ置くと動かない場合があります。代表的な原因は、大文字・小文字の違い、絶対パスと相対パス、アップロード漏れ、サーバー側の仕様、外部サービスの許可ドメインです。

サーバーへ公開する

公開前にローカルフォルダーをバックアップし、転送対象を確認します。Dreamweaverのファイル管理機能からサーバーへ接続する場合は、公開フォルダーを間違えないようにします。

最初からフォルダー全体を無条件に上書きせず、次を確認しておきましょう。

  1. 公開先のバックアップを取得する
  2. 転送する追加・変更ファイルを確認する
  3. 不要な編集用ファイルや認証情報を除外する
  4. サーバーへファイルを転送する
  5. https://で始まる公開URLを開く
  6. パソコンとスマートフォンで表示・操作を確認する
  7. 問題があればバックアップから戻せる状態にする

公開後はSSL、サイトマップ、検索エンジン向け設定、アクセス解析、バックアップ方法も整えます。Dreamweaverでアップロードできたことと、運用準備が完了したことは同じではありません。

Adobeのデザイン素材をWeb制作に使う方法

Adobe製品を組み合わせる場合は、元データとWeb用データを分けて管理します。

Photoshopで写真を整える

写真の明るさ、色、トリミング、不要部分などを調整し、Webで必要な表示サイズに合わせて書き出します。カメラの高解像度画像をそのまま掲載すると、読み込みが重くなることがあります。

元画像を残したうえで、用途ごとに大きさと形式を選びます。写真はJPEGやWebPなど、透過が必要な画像はPNGやWebP、内容によって形式を使い分けます。画質を落としすぎず、実際の表示寸法より過度に大きなファイルを避けます。

Illustratorでロゴや図版を作る

ロゴ、アイコン、簡単な図版は、拡大しても形を保ちやすいベクターデータで制作できます。Web用にはSVGやPNGなどを書き出します。

SVGにはコードや外部参照を含められるため、入手元が不明なファイルを無検証で公開しないようにします。複雑すぎるデータ、編集用情報、不要な要素を整理し、ブラウザー表示を確認します。

素材の権利と管理を確認する

Adobe Stock、フォント、テンプレート、生成機能などを使う場合は、利用時点のライセンスと用途を確認します。編集できることと、ロゴ、商品化、再配布、顧客サイトで自由に使えることは同じではありません。

元ファイル、書き出しファイル、ライセンス情報、作成日、使用ページを整理します。デザイン全体の考え方はホームページデザインの基本、既成デザインの確認点はホームページテンプレートの選び方で扱います。

Dreamweaverのメリットと注意点

メリット 注意点
HTML・CSSなどのコードとサイトファイルを一つの環境で管理できる HTML・CSSの理解がなければ意図した修正が難しい
既存の静的HTMLサイトを編集しやすい サーバー、ドメイン、SSLなどは別に管理する
プレビューとコード編集を行き来できる プレビューだけでは実際の端末・ブラウザー確認にならない
サーバーへのファイル転送を設定できる 接続情報と上書き事故の管理が必要
特定のクラウド型作成サービスに構造を限定されにくい ページ数が増えると共通部分の更新やファイル管理が重くなる
Photoshop、Illustratorなどと制作環境をそろえやすい Creative Cloudの契約費と学習時間がかかる

Dreamweaverの強みは、コードを避けることではなく、コードとWebサイトのファイルを管理しやすくすることです。完成したHTMLサイトを自分で管理したい場合や、既存の静的サイトを修正する場合に適しています。

注意したいのは、ソフトを導入しても、文章作成、情報設計、デザイン、アクセシビリティ、SEO、セキュリティ、保守が自動で完成しないことです。古いテンプレートや既存サイトを編集する場合は、HTML仕様、レスポンシブ対応、外部ライブラリ、フォーム、解析タグなども確認します。

初心者に向くかを判断する基準

Dreamweaverは、コードを学びながら静的サイトを作りたい初心者には候補になります。一方、短時間で公開し、管理画面から文章や写真だけを更新したい場合は、ほかの方法の方が合うことがあります。

Dreamweaverを検討しやすいケース

  • HTML・CSSの基本を学ぶ意思がある
  • パソコンでファイルとフォルダーを管理できる
  • 小規模な静的サイトを作りたい
  • 既存のHTMLサイトを引き継ぐ必要がある
  • サーバー、ドメイン、転送を自分で管理できる
  • 表示の細部をコードで調整したい

ほかの方法も比較したいケース

  • コードを扱わずに早く公開したい
  • 複数人が管理画面から頻繁に更新する
  • お知らせ、事例、商品などを定型項目で増やしたい
  • バックアップやソフトウェア更新をサービス側へ任せたい
  • 予約、EC、会員機能を標準機能で使いたい
  • スマートフォンだけで制作・運用したい

練習では、トップページ1枚を作り、ローカル表示、レスポンシブ調整、テスト用サーバー公開まで一度通します。最初から多数のページや複雑なフォームへ広げない方が、必要な知識を把握しやすくなります。

ノーコード・WordPressとの違い

比較項目 Dreamweaver＋HTML/CSS クラウド型ノーコード WordPress（自前運用）
基本の作り方 ファイルとコードを編集 ブラウザーの編集画面で配置・設定 テーマ、ブロック、固定ページなどを管理画面で編集
コード知識 基本的に必要 基本制作では不要 基本制作は少なくて済むが、調整時に役立つ
公開環境 サーバーを別途用意 通常はサービスに含まれる サーバーとドメインを用意
更新 ファイルを編集して再転送 編集画面から公開 管理画面から更新
共通部分 仕組みを自分で用意 サービスの共通部品を利用 テーマやブロックなどで管理
保守 ファイル、サーバー、外部処理を管理 サービスの範囲内で運用 本体、テーマ、プラグイン、サーバーを管理
移行 HTML・CSS・画像を保持しやすい 書き出し範囲をサービスごとに確認 データとファイルを移行できるが作業は必要
向く運用 更新が少ない静的サイト、コード管理 小〜中規模サイトを視覚的に更新 ページや定型コンテンツを継続管理

どの方法が優れているかではなく、公開後に誰が何を更新するかで選びます。Dreamweaverで作る静的サイトでも、共通テンプレートや生成工程を設計すれば効率化できますが、その仕組みを保守できる人が必要です。

各方式の全体像はCMS・ノーコードでホームページを作る方法、製品を横断した比較はホームページ作成ツール・ソフトの比較もあわせてご覧ください。

よくある質問

Dreamweaverだけでホームページを公開できますか

Dreamweaverでファイルを作成し、サーバーへ転送できますが、一般公開には別途サーバーが必要です。独自ドメインを使う場合はドメインも用意し、SSLやDNSを設定します。

Dreamweaverはコードを書かずに使えますか

表示を確認しながら編集する機能はありますが、HTML・CSSを理解せずに本格的なサイトを安定して作るのは難しいソフトです。少なくとも文書構造、リンク、画像、CSS、レスポンシブ表示の基礎を学びます。

Adobe Expressで会社のホームページを作れますか

会社やサービスを説明する簡単な1ページは作れます。複数ページ、独自ドメイン、フォーム、SEO、更新権限、予約・ECなどが必要なら、現在の機能が要件を満たすか、ほかのCMSやノーコードと比較してみましょう。

Photoshopだけでホームページを作れますか

Photoshopは写真や画像の制作に使えますが、画像を作るだけでは検索・操作できるWebページになりません。HTML・CSS、CMS、ノーコードなど、ページを構築して公開する仕組みが別に必要です。

Dreamweaverで作ればSEOに有利ですか

使用ソフトだけで検索順位が上がることはありません。検索意図に合う内容、適切なtitle・見出し・リンク、モバイル対応、表示速度、クロール可能な構造などを整える必要があります。

Adobe Museで新しいサイトを作ってもよいですか

Adobe Museは提供が終了しているため、新規サイトの現行環境としては勧められません。既存サイトは、将来更新できなくなる事態に備えて移行計画を作ります。

次に確認するガイド

HTML・CSSでホームページを作成する方法このガイドを確認する ホームページデザインの基本と実践のコツこのガイドを確認する ホームページ用サーバーの役割と選び方このガイドを確認する

作り方・ツールのガイドへ戻る

参考情報