Webサイト制作、どこから始めたら？XMindでマインドマップを作ってみれば。
久しぶりの更新となりました。
今回は、Web制作はもちろんビジネスモデルの確立まで、僕が頼りっぱなしの小道具「XMind」の紹介です。あわせてWebサイトを企画する方法にも触れてみたいと思います。
さて、時々いただく質問で、「Webサイトを作りたいけど、始め方がわかりません」というのがあります。
初心者さんにとって、作りたいWebサイトのイメージをなんとなく浮かべることはできても、どんな内容にすればいいのか、どこから制作を始めてどこを終わりにすればいいのか、具体的に企画するのは難しいことなのでしょう。
なかには、やりたいことが多すぎて、文字通り、どこから手をつければいいのか分からない状態の人もいます。
ただしかし、実は、僕も同じで、最初から上に挙げたようなことを全て明確にできているわけではありません。いつも始まりは漠然としていて、そこから順に少しずつ頭の中を整理していくことで、やっとこさ、どんなWebサイトをどんな制作方法で実現すればいいのか分かります。
XMindは、まさにそのとき使っているアプリです。
ウェブさえ
XMindとは？
XMindは、マインドマップを楽しく手軽に作成できるアプリで、こちらで無料配布されています。
XMindを見つけたときは震えました！
ワナワナ…こんな便利なアプリを見過ごしていたなんて！
今まではfreemindという同じくマインドマップを作成するアプリを使っていましたが、最近新しいMacに環境を変えたところ、色々と妙な挙動が目立ち、代わりになるアプリを探していたら見つけたのです。
無料なのに、マインドマップを作りやすくする機能が満載で、freemindに比較して見た目も操作性も抜群に優れていると感じました。
今回はそんなXMindの機能を簡単に紹介するのと一緒に、Webサイトの企画時における「5W2Hの掘り下げ」「サイトマップの作成」「コンテンツのアウトラインの構成」ってのを実際にマインドマップを作ってやってみます。
無料プレゼント／【このブログだけで限定配布】
これを知らずにHPを作るとやばいよ。
実績14年のプロの目線で27個のお約束をまとめました。
記事を読む前に忘れずダウンロード！
ところでマインドマップって？
マインドマップは、日本語に直訳すると「思考の地図」って感じですかね。「一枚の紙の上に頭の中をそのまま投影してみよう！」と試みた絵図で、こんな感じに描かれます。
まずは、真ん中にテーマを書込み、そのテーマから浮かぶ言葉やイメージを枝分かれに派生させていくことで、頭の中を地図化し、脳内にとっ散らかったイメージを整理しながら、新しいアイデアの発掘を楽しめます。
マインドマップは色々な種類の企画や計画に利用することができ、例えば、旅行のときは観光プランを組んだり、持っていく荷物の把握などにも使えます。
Webサイトの制作過程でも利用できる機会は多く、まずは僕なりのWebサイト企画段階におけるマインドマップ活用法から紹介してみますね。
Webサイトの企画
新しくWebサイトを作り始めるときは、当然ですが、どんなWebサイトを作るのか具体的にイメージできていないとだめですね。
誰に向けてのWebサイトで、どんなコンテンツや機能が必要なのか。予算や納期に収まる制作方法とスケジュール。Webサイトを作ることによって得られる利益。などなどを事前にちゃんと明確にできていなければ、どう制作を進めていけばいいか、どんなWebサイトを目指せばいいのか分かりません。
しかし、初心者さんにとっては、ここが難しく、頭の中に「こんなWebサイトにしたいな〜」というイメージがあるにはあるけど、それをどうまとめていけばいいのか分からないって人が多いです。
そこでおすすめなのが、まずWebサイトにとっての「5W2H」を考えるところから始める方法です。
- 5W2Hとは？
「Who」「When」「Where」「What」「Why」「How」「How much」の頭文字を取りつなげると「5W2H」になりますね。(上図は、How muchが抜けています）
日本語にすると、「だれ」「いつ」「どこ」「なに」「どのように」「いくら」でとなります。
Webサイトにとってのそれぞれを掘り下げていくことで、Webサイトにどんなコンテンツや機能が必要になるのかを知る手がかりとなり、同業他社と差別化できる面白いアイデアを生みだすことができます。
XMindでのマインドマップ作成手順
XMindでマインドマップを作成する手順は以下の通りです。
- 1.テーマを書込む
まず最初に、こんなふうに真ん中にドカンとWebサイトのコンセプトを書込みます。
今回は、例として「魚をオンラインで販売するWebサイト」を想定しています。最初から「富山県の漁師から魚を直買できるサイト」というコンセプトが決まっていたので、それを書込みました。
しかし、まだこの段階では「これだ！」と書込めるほどにコンセプトが固まっていないことがあります。（どちらかというとその方が多いかも）
今回の例でいえば「魚を販売するサイト」程度にしか決まっていない場合です。その場合は、それだけを書込んで始めてもらって構いません。5W2Hのそれぞれを掘り下げていく過程で、徐々にオリジナルのコンセプトを浮き上がらせることができるからです。言い換えれば、コンセプトを際立たせるために5W2Hを掘り下げることが必要になるのですね。
- 2.トピックを増やす
テーマを書込んだあとは、テーマから連想できるイメージを言葉や画像で増やして（＝マッピングして）いきます。XMindではこのマッピングできる言葉や画像を「トピック」と呼んでいます。
トピックをマッピングする方向は自由です。枝分かれ、階層を深く、もちろん削除も自由で移動もできます。トピックを増やす・減らす・移動を同時に行いながら、脳内を整理し新たなアイデアを創出するのが目的です。
それではやってみた！！始まりの図
テーマを中央に、5W2Hが囲んでいる様子です。ここからそれぞれを掘り下げていった結果が次の図になります。
ひとまず完成
5W2Hを掘り下げた図です。もっとも今回のこの記事用に作ったものなので、かなり簡素で見やすくしていますが、面白そうなアイデアが色々とマッピングされていますよ。
5W2Hのそれぞれをクローズアップしてみます。XMindの便利な機能もいくつか触れてます。
- What（なに)
今回はひとまずWhatから始めてみました。
サイトで「何」を販売するのかってことですね。商品だったり、サービスだったり、または情報だったりもします。
今回は魚屋ですから、もちろん魚が商品になるわけですが、もっと掘り下げ、商品の特長を掴みます。
XMindでは、言葉だけでなく画像もトピックにすることができます。写真を使うと分かりやすさが増すのと、見た目にも楽しくなりますね。（白エビの掲載可能な画像が手に入らなかったのでボイル海老になってます。ホタルイカの写真は 写真提供：ペイレスイメージズです）
結果として、富山県・新鮮・安全をキーワードに、具体的な魚の種類や姿もマッピングされています。鰤・白海老・ホタルイカは富山県ならではの名産ですよね〜。
- Where（どこ）
Whereでは、場所に関連する強みを考えます。
今回の場合は富山県という産地が強みになります。そこでしか獲れない新鮮な魚を産地から直送で全国の家庭に届けます。しかし、それには先に解決しておくべき問題もありそうです。
新鮮なまま魚を届けるためには、特別な発送方法が必要になります。魚のサイズに合わせた発泡スチロールや、冷却のための氷も特注で用意しなければならないでしょう。また、冷蔵品を送るのは通常とは違い送料も異なってきます。
このようなWebサイトの制作と平行して考えるべき重要な問題点には、XMindのマーカー機能を利用して「？」の印を付けておきました。
XMindには、下図のように種類豊富なマーカーが用意されています。トピックの内容に適したマーカを残しておけば、どのトピックがどんな意味を持っているのか一目で分かりますね。
- Who（だれ）
Whoでは、Webサイトのお客さん像を具体的にイメージしてみます。Webサイトのターゲットとも言い換えられます。
今回の場合は、全国の家庭がターゲットです。食の安全に意識が高い主婦や、たまに贅沢な食材を魚のアテに楽しみたい独身男性などが含まれます。
しかし、さらに考えてみると、お歳暮や誕生日などの贈答品を探している人も対象になりそうです。その時期でしか獲れない旬の魚を産地からの直送でプレゼントするなんて粋だと思いませんか？
贈答品として送るためには、それ用の箱や熨斗（のし）が必要になりますね。ここでも、忘れないようにマーカーで印を付けておきました。
さらに、トピック同士が目立つように囲まれているのが分かりませんか？これはXMindの「囲み」という機能で、関連するトピック同士を囲み視覚的に強調することができます。
- When（いつ）
Whenでは、時間に関わる自社の強みを考えます。
クリスマスやバレンタインなど季節関連のイベントを活かせないか？もしくはネットショップの即日配達や本日限りのタイムセールなども時間と関連する自社のウリになりますよね。
今回のサイトでは、その日に獲れた魚をその日のうちに届けることを強みとしています。
マインドマップにマッピングされたトピックの流れに沿って説明すると、毎朝8時に漁から帰ってきた漁師が自らWebサイト上で捕れた魚の数や種類を発表します。その内容はその日の漁の穫れ高しだいです。毎朝、数に限りがあり、種類も違う魚に対して、正午12時までの注文は、その日のうちに発送されます。近郊であれば夜の食卓に、最遅でも次の日の朝食のおかずには間に合います。
ただし、この流れを実現するには、漁師が朝獲れた魚をWebサイト上で発表できる仕組みが必要になります。漁の現場で捕れた魚をスマホで写真に撮り、それをすぐにWeb上にアップロードし魚の穫れ高も含めて更新できる仕組みです。マインドマップを見ると、その仕組みの候補にCMSのWordPressが挙がっているのがわかります。
XMindには、このような、流れを持つ一連のトピックをまとめてひとくくりにした上で、注釈や要約を加える機能があります。複数のトピックに文脈を持たせたいときに利用するといいでしょう。
- How（どのように）
Howでは、どのように商品を届けるのか、を考えてみましょう。
英語塾のマンツーマンレッスン。スカイプによるオンラインレッスン。どちらも同じ商品ですが提供方法が異なりますよね。商品の提供方法が強みになりそうなら、掘り下げてみるべきです。
今回の例では、定期購入を採用してみてはどうかと考えました。一見さんによる一度限りの購入よりもリピート購入を狙えるからです。
リピート購入は、低コストで高い利益を確保できます。毎朝、隔週、1ヶ月、のように定期的に漁師チョイスの旬な魚を届けます。定期購入には会員登録が必要になります。それもトピックで残しておきました。
- How much（いくら）
How muchでは、商品の値段が自社の強みになるかどうかを考えます。
今回の場合は、直接、漁師から購入するので、魚そのものの値段はスーパーの店頭に並ぶ値段の8割くらいになります。しかし、発送料などを含めると、結局トータルでは、スーパーとあまり変わらなくなってしまうでしょう。そのため、値段をウリにはできません。
それなら、「競り（せり）」の要素を取り入れてみてはと考えました。魚市場で毎朝行われているアレです。
朝捕れの魚を毎日一種類だけ、ゼロ円から入札していくことができる、いわゆるオークションの仕組みです。全部の魚の値段を下げることはできませんが、数に限りを持たせ、話題になることを見込めば利は充分に得られます。
また、競りに参加するための資格として会員登録を必要にすれば、一時的なお客さんだけでなく、長期的に販促をかけられる顧客を得ることにも繋がります。
ただし、競りや会員登録の仕組みを用意するには、高度なシステム設計が必要になります。システムの基盤となるプログラム選びやセキュリティの問題など、検討すべきことをトピックとして残しておきました。
また、ここでの会員システムは、定期購入の会員システムと共有することになります。
XMindでは、離れたトピック同士を関連づけられる機能が用意されてます。それを使って矢印で繋いでおきました。繋がれた双方が互いに関連しあっているのが分かりますね。
- Why（なぜ）
- なぜ、お客さんがあなたのWebサイトを選ぶのか？
最終的にこの質問へ具体的に答えられない限り、お客さんに選んでもらうことはできませんが、いままで、きちんと他の4W2Hを深く掘り下げられていれば、答えるのは難しくないはずですよね。ってことで、今回はマインドマップにする必要がないと判断し、割愛させていただきました。
以上が、5W2Hの掘り下げです。Webサイトの特色を7つの側面から際立たせたおかげで、必要なコンテンツや機能を洗い出すのに大きく役立てられそうです。
サイトマップ
XMindでは、サイトマップを作ることもできます。
以下のように、トピック同士が繋がる構造を選ぶことができます。
5W2Hのマインドマップでは主に「マップ(時計回り）」を使ってきましたが、「組織図（ダウン）」にすると、このようにサイトマップの形式になります。
5W2Hを掘り下げていく途中で必要なコンテンツに気付けば、同一のキャンバス上にサイトマップとして残しておくといいですね。
コンテンツのアウトライン
XMindは、コンテンツのアウトラインを整理するのにも役立ちますよ。
僕は、よくブログ記事を書くときの構成に使っています。
ちなみにこれが今回の記事のアウトラインになります（見やすく簡素化しています）。左にマインドマップを作っていくと、自動的に右にアウトライン化してくれます。ある程度、構成がまとまったあとで、このアウトラインを見ながら文章を書けば、終着点を見失わずに書き進められます。
また、アウトラインを把握することは、HTMLによるマークアップ時に正しく文書構造を反映することも手伝います。
便利なテンプレート
さて、いかがでしたか？
ここまでは僕の勝手な使い方を紹介してきましたが、他にもXMindは色々な場面で役立ちます。
XMindには最初から用意されているテンプレートがあります。それらを利用すれば、Webサイトを制作する上でも重要な「プロジェクト管理」、「スケジュール管理」などが捗ります。
「SWOT分析」のような専門性が高いテーマのテンプレートも用意されているので、これを機会にぜひ試してみてはいかがでしょうか？
それでは最後にいくつか使えるテンプレートを紹介して今回の記事を〆させていただきます。
- プロジェクトプラン
プロジェクトをスタートするのに必要な要件がすでにトピックとして用意されてます。
- プロジェクトダッシュボード
複数のプロジェクトを一覧で管理できます。
- 会議管理
先に話し合う要件をトピックで用意しておけば、ムダな時間を減らせそうです。
- SWOT分析
5W2Hとは異なるアプローチの方法での分析です。Strength(強み)、Weakness(弱み)、Opportunity(機会)、Threat(脅威)のそれぞれを掘り下げます。（こんどやってみましょうかね）
- スケジュール
魚骨図を利用して年間スケジュールを管理します。
- 週間計画
こうしてマインドマップにしておけば、1週間を無駄なく効率的に過ごせるかもしれません。
まとめ
はてさて、他のディレクターさん達はどんな方法で企画を進めているのか、具体的に知りたいところです、本当は逆に。（教えて！）
読み終わったらシェア！
ウェブさえの無料サービス
どちらでもお好きな方を。もちろん両方でも。
