どうしたら見たくなる？を基礎から解説！－『ウェブデザインのお悩みを解決！オンライン無料お茶会』開催しました－

イベントの概要

2024年９月2日(月) 10：00－11：30
　参加者どうしで意見交換をして、楽しくスキルアップ。
　参加無料・定員なし・耳だけ参加可能

目的

• ウェブデザインに悩む方が、他の方から客観的な意見をもらう
• 一人が教える形ではなく、自由に発言する
• 初心者はアドバイスをもらい、経験者はサービスのヒントをつかむことで、全員がスキルアップする

４人のスタッフで企画をしました

参加者はスタッフ含め１０名でした

プログラム

10：00　はじめに
10：10　質問タイム！
10：20　スッキリ解消タイム！
11：00　「私のブログを見て！客観的な意見がほしいのよ～！」タイム
11：20　当日質疑、アンケート記入依頼、個人相談のご案内
11：30　終了

工夫したこと

• 参加者の表示名を、①呼ばれたい名前　②ワードプレスのテーマ　と記入してもらい、｢勉強するぞ｣という意識を高めた。
• レコーディングの許可を取り、動画と文字起こしで残した。データを主催者で共有して、今後のサービスに反映できるようにした。

質問公開タイム！

工夫したこと

• 質問をチャットに表示し、参加者に♡などリアクションしてもらった。
• リアクションの多い質問から順に解説した。

スッキリ解消タイム！

デザインって何のため？

ウェブデザインを知ることで、どんなことができるのか知りたい。

①みんなにとって使いやすい

②言葉がいらなくなる

③デザインの４原則～｢近接｣｢整列｣｢反復｣｢対比｣～の考え方

デザインの4原則　｢対比｣の具体例

タイトル、見出しは太くて大きい文字、余白、小さめの文字で本文。強弱をつけることでわかりやすくなる。

「こんな風にしたい！」を形にするカスタマイズ方法

オンラインとリアルのサービスの、わかりやすい表示の方法

鍼灸院でリアルの施術、オンラインでお灸講座や個別相談を販売しています。メニューに｢リアル商品のご案内｣｢オンライン商品のご案内｣と分けているが、見た方がどう思われるかご意見頂けると嬉しい。

企業はどうしているのか、｢ほっともっと｣｢はま寿司｣の事例で解説。
お客さんがイラストでパッと見て、迷わずに選べるようになっている。

リアルとオンラインの申込み方法が違う場合は、｢電話｣｢ホームページのボタン｣などはっきり記載するとわかりやすい。

メルマガ登録用の問合せフォームのデザインをカスタマイズしたい

登録フォームを、ブログの背景の色にしたり形を変えたりして、かっこよくするには？

ビフォー（デフォルトでタイトル、名前、メールアドレス、ボタンのみ）
アフター（テキストに画像を貼ってそこにリンクさせる）
CocoonでCTA（行動喚起）ボックスを利用する方法について解説。

ワンクリックでメルマガ登録できるようにするには？

プラグインを入れる方法がある。企業のURLを例として紹介した。

トップの画像が自動で切り替わるように設定したい

鍼灸院の世界観を伝えられる写真とコメントが、順番に表示されるようにするには？

canvaのデモ動画で解説した。
写真を選んで｢アニメート｣ボタンを押すと動画になる。
ダウンロードしたら、動画を縮小して、ホームページのメインビジュアルを変更する。

短い動画に字幕をつけて、ストーリーやインスタ投稿してみたい

字幕のついた動画をリールにする方法は？

Instagramのリール投稿を実際に作ってみた様子を、ブログ記事を共有して解説。

どんな人が何をしているホームページなのかが、一目でわかるようにしたい

ブログ型からサイト型に変更する方法は？

SWELLのテーマで、サイト型に変更する方法を、質問者のページを共有しながら解説。

固定ページを２つ作り、１つをホーム画面、１つを新着記事にする。
ホーム画面にフルワイドブロックを作り、中にタブ、その中に投稿ページを入れ、投稿ページの｢もっと見る｣の所に、新着記事ページのURLを貼り付ける。

記事を見ながらまずやってみて、わからない事ができたら都度相談してもらう。

物販ページに繋げる方法を知りたい

「webショップやってます　こちら」のようなバナーをクリックすると販売ページに飛ぶ方法は？

プラグイン不要で、BASEというお買い物ができるページを作る方法について、ブログ記事で解説。

BASEの大まかな特徴は、登録料・月額料金無料で、売れたときだけ手数料が発生、今日から始められる。外観＞メニュー＞カスタムリンク＞でショップ設定。

ホームページのメニューに｢オンラインショップ｣ができて、クリックするとBASEのページに飛ぶ。
BASEの始め方は、詳しい説明が載っているので、イメージ的に簡単にできる。

BASEでは、物だけでなく、ウェブ上の商品（イベント）なども販売できる？

販売できるが、文章を売りたい場合はnoteの方が楽。noteもBASEみたいにホームページ上にオンラインショップとして表示できる。

「みんな私のブログを見て！客観的な意見がほしいのよ～！」タイム

トップページが、どうもしっくりきません。シンプルで、かつ絵本らしい温かみのあるものにしたい、と言葉では言えるものを、自分の持ち味のまんま、見やすい形にするにはどうしたらいい？

まず自分が何者で、何を伝えたいのかを最初にはっきりさせること。商売として絵本を売りたいのか、絵本作家としての思いを伝えたいのか。

絵がすごく柔らかくて良いので、背景を絵にして、スクロールさせるのも面白い。
シンプルにするか、絵をスクロールするかというのは、どう伝えたいのかが最初にある。

絵本で表現したいのは、｢日常で子どもがキラキラ光る瞬間をすくい取って大事にしたい、とっておきたい｣という願望。それをビジュアル的に絵をつけて、｢こういう思いで創作してます。よかったら覗いてください｣みたいなのをつけようとしている。

今のトップページだと、絵本作家だということや、創作の思いもわからない。絵が訴えてくるので、良い絵がどんどん繋がっていく･･･みたいなのが感覚として良さそう。
そして、その絵をどう思いで創作してるというのがわかればよいと、個人的に思った。

当日質疑

集まった情報をチャットで共有した。

出口を一つにする

メルマガ登録または商品購入に結びつけるために、どこを通ってどんな動きをしてもらいたいのかを絞る

動線固定　

メルマガ登録フォームのページにはリンクを貼らないで、一直線に登録ボタンを押してもらう狙いで文章を作る。画像を多用する。

答えはどこかにある

自分の頭で考えてもわからない。人に見てもらったり、他の人のサイトを見て真似してみるなど、自分以外のどこかに答えはある。

おわりに

参加者の声

• とても勉強になりました！
• 基礎の基礎から教えていただいて助かりました！
• 私は売る物がなく、文章にチカラ入れるしかないなぁと思っていた。
  デザインで細かいところを工夫することはたくさんあるんだなぁと勉強になりました。
• 自分のブログを今一度見直そうと思いました。デザインの原則とか普段意識してないけれど、町中の広告とか看板とか色んなものを観察して、どうしたら人が読みたくなるかなど分析するのも面白いだろうなと思いました。

主催者の振り返りの声

• 進行とレジメがわかりやすかった
• 事前のやり取りで、みんなの疑問をことごとく記事にしてくれていたのが良かった
• 口で説明しても伝わらないところが、記事を見せることで伝わった
• 質問する人と答える人が組んで、質問を記事にしていくと、まとまりのあるコンテンツができて商品化できそう
• 自分じゃ当たり前すぎて書けない、ということがたくさんある
• 例えばイラストなら、初歩の初歩、筆の使い方、タッチの方法、まっすぐの書き方、当たり前だから教えるほどじゃないよと思ってしまっている
• 準備してきた色々なことがあって、イベントが成り立つんだって分かった
• お互いに自分の気づかないところを褒めあえて良かった
• お客さんが言うことを一語一句聞き取ってそのまま商品にすると、お客さんの求めているものに繋がる
• また第３弾もやりたい気分

主催者たちが一番楽しんで、一番学べた茶話会でした。一人でも欠けたら、このイベントはできませんでした。
協力して成長しあうことのすばらしさ、サービスを提供する者としての姿勢を知ったことが財産です。