Spotlight
Date: 2019 - 2021 spotlight.soy

UI↓

記事一覧ページ

Spotlightは、ビットコインのライトニングネットワークを使った、CtoC型のデジタルコンテンツ配信プラットフォームです。
ビットコインに関する情報は、日々大量に流れては消えていきます。TwitterやDiscord、Telegramのような場が中心なのも、それだけ“情報の消費期限”が短いからだと思います。
だからこそSpotlightでは、「少しの情報でも、文章として残していける場所」を目指しました。
軽く投稿できて、でもきちんと蓄積される。そんなUIにしたいと思い、デザインしています。

画面構成はTwitterに近く、サイドカラム付きの3カラム設計です。ただし、Spotlightには「誰にでもスポットライトが当たるように」というコンセプトがあります。
その考えを反映して、コンテンツ一覧はカード型に統一。人気や注目度に関係なく、どの投稿も同じように見えるようにしています。
サムネイルがある記事・ない記事で見え方に差が出ないように、サムネイルがある記事は「画像+タイトル」だけ、サムネイルがない記事は「タイトル+本文」という表示ルールを設けています。

記事ページ

記事ページは、ほとんどがスマートフォンから読まれるため、サイドカラムは排除し、読みやすさを優先。
一方、PCで読む場合は、サイドカラムがあることでシェアや関連コンテンツへの導線が生まれるようにしています。
投稿ページは逆にPCからの利用が多く、書くことに集中できるよう、装飾や余分な要素は入れていません。

リアクション

Spotlightには「いいね」ボタンがありません。でも、その代わりに、コミュニティが自然と動き出すような仕組みをいくつか取り入れています。
たとえば、Slackのように絵文字でリアクションできる機能。
ビットコイン界隈にはエンジニアが多く、絵文字のリアクションと相性がいいと思ったので取り入れました。コメントだけのやりとりよりも、もう少し柔らかく反応できる場になっています。
また、ビットコインには“投げ銭”という文化があります。
Spotlightではその投げ銭をちょっと楽しくするために、金額に応じてピザのイラストが変化する演出を入れました。
これは、ビットコインとピザの関係(Bitcoin Pizza Day)を知っている人なら、ちょっとクスッとしながら楽しめる仕掛けです。

ダークモード

記事を読んでいて疲れにくいよう、ダークモードを搭載しています。背景と文字のコントラスト比は約16:1。ブルーなどの色は、ディスプレイによって印象のブレが大きくなりやすいため、色選びは慎重に。ブラックをベースに設計しました。

Spotlightでは、「誰でも発信できて、誰にでも光が当たる場」を目指し、全体の構造から細部のインタラクションまで一貫して設計しました。
カルチャーと仕組みのちょうどいい接点を見つけながら、「場」のデザインをするような感覚でつくっています。

Graphic↓

Bitcoin

Bitcoin

Halloween

Bitcoin

DAI

DAI

Monacoin

Monacoin

Litecoin

Litecoin

Bitcoin Cash

Bitcoin Cash

Tether

Tether

Ripple

Ripple

ethereum

ethereum

Bitcoin

Bitcoin