プロのWebデザイナーから多くの指示を集めているのがDreamweaverです。自由度が高いWebデザインができ、作業を進めるために便利な機能も多数搭載されています。Webデザイン初心者がDreamweaverでサイトを作るためにはどうすれば良いのでしょうか。今回は、Dreamweaverでサイトを作成するまでに、必要な事前準備や、サイト作りに役立つ機能についてご紹介します。
経験者が語るDreamweaverでよく使う機能
Webサイトやアプリをデザインするソフトとして高い知名度を誇るDreamweaver。ソフトを使った経験を持つ人は、Dreamweaverのどのような機能をよく使っているのでしょうか。Dreamweaverを使った経験がある人を対象に、意見を調査してみました。
Dreamweaverの便利な機能は何？
- テンプレート機能をよく活用します。一括で変更・更新などできるのは非常に便利だし、時短にもなります。プレビューもあるので、実際のイメージも湧きやすくて便利だと思います。（20代/女性/無職）
- ショートカットを覚えただけでコーティングがとても楽になる。（30代/男性/無職）
- よく使うコードを保存して、次回からすぐに使えるようになるスニペットという機能。（20代/女性/学生）
- ライブラリという機能です。（30代/女性/正社員）
- マルチカーソルの機能。箇条書きのリストを作成するのに便利。（30代/女性/正社員）
【質問】
Dreamweaverでよく使う機能を教えてください。
【回答結果】
フリー回答
調査地域：全国
調査対象：【年齢】20 – 29 30 – 39
調査期間：2018年05月28日～2018年06月04日
アンケートの結果、Dreamweaverにはさまざまな機能が搭載されており、皆さん積極的に活用されていることが分かりました。特に人気が高かったのは「テンプレート機能」や「ショートカット機能」です。Webサイトの制作は、コードの入力や編集に時間がかかるためDreamweaverの作業効率をアップさせる機能は重宝するようですね。それでは、実際にWebサイトをデザインする工程についてご紹介しましょう。
Dreamweaverを使う前にすべき準備
Dreamweaverを使う前にサイトを構築するための準備を進めておきましょう。
Dreamweaverでサイトを作る準備方法
- まずは、どのようなサイトを作りたいのか構成を考えておく必要があります。「どんなコンテンツを発信していきたいのか」、「ターゲットとなる人物像はどのような人なのか」など、サイトの方向性やイメージまでしっかり固めておくと安心です。
- おおまかなサイトの構成を考えたら、ウェブブラウザに表示されるものを準備していきましょう。サイトを作るためには、画像やバナーなどの素材が必要です。自身が持つサイトのイメージに合う素材を収集しましょう。素材が集まったら、サイトフォルダーを作成しそこに素材を保存します。その後、素材を集めたフォルダをDreamweaverで使用できるようにサイト設定を行います。
- Dreamweaverでページをデザインするための準備が整ったら、サイトを立ち上げるための環境を作りましょう。Dreamweaverでサイトを作る場合、サーバーを借りることが必要になります。サーバーとは、サイトを表示させるための情報をネット上に保管しておく場所のようなものです。サーバーはレンタルサーバー会社から借りる必要があります。サーバーを借りたら、ドメインの設定を行いましょう。ドメインとは、サイトのURLに含まれる文字のことでホームページの名前のような役割を果たします。
Dreamweaverを使ったウェブサイト作成の流れ
準備が整ったら、いよいよサイトの制作に取り掛かります。まずはHTMLやCSSによってサイトのデザインを作り上げていきましょう。HTMLとは「サイトがどのようなものを使い構成されているのか」を表すものです。一方、CSSは画像の位置を固定させるなど、HTMLの情報を望んだ位置で表示させるための指示をする役割があります。1冊の雑誌に例えると、HTMLは雑誌の原稿や単体の画像を表しており、CSSは雑誌のレイアウトを司る部分といえるでしょう。
HTMLを作成に行うこと
- HTMLを作成したら、ヘッダーを準備します。ヘッダーとは、ホームページの画面上部に表示させる画像のことです。再び雑誌を例に挙げると、本の表紙にある題名のような役割を持ちます。ヘッダーは、何の情報を扱うサイトなのか一目で分かるようなものを選ぶのが望ましいです。
- 次に、コンテンツを作成していきましょう。コンテンツとは、本の内容の部分に当たり、サイトを制作するにおいて重要な役割を持ちます。ターゲットとなる人物が欲している情報はどのようなものなのか、よく考えながら制作していくのが望ましいです。
- 最後に、フッダーを作成します。フッダーとは英語の「フット」に由来する言葉で文字通り足を意味します。サイトの下に表示させ、操作のために必要なリンクやコピーライト（誰が作成したサイトなのか）などを掲載するのが一般的です。
作成に役立つ便利な機能の使い方
Dreamweaverに備わっている便利な機能として、「CSSのクイック表示」や「リアルタイムプレビュー」、「sass/lessファイルのコンパイル」などが挙げられます。
「CSSのクイック表示」
まず、CSSのクイック表示とは、CSSのコードを1から全て入力しなくても編集画面に反映させることができる機能です。例えば、CSSによって文字の色を変えるようにコードを書き換えたい場合、パレットを表示させることができます。パレットとは、色見本を表示させる機能を指し、パレットから文字に反映させたい色を選ぶことでコードが表示されるのです。この機能を活用すれば、CSSのコードを最初から打ち込む必要がなくスピーディーにデザインを進めやすくなります。
「リアルタイムプレビュー」
コードを入力しWebデザインを進めていると、実際にブラウザでページを開いたときにイメージが異なってしまうケースもあります。そこで活用したいのが「リアルタイムプレビュー」です。これは、編集画面でもブラウザ上で表示されるサイトを見て確認できる機能を指します。実際に表示されるサイトを見ながら編集ができ、自分が思い描くサイトを実現しやすくなります。
「sass/lessファイルのコンパイル」
「sass/lessファイルのコンパイル」も便利な機能として挙げられます。sass/lessファイルのコンパイルとは、デザインを編集するときにいくつもあるCSSのファイルを一気に書き換えることができる技術のことです。sass/lessファイルのコンパイル機能が使えないと、サイトの編集をしたいときに1つ1つのCSSファイルを書き換えなくてはいけません。Dreamweaverでは、複数のファイルが1度に読み込めるためにsass/lessファイルのコンパイルを活用できるのです。
使い方のポイントを押さえておこう！
「Dreamweaverを使ってサイトを制作したい」という人は、まずサイト制作の工程を知りイメージを膨らませておくことが大切です。しかし、Dreamweaverの詳しい使い方や便利な機能については、実際に操作をしてみないと分からない部分もあります。Webデザインの基礎から効率的に学びたいという人は思い切ってスクールに通ってみるのもおすすめです。
「パソコンスクールアビバ」では、基礎から実務でよく使う機能を、一人ひとりのレベルや目的に合わせたカリキュラムで身につけられます。初心者から始めてお仕事などで活躍する方も多く、独自の自己診断ツール「BRIDGE-C」により、どのようなスキルを身に付ければ今後の目標に近づけるのかが分かりますので、何から始めればいいのか分からない方も最短ルートで将来に向けた準備ができます。
「パソコン教室・パソコンスクール AVIVAのDreamweaver(ドリームウィーバー)講座はこちら」
「パソコン教室・パソコンスクールの無料体験授業・カウンセリングはこちら」
