Story

シームレスな操作性は感動モノ!「note」のUI/UX改善を手掛けるデザイナー「佐賀野宇宙」がSTUDIOを選ぶワケ

STUDIOを利用しているユーザーにインタビューを行う企画「STUDIO Story」。 今回、登場していただくのは、メディアプラットフォーム「note」を運営する株式会社ピースオブケイクにてデザイナーを務める佐賀野 宇宙(さがの そら)さんです。

Kaori Kobayashi

STUDIOを利用しているユーザーにインタビューを行う企画「STUDIOStory」。
今回、登場していただくのは、メディアプラットフォーム「note」を運営する株式会社ピースオブケイクにてデザイナーを務める佐賀野 宇宙(さがの そら)さんです。

2008年からデザイナーの活動を始め、ブランクを含めてもトータル8年ほどデザイン職に携わる佐賀野さんは、個人でオリジナルフォントの作成も手掛けられています。今回、noteの法人向けプラン「note pro」のLPをSTUDIOにて制作された佐賀野さんに、「STUDIOを使ったサイト制作の過程」や「フォントのこだわり」等、気になるトピックについて、じっくり語っていただきました。

高速でPDCAを回す。note「カイゼンチーム」のプロジェクト

佐賀野さんはピースオブケイクさん以外にも、数社でデザイナーを経験されていますよね。デザイナーを目指したキッカケは何でしたか?

もう10年以上も前のことですが、通っていたプログラミングの専門学校でWEBサイト制作の授業があり、プログラミングよりもビジュアルをイジることにおもしろさを感じました。完成しないと動かないプログラミングよりも、コードを書いた瞬間にビジュアルに反映されるWebデザインコーディングに魅了され、気づいたらその道に進んでいた、という感じです。

一時期デザイン職から離れていた時期もありましたが、やっぱりデザインをすることが好きで、かれこれ8年ほどデザイナー職を続けています。肩書としてはUIデザイナーがマッチするのかなと思っています。

現在、勤務されているピースオブケイクでは、どのような業務を担当されているのでしょうか?

「カイゼンチーム」として、代表の加藤貞顕、CXOの深津貴之らと共に、noteのUIやUXの調整を手掛けています。ただ、今年になって組織が急拡大している関係で、広報業務の一部や写真撮影等、業務が幅広くなりつつあります。

カイゼンチームとしては週に1度ミーティングを設け、プロジェクトメンバーで改善案を出し合い翌週に実行、そのリアクションやデータを見ながらさらなる改善を加えるという、短いサイクルでPDCAを回す取り組みを行っています。

最近の実例だと、各ユーザーの閲覧履歴に基づくおすすめ記事を紹介するレコメンド機能を強化させたり、画像サイズの軽量化により表示速度を速めたり、といった改善を試みています。

noteのデザイン改善に携わる中で、大事にしているポイントを教えてください。

noteはすでにサービスとして運用しているものなので、できあがっている世界観を維持しながら、よりストレスのない使い勝手に変えていく体験設計に注力しています。具体的に言うと、noteでは真っ白なノートに作品をつくっていくイメージから“白さ”を大事にしていて、特に記事を読んでいる間は余計な情報が目に入らないようなデザインを守っています。

ここは代表の加藤のこだわりでもあり、この白さを崩さず、いかに改良していけるかがチャレンジかなと。プロダクトの目標に合致するUIやUXの改善を重ねていきたいと思っています。

「note pro」のLPをSTUDIOで制作。時短を叶えるプロセスとは

STUDIOで作成した「note pro」のサイト

今年、noteの法人向けプラン「note pro」のLPをSTUDIOで制作されたとのことで、STUDIOを選んでいただいたのはなぜでしたか?

「note pro」のLPを作るにあたり、いくつかの選択肢があったのですが、以前から気になっていたSTUDIOさんがコスト削減や効率化の目的に合致しそうだということで、セレクトさせていただきました。弊社では、ちょうどフロントエンドの移行をしている関係で、今は内部で作るよりも外部サービスを使ったほうが総合的にメリットが多いだろうというのが一番の決め手でした。

こちらのサイトの制作手順を教えてください。

まずは、一連の使い方を理解するまでSTUDIOを触ってみました。最初こそ多少戸惑いましたが、CSSのボックスモデルの概念がUIとして提供されていると飲み込めてからは、すんなり操作できましたね。

サイト制作のプロセスとしては、画面構成を決めたあとSTUDIO上に素材を仮置して、関係者の合意が取れたら最後にスタイルを当てていく流れです。スタイルを整える際は、リアルタイムでプレビューを見ながら関係者で話し合い、その場で修正を加えるスピーディーなやり取りが実現しました。

「note pro」のサイトはポップな雰囲気と、情報が丁寧に伝わるサイト設計が印象的でした。こだわったのはどんな点でしたか?

やはり、noteがあっての「note pro」なので、本家のnoteの世界観を崩さないこと、いかにも“ビジネス”という雰囲気を出さないことを心がけました。具体的にはイラストを多めに使ってサービスのメリットをわかりやすく提示しながら、やわらかい印象を作っています。

作業時間が1/2に!スピーディーすぎる操作性がSTUDIOのメリット

STUDIOの活用により、どのようなプラスの影響がありましたか?

従来のWEB制作とは比べ物にならないほど、公開までがスピーディーでした。コーディング作業が丸々カットできたことに加え、リアルタイムでフィードバックを受けられて、それをすぐに反映させられますし、ちょっとした文言や写真の修正であれば誰でも対応できることも、効率化につながりました。

また、ドメインを取ってから公開までの流れも非常にシームレスで、ここは個人的な感動ポイントでした。WEBサイトを制作することはできても、サーバー管理等のシステム的なことを面倒に感じている人たちに刺さるメリットだと思います。

従来のWEBサイト制作と変わらないクオリティを保ちつつ、トータルの作業時間は半分以下になった感覚です。今回の利用でSTUDIOの使い勝手やメリットが十分に理解できたので、今後も積極的に活用していきたいですね。

作業効率が2倍以上にUPしたわけですね! LP制作以外にSTUDIOを活用できそうなシーンはありますか?

例えば、プロトタイプを制作する際にSTUDIOを使ってみるのもアリだと思います。これまでPhotoshopのようなデザインソフトで作っていたものをSTUDIOで作ってみると動きがわかるので、あたりが付けられるかなって。

個人的にはオリジナルで制作している欧文フォントのポートフォリオをSTUDIOで作ってみたいですね。

5割の完成度でいい。続けることで花開くこともある

https://dotcolon.net/より

佐賀野さんが学生時代に立ち上げた欧文フリーフォントサイト「ドットコロン」の活動についても聞かせてください。この活動は、どのような思いで始められたのですか?

僕がフォントに興味を持つキッカケになったのは、アップルの存在でした。当時はまだMacを持っていなくて、憧れを抱きながらアップルの公式サイトを「カッコいいな」と思って眺めていたんです。なぜカッコよく見えるのかを探ってみた結果、「フォントの影響ではないか」と気づきました。

当時のアップルのサイトは、Myriad(ミリアド)というフォントで統一されていて、その一貫性が洗練されたビジュアルにつながっているのかなと。そこでアップルの雰囲気を真似て、オリジナルで欧文フォントを制作することにしました。

ドットコロンの活動は思考実験の一環で、毎回テーマに沿ったフォントを自分のフィルターを通して作ってみたらどうなるだろうというイメージを形にしたものです。

例えば、こちらの「F5.6」は、カメラブランドのライカのレンズ等に使用されている書体や機械彫刻用標準書体のような、機械的制約の中から生まれた独特の雰囲気をモチーフにしています。その他にも、道路標識に使われるような画面上での視認性や可読性を重視した「Route 159」や見出しに使われることを想定して制作した「Penna」など、10パターンをフリーフォントとして公開しています。

デザインをするうえでフォントはイメージを大きく左右する要素だと思いますが、佐賀野さんは、普段どのような基準でフォントを選んでいるのでしょうか?

これは悩ましい質問ですね……。WEBサービス全般に言えるんですが、まだWEBフォントが普及しきっていないため、そもそも選択肢が少ないんですよね。基本的にはロゴやサイトのイメージを優先して、そこに沿うようにフォントを選んでいます。

じゃあ、どのようにしてイメージに合うフォントを見つけるかというと、目的と近いイメージを集めてきて、使用されているフォントのおおよその方向性を分析し、それらに無い要素を持ったフォントを選択するのが自分なりのやり方です。ただ、場合によってはゴールから逆算してガラッとイメージを一新するフォントを選び、新たなイメージを作り出すこともあります。

フォント制作は学生時代から長年に渡って続けられていますが、物事を継続する秘訣はありますか? 例えば、noteを始めたいと思っている人に対して、アドバイスするとしたらどうでしょう?

完璧な記事を書くことを一旦あきらめて、完成度は50%でもいいから無理なく続けてみることかなと思います。最初から100%を目指すと、ほとんどの人が挫折するので、中途半端でもいいから、ある程度のところで目処をつけて発信する。

自分以外の人の目に触れることで何かしらのフィードバックがあれば、それがクオリティを上げていく手がかりになります。また、一旦仕上げたものを時間を置いてリライトすることで、以前は気づけなかった改善点が見つかることもあります。それを繰り返すことで、徐々に成長への階段を登ることができるのではないでしょうか。

僕自身、オリジナルフォントを作り始めた頃は鳴かず飛ばずだったのですが、コツコツ続けていたら5〜6年経って注目してくれる人が増えてきました。5年後、10年後に花開くこともあるので、続けるのが苦にならないやり方で継続してみてほしいですね。

最後に、佐賀野さんの展望を聞かせてください。

個人の活動を軸にお話させていただくと、フォントをさらに追求したい願望があり、商用フォントを作ってみたいと思っています。少しずつ手を付けてはいるものの、まだ販売までたどり着いていないので、遅くとも来年には販売開始したいなって。やっぱり文字が好きなんですよね。

デザインから公開まで、コーディングなしで完結。
STUDIOを無料で始めるhttps://studio.design/ja/