こんにちは。2026年に新卒で、Amebaのプロダクト戦略室に配属されました嶋村です。
プロダクト戦略室は「みんなにとって良いプロダクトを探求する」ことをモットーに、Amebaのデザインの可能性を模索している1部署になります。
はじめに
プロダクト戦略室に配属されてからしばらく経って、私は紙を買いに行きました。
なぜデジタルプロダクトのUIデザイナーが紙を買いに出向いたのか、その理由を1からお話していきたいと思います。
AIが作れる時代に、クリエイティブは何をするのか
2026年現在時点、今やAIで一定のクオリティのクリエイティブが誰でも簡単に作れるような時代になりました。その結果、バナー制作にかけるリソースは低減しましたが、一方でバナーに対して人為的に拘り切る積極的な理由が薄くなってしまったように感じます。それよりも、運用面で効率よくバナーを制作できる仕組みを構築し、制作の費用対効果を向上させる事自体への関心が高まりつつあると感じています。
では、クリエイティブはこれからどんな役割を果たしていくべきなのでしょうか。
一概に全てがそうだとは言うことはできませんが、クリエイティブの役目として「サービスの第一印象を上げること」を外すことはできません。人間がサービスに触れる時、サービスの価値の伝達のほとんどは視覚情報のやり取りに依存しています。表層デザインによるぱっと見の印象の差異がサービス価値伝達に大きな影響を与えます。第一印象を含めた視覚的情報のやり取りはユーザーとのコミュニケーションと同義です。このような場面において、合理性を意識してAIを介する事は、コミュニケーションの放棄とも言えます。ここでデザイナーが人間としてユーザーと対話することが、デザイナーの存在価値とも言えるのではないでしょうか。そのような前提において、プロダクト戦略室のデザイナーとしてどのようにしてサービス価値を上げられるか、を私なりに思考した時、サービス印象の土台を担っている既存のトーン＆マナーを完全に崩すよりも、これまで構築されてきたものを使用して「Amebaらしい」と感じられる印象を一つも二つも上に引き上げるアクションを起こしたいと思いました。
そこで取り組んだのが、Amebaを代表する緑、白、黒の組み合わせに一味「手触り感」を加えられないか？という検証です。
Amebaはアプリケーションやwebを始めとしたデジタルアウトプットがメインになるのですが、Amebaが体現したい「親しみやすさ」を追求するには、デジタル完結で試行錯誤をするのではなく、現実世界の表現をありのまま取り込む事が肝なのでは？と考え、あえてフィジカルな検証を進めていきました。今回私がこれからご紹介する検証内容を一言で述べると、「自分の目で紙を見て選び、自然光のもとで紙を撮影し、物性のムラを質感として生かす。それをデジタルのサービスで使えるスタイルで登録する。」といった内容になります。
「垢抜けない緑」という、言語化されていなかった違和感
Amebaで様々なデザインを進めていくと気づく事として、「Amebaの緑を大きな色面でそのまま使うと、どうにも垢抜けなくなってしまう」という問題があります。これは感覚値としてうっすらAmebaデザインチーム内で共有されてきたものなのですが、緑自体はサービスのブランドカラーであることもあり、真っ向からその問題に対して試行錯誤することはありませんでした。
Amebaは今年で22年を迎える老舗サービスであり、ガイドラインやルールも整備されています。そうなると既存のルールを疑い、新しいルールをそれぞれが編み出し、制定するコストは思ったより高くなっていきます。プロダクト戦略室としては、ルールをありのままチームに踏襲させる事のみを役割とすべきではなく、既存の問題に立ち向かい、より良いデザイン言語やルールを作り出してサービス全体の価値をさらに上げることに取り組むべきだ、と私は考えました。
仮説：無機質さの正体は、物性のなさ
物体の色には、必ずムラがあります。紙なら繊維の向きがあり、光の当たり方で見え方が変わります。同じ種類の紙でも、一枚ごとに違います。対してデジタルの緑は、完全に均一です。そして、この均一さはフラットさとして時に印象をミニマムかつシャープにしますが、デジタル上の表現で避けようと思っても避けられません。例えば、ノイズをかけてデジタル上で手触り感を似せることはできますが、それはあくまで「均一なムラ」でしかなく、無機質さの根本の解決になっていません。このことから、緑が大面積で垢抜けないのは、色そのものの問題ではなく、面に物性がないことの問題ではないかと仮説を立てました。親しみ感が特徴なブログというプラットフォームで、無機質の逆に位置する「手触り感」を求めるなら、この物性をどう持ち込むかが課題になると考えました。
この仮説を裏付けてくれたのが、料理本の写真でした。
デザインインプットのために雑誌を眺めていた時、先輩に言われてハッとしたのが、「料理の写真は背景が真っ白であることが少なく、布のクロスが敷かれていること」でした。机のツルッとした無機質な面をそのまま写すのではなく、多少の凸凹によってムラが出る布の物性を映り込ますことで情緒的にしているように感じました。被写体が暮らしのものであるほど、それを支える面にも物性、つまり手触り感が求められる。料理本の中に、そんな気づきがありました。
検証：紙を手に入れ、自然光の下で撮る
早速専門店に赴き、紙を大量に物色し、購入した9種類の紙を1枚ずつ自然光の下で撮影して行きました。
そもそも、素材として紙を選んだ理由は3つあります。
1つ目は、検証のしやすさです。紙は手軽に、多くの種類から選べます。今回やろうとしていたのは正解を一発で当てることではなく、幅を持って試して比べることでした。選択肢の多さと入手の手軽さは、そのまま検証の精度になります。
2つ目は、光の通り方です。テクスチャの模様が肉眼で見えることが必要なこの検証において、紙は薄く光を通すので模様の違いを判断しやすく、実際に抽出しやすいからです。
3つ目は、繊維の不規則さです。今回やりたいのはテクスチャの抽出で、素材そのもののムラを取り出すことになります。ムラが規則的な素材では、抽出しても均一なテクスチャにしかなりません。紙の繊維はランダムに絡み合っていて、そこに規則がないので、最適だと判断しました。
はじめはスキャナで紙のテクスチャを取り込もうとしましたが、質感が上手く取得できなかったので別の方式を検討します。光を通したほうがテクスチャをダイレクトに抽出できるのではと考え、9種の紙を自然光のもとで撮影する方法に切り替えました。条件はシンプルで、晴れた日に自然光がよく当たる窓際で紙を机に置き、スマホで9種類の紙を全て撮影しました。
その後、撮影した紙の写真を、色面に乗算で重ね、透明度を調整して馴染ませました。この作業によって、どの色でも質感を表出させる事ができます。単純な編集作業ではありますが、あるものをそのまま乗せることで生まれる手触り感を求めていたので、これで十分でした。その代わり、どの色面にどの紙を合わせるかは何パターンも検証し、細かさを比較しています。
どの紙をどの色に使用するかの選定は二段階で絞りました。
一段目は、紙単体を写真に収めたときにテクスチャの質感が肉眼で確認できるかどうかです。ここであまりテクスチャが見えないものは、色面に乗せても効きません。二段目は、実際に色と合わせたときに「手触り感」が出るかどうかです。ここで、色の濃さによって適した紙が異なることが分かりました。白とグレーのような明るい色に合う紙と、緑や黒のような濃い色に合う紙は同じではなく、最終的にこの2つのグループで使う紙を分けています。明るい色には「フレンチパーチ/白」、濃い色には「ファーストヴィンテージ /ターコイズ」からテクスチャを取ったものを重ねました。
フレンチパーチは紙の質感が細かすぎず、肉眼でも紙らしいムラがよく見えるほど濃淡のある透け感が特徴のものです。なので、色が飛んでしまう白やグレーの明るい色と相性が良いと判断しました。一方、ファーストヴィンテージは針葉樹の未晒パルプと広葉樹の晒パルプを配合したクラフト紙をベースにした紙で、使い込んだような色と質感が特徴です。ザラついていて素朴な質感が、濃い色でも模様が沈まずにしっかり見えるので適切だと判断しました。
活用：使えるスタイルに変える
ここで生まれた手触り感を、サービスのあらゆる場面で使えるようにするために、新しいスタイルパターンとして４色（白・グレー・黒・緑）を追加しました。それらを paper white / paper gray / paper black/ paper green としてカラーパレットに登録しました。
さらに、同じテクスチャでも、使う色面の横幅が変わると密度の見え方が変わってしまいます。小さな面積では細かく詰まって見えたムラが、大きな面積に引き伸ばすと当然荒く見えてしまいます。そこで、各色に対して、使用する色面の横幅サイズに合わせてLv.1〜5に分け、width ~600px / ~1200px / ~1800px / ~2400px / ~3000pxの5段階でスタイルとして登録しています。どの面積で使っても、同じ密度の手触り感が保たれるようにしました。
結果として、これまで大きな色面で使いにくかった緑に奥行きが出て、大きな面でも使いやすくなりました。白やグレーなどの背景色も、実装して見てみるとなんだか無機質で垢抜けない空間だったのに、手触り感が加わり空間に深みが出る見た目になりました。
おわりに
改めて、一人のサービスデザイナーとして、デジタルサービスだからといってデジタル上で出来ることだけに固執する必要はないと思いました。「第一印象のような、数値化しにくいもの」をユーザーに届けるために、既成概念に囚われることなく、様々な表現にチャレンジすることは必要不可欠だと感じました。また、2章で、サービスに対する第一印象を含めた視覚的情報のやり取りはユーザーとのコミュニケーションだと述べました。その対話の1つが、AIやデジタルで量産できないものを一度自分の手でつくることだと今は思います。今回でいえば、量産できないもの＝フィジカルから得た手触り感や質感でした。それを paper green のようなカラーパレットとLv.1〜5のスタイルとして登録することで、はじめて、サービスにとって汎用性のある形に翻訳しました。
デジタル上で全てを完結させず、フィジカルな面まで視野を広げて取捨選択できること。
それが、AIが一定のクオリティのクリエイティブを作れる今の時代に、デザイナーが果たせる役割のひとつだと感じています。