案件概要
TOCK（トック）様
個人活動の概要を発信する媒体がない
お問い合わせの手段がメールとInstagramしかない
ワークショップやパフォーマス、レッスンの問い合わせを増やす
サイト閲覧者がコマ情報を獲得する
「世界チャンピオン」と「小学校教諭」という肩書き
➔確かな実績と的確で分かりやすい指導力がある
サイトの色はベージュ、あとは青系、赤系、緑系のいずれかの配色
商業施設
教育現場（小学校・学童・児童館）
お祭りイベント関係者
1週間
1.5か月
1か月
figma
photoshop
VSCode
サイト制作の目的やアプローチを考案するための5W1H
ターゲットを具体的に想定するためのペルソナ
デザインコンセプト
やさしい、おしゃれ、シンプル、親しみやすい、ナチュラル、きれい（洗練されている）、自由
世界チャンピオンという本物の実力者に相応しいよう、洗練されたデザインにしたいと思いこのようなコンセプトにしました。クライアント様にとっての“洗練されたデザイン”は、必要なものだけが整って見えるデザイン、自然と目が誘導されるような情報設計が施されたデザインのことを指されていたため、そのイメージに沿うようデザインしました。
ユーザーに「この人にこまを指導してもらいたい」と思ってもらえるよう、やさしさや親しみやすさが感じられるサイトを目指すためにこのコンセプトにしました。このコンセプトから安心感を感じられるような配色や、曲線や丸みを帯びたデザインにしました。
クライアント希望のベージュをベースカラーにしました。トーンはなるべく温かさを感じられるようなトーンに調整しました。
要望の色の一つである緑の中でも、優しさと温かさを感じることができる黄緑をメインカラーにしました。
ベージュと黄緑を印象付けたかったので、特別なアクセントカラーはつけず、白色で全体のデザインを締めてみました。
読んでいて疲れにくいよう、ベースカラーのベージュや白色とのコントラストを抑えたグレーをテキストカラーにしました。
程よく丸みを帯びており、優しい配色のサイトカラーに合う柔らかさがありながら、可読性が高い点が選んだ理由です。
説明文は見出しの‟Zen Kaku Gothic New”よりも癖がなくてシンプルな‟Noto Sans JP”を使用しました。写真や見出しが目立つよう、説明文はシンプルなフォントにしようと思いました。
アイデアを出すためのマンダラートシート
制作のポイント
ユーザーの興味を引く重要なファーストビューは、クライアント様のパフォーマンス動画にしました。こま回し世界チャンピオンであるクライアント様の実力をユーザーに伝える最適な方法は、何をしているかが一目で伝わる動画であると考えたからです。絵コンテを作成し、クライアント様にご協力を得て撮影させていただきました。動画はクライアント様の技術だけでなく、優しい人柄も伝わるようなインサートを入れた構成にしました。
ファーストビュー動画の絵コンテ
パフォーマンスやワークショップなどの問い合わせを得るためには、こま回しそのものの魅力をユーザーに伝える必要があると考えました。こま回しの競技性やコミュニケーションツールとしての有用性、教育的価値などを魅力として取り上げることで、ユーザーにこま回し自体に興味をもってもらい、問い合わせを獲得することを狙った構成としています。
振り返り
背景のこまの紐をイメージした曲線による視線誘導があって見やすく、全体のデザインについてもとても気に入っているという声をいただきました。公開後、ワークショップやレッスンの問い合わせが増えたというご連絡をいただきました。
ユーザーの興味を惹きつけるファーストビューや情報設計、コンセプトに基づくデザインを強く意識して制作しました。その点がクライアント様から好評でしたので、今後の制作でも意識していきます。
反省点としては、デザインに時間をかけすぎてしまった点です。拘り過ぎると時間がかかってしまうので、今後はよりスケジュール設定を具体的にし、制作物の質を上げながらデザインの工程をより効率よくしていきたいと思います。
