TEAM A’s Webデザイン勉強会〜WF制作編〜

こんにちは。Maiine worksデザイナーの木下舞子(@maiineworks)です。

私がサブデザイナーとして参加している女性クリエイターチーム秘密結社Qriousには、TEAM A’sというチームがあります。
Webデザインの実務経験が乏しいクリエイターやクリエイティブ職未経験者が所属し、将来Qrious本メンバーとして活躍できるようになることを目指す修行チームです。私はWebデザインのスキルアップを目指すべくTEAM A’sに参加しています。


毎週金曜日はTEAM A’sの中の人勉強会。
目標は「基礎を理解し1サイトまるごと一人でデザインする」!
これまでテンプレートを使用したWebサイトデザインは数件お仕事させていただきましたが、今回の目標はゼロからすべてオリジナルデザインを一人で作れる様になることです。

雑貨&パッケージデザインがメインのデザイナーが一人でWebサイトまるごと1つ作れるようになるのか…!?
勉強会内容は参加者だけの秘密ですが、今回は公開OKだったので記事にして残しておきます◎

ワイヤーフレームレビュー

これまで数回に渡ってヒアリング編、ディレクション編を学んできました(内容は中の人の秘密です♡)。
今回から実際に手を動かしてサイトを作っていく実践授業に入りました。今回の勉強会は作ったワイヤーフレームのレビュー会。
自分のワイヤーフレームの意図を説明した後、先生(Qrious本メンバー)につっこまれて答える形式。自分以外のチームメンバーのレビューも見られ気づくことの多い会でした。

私は自分がレビューされた内容の他、先生が他メンバーに質問したこと=重要な点だと考え、どんな質問をされているのかを注目して聞かせていただきました。

自分が作ったワイヤーフレーム

pdfはこちら
(見たい人いるのかわかんないけど自分の記録として残しとく)

想定しているお店

レビュー!

先生に質問されたこと、それについて考えたこと

・最初に大きくビジュアルを持ってきたのは?
→お店の特徴である「グラデーションカラー」を見せたい。また、お店のスタイルに共感する方に来店していただきたいのでサイト全体で文章よりもビジュアルに重きを置いている。

・INFORMATIONの位置はなぜ下なの?
→サイト全体はまずビジュアルを見せたいから。また、ターゲットが10〜30代前半のためSNS慣れしている。リアルタイムな情報はSNSで得ることが多いだろうから優先度は低いと考えた。

・予約システムはHotprpper beauty?何が最適か?
→今後、店名で指名される店になっていきたい。今のお客様はほぼInstagram経由。自社ネームバリューを高めるためのサイト制作なのでHotprpper beautyは離脱し月額で使える予約システム(beauty-merit)を提案する。
近々2店舗を考えているので予約管理が煩雑にならないためにもシステムは必要だと考える。←これは頭から抜けてて説明で言えなかった

レビュー回通して上がった質問

先生が質問されていた内容はいろんな言葉があったのですが、いくつかにまとめてみました。大事なこと凝縮。。。

・そもそもこのサイトはなぜ必要なのか?どんなコンセプトで制作するのか
→目的が決まらなければその後の工程が全部決まらなくてコンセプトがブレブレのデザインに。修正、一から作り直し、やり直しの嵐にもなりかねない…。作る意味が無いならば作らないこと、代替手段を提案するのもこちらの仕事。


・なぜそのコンテンツはそこにあるのか?
→上のコンセプトが決まらなければ構成も決まらない。予約させたい?買わせたい?ブランディングしたい?目的によってコンテンツの位置やサイズが決まる!


・情報量はターゲットにとって適切か?
→新規のお客様が見るのか、ブランドのファンが見るのかによっても必要な情報は異なってくる。誰に、何を伝え、どうなってほしいのかに沿って情報を掲載すること。


・なぜ下層ページを作る必要があるのか?トップページの情報とどう違うのか?
→下層ページを作る=コストと時間がかかる。それをかけてまで作る理由はなんなのか?どれくらいの情報量をどこに掲載するのが最適なのか(そのサイトを見る人がどんな人なのかにもよりますね)。


・このサイトのゴールは何か?そのとおりユーザーが行動できる作りか?
→予約してもらいたいならそのようなボタンの作りになっているかとか。コンセプトつめておかないとブレる。やっぱり最初が肝心。

・ユーザーにとってほしい行動には余分な手間がかかる作りでないか?
→LINEお友達登録するのに2つも3つもリンクを踏まないといけないとか。やってほしい行動にはできるだけ手間なくできる設計に。逆にしてほしくないこと(解約とか)は、逆手に取って手間かけまくる作りになってることが多い(Amazonとか)。

・お店の特色が出る作りになっているか?
→お店のウリは価格?技術?立地?人柄?売りたい内容は上の方に大きく。このお店のここがすっごい良いよ!ってターゲットがわかるように見せること。ワイヤーの設計の時点で特色が出せるサイトかどうか決まる。


・数の増減/レスポンシブに耐えられる作りか?
→PCでは良い感じに見えるけどスマホになったら配置が崩れるとか、コンテンツが1つ増えたら配置がおかしくなるとか。Webは紙と違ってデバイスによって見え方が変わる。それも加味して考えること。


・このワイヤーフレームは誰に向けたものなのか(チーム制作か、一人完結か)
→一人完結なら自分がわかればOK。チーム制作で他の人に渡すWFなら誰が見てもわかるレベルに作り込んでおかなければいけない。動きは?色は?更新は?リンクどこに飛ばすの?テイストどんな感じ?などなど。でも指示しすぎても作業しづらいから良い塩梅が大事。。。

最後に

Webむず!!と毎回思います。考えることがあれもこれもそれもある。設計の段階ですでにそのサイトが良いサイトになるかそうでないのかが決まってしまうので、デザインに入る前段階の重要さを改めて感じた回でした。

私はず〜〜〜っとイラストを使ったパッケージと雑貨デザインをメインにしてきたのですが、転勤族になったことをきっかけに「モノを扱わずに完結できるお仕事を増やしたい」と思いWebデザインにも足をつっこむようになりました。

まだまだ苦手なことも多いですが、TEAM A’sの修行を通してかわいくて夢のあるお店やサービスのブランディングサイトが作れるようにがんばるぞっ。

Qrious内の修行チーム「TEAM A’s」メンバーが運営する地域のお店のためのホームページ構築・運用サービスMiseruはこちら💁‍♀️

お店のホームページ構築・運用サービスMiseru