見出し画像

デザインを通して「長く愛されるサービスづくり」をサポート。新スクールのWebサイトができるまで

サービスの内容・魅力をわかりやすく伝え、ユーザーのアクション(購入)を後押しする「サービスサイト」。

商品情報や特徴、料金プランなどの必要情報はもちろん、サービスに込められた想いやコンセプトをデザインとして「見える化」することでユーザーを惹きつけることができます。

そんな、サービスの世界観を表現するサイトのデザインはどのようにして生まれるのでしょうか。

今回は、書く+αのスキルが身につくオンラインスクール「Marble(マーブル)」のサービスサイト制作を担当した、ふたり広報・デザイナーの本橋に、コンセプトの組み立て方や個性的なデザインに仕上げるための工夫について語ってもらいました。

📝案件概要
制作目的:書く+αのスキルが身につくオンラインスクール「Marble」の受講生募集を目的としたサービスサイトを作成したい。(2023年2月開校)。
ターゲット:ライティングを起点としてスキルアップしたい人、フリーランスキャリアに興味がある人
サイトタイプ:サービスサイト
制作期間:2ヵ月
URL:https://marble-school.studio.site/

クレジット
クライアント:株式会社FLOW(※自社サービス)
制作チーム:ふたり広報
ディレクション:多葉田 愛
サイトデザイン:本橋 彩音

本橋 彩音/ふたり広報・デザイナー
大学卒業後、新卒でイベント会社へ就職。パーティ事業部にて現場と企画の経験を積み、2021年フリークリエイターとして独立。「想いをカタチに」をコンセプトに世の中に溢れている大切な想いをWebデザインとパーティー空間の2軸で発信・伝えるきっかけを作っています。空間演出とゆるっとしたマガジン風のデザインが得意。旅がだいすき。

サービス名から着想を得たデザインコンセプト

ー Marbleのサービスサイトでは、どのようにデザインコンセプトを組み立てましたか?

サービス名の「Marble」から着想を得て、マーブル模様を中心にデザインコンセプトを考えました。

英語で「Marble」は「大理石」の意味を持ちます。ただ、大理石は一般的には洗練されていて高級感があるイメージ。

スクール事業を行う「Marble」のターゲットイメージとは少し離れていると考えて、「Marble」が持つほかの意味、ラテン語の「輝く石」というキーワードに着想を得てデザインコンセプトを組み立てていきました。

「優しさ」や「親しみやすさ」が伝わるサービスサイトにしたいという要望を踏まえて、2パターンのデザイン提案を行いました。

提案した2パターンのデザイン

ー 最終的にBパターンのデザインに決定しましたが、サイトリリースに向けてブラッシュアップさせていく中で意識していたことはありますか?

密なコミュニケーションですね。お互いの考えていることや大切にしたいポイントを細かく伝え合うことで、よりゴールイメージに近いデザインになったと感じています。

デザインツールのFigmaやチャットを使い、随時コミュニケーションを取っていました。

実際のFigmaの画面

また、コンテンツごとにデザインに込めた意味や意図を丁寧に伝えることも意識していたポイントです。

全体的なデザインイメージだけでなく、フォントやカラー、余白が与えるイメージや見え方など1つずつ説明することで、認識ズレを減らすことができたと考えています。

将来のアップデートに対応する、長く活用されるためのデザインのこだわり

完成したMarbleのサイト

ー 完成したサービスサイトの世界観について教えてください。

全体的には可愛らしさ・カジュアルさ・親しみやすさのバランスを意識しています。フォント1つにしてもカジュアルな印象のものを何パターンか提案させていただいて、サイト全体の見え方を考えながら選定しました。

コンセプトの1つ「輝く石」は、楕円形のあしらいで表現しています。

サービス名「Marble」に込められた「マーブル模様のように、白いキャンバスに新しいスキルと自分のカラーを混ぜ合わせて、彩り豊かなキャリアを描く」という想いを、それぞれの輝く石が溶け合って1つの模様を作っていくデザインで表現しました。

ー こだわったポイントはありますか?

Marbleのブランドイメージが伝わることはもちろんですが、サービスの内容が確実に伝わるよう、テキストの読みやすさにもこだわりました。

また、Marbleはスクール事業を中心に行っているため、1期、2期とサービス内容がアップデートされても対応できるデザインにすることは意識していたポイントです。

たとえば、講師やカリキュラムに変更があっても全体のバランスが乱れないデザインになっている点や、サービスをSNSで宣伝する際に使いやすいよう画像抽出できるデザインを取り入れている点。サイトをリリースして終わりではなく、長い目で見て活用してもらえるデザインになるようこだわっています。

ー Marbleのサービスサイトはこれまで本橋さんが手がけたサイトのなかでもお気に入りの1つだと伺いました。

デザイン担当は私1人ですが、Marble運営メンバーの皆さんと一緒にサイトをつくり上げた感覚が強くて。テキストメッセージを考えてくれたえるもさん、イラストを描いてくれたゆぴさん、デザインフィードバックを伝えてくれたあいさん。

制作チーム全員の「魅力」が詰まっているので、思い入れが強いです。

特に「ゴールイメージ」のコンテンツはMarbleらしい親しみやすさが感じられる、オリジナリティがあるデザインになっていて気に入っています。

「ゴールイメージ」のコンテンツ

「Marble」らしさに+α。トレンドを取り入れたInstagramのデザイン

ー サービスサイトだけでなく、Instagramやnoteのデザインも担当されていますね。各媒体でMarbleの世界観を表現するために大切にしていたことはありますか?

ブランドイメージを保つために、Instagramでもnoteでもデザインのどこかにマーブル模様を取り入れています。ユーザーに「マーブル模様といえばMarble」と認知してもらいたいと考えていたからです。

ただ、どの媒体も同じデザインにすると面白みに欠けますし、Instagramとnoteではユーザーの層も違うため、各媒体で異なるデザインを提案しました。

ー Instagramのデザインのポイントを教えてください。

Instagramはほかの媒体よりもカジュアルなデザインに仕上げました。

マーブル模様はサービスサイトを踏襲しつつ、遊び心のあるあしらいをプラス。Instagramのユーザーの目を引くように、トレンド感のある新しいフォントを使っています。

投稿に合わせてイメージを変えられるように、色のパターンも数種類つくりました。どの色パターンでもマーブル模様が際立ち、Marbleらしさが損なわれないように意識してつくったので注目してほしいポイントです。

多様なバックグラウンドを持ったフリーランスユニットだからこそできる提案

ー ふたり広報のチームワークについて感じていることはありますか?

制作に携わる全員がクライアントやサービスを心から愛して、より良いクリエイティブを目指す雰囲気があり、チームワークはとても良いと思っています。

様々なバックグラウンドを持っているメンバーが集まっているからこそ、それぞれの個性やスキルを活かした提案ができることがふたり広報の強みではないでしょうか。

今回担当したMarbleのサービスサイトもまさに制作チームの個々の強みを活かした、オリジナリティのあるサービスサイトになったと感じています。

🌸🌸🌸

🤝 ふたり広報
企画やデザイン、ライティングなど、様々なスキルを持つフリーランスがチームを組み、広報活動を支援。既存の広報の枠組みにとらわれない“新しい広報のカタチ”をご提案します。

✍️Writer:こつ
📝Editor:あい

この記事が参加している募集

仕事について話そう

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