Expression Web 4でのサイト制作の流れ
ブログからホームページに挑戦する方や、はじめてホームページを作成する初心者向けに、Expression Web 4でのサイト制作の流れについて説明します。
はじめに
WindowsパソコンにExpression Web 4をインストール済ませたけど、次は何をすればいいの？って思いますよね？
そこで、Expression Web 4を使ったサイトの構築から公開までの流れについて大まかに説明します。
- サイトを開く
- サイト全体の構成やデザインを決める
- コンテンツに必要な素材をインポートする
- ダイナミックWebテンプレートを作成する
- トップページを作成する
- ダイナミックWebテンプレートからWebページを新規作成する
- ハイパーリンクでWebページ同士をつなげる
- ブラウザーでプレビューして確認する
- パブリッシュを設定して公開する
1. サイトを開く
Expression Web 4を起動したらまずしなければならないこと、それは「サイトを開く」作業です。サイトが閉じられた状態では、フォルダーリストにファイルやフォルダー一覧が表示されず、ブランクになります。
フォルダーリストがブランクの状態のままだと、Expression Webのサイト管理機能が働かず、リンク切れをはじめ、ほとんどの機能が正常動作しなくなるので注意してください。
もし、サイトを開かないでいると、具体的にどのような不都合が出るのか以下に挙げます。
- サイト全体の管理がされないためリンク切れが発生する
- サイト全体における検索と置換機能が使えない
（開いているページ、作業中のページの検索と置換はサイトを閉じていてもOK） - ダイナミックWebテンプレートの利用ができない
- ページ挿入機能が使えない
- パブリッシュ機能が使えない
Expression Web 4をインストールすると、ログインしているユーザーのドキュメントフォルダー内に「My Web Sites」という、地球儀アイコンがついたフォルダーが生成されます。この特殊なフォルダーこそ、Expression Webで管理する「サイト」なのです。そのフォルダーを開く必要があります。
しかしながら、サイトの場所はインストール時に自動生成されたフォルダーに限定する必要はありません。OneDrive上にMy Web Sitesというサイトを作成し、複数のサイトを展開するという運用もアリです。とりわけ、複数のパソコンを所有し、シーンに応じてパソコンを使い分けている場合は、クラウドに保存しておくと自動的に同期されるため、その都度インポートする必要がなくなるので便利です。同時にバックアップも兼ねて一石二鳥です。
複数のサイトを運営する場合は、その「My Web Sites」の中に個々のサイトを作成していくとよいでしょう。
もし、すでにホームページを持っていて、Expression Webに移行する場合は、サイトをインポートするとOKです。
参考
2. サイト全体の構成やデザインを決める
Expression Webでサイト全体の設計図を決めます。あなたのサイトに訪問される方たちの求める情報をストレスなく提供できるようにするにはどうしたらいいか、迷子にならないようにするにはどうしたらいいか、といったことを考えながらサイト全体の構成やデザインを決めていきましょう。忘れてはいけないのは、見掛け倒しではなく、実際に「使える」かどうかです。閲覧者はWebデザインを見に来ているのではなく、有益な情報を求めてやって来ているということを忘れないでください。
ブログの記事をまとめてサイトで清書する、という手もあります。運営しているブログ記事が無断転載されて困っている方は、とりあえずブログ記事でネタを蓄積し、あとでサイトにブログからの選りすぐりのコンテンツをピックアップして、体裁を整えていくといいでしょう。
サイトの構築のポイントとして、情報をカテゴリーに分類し、それぞれフォルダーでまとめるとOKです。
運営サイトが一つだけの場合は、「My Web Sites」フォルダーを開き、そのフォルダー内で構築していきましょう。
参考
3. コンテンツに必要な素材をインポートする
魅力的な記事にするには、画像が欠かせません。旅先で撮影したJPEG画像は、作業中のサイトにインポートしておきましょう。フォルダーリストや、サイトビューの「フォルダー」を開き、フォルダーを作成し、その中に素材をドロップすると、作業中のサイトにインポートされます。
ただし、動画をコンテンツに取り入れたい場合は、あらかじめYouTubeに動画をアップロードして、その動画へのリンクをWebページに埋め込むのが現実的です。
参考
4. ダイナミックWebテンプレートを作成する
サイト全体のデザインを統一するためのテンプレートを作成します。HTMLとかCSSとかわかんない、右も左もわからない、という方は、スマホ対応でレスポンシブWebデザインのExpression Webテンプレートを配布しているので、それを利用するとOKです。そのダイナミックWebテンプレートにメニューなどを作っていきましょう。
ダイナミックWebテンプレートは、はてなブログに例えると「デザイン」部分になります。サイトタイトルやカテゴリーは、ダイナミックWebテンプレートで調整していきます。
参考
5. トップページを作成する
Expression Webテンプレートでは、それぞれトップページとなる index.html ファイルが格納されています。ダイナミックWebテンプレートとメニューを統一させて、トップページを編集して上書き保存してください。
6. ダイナミックWebテンプレートからWebページを新規作成する
トップページの次は、ダイナミックWebテンプレートからサブページをどんどん作っていきます。たとえば、はてなブログで記事を作成する時、「記事を書く」のリンクをクリックしますよね？ Expression Web 4で新しい記事を書くには、フォルダーリストに存在するDWTファイルを右クリックしてショートカットメニューより［ダイナミックWebテンプレートから新規作成］コマンドを選択します。記事タイトルや説明を指定し、適切なカテゴリーフォルダーにWebページを保存していきます。
デザインレイアウト自体は編集不可となるので、コードビューで故意にいじらない限り、レイアウトが崩れることはありません。もし、レイアウトが崩れてしまった場合は、ダイナミックWebテンプレートが適用されたWebページを更新するとOKです。
参考
7. ハイパーリンクでWebページ同士をつなげる
それぞれのWebページをつなぐためにリンクを作成していきます。共通メニューそれぞれにインデックスページを設け、個々の記事へのリンクを張ったり、逆に個々の記事ページからトップページへ戻れるようにしましょう。どのWebページからでもその他すべてのページに行けるように導線を作ることが大切です。どこにもリンクされていないページは避けることによって、閲覧者にとって利便性が高まり、「使えるサイト」として価値が上がります。
- それぞれのカテゴリーフォルダーにindex.htmlファイルを作成し、それぞれの記事へリンクしていきます。
- 各記事にパンくずリストを用意し、それぞれのカテゴリーのトップページに戻れるようにします。
- ダイナミックWebテンプレートファイル（DWTファイル）を開き、カテゴリーフォルダーへリンクします。
- トップページも同様に調整します。
8. ブラウザーでプレビューして確認する
サイトを公開する前に、実際にブラウザーでプレビューしてどのように表示するか確認しましょう。運営者の立場としてではなく、通りすがりの人の立場にたって、サイトを確認することがポイントです。
9. パブリッシュを設定して公開する
レンタルサーバーのコントロールパネルの情報をもとに、パブリッシュの設定を行います。このパブリッシュの設定はサイト毎に個別に保持されます。複数のサイトを管理している場合は、それぞれパブリッシュの設定を行ってください。
