はじめてのWEBデザイン、noteの情報を頼りに挑んでみる 【情報整理編】

私はグラフィックデザインを生業としていますが、普段はチラシなど紙面のデザインをする事が多く、WEBデザインに関する業務はまだ一度も経験した事がありません。
ですがこの度、いつも生徒としてお世話になっている音楽教室の先生にHPリニューアルのお仕事をいただいた為、本腰を入れてWEB制作の勉強をする運びとなりました。

ところで、noteには「えっ…この記事無料でいいの？」とビックリするような良質な記事が沢山ありますよね。WEB制作のノウハウ等も、検索すれば数多くヒットします。書籍が必要無いくらいのデータベースが蓄積されているといっても過言ではないかと思います。
そこで、今回はnoteの様々な記事を教科書とさせていただきながら、はじめてのWEBデザインに挑戦する事を決めました。

・・・・・

個人的な下地

仕事としてWEB制作を経験した事は無いのですが、私の個人的なHPは太古の昔に何度か作った事があります。

10年以上前に作って今は遺跡と化している私のイラストサイトです。いつまでもありがとう忍者ツールズ。
インデックスページ（これも今はあまり見かけないですよね…）には「frame使用、IE5↑推奨」の記述があり、ノスタルジックな気分を味わえます。
恥ずかしながら、私のレベルはここからほぼ変わっていません。専門的な事は全く出来ないですし、HTMLのコードですら汚いです。

私個人に託された案件とはいえお金をいただく以上は下手なものを作れませんので、システム面に関しては専門の方にお願いをする事にしました。
よって私が担当するのは実装の部分を省いた、企画・ディレクション・デザインのパートです（欲を言えば簡単な部分だけでも実装に関わりたい）。

ヒアリング後の動きを決める

エンジニアの方にも同席していただいて、まずは音楽教室の先生にヒアリングをしました。
その後固めた大枠の作業フローです。

矢印で段階的になっていますが、ターゲティング〜ポジショニングは行ったり来たりして同時進行で考えました。

また、普段使っているIllustratorやPhotoshopでデザイン提出してもいいのですが、今回は後学のためにプロトタイピングツール『 figma 』を使ってみます。

▼ 1.背景・課題・メッセージの洗い出し

クライアントの基本情報をまとめていきます。

▶ 背景…企業の情報、バックグラウンド。
▶ 課題…直面している・解決すべき事柄。
▶ 打ち出すメッセージ…ユーザーに伝えたいこと。スローガン。

内容は少しぼかしています。

▼ 2.ターゲティング・インサイト

▶ ターゲティング…ユーザー層を分析。理想顧客像（ペルソナ）の設定。
▶ インサイト…ユーザーの思惑、本音を洞察。

設計したペルソナ。

参考資料から簡単な図を作ってきっかけなど洗い出し。

ここからペルソナと照らし合わせて、もっと潜在的欲求の層まで掘り下げられそう。

ギターやピアノ等の楽器を習いたくなる瞬間といえば、「かっこいい演奏を観た」だとか「友人との会話でバンドをやろうと盛り上がった」とか「好きな曲を聴いていて、ふと自分も弾けたらいいなと思った」とか、衝動がトリガーになる事が多いんじゃないかな〜と。まさに自分がそのクチで、どうしても弾きたい曲があり「ベース 音楽教室 ○○駅」で検索をかけ、この教室に辿り着いた経緯があります。その衝動冷めやらぬまま、体験レッスンまでユーザーを導ける道筋が作れたら、もう言う事なしです。

▼ 3.独自性・メリット・ベネフィット・ポジショニング

▶ 独自性…ユニークセリングポイント、持ち味、強み。
▶ メリット…ユーザー視点から見た長所、利点。
▶ ベネフィット…ユーザーが独自性・メリットから得られる恩恵。
▶ ポジショニング…競合と比較して位置づけを明確化する。

ひとまず独自性もメリットも一緒くたにして思いつく限り「この音楽教室の強み」をtrelloにだーっと書き出した後、分類していきました。

独自性・メリットだけではなくインサイトも振り返りながらベネフィットに変換していきます。

ポジショニングでは、近所にある競合の強み／弱みをリサーチした後、ポジショニングマップに起こしていきます。2軸はインサイトから抽出。

近所にこんなにも音楽教室があったとは…。

▼ 4.情報・キーワードの整理・順位付け

ここまでのプロセスから得たキーワードをマトリックスにまとめていって、優先順位をつけていきます（まだ出来てない）。

これらの情報をもとに、サイトマップ・ヘッドコピー・ライティングを練っていきます。

参考にさせていただいているnote

WEBデザインに係る前段階において何が必要不可欠となるのか、プロセスを考えるにあたってnoteの記事を沢山参考にさせていただいております。何が分からないかも分からない状態で、noteの情報にかなり助けられています、勝手ながらありがとうございます。

・・・・・

今回はここまで。
自分が音楽教室のいち生徒である事によって、教室の独自性や強みは深層まで把握できていると思っています。それらを、今回のHPリニューアルでしっかりと見える化していき、先生や教室の良さをユーザーに理解してもらわなければなりません。

マーケティングのパートをサラッと書いていきましたが、まだ時間をかけて練っている最中です。戦略、意図、設計、コンテンツの土台がゆるゆるだと『デザインした』とは言い難いものが出来上がってしまうので、慎重にやっていきます。

次回はデザインに関わってくるトンマナや、figmaを用いてラフを作ることに挑みます。あまり馴染みがないUIなどのワードにも強くなりたい。おすすめのnoteやご指摘ご助言等いただけると、とても喜びます！