Threads を使って気になったデザインの意図
こんにちは、UIデザイナーの山森(@yamamomon)です。
最近、SNSサービス・アプリに関してとても話題が多いですね。皆さんはどのSNSをメインでつかっていますか?サービスによって独自の特徴がでていたりするので使う側も選んで使いますよね。
最近でいうと、Instagram の Meta 社がリリースした「Threads(スレッズ)」が記憶にも新しいです。普通に新規で始めるサービスとは違い、すでに Instagram のアカウントがあってのサービスなので、登録はそのまま Instagram の情報を引き継いで行えるので簡単です。
今回は、その「Threads(スレッズ)」の機能や UI がどんなデザインなのか、私が個人的に気になった部分を少しだけ書きたいと思います。
Threadsの基本機能について
Threads の基本機能ですが、今の段階では(2023/8現在)
- テキストでの投稿が可能
- 最大文字数は500文字まで
- 写真は1投稿につき10枚まで
- 動画は最長5分の動画が投稿できる
- フォロー、いいね、返信、引用投稿も可能
- ハッシュタグは使えない!
登録当初はフォローしていない人の投稿がフィードに流れていて、とくに見たいものが見れず探すのも困難でしたが、今では「おすすめ」と「フォロー中」のタブが選択できるようになったので、フォローした相手の投稿が見やすくなりました。
少しずつ、機能のアップデートされていっているのが日々わかるのですが、ハッシュタグがまだ使えないので検索もしづらく、早く追加して欲しいと思う人は少なくないはずです。
Threadsのデザインを知る
今回のThreads は、代表的なSNSである「X(旧Twitter)」の代替え?とも言われたりしました。同じようなテキストや画像・動画での投稿が可能なサービスなので、どの程度他のSNSと同じ事が出来るのかは気になりますよね。あと、「デザインはどう違うのか?」「Instagramとの比較」は特に注目すべき点だと思います。
ロゴとメニューアイコンについて
Threads のロゴは、アプリアイコンやヘッダーの中心に入っているものですが、曲線がとても印象的ですよね。
ロゴのコンセプトは、
- 開発されたオリジナル書体「Instagram Sans」をベースにしている
- ユーザー名、個人、声を表す「 @」の 記号からインスパイアされた
- スレッドが始まる際に見られる“ループ”にインスピレーションを得た、途切れることのない1本の線になっている
やはり、Instagramからの派生サービスという点があるので、ベースが「Instagram Sans」というのは納得ですね。
次にメニューのアイコンは、中心に「投稿」するアイコンがあり、右側にプロフィールのアイコンが配置されています。Instagramと連携しているので、同じ配置であるほうが違和感は無いです。
違いといえば、メニューアイコンのデザインは Instagram よりもややサイズは大きく、アイコンのラインは太く丸みがあるデザインになっています。
「配置を同じようにするなら Instagram を踏襲して、同じアイコンで良かったのでは?」と疑問に思っていたのですが、ヘッダーのロゴをメニューアイコンのサイズくらいにして重ねた時に、ラインの太さが同じなのを確認して、ブランドロゴとアイコンの統一感や細部に宿るコダワリをしっかり感じることができて、ちょっと感動しました。
他のいいねや返信などのアイコンも Threads のほうは丸みのあるアイコンになっており、テキストでの投稿がメインなので目立ちすぎないようにする為なのか、写真投稿メインの Instagram よりもやや小さめのサイズで配置されています。
ちなみにですが一番左のホームアイコンをタップすると「おすすめ」と「フォロー中」のタブを上部に表示できます。「おすすめ」と「フォロー中」それぞれを選択してみるとホームアイコンのデザインも変わっています。上部にタブが見えていなくても、どっちのフィードを見ているのかが分かります。
ロゴやアイコンだけでも、掘り下げていくと止まらないので次へ行きましょう。
Threads のスレッド画面
Threads に投稿するために投稿画面を開くと、
- 入力する部分に「スレッドを開始」という言葉が入っている
- 添付のクリップアイコン以外のアクションは無し(添付アイコンで写真も動画もアップ可能)
- スレッドとして使うデザインとしてラインが入っている
Threads という名前なだけあって、テキストでのスレッドを繋げて使っていくことがメイン機能であり、そこに特化しているのがわかるシンプルなUIになっています。
シンプルだから、他の操作のアクションが無いのか?というとそうではありません。安心してください!「削除」や「シェア」などは、表に並んでいないだけであって、しっかりハーフモーダルで表示して選べるようになっています。
Threads に投稿した写真とテキストは、Instagram のストーリーズに追加したり、フィードに投稿も出来るようになっているので Instagram への連携はスムーズです。
まとめると、シンプルなスレッド重視のUIであっても基本機能はしっかり備えていて、なおかつ投稿に邪魔にならないハーフモーダルで出てくるので見やすく選択しやすいUI設計になっているのです。深いですね。
まとめ
Threads での細かい発見はまだまだ他にもあるのですが、今回はサービスの特徴として印象的だった部分を一部とりあげてみました。
目的に合わせて使い分けるほど、Threads とInstagram を使っているわけではありませんが、新しい機能は、一個一個使って試してみるのは楽しいです。UI や機能は変化し続けているので、少しでも変化を発見したらひとつひとつを紐解いてデザインの研究をしていければと思います。
今すぐの転職でなくてもOKです!まずはお話しませんか?
現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。
- React, Next.js を得意とするフロントエンドエンジニア募集要項
- シニアクラスのフロントエンドエンジニア募集要項
- 抽象的な物事を具体的な機能にビジュアライズできるUIデザイナー募集要項
- UIデザイナーとして手ざわりのいいUIを作りたい業務委託パートナーさん募集(Wantedly)
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでの面談でお話しましょう。ぜひお気軽にお問い合わせください!
話をしてみたい!