webメディア「saita」、リニューアルに込めた想い。～デザイナー編～
こんばんは。saita編集部の竹内です。
今日は12月25日、クリスマスですね。（メリークリスマス！）
前回の続き、saitaリニューアルのデザイナー編を皆さんにプレゼントする気持ちでお届けします！
サービスロゴをはじめブランドイメージをデザインをしてくれた森田さん。
サイト全体をデザインしてくれた秦さん。
お二人に話を伺いました。
saitaリニューアルがテーマではありますが、お仕事でデザインをされている方、メディアを運用されている方、幅広くご活用頂ける内容となっておりますので、読んで頂けると嬉しいです！
│ 最初に取り組んだことは「共感ペルソナ」づくり
森田さん：
サービスリニューアルに際し、ディレクター３人へsaitaのペルソナ（読者像）を確認したところ、イメージしているペルソナ像がそれぞれ少し違うことがわかりました。
このままデザインを進めてしまうと、良し悪しを決める判断基準がないのでブレやすく、決まりづらいと思い、ディレクター陣に共感ペルソナづくりを提案しました。よく聞く「ペルソナ」とはちょっと違います。
▼共感ペルソナ（マップ）とは
「ペルソナ視点で感情や行動を整理することで、ユーザーのニーズを浮き彫りにするフレームワーク」です。
ユーザーが普段何を考え、どんなものを見ているのか。共感マップは、このようなユーザー視点で状況や感情を理解し、サービスの設計や改善に活かすためのものです。
https://nijibox.jp/blog/empathymap/
例えば自分の家族や身近な人であれば、「これをあげたら喜ぶだろうな」「こんなこと言ったらこう考えるだろうな」と、想像つく人は多いと思いますが、共感ペルソナづくりでも「実際に存在するレベルの人」になるまで、あらゆる角度からペルソナを深ぼっていきます。
共感ペルソナで重要なのは、「ペルソナを完成させる」ではなく「ペルソナ視点で理解し、チームで共通認識を持つ」をゴールにする点です。つまりメンバーと一緒につくる過程がとっても重要になります。
│ 「共感ペルソナ」をmiroとzoomを駆使してつくる
森田さん：
コロナの影響でテレワークだったため、miroとzoomを同時に使いながら、ブレスト形式でつくっていきました。
※miroの付箋機能を使えば全員が平等に意見を発信できるので、zoomでのブレストにピッタリです。
ペルソナへの理解度・解像度を高めるために、ベースとなるペルソナ像に対して「考えている事」「日々の生活」「行動の特徴」「情報との繋がり」「ストレスに感じる事」「必要としている事」の６要素をブレストしました。
※↓実際のmiroの画面です。みんなで意見出しをした付箋が大量！
どんな表情をしている人なのか？といった細部まで、具体的なペルソナのイメージを出し合います。「ペルソナの共通認識をチームで持つ」がゴールなので、全員が納得し、腹落ちするまで徹底的に話し合い、擦り合わせていきました。
共感ペルソナをつくり終えた今、知り尽くした共通のペルソナ３人が、各メンバーの頭の中にいます。
共感ペルソナをつくるとチーム内での認識が擦り合うため、メディア全体の方向性がブレなくなり、デザイン以外の観点でもおすすめです！
│ ロゴが完成するまで
森田さん：
共感ペルソナをつくった後、デザイナー3人それぞれロゴを作り、ディレクターに提案しました。
共感ペルソナのおかげで、「この人に向けて作るものなんだ」という認識が強くあり、デザイナー全員作りやすかったようです。
各々のロゴデザインのコンセプトの中に、共通で「芯のある女性」という表現があったのも印象的で、ペルソナの共通認識が出来ているんだな、と実感しました。
※９つのロゴ案の中から選ばれた、森田さんのロゴはコチラ！↓
ディレクターから「もう少し咲いたイメージにしてほしい」と希望があり、シンボルマークのラインを調整して…
ついにロゴが完成！
提案から完成まで、修正はたった1回だけ。事前に全員でペルソナを擦り合わせていたからこそだと思います！
│ ロゴに込めた想い
森田さん：
シンボルマークについて。
「カラー」という花がモチーフです。一枚の布を巻いたような個性的な花の形を持ち、真っ直ぐな茎が印象的な花です。
特に、「白い」カラーは「凛とした（自分を持った）」という花言葉を持ちます。今回は、この「白いカラー」の花を、ターゲットとなる女性像に重ね、モチーフとして制作しました。
実は、この花の白い部分は葉であり、本当の花は黄色い部分。この事実は、多くの人が『花』という言葉で連想する「花びらのある花」は、ひとつの形に過ぎない事を教えてくれているように思います。
社会的に形成された「女性はこうあるべき」という固定観念も、これに似たようなものだと思えば、様々な形が許容される自然界は、人間の世界より自由なのかもしれません。自然界で、自由に凛として生きるこの花のように、多くの女性がもっと自由に、自分らしい人生を過ごしてほしいという思いを込めました。
ロゴタイプについて。
縦のラインが美しく安定感のあるフォントを採用し、情報サービスとしての信頼感を強調しています。
配色について。
女性だから「赤」「ピンク」という概念の押し付けにならないよう、ペルソナのイメージに合わせてシンプルで無駄をそぎ落とすことを意識しました。
さらに、ロゴ全体は小さく表示しても視認性が高くなるようにしています。
│ サイトデザインに込めた想い
秦さん：
森田さんのロゴが完成した後、サイトデザインに着手。
saitaのディレクターみなさん高い熱量をもっているので、期待に応えたい！という想いと、saitaは本当に良い記事が多いので、たくさんの読者に見て頂けるようなデザインにしたい！と考えていました。
コンテンツのベースは「文字」なので、ディレクターと話しながら「読みたくなる文章」を目指しました。
フォント（文字）について。
以前はフォントが小さく、ブラウザの環境によっても文字が細かったり大きさも微妙に変わり、文章が読みづらいと感じていました。
私がペルソナの年代に近いこともあり、自分が読みやすいフォントサイズや種類（Noto sans JP）に変更。見出しや本文も読みやすさを意識してジャンプ率を調整しています。文字色は、サービス全体のトーンに合わせて黒ではなく濃い灰色に。
記事ページは全体的に間延びせず、その中でも詰まって見えないよう「抜け感」のある余白を意識しました。
記事のアイキャッチについて。
記事の印象が決まる、記事上部のアイキャッチ。
本来しっかり表現したい部分ですが、以前はこれをしっかりと魅せる意図を持っていませんでした。しかしサービスコンセプトの変更もあり、「魅せる」デザインに変更しました。
トップページについて。
読者さんが見に来てくれたときに、わくわくできる設計を大事にしました。
表示する記事は、各カテゴリ毎の最新記事を５個ずつ表示。
個性的なカテゴリ名なので、そこに紐づく記事をわかりやすく表現しました。新しい情報や価値観に「出会える場所」になったら良いな、という想いを込めています。
最終的に思うのは、リニューアル前に共感ペルソナをつくり、「リニューアル後のsaitaはこの人に向けてつくるんだ！」と全員同じ方向を見ていたことが、すごく良かったと感じています。
│ 「共感ペルソナ」で最高のデザイン、最高のチーム
竹内：
今回お話を聞いた中で印象的だったのは、共感ペルソナをチームでつくったことで、全員同じゴールに向かい、一丸となって進められた。という点です。
実は共感ペルソナをつくる前にペルソナ自体はディレクター陣でつくっていたのですが、共感ペルソナをつくることで、よりリアルで感情のある人物が浮かび上がり、メンバー間の認識の差異がなくなりました。
もし共感ペルソナをつくらず進めていたら、ロゴの「凛」を表現したシンボルマーク（カラー）は無かったかもしれない。フォントサイズはもっと小さかったかもしれない。
リニューアル後のsaitaは、共感ペルソナがあってこそだと感じます。それはデザインだけでなく、チームが一丸となるという点でも。
私たちsaitaチームは、読者さんに使いやすい。つい見たくなる。わくわくする。saitaだから読みたい！そう思って頂けるよう、これからも記事１つ１つ、デザイン細部まで丁寧に、心を込めて運用してまいります！
│ 終わりに
2回目のnote、最後まで読んで頂きありがとうございました。うれしい限りです……！
まだsaitaリニューアル 編集部編を読まれていない方は、こちらも読んで頂けるとうれしいです。新コンセプトや、編集部の熱い想いを語らせて頂いています！
もう１点お知らせです。共感ペルソナをつくる過程で編集部の頭の中にてイメージが膨らみ、連載小説というカタチになりました！ぜひあわせてご覧ください。
今後も毎月更新していく予定ですので、よろしければ「スキ」「フォロー」をお願いしますm(_ _)m
この記事が気に入ったらサポートをしてみませんか？