見出し画像

デジハリの中間課題を全力でやってみた～ワイヤーフレーム編～

JUN／Webデザイン勉強中

お久しぶりです。Webデザイン勉強中のJUNです。
前回の投稿から少し間が空いてしまいましたが、勉強は続けています！
主に取り組んでいたのはデジタルハリウッドのWebデザイナーコースの「中間課題」、デジタルハリウッド by LIGの独自講座の「デザイン集中講座」です。「デザイン集中講座」については別の記事を書きたいと思っているので、今回は「中間課題」について振り返ります。

今回、と言いましたが「ワイヤーフレーム編」「デザイン編」「コーディング編」「まとめ」と４回に分けて投稿予定です。
この「ワイヤーフレーム編」は中間課題の内容、LP制作をするにあたっての情報収集からワイヤーフレームを実際に制作するまでの流れを書いています。

中間課題を早く終わらせて、自主制作に力を入れるのも一つだと思います。私の場合は、過去の課題を通して「自分が制作をしたものをトレーナーさんにチェックしてもらい、評価をもらう貴重さ」というのを感じていて、スクールの残りの課題は「中間課題」と「卒業制作」だと考えると、全力でやるしかないな！と思って取り組んだ様子になっていると思います！

デジタルハリウッドのWebデザイナーコースの中間課題

デジハリの中間課題には自身の学びたい内容や状況に合わせて、主に３種類から選ぶことができます。「指定サイトのコーディングのみ」「指定サイトのデザイン＋コーディング」「オリジナルサイト」の３種類です。
学習の進捗状況も余裕があったので「オリジナルサイト」に挑戦しようかと思っていたのですが、他の受講生の方が「オリジナルサイトだと自分の得意なものになってしまうので、あえて条件があるものに挑戦する」とTwitterで話してくれたことに刺激され、「指定サイトのデザイン＋コーディング」を選びました。自分で思うのですが、結構Twitterでもらった意見に影響されがちなとこあります…笑 でも、条件がある中で制作を進めるというのは、実際の仕事でも同じだと思うので、今回色々模索しながらできたことは本当に良かったと思っています。

「指定サイトのデザイン＋コーディング」は「スグ食べ」という野菜宅配サービスのランディングページ制作です。ヒアリングシートが用意され、ターゲットや訴求したい内容、ページイメージが文章で指定されています。他にもテキストが用意されていますが、自身の制作に合わせて追加や修正OK、コンテンツ自体も足してOK、画像は自分で探すようになっています。
PCサイトとスマホサイトを制作、レスポンシブに対応することも条件です。

中間課題では「制作スケジュール」「ワイヤーフレーム」「デザイン」「コーディング（完成）」の4回トレーナーさんにチェックしてもらいます。
「制作スケジュール」についてはまとめ編で書きたいなと思うので、ここからは私が具体的にどのように進めたか紹介します。

ターゲットの設定

ヒアリングシートである程度の条件の指定はされていますが、より説得力があり、コンバージョンにつながるLPサイトを制作するには…と考えた結果、情報整理は「3C分析」を意識して進めました。3C分析は「Customer(市場・顧客)、Competitor(競合)、Company(自社)」の3つのポイントでマーケティング環境を分析する方法です。実際に私が行ったことは分析というにはほど遠いレベルですが、順を追って考えることで、ワイヤフレームを作る前にどのような内容を入れたいか整理できました。

まず最初は「Customer(市場・顧客)」を考え、ターゲットの深堀りを進めました。いわゆる「ペルソナ」の詳細設定までは出来ていないのですが、検索したり、本を読んだり、自分や自分の周りの人なら…と考えてみた結果、ターゲットに対して下記のようなイメージを設定しました。（ヒアリングシートに記載されていた条件は省いています）

30代～40代の主婦。首都圏在住。
食事にはある程度お金をかける余裕はある。
子供には身体に良いものを食べさせたい。
夫に健康にいてほしいので、野菜は栄養価の高いものがいい。
身体に良い＝できるだけ新鮮なもの
料理をした時に、見た目もきれいで美味しそうなものがいい。
せっかくならちょっと変わった野菜も取り入れたい。
スーパーで売っているものじゃ物足りない。
+αの価値にこだわりたい。
コロナにも注意している？対面なしの置き配があるといいかも。
サステナブルとかSDGsとかにも興味ありそう。
人にも地球にも優しい取り組み。
コロナ禍で家族との食事を大切にしたい。
新鮮な野菜を買うことが本当の目的ではなく手段。
家族に栄養価があって安全なものを食べさせたい。
家族の健康を守りたい。だから安心なものを買いたい。

当時メモしていた内容をそのままコピペしてきたのですが、「こんなこと考えていたんだ…」とすでに懐かしいです笑
当時の自分なりに「何故購入するのか」と深堀りした結果、下段に辿り着きました。今だったらもっと資料集めて、しっかりと論理的なターゲット分析するだろうなぁと思います。

また、課題として割り切るのではなく「実際に存在するサービスのサイト」にできるだけ近いものを制作しようと思っていました。コロナ禍で野菜の宅配が売り上げ的に伸びていることはニュース等で知っていたので、コロナ禍に対応した内容を考え入れています。
ちなみに、さらにサステナブルあたりの内容を入れようとすると、とてつもなく長いLPになりそうで、サステナブルは後に諦めることになります…せっかく農林水産省のページとか見ていたのに…　↓
https://www.maff.go.jp/j/press/syouan/hyoji/210331.html

競合サイト比較

次に「Competitor(競合)」を調べること、そして比較することを行いました。ヒアリングシートにも記載はあるのですが、3サイトのみだったのでもっと比較して、参考にしたいと感じたので調べています。参考にしたサイトは下記になります。正確には私のメモに残っていたサイトで、実際にはもうちょっと色々検索しながら見ていた気がします。

https://my-best.com/1980
（【2021年】野菜宅配のおすすめ人気ランキング21選【徹底比較】）
https://www.tabechoku.com/（食べチョク）
https://www.radishbo-ya.co.jp/shop/（らでぃっしゅぼーや）
https://naturalharmony.co.jp/takuhai/（ナチュラルハーモニー）
https://coconomi.shop/（ココノミ）
https://www.on-the-slope.com/（坂ノ途中）
https://www.millet.co.jp/（ミレー）
https://www.radishbo-ya.co.jp/brand/fuzoroi/（ふぞろいラディッシュ）
https://www.oisix.com/（Oisix）
https://www.yasai-oukoku.com/（九州野菜王国）
https://welcome-seikatsuclub.coop/lp/（生活クラブ）
https://takuhai.daichi-m.co.jp/（大地を守る会）

上記のサイトについて、それぞれのサイト印象やサービス・コンテンツの特徴、価格帯のイメージを比較しました。

■ざっくりとしたポジショニングマップを作って、どのあたりの層を狙うか決める際の参考に。お得感を出すのか品質重視なのか価格帯のイメージ作りがサイトによって分かれていると感じました。
■各サイトがどのようなコンテンツがどの順番で掲載されているかをエクセルシートにまとめました。メインビジュアル→メッセージ→→商品紹介→おすすめポイント→実績→農家の声→消費者の声→商品紹介という感じです。各サイト書き出してコンバージョンへの流れを意識することで、後のワイヤフレームでコンテンツの流れを考える際に参考にしました。
■「無農薬」等の品質や「送料無料」等のサービス面など、各サイトの取り組みを表にしてまとめました。品質で勝負しているところは送料無料にしているところ少ない？とか、「置き配」対応している所が少ないから狙い目かも…など先に作っていたポジショニングマップと比較し、実際にどんなコンテンツを掲載するかの参考にしました。

余談ですが、比較して感じたのが今回課題で出されたサイトは「食べチョク」がモデルですよね。実際に配布テキストに誤って名前出てきますし、配布ロゴとかも似てますしね笑

自社の強みやアピールポイントを設定

最後に「Company(自社)」について設定します。ターゲットの設定や競合サイトの比較を通して、今回のLP制作ではどのポイントを打ち出していけばよいのかというのを考えていきます。ヒアリングシートにクライアント側の要望も記載されていますが、ここで自分でしっかり考えておくことでワイヤーフレームやデザインに進んだ時に「何故こうしたのか」という理由がしっかり説明できるものになると思います。
私が設定したものは下記です。これもメモっていたもののコピペです。

ちょっといいもの（高級感まではいかない）感を出す。
ナチュラルな感じかつ安っぽくない洗練されたイメージを出したい。
デザインは「坂ノ途中」が一番イメージに近いかも。
こだわりが詰まっている感じ。見せ方にひと捻り入れたい。
ただし無農薬、有機野菜のイメージを損なうほどトリッキーにしない。
産地直送、24時間以内お届けのスピードは他社と比べてアピールポイント。
野菜の安全性へのこだわりや、新鮮さを保つためのスピードなど農家さんと近いサービス。
農家さんの声やこだわりが伝わりやすいサイトにしよう。
農家さんとの近さなら「食べチョク」が特に参考になりそう。
お届けのスピードにこだわるなら置き配サービスも用意してアピール。
送料無料が有効そうだけど品質重視のサービスなので芯がブレるかも。
こだわりの野菜やスーパーで買えないあえて宅配を選ぶならば、旬のもので少し変わった野菜も入っていることアピールしたい。

自分用のメモなので書き方が雑です…他の項目もそうですが、実際にクライアントに伝えて納得してもらうためには企画書で見せると思うので、そこはちょっとサボってますね…クライアントへの伝え方も重要な要素だと思うので、次回から作らないとなって思います。

そしてこの強みを考えると同時にメインとなるキャッチコピーも考えました。実際は一度ここで考えたものをワイヤフレーム作成中にちょっと変えてるのですが、最終的にこうなりました。

「あなたへ　今スグ　やさいのやさしさを」
■家族の健康を守りたい購入者とその先の家族も含めて「あなたへ」
■産地直送のスピード感や新鮮さを表す「今スグ」
■無農薬や有機栽培の安全性と農家さんの想いが詰まっていることをアピールする「やさいのやさしさ」

ここまで考えてやっとワイヤフレーム作成に突入です。

ワイヤフレーム作成

ワイヤーフレームについては手書き→Adobe XD→Photoshopの順で作りました。
今思えばXDで最後まで完成させても良かったなぁって思います。この後のカンプ作り含めて、どこまでXDで作ればいいのかわからず進めてしまいました。他の方がトレーナーさんに確認していて、あとでXDで作成してもいいのかと知り、自分自身XDの操作に慣れてきたこともあり、今後はXDをメイン使いしようと思っています。

手書き段階では主にコンテンツの掲載順を整理していました。でも結局XDに起こした後も悩んで、何度も入れ替え作業行っていました…PhotoshopよりXDの方がコンテンツの入れ替え楽ですよね…！
競合サイト比較でメインビジュアル→メッセージ→おすすめポイント→商品紹介までは確定。これまでの流れで農家さんのこだわりや、心理的距離の近さをアピールしたいなと思っていたので、農家さんの声は早めに持ってこよう。変わった野菜があることは下の方まで読んでくれそうな熱心な方向けのアピールで良いかも…などなど。お客さまの声の位置は迷いましたが、私は「最後のダメ押し」的な扱いでお客さまの声とQ＆Aを入れることにしました。

順番が確定してからPhotoshopでの制作に移りました。
実際に作ったものですが、この投稿にいい感じに埋め込めなかったので当時のツイートと添付画像を見ていただければ…！！

画像の②と③のタイミングでトレーナーさんのチェックを受けています。
②をチェックしてもらった際に、キャッチコピーの「やさいのやさしさ」がメインビジュアルでだけ登場し、コンテンツの内容に活かせてないという指摘をもらいました。確かにせっかく色々考えて出したキャッチコピー＝このサイトのテーマなのに、今の私ではデザインだけでは表現できないだろうな…と感じたので③にはそのあたりを反映しています。
ただ③ではそれを意識しすぎて「くどい！」ってなったので笑、④では少し薄めてますね…

そしてこのツイートを見てただいた方は「いきなり画像入ったデザインカンプっぽいもの出てきたぞ…」と感じたかと笑
トレーナーさんにチェックしていただく過程で、今回のワイヤーフレーム課題自体が実際のサイト制作では「ワイヤーフレームとデザインカンプの間くらいに位置するもの」と教えていただき、「画像を入れてみるとさらにワイヤーフレームが変わってくるよ」とアドバイスをもらったので入れてみました。
画像探しなどは次回の「デザイン編」でお話したいなと思うのですが、実際に画像いれてみたら一気にイメージが広がって、硬かったワイヤーフレームに動きが出た気がします。プロは実際に作業始める前に、私が画像入れた段階のワイヤーフレームあたりまでイメージできると伺ったのですが、まだまだそこにはほど遠いレベルです。しばらくはもし先にテキストや入れる画像がわかるのであれば、それがあった状態でワイヤーフレームを作成した方が自分的にやりやすいかなぁと思っています。

ここまで長くなりましたがこれでやっとワイヤーフレームの完成です。
次回は「デザイン編」を書きたいなと思っています。

そして最後に、今回のワイヤーフレーム制作でとても参考にした書籍をご紹介します。

LP制作にあたっての考え方や分析方法、コンテンツ内容の決め方等かなりこの本を参考にしています。Kindle Unlimitedでも読めますし、時間がないよ～って方は前半を読むだけでもかなり参考になります！私自身も他の受講生からオススメしてもらって読みました！

ここまでお読みくださりありがとうございました！
また次回、中間課題の取り組みの続きも見ていただけると嬉しいです！


この記事が気に入ったらサポートをしてみませんか？