UIデザイン

UXデザイン

サービスデザイン

世界中のデザインの裏側に出会える「Cocoda」を運営する株式会社almaです。
メンバー全員がデザイナーとして、Cocodaの体験づくりをしています。

alma, inc.

kiitosというデザイン記事のソーシャルブックマークサービスの、企画、UIデザイン、開発をしました。

kiitosはこちら： https://kiitos.design

もともと、週末プロジェクトとして、「デザインの引き出しが少ない」という悩みを解消したかったことから、サービスの構想をスタートさせました。

自身がエンジニアをしていたこともあり、開発関連の記事に比べ、デザインの記事は「検索クエリが想起しづらい」のではと思っていました。

そこで、「先輩にオススメの記事を教えてもらうような体験」が解決策に近いんじゃないかと思い、コンセプトを深掘っていきました。

最終的には、「様々な人がブックマークした記事が並んだ、デザイン記事の図書館」のようなサービスにすることで、引き出しを増やしていけるようにしました。 (コンセプトの決定)

サービスにする価値があるのか、既存のサービスで満たせていないのか、をリサーチ。

結果的には、「デザイン記事のブックマークサービスで」かつ「自然と引き出しが増えていくプロダクト」はまだないと結論づけました。

Pinterestは、プロダクト上でインスピレーションが湧く画像を見つけることができますが、同じような存在で記事版はないと思い、「Pinterestの記事版みたいなイメージ」で機能設計やUIデザインを進めていこうと決めていきました。

そのため、機能イメージはミニマムに、 ・記事の閲覧 ・ブックマーク ・記事の保存・編集 をメインにしました。

次に、実際に簡易なプロトタイプをつくり、デザイナーの友人にどんな使い方をするのか、どう思うかなどをヒアリングをしてみることに。

↑ 一番初期につくったプロトタイプ

リサーチの結果、コンセプト面、使い方面ともに想定とあまり相違ないことを確認し、このままPinterestライクなUIの方向性で詰めていきました。

UIは、以下のようなことを意識。

◾️ 機能面： ・見つけたい記事に最速で辿り着けるように、マイページの記事はブックマーク数順に ・マイページでは、記事はブックマークした日付順に ・一覧性を担保しつつ、短調にならないように最初の特にブックマークの多い記事のサイズを大きく

◾️ 印象面： ・デザイナーが使う信頼あるブックマークツール、という雰囲気を出すためパキッとした印象を目指しました ・フォントは、日本語：游ゴシック、英語：Ralewayと、webでの標準的なフォント構成に ・ログイン画面では、「図書館」の雰囲気を演出するために背景には記事が流れてくるようなデザインに ・記事を溜めることやブックマークすることが引き出しを増やすことに繋がると考え、記事の保存やブックマークのタイミングでリワードのモーダルを設置

ロゴのデザインについてはこちら：

https://cocoda-design.com/original-products/26569

SP版についても、同様にデザイン。

フロントエンドの開発に最低限必要で、デザインの効率化を測るために、簡易なデザインシステムも作成。

もっとうまいやり方もあるかも。

リリース後、ありがたいことに多くの方に使っていただいて、リリース後1週間でkiitosに保存された記事は500を突破、ブックマークは1000を突破しました。

その際のクリエイティブの作成も担当しました。

サービスのコンセプトからリサーチ、UIデザイン、実装をミニマムにやれて、とてもよかったです。

Figmaデータも添付したので、よければ見ていってください。

デザインしたもの
kiitosというデザイン記事のソーシャルブックマークサービスの、企画、UIデザイン、開発をしました。
kiitosはこちら： https://kiitos.design
コンセプト〜

デザインケース

デザインチーム

ソーシャルブックマークサービス「kiitos」

ソーシャルブックマークサービス「kiitos」

関わったメンバー

kenjikatooo

所属チーム

alma, inc.

関連するカテゴリ

デザインデータ