1.1　一般的なサイト制作の流れ

　サイト企画の流れは、一般的には次のようになります。これはDrupalに限らず、Webサイト制作全般で使えるフレームワークです。

　１．企画を立てる

　２．サイトの構成をまとめる

　３．主要ページのレイアウト

　４．デザイン

　５．コーディング

　６．サーバー公開

ステップ1 企画を立てる

　まず、サイト企画として、何を目的に誰がどのように使うサイトなのか、そのためにどんなコンテンツが必要なのかをまとめます。この段階では、考えを整理し、関係者の間で意識合わせをすることが目的です。固有の機能を提供するWebシステムの性格が強いサイトの場合は、ユースケース図などで機能要件を洗い出しておく必要がありますが、一般的なホームページであれば、まずは簡潔な文章で要点をまとめておくのが良いでしょう。

ステップ2 サイトの構成をまとめる

　サイトの目的と運営イメージが固まったら、次に実際のサイトを構成するページと各ページ間のリンク（ナビゲーション）を検討して、サイトマップという図にまとめます。サイトマップが出来上がると、作るページの種類とサイト全体の規模、作業ボリュームが見えてきます。

ステップ3 主要ページのレイアウト

　サイト構成が決まったら、次に、トップページやサイトへの入り口となる主要ページ（ランディングページ）に掲載する情報とその配置を検討し、ざっくりとした図にまとめます。情報の項目と配置がわかれば良いので簡素な枠線や区画を描いた図で十分です。この図は一般にワイヤーフレームと呼ばれます。

ステップ4以降

　一般的には、サイトマップとワイヤーフレームが完成したらデザイン作業に入ります。ワイヤーフレームで決めた配置を基に本格的なデザインを起こし、デザインカンプと呼ばれるページ見本を作成します。この作業を通じて細部を詰め、最終的なデザインを確定させます。以後は、完成したデザインを具現化する技術的な作業を進め、最後にサーバー上に配置し、テストを経て公開、完成という流れになります。

　この章では、ステップ1～3までの部分を検討していきましょう。

1.2　サイトの概要をまとめてみよう

　まずは周辺の情報収集です。プロローグにあった雫ちゃんと友人の会話と、雫ちゃんが描いた商店街マップ(図1.1)の情報から、今回の企画の目的は次のようにまとめることができます。

　・SNSでバズった神社の人気を商店街の集客と活性化につなげる

　・まずは商店街のサイトを（今ないので）作ること

　ここで想定されているユーザーは、次のようになるでしょうか。

　１．にゃんコツ神社のファン

　２．にゃんコツ商店街のすべての利用者

　それでは、各ユーザー層別の目的と提供すべきコンテンツを考えてみましょう。

　・にゃんコツ神社のファン向けのコンテンツ

　　─にゃんコツ神社の情報（検索トップを狙う）

　　─歴史（知的興味）

　　─写真（視覚と感性に訴える？）

　　─参詣案内（足を運びたい人向けの実用情報）

　・商店街の利用者全般向けの情報

　　─各店舗の情報

　　─特徴的な商品やサービスの紹介

　初めて作るサイトなので出来ることには限りがありますが、上記の検討から、最低でも次のコンテンツは提供する必要がありそうです。

　・にゃんコツ神社の紹介情報：にゃんコツ神社に興味を持った人の検索トラフィックを吸い上げるページにしたいので、内容を充実させるとともに基本的な検索エンジン対策をしっかりして、検索上位を狙いたいところです。

　・商店街の情報：にゃんコツ神社に興味があるが商店街は知らない遠方の人、にゃんコツ神社に参詣に来た人に、立ち寄るべき、買い物していくべき、と思わせる情報を提供する必要があります。

　・各店舗の情報：商店街そのものへの興味だけでなく、そこで営業している店舗の商品やサービスの情報を提供することで、近くに足を運んだ人たちの必要を満たす商品やサービスがあることを知ってもらうことが重要です。また、多様な関心事から情報にたどり着けるように、店舗の検索や分類、タグ付けなどの機能も欲しいところです。商店会が持っている各店舗の情報を表形式でまとめておくと、スムーズにサイト作りに取り掛かれます¹。

　また、運営に関する留意点として、情報は鮮度が重要なので、制作会社等に依頼することなく、いつでも自分たちで更新でき、コンテンツを継続的に充実していけるようにしましょう。

1.3　全体構成をサイトマップにまとめる

　ステップ1で具体化した内容から、次のようなサイトの全体構成を考えてみました。トップページから、神社の紹介、商店街の紹介、店舗情報には常にアクセスできるようにしておき、店舗情報には、さらに個別の店舗ページに移動できるように各店舗への一覧を掲載します。

1.4　主要ページのレイアウトをワイヤーフレームにまとめる

　今度は各ページのレイアウトを考えることにしましょう。アイデアは、ワイヤーフレームとして図に起こしていきます。

トップページ

　トップページの機能的な要件としては、サイトマップで整理した3つの主要下層ページ（にゃんコツ神社、商店街、店舗一覧）にいつでもアクセスできるようにしたいので、全ページ共通の水平メニューをページ上部に配置するのが良いでしょう。ちなみに、このようなサイト全体にわたって主要ページへのリンクを提供するメニューは、国内では一般にグローバルナビゲーションと呼ばれ、Drupalではメインナビゲーション（Main navigation）という呼称が使われています。

　トップページなので、視覚的にインパクトのある写真や画像がほしいところです。メニューの下に目を引く画像を配置することにして、その下に、挨拶文とサイトの簡単な紹介を掲載することにします。ページの最下部にフッターと呼ばれる領域を用意して、共通の情報として運営組織の連絡先や著作権表示などを掲載します。掲載内容はおいおい考えるとして、まずはこの配置で進めることにします。

店舗ページ

　次に各店舗ページのレイアウトを考えました。他の商店街のホームページを見ると、決まった項目について各店舗の情報を掲載するページを用意しているようなので、それにならって次のようなレイアウトを考えました。店舗名がページタイトルになると思いますが、名前が大きく目立つように、水平メニューの下に大きく配置することにしました。

　サイトマップでわかるように、店舗ページは上から3階層目の下層ページなので、上位のページとの位置関係がわかるようにパンくずリストも設置したいところです。また、ある店舗を見ているときに、すぐに別の店舗に移動できるように、他の店舗ページへのリンク一覧もサイドバーに配置することにしました。

店舗一覧ページ

　このページに誘導する店舗一覧をメインナビゲーションからリンクした2階層目のページとして用意します。最近ですと、カード型レイアウトと呼ばれるような、グリッドレイアウトにカードを並べるようにデザインするサイトが多く見受けられるので、それっぽく描いてみました。

　残るは、にゃんコツ神社や商店街の紹介など、文章と写真を掲載するページですが、これらは情報の中身に応じて検討することになるのと、コンテンツ以外の部分（メニュー、タイトル、サイドバー、フッターなど）は他のページとほぼ同じレイアウトになると思います。細部はコンテンツを作りながら詰めていくのが良いでしょう。

　以上、まずサイトマップでサイト全体の組み立てを整理し、構成に基づいて主要ページの情報配置の概略をワイヤーフレームで視覚化するところまで進めてきました。企画で洗い出したサイトの目的をどのようにホームページとして実現していくのか、イメージが見えてきたのではないでしょうか。

　一般的なサイト制作では、ここで作成したワイヤーフレームを基に本格的なデザイン作業に入っていくことになると思います。このデザインがサイト制作で最も重要な部分の一つですが、本書はDrupalによるノーコードでのサイト構築の紹介が目的なので、デザインは保留としておき、次の章から実装に関する部分を順に見ていくことにします。デザイン部分は、Drupalのシステム側でノーコードでカスタマイズできる範囲に留めます。

1.5　Drupalで作るメリット

ここまでで、作りたいWebサイトの要件が固まったね。この情報を元にDrupalを使って早速作って行こうか。

でも、なんでDrupalで作るの？WordPressっていうWebサイト作成ツールの方が本屋に沢山の本が並んでて有名そうだし、他にも沢山Webサイト作るソフトウェアってあるんだよね？

僕は雫ちゃん達にDrupalをおすすめするよ。その理由はね...

　雫ちゃんの言う通り、Webサイトを作るソフトウェアはごまんとあります。例えば、WordPress、Wix、Movable Type、などなど。それぞれに特徴や提供形態が異なります。公開するWebサイトを設置するサーバーまで一緒に用意してくれるものもあります。そんな中で、雫ちゃんたちが作成しようとしている商店街サイトがなぜDrupalがおすすめなのか、理由を紹介します。

　１．無償で使える：Drupalは、オープンソースソフトウェアとして公開されています。ソフトウェアを使うためのライセンス料がかからないため、誰でもソフトウェアをダウンロードして使うことができます。そのため、トライ&エラーがしやすく、必要最低限の費用から始められるため、敷居が低くなります。しかし、ソフトウェアは無料ですが、Webサイトを公開するためのサーバーと呼ばれるものは別途用意する必要があります。

　２．複数人でのサイト管理が容易：Drupalには、標準で優れた権限管理が用意されており、複数のユーザーに適切な権限を与えて、コンテンツを自ら編集して公開できます。最初の段階では、商店街サイトは雫ちゃんのみで管理するかもしれませんが、商店街店舗オーナーに必要な権限を与えて、自身の店舗ページを編集してもらうといったことが可能です。さらに、ワークフロー機能も標準で備わっており、コンテンツ公開のワークフローを組むこともできます。情報の鮮度を上げるには、情報を持っている人が素早くコンテンツを作成するとともに、不適切な記事が出ないように適切なワークフローが設定されていることが肝要です。

　３．セキュリティに優れている：Drupalはオバマ時代のホワイトハウスで採用されるほど、セキュリティに対する信頼性が高いです。Drupal組織内にセキュリティチームを置いており、セキュリティ修正が定期的にリリースされます。Drupalを常に最新バージョンにアップデートすれば、Webサイトがセキュリティ脅威から保護されることが保証されます。

　４．多言語対応に優れている：Drupalは、多言語機能が標準で用意されており、複数の言語でコンテンツを作成・管理できます。言語ごとのURLや翻訳管理システムが標準機能として提供されており、国際化されたサイトの運営に適しています。雫ちゃんが作成する商店街サイトの企画には多言語の要件は入っていませんが、実際に存在する商店街サイトの多くは多言語展開されているサイトが多く、ニーズがあることが伺えます。

　５．柔軟性と拡張性に優れている：Drupalは高度にカスタマイズが可能なように設計されており、小規模なブログサイトから大規模なエンタープライズ級のWebシステムまで対応可能です。巨大なコミュニティから沢山の拡張機能（＝モジュール）が公開されており、拡張すると言ってもノーコードで行えるケースも多いです。雫ちゃん達が着手する最初の商店街サイトは、まだ静的な情報のみであり、Drupal以外のWebサイト作成ツールでも似たようなことができます。しかし、今後、街中にあるデジタルサイネージとの統合や、商店街ファンを集めたユーザーコミュニティのようなポータルなど、DXに向けた拡張を考えた時にDrupalの威力が十分に発揮されます。

1.6　まとめ

　この章では、一般的なサイト企画の提案書を作りながら、作りたいサイトのイメージを具体化するところまでを行いました。Webサイトを作ろうとなった時に、いきなり作り始めてしまうのはバッドプラクティスです。要件を文書化してまとめることで、プロジェクトに関わる人たちが理解でき、同じ方向性を持たせることができます。

　そして、なぜDrupalが雫ちゃんたちの商店街サイトに最適なのかを説明しました。実際に存在する商店街サイトでは、WordPressで作成しているケースが多いようです。WordPressは日本語情報も多く、対応できるWeb制作会社も多いので、そうなることはごく自然だと思います。しかし、商店街サイトに求められることの多い多言語化やユーザー権限周りをしっかりやろうとしたら、Drupalの方がより簡単に対応できるので、これをきっかけに多くの方にDrupalを知ってもらえると嬉しいですね。