見出し画像

noteアカウント開設まで3週間、1からロゴをデザインした話

海の事故ゼロの未来をつくるノートの制作を担当している、そなえ事務局磯野です。今回は、ロゴ開発とビジュアルの話をしたいと思います。

ディレクターとしてウェブや紙に関係するメディアでお仕事をさせてもらっている、業界5年目の私。この度、初めてロゴの開発に携わりました

どんな問題課題があり、どのようにデザイナーさんと解決して完成に至ったか。貴重な体験を忘れないよう、ふり返り記事にして残したいと思います。最後まで読んでいただければうれしいです。

さて、海の事故ゼロの未来をつくるノートのロゴをまだ見たことがないよという方…FIXロゴはこちらです!

スクリーンショット 2020-08-14 19.04.18

何に見えますか?
見る人によっていくらでも想像がふくらむ、最高のロゴだなと思っています。みなさんに親しみをもってもらえて、一緒に活動をしていく仲間であることを感じてもらえるnoteって、どんな姿だろう?公開直前までアイデアを出し、話し合いを重ねた裏側を全て!ご紹介します。


ロゴ開発をせねばならん!

海の事故ゼロの未来をつくるノートの運営は、海のそなえ推進プロジェクトがおこなっています。昨年度まではWEBサイトでの情報発信でしたが、より多くの方に情報を届けるため、今年度からはnotepro(法人プラン)での運用を始めました。

なぜproにしたかというと、ビジュアル面のカスタムの幅が広がるから。

なんとnoteproは独自ドメインを取得でき、取得後はヘッダーのnoteロゴ部分を好きな画像に差し替え可能だというではありませんか。メインビジュアルとロゴで世界観を揃えれば、かなり事業の特徴を推し出せ、ユーザーを引き込めるはず…。

「ロゴもビジュアルも思いっきりこだわろう!」と心に決め、私を含めた3名の事務局内の制作チーム(以下、制作チーム)は、早速デザイナーさんたちと相談していきました。


ロゴのご紹介

改めてロゴのご紹介をします。じゃん。

画像2

デザイナー櫻井さん入魂ポイントは、大きく5点
①umi(うみ)と読める
②波を感じてもらう
③丸部分は「水らしさ」を表現
④親しみを感じてもらえるよう、全体的に丸みを出した
⑤日本財団 海と日本PROJECTのロゴと並ぶことを考え、統一感が出るように意識

※⑤の補足
現状noteヘッダーでは、以下のように使用中です。

画像3

▲海の事故ゼロの未来をつくるノートが、日本財団海「日本PROJECT」の内の一事業であるため、セットで使用する事になっています。


海辺の楽しさが伝わるように、動きのある波をモチーフにしながら、「umi」とも読め、人のようにも見える、とても素敵なデザインです。右側には「海の事故ゼロ」を強調して配置し、全体で「海のワクワクを届けながら、海の事故ゼロの未来をつくる」を表現しています。

波のカーブ具合が絶妙に心地良く、思わず海をイメージしてしまうような。随所にデザイナー陣の想いがちりばめられている、大好きなロゴです。

ではいよいよ、ロゴ開発をしたことがなかった業界5年目のディレクターが、完成までに何をどうして、何を感じたのか。時系列でお届けします。


運用まで約3週間、ロゴ開発のはじまり

ロゴの開発が始まったのは、note運用が決まった5月下旬。noteのアカウント名はまだ仮の状態でしたが、のんびりしている時間はありません。7月の海水浴シーズンへ向け、大急ぎで制作に突入しました。本格ローンチは6月11日。

ご相談したのはHdLab Inc.というデザイン事務所さん。見た側のこころを揺さぶるような熱を感じさせる、それでいて緻密に考えられたデザインを数多く世の中に届けています。

メイン担当は櫻井真優デザイナー(ニックネーム:さくらいちゃん)。明るい笑い声とズバリと切り込む発言力がピカイチ。一緒に悩み、重苦しい会議の雰囲気を変え、何度も素敵な提案をしてくれました。

(磯野心の声/最高に頼りになる櫻井さん!よろしくお願いしますっ!)


初回の打ち合せで改めて見つめ直した、「事業の目的・ゴール」とは?

わたしたちが世の中に訴求したい「海のそなえ(詳しくはこちら)」は、まだまだなじみの少ない言葉なので、説明をかみ砕かなければいけない箇所があり、少しの伝えにくさを感じていました。

そうは思いながらもいつも通り「海へ訪れる人が減っているのに、海の事故が減っていない現状が…」を説明をすると、


「で、何を伝えたいのですか?」
伝わりづらさに、一発で気付く櫻井さん。
(磯野心の声/で、ですよね…!)

そして打ち合せ中、「海の事故が減っていないんですよ!だから我々は事故を減らしたいのです!」ともはや勢いだけで話す制作チームの話を一通り聞いて…


「子どものころ、溺れたことを思い出しました。海の事故は無くしていかないといけませんね」
と、うなずきながら共感してくれました。

忘れかけていた課題に色々気付かせてもらいながら、初回の打ち合せは「目的が一目でわかるようなデザインやアカウント名」方向に着地しました。

ビジュアルは櫻井さんに託し、制作チームはその他の準備へ。アカウント名の考案、ロゴのビジュアルだけでは伝えきれないメッセージや世の中への価値を短いワードで表す「タグライン」の作成、プロジェクトが目指すゴールや信念を具体的に世の中へ示すための「ステートメント」の調整を進めました。


デザイン案到着!怒濤のブラッシュアップ突入

初回打ち合せの翌日、大急ぎでタグラインを考案、櫻井さんへ共有しました。

\ワクワクを/安全に。

危険性ではなく、海の楽しさや豊かさを訴求する方向性を提示。「デザイン、お願いします!」とバトンを渡した1日後、デザインの方向性案が届きました。
(磯野心の声/は、はや…!)


最初のロゴ案は3方向。

▼1案目 ウミヘビちゃん 

画像4

▼2案目 波モチーフ ※現在のロゴの原案

画像5

▼3案目 複数モチーフ集合案

画像7

画像9

(※海に関するさまざまな要素が共存、繁栄していくことを表現)

画像8

(※楽しく海を過ごせる、アットホームな居場所づくりを表現)


現在のロゴの原案と、そのほかモチーフを組み合わせたものの、合計3方向をいただきました。どのロゴも良い…と感じる中で、わたしが一番ググッときたのがこちら。

画像7

ググッとポイント:勲章のようでかっこいい、複数の要素がある「海のそなえ」を表現している。

ホクホクしながらまずは制作チーム(磯野+先輩方2名)でブレストを行うと、全員推しロゴが異なるという結果になりました

(磯野心の声/全員一致だと思ったのに違うなんて…。先輩たちに言いくるめられる気しかしない)


その後、各自の考えを持ち寄り、デザイナー陣含め全員で打ち合せ。推し案がバラバラだったこともあり、ロゴの目的、事業の目的などから、重視したいポイントを洗い出しました。

以下、洗い出しポイント
・海らしさを感じる(アイデンティティの表現)
・分かりやすい(関心がある層が集まるように)
・親しみやすい(興味をもってもらえるように)

よって、ユーザーがロゴを見て「このnoteには海の情報があるはず」と思えるデザインにしよう!ということで、以下の2案にまとまりました。

画像5

画像7

▲事務局全体へ提案することになった「波案」「集合案」

(磯野心の声/ヤッター!推し案が残った!!!これ、決まりでしょう!)


事務局からは「どちらもOK。ただし、世の中やnoteユーザーへ伝えていく際、分かりやすさなどを重視した方が良いのでは」との返答。
大幅なNGがなく、制作チーム全員歓喜!どちらかひとつに絞るフェーズへ進みました。

(磯野心の声/ロゴ制作側の打ち合せでも挙がった「分かりやすさ」は重要なポイントだな。メモメモ)


ロゴFIX!メインビジュアル、ファビコン調整へ

おおまかな方向性が決まったので、並行してアカウント用のアイコン制作にも着手。もろもろ進めていきました。

■アイコン
現状の2つのロゴ案をアカウントアイコンに入れてみたところ…

画像12

▲文字なし、文字ありパターン各種。文字ありでもテンションのつけ方を変え、複数作成(by櫻井さん)


アイコン大になると、ロゴのみの方が適していることが分かります。というか、文字はかなり、読みづらい…

磯野激推しの「集合案」方向は、視認性が悪くなることが判明しました。また、基本的にアイコン横にはアカウント名が表示される仕様が多いので、「アイコン内にアイコン名は不要では?」という新たな方向性も発覚。

全員一致、ロゴは「波」方向となりました。

(磯野心の声/盲点…。残念すぎるが、読めないのならば仕方がない…)


■メインビジュアル
メインビジュアルは、海へ向かう子どもたちの写真に、手書きの「海のワクワクを安全に」を載せたもの。子どもたちが楽しさを抑えきれない様子が伝わってきます!

画像13

ちょうど海の事故ゼロの未来をつくるノートが立ち上がるころ(2020年6月中旬)、noteのビジュアル仕様の変更が予告されていたため、タグラインを真ん中に配置。変更を見越したデザインで調整していきました。


とはいえ、note以外では写真の上下がそのまま生かされるとのこと。SNSなどでの表示はこうなります。

画像14

▲海へ向かう子どもたち!


■マガジン画像
マガジン画像はタイトルに合わせた画像を選定し、色味を調整して設定!
人、子ども、海、楽しさ、つながり…、全部表現されていませんか?良い…。

画像15

▲各マガジンのバナー

(磯野心の声/各マガジン、記事を続々アップ中です。ぜひフォローしてくださいね!)


アカウント名決定!素直にわたしたちの想いを届けるネーミング

こうしてビジュアル面は順調に進みましたが、実は最後まで難航したのがアカウント名。

私たちとしては、なじみのある「海のそなえ」を使うか、それとも「海難事故ゼロ」という目的を出すか…と最後の最後まで全員で悩み、話し合いました。

海の取り扱い説明書
海のそなえ委員会
海の事故をゼロにする
etc .

いくつもの案が出た中、初見のユーザーや、興味を持ってくれた方が周りへ「伝えやすい・分かりやすいもの」重視の方向ということで、「海の事故ゼロの未来をつくるノート」に決定!6/11の公開まで、あと6日に迫っていました。

(磯野心の声/決定、うれしい!終盤のネーミング打ち合せはゴールが見えなくて苦しかった…


(補足)
noteproのビジュアル面でいうと、アカウント側で自由に設定可能な箇所があるのです。例えば、
・メインビジュアル
・ファビコン(URLの横にあるマーク)
・アカウントアイコン(note名の左)
・マガジン画像
など。通常のnoteアカウントでも設定可能なところもありますね。全部を設定し終えると、かなり「マイホーム感」が出て愛着が湧きます!


海!つながり!学ぶ!写真専用アイコンを作成

さらに並行して、主要3マガジンの世界観を統一する、見出し画像用アイコンも作成していました。

画像16

いずれもマガジン内容をデフォルメし、ぱっと見たユーザーが内容をイメージできるものを目指してデザインしました。

(右)「海の学びDATAノート」
海での役立ち情報や家庭や学校で使える教材を公開する
(中央)「海のそなえPEOPLEノート」
海のそなえと同じゴールを目指して熱く行動をする方に迫る
(左)「知ってほしい事業ノート」
海や子どもの安全に関連した事業を紹介する

複数の色を使用したり、全体的に本モチーフにしてくださったり、文字要素を入れていただいたり。写真用アイコンもたくさん、作っていただいたんです。過去アイコン案をチラ見せすると…

画像17

▲初期の案
読者に呼びかけるワードを入れ、今とマガジンの括りも違っていました。

画像18

▲本型案
「折角なら別の形にして印象づけようか」ということでお蔵入りに。

こういったアイコン案を経て、現在のデザインにたどり着きました!


こんにちは櫻井さん!一緒にふり返り

いろいろとこまやかに対応くださった、櫻井さん!お時間をいただき、改めてロゴに込めた思いや、ロゴ制作期間中のお話などを一緒にふり返ってみました。

画像19

櫻井真優さん
HdLab Inc.デザイナー。入社6年目。打ち合せで幾度となく場の雰囲気を変えてくれたムードメーカー。ロゴ制作メンバー全員、櫻井さんが大好き。

***

磯野:
こんにちは〜。今日は海の事故ゼロの未来をつくるノートのロゴに関するお話を聞かせてください〜。noteの方は、日々記事を更新しています!

櫻井:
拝見してますよー!いろんな方の記事をシェアされていますよね。わたしもちょこちょこ覗いて、スキをさせてもらっています!これからますます、たくさんの人が集まる場になって行ったら良いですね。

磯野:
ありがたいです…!(涙)
では早速質問に入らせてもらいます。ズバリ、櫻井さんはもともと「海好き」だったのでしょうか?

櫻井:
小さい頃は海へ行ったり、泳いだりしていました。ただ、生まれ育った場所は福井県の山の方だったので、遊びに行くのは山が多かったです。

でも今回ロゴ制作のお話をいただいて、海に対する興味が出てきて、海のニュースも見るようになりました。どのお仕事にも共通することなんですけど、興味を持つとその情報をキャッチしやすくなりません?なので以前より、海のことを考えるようになっています!

磯野:
わかります。私もこれまで以上に、海に関するニュースを見つけるようになりました。ちなみにロゴの制作中「楽しい〜」「意外とつらかった…」などの思い出があれば、知りたいです。

櫻井さんの修正スピードの速さ(基本、翌日アップ)についても聞かせてほしい!

櫻井:
う〜ん。つらいことはあまり無かったですね。「産みの苦しみ」はありますが、基本的に作るのが好きなので(笑)。

私はどちらかというと、方向性を定めて最終調整に時間を取りたいタイプで、今回のロゴは、打ち合せで出た内容を「反映!修正確認!」というスピード感でやっていました。公開まで日にちも少なかったので、もうババッと。
逆に早過ぎて「ちゃんと修正できてるの!?」って心配になったんじゃないですか?

磯野:
心配にはなっていませんけど、毎日「もう修正きた!」と心の中でザワついてました(笑)。

櫻井:
あはは!なら良かったです。
「うれしいな〜」と思ったのは、皆さんから反応をいただいたことですね。ロゴ制作に関わっていない海のそなえ事務局の方がビジュアル周りを「良いね!」と言ってくださったり、間接的かもしれませんが、アップされた記事にスキがついたり。
目に見える反応はうれしいです。

磯野:
たしかに反応は励みになりますね。私も早く、スキが1000くらいつく記事を書きたいのですが…。と、それは置いておいて。最後に、櫻井さんが抱くロゴへの想いをお聞きしたいです。

櫻井:
そうですねえ。今回の海の事故ゼロの未来をつくるノートのロゴが広まっていって、同じ想いを持つ人たちの象徴になったら良いなと思います。一気にではなく、少しずつだと思うんですけど。

ロゴって、絶対に必要なものでは無いと思うんです。極端に言えば、無くてもいい。でも、ロゴがあることで「なんだろう?」と思った人が集まってきたり、集まった人たちがロゴを「良いね!」と好きになってくれたり。デザインとしてサポートできるのは、ロゴに価値を持たせることだろうなと思っています。

これから世の中に広がって行くために、コミュニティづくりの手助けになれたらうれしいです!

磯野:
今年度、私たちは海や子どもの安全の情報が集まるハブを目指して活動しているので、「まさしく!」というコメントをです。うれしいです!櫻井さん、今度打ち上げしましょうー!(涙)

櫻井:
いきましょー!ちゃんと対策を取りながら!(笑)


***

実はロゴ紹介記事をつくりたいと思ったのは、櫻井さんの言葉がきっかけだったんです。

海の事故ゼロの未来をつくるノートが本格的に公開されたとき、「もっと大きくロゴが表示される場所はありますか?」と櫻井さんから連絡をいただき、「ない…。そうだ!この素敵なビジュアルに身を包んだnoteは、もっと世の中に見てもらわなければいけない!」と一念発起。開発記事をお届けすることになりました。

改めましてHd LAB Inc.櫻井さん、ありがとうございました!


初のロゴ開発で感じたこと

ロゴ開発に携わるのが初めてで、色々と勉強しながら、周りのみなさんについていくのがやっとの毎日でした。デザイナー陣に事務局の意図や思いを、同じ温度感で伝えなければいけないし、読者にどうみえるかももちろん考えなければいけない。

そんな濃い〜日々から生まれたロゴ。見るたびに「最高だな!」と思います。海、行きたくなりますよね。なりません?自画自賛すぎます?(笑)

ロゴ開発を経て思っているのは、「ロゴやビジュアルの世界観に劣らない、わたしたちの視点と言葉での記事を作っていきたい!」「ビジュアル負けしない良き記事を作り、多くの方に届けたい!」こと。

思うだけでなく、記事執筆、がんばります(気合い)!

長くなりましたが、以上、業界5年目のディレクターがロゴやnote用のビジュアル開発に携わらせてもらった記録でした。


最後に、皆さんへのお願い

ロゴは皆さんに見てもらって、覚えてもらって、初めて役割を果たします。「あ、これってあのロゴだ」と思ってもらえる役割です。

なので、ぜひこのロゴと、私たちの「子どもの海の事故を無くしたい想い」を、覚えておいてください。

そして、ここまで読んでくださったあなた!
ロゴやビジュアルのデザインを見て良いなと思ったら、記事をシェアいただければ、大変うれしいです。

このロゴから私たちの記事、そしてアカウントに興味をもってくれる方が増えますように!!!


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

スキしてみて

今後も海や子どもにまつわる情報を発信していきます。 ぜひ公式Twitterをフォローして最新情報をチェックしてくださいね。

ありがとうございます!よくぞ見つけてくださいました!
17
減らない海辺の事故、毎年平均30人もの子どもたちが犠牲となっている現状を変えるために活動しています。海辺のワクワクを安全に。noteでは最新の活動とメンバーの想いをお伝えします。私たちの活動は「海と日本PROJECT」の一環で実施しています。http://uminohi.jp/