「ウェブサイトのつくり方」WCK Meeting vol.59 レポート

2018年4月28日(土)「ウェブサイトのつくり方」WCK Meeting Vol.59 が開催されました。

「かんたん、誰でもできる。」をサブタイトルに冠し、「ウェブサイトのつくり方」というド直球なテーマで行われた今回の勉強会。お申し込み受付開始から多くの反響をいただき、当初20名だった定員を大幅増員、会場を急遽変更して、計32名の方にご参加いただきました。

今回の勉強会で扱ったのは、手を動かしてウェブサイトを作る前段階の部分。
デザインツールや html には一切触れず、座学とワークを通じて、ウェブサイトの役割や伝えたい情報を伝えるための企画・設計について学びました。

---

前半:伝えたいことは何? どう伝える?

勉強会の前半では、ウェブサイトで伝える内容とその伝え方について、ウェブクリエイターズ高知代表の坂上北斗さん(株式会社メディア・エーシー)にお話いただきました。



ウェブサイト必要ですか?

SNSや便利な無料ツールが揃う中で、改めてウェブサイトを作る意味やその役割を考えてみよう、と坂上さん。
時系列順に情報が流れていってしまうSNSやブログに対して、ウェブサイトでは発信者が伝えたい情報や行動して欲しい内容を体系的に構成することができます。サイトを見る人は、いつでも何度でもその情報へアクセスできるという特徴があります。

「そもそもウェブサイトって必要ですか?」
アンケートでも、印象に残ったフレーズとして挙げてくださった方の多いこちらの問いかけ。ウェブサイトを通して何を伝えたいのか、続くセッションやワーク、ひいてはウェブサイトを作る前に「考えること」の大切さに気づかせてくれるものでした。

強みを魅力に変えるメッセージづくり

Wix や Jimdo、ペライチなど、誰でも簡単にオシャレなサイトが作れるサービスは数あれど、「なんだかうまくいない…」と行き詰まってしまう理由に、見た目に惑わされて行き当たりばったりで作ってしまうこと、本来の目的から離れてしまうことが挙げられました。
1つめのワークでは、ウェブサイトを作る目的やゴール=「どんな人にどんな行動をとってもらいたいか」を書き出しました。これを明確にしておくことで、どんなサービスやツールを使ってもブレない軸ができるのだと感じられました。

続いては、サイトで伝えたい強みをリストアップし、さらに読み手の言葉に変換するワークを行いました。自分の伝えたいことはスラスラ書き出せても、相手の言葉にするとなると、手が止まってしまう方も多かったようです。他所が輝いて見えて、特筆すべき強みが見つからない…という場合には、今いるお客さんにヒアリングしてみるのも有効だと教えていただきました。

受け手の関心度に合わせて情報を伝える順番を考えるワークでは、メッセージを組み立てる上での新たな視点を得ることができました。

作って終わりにしない。運用についても考えよう

最後のワークでは、ウェブサイトの中だけでなく、どうやってサイトを見に来てもらうのか、見てくれた人にどう対応するのかといった運用体制も視野に入れた考え方についてお話いただきました。全てを自前でやる必要はなく、得意な人に依頼したり、時にはやらないという判断をすることも大事、とのアドバイスが印象的でした。

事例を交えた解説と、かわいいイラストやホワイトボードを使った説明で、わかりやすい!との声が多く聞かれました。4つのミニワークを通して、ご自身のサイトへの思いや考えを深められた方も多かったのではないでしょうか。

- - -

後半:どうやってつくるの?

後半では、伝えたい情報やメッセージをウェブサイトの画面へ落とし込むための設計方法について、WCKの実行委員でもある中野玄さん(HOOP Design)にお話いただきました。


ウェブサイトって何だろう

情報を集めてインターネット上に載せるだけでは、ウェブサイトの目的を果たすには不十分です。
ウェブデザイン歴18年(!)の中野さんが考えるウェブデザインとはーーずばり「問題解決のための情報設計」であると解説いただきました。

ウェブサイトは、伝えたい内容(=コンテンツ)とそこへの道しるべ(=ナビゲーション)で出来ている、と中野さん。さらにコンテンツは、目的によって以下の3つに分類できることを教えていただきました。

  1. 興味を持ってもらうためのコンテンツ
  2. 行動してもらうためのコンテンツ
  3. 会社概要など事実を伝えるためのインフォメーション的コンテンツ

これらのコンテンツを適切に構成することが、発信者の目的を達成し、受け手にとっても分かりやすく使いやすいウェブサイトづくりにつながるということでした。

コンテンツ設計の指針「概念図」をつくろう

座学に続いて、実在するお店のサイトリニューアルを題材に、コンテンツの設計から画面設計を行うグループワークが行われました。

まずはサイトオーナーの希望や売れ筋商品などのヒアリング情報をもとに、サイトに掲載するコンテンツがそれぞれどのような性質をもつのか、どのように分類できるかを視覚化した「概念図」の作成にチャレンジしました。

ツリー状のサイトマップやコンテンツリストは見たことがあっても、概念図を作った経験のある方は少なかったかもしれません。ネットショップ、実店舗、新設部門にブランド商品などなど、複雑な内容に苦戦しながらも、オーナーの希望=ウェブサイトの目的とコンテンツに向き合い、活発なディスカッションが行われている様子が印象的でした。

トップページを設計してみよう

続いては、先ほどのワークで作った概念図をもとに、トップページに何をどのように配置するかを決めるワイヤーフレームの作成を行いました。

ワークに先立って、ウェブサイトの中でトップページが果たす4つの役割について、実例を交えて解説いただきました。

  • 表紙としての役割
  • ストーリーを伝える代表ページとしての役割
  • コンテンツの目次となる一覧ページとしての役割
  • 使う人に検索の手段を与える役割

また、ワイヤーフレームを作成する際の注意点として、ウェブサイトで使用するシステムで出来ること・出来ないことを予め理解しておくことで、無理のない効率的な設計ができると教えていただきました。

この日のワークの集大成として、各グループ時間いっぱいまで積極的な意見交換と試行錯誤が行われました。
惜しくも時間切れとなり、ワイヤーフレームの完成には至らずとも、グループワークを通じて考え方のヒントや新鮮な気づきを得られた方も多かったようです。

- - -


前半・後半を通して盛りだくさんの内容で、「もっとじっくり学んでみたい」「また参加したい」との声も多く聞かれ、熱気あふれる充実した勉強会となりました。ご参加いただいたみなさま、登壇いただいた坂上さん、中野さん、ありがとうございました!

写真撮影:上野洋平(notch

- - -

ブログでご紹介いただきました

「こんな勉強会に行った」「ここが印象に残った」など、簡単なもので結構ですので、ブログやSNSで取り上げていただければ幸いです。ご連絡をいただければ、こちらのレポートページやフォローアップメールで紹介させていただきます。

当日のツイートをまとめました


  • 前へ
  • indexへ
  • 次へ
UP