見出し画像

デザイン鍛錬26 〜新規サービス紹介LP〜

Cocoda!というサービスを使って、50個のアプリのUI/UXデザインを達成しました。そして前回に引き続き、今回はLP(ランディングページ)のアウトプットをします。

前回までの作品はこちらにまとめています。ご覧ください。

1. デザインお題

DailyWebより引用。

スクリーンショット 2020-12-05 10.14.19

今回のターゲットの具体例として、iOSアプリ版のソーシャルブックマークサービス「kiitos」のLPを作成します。

サンプルのデザイン要件定義書を参考に、私がデザインする過程を記載していきます。

2. kittosのオリジナリティを際立たせる

まずは、kittosとはどのようなサービスか把握していきます。

kittosとは何か?
- kiitosはソーシャルブックマークサービスです。好みの記事をブックマークしたり、他の人のブックマーク記事をストックしたりしながら、デザインの引き出しを増やしていけます。

引用:https://about.kiitos.design/ 
kittosの生まれた背景と現状の課題
- 自分自身がデザインの分野でサービスをつくってきた中で、デジタルデザインの分野は、まだまだ歴史が浅く、ベストプラクティスやナレッジが分散している、探しにくい状態にあると感じてきました。

- 検索しても思った記事になかなかたどり着けない
- twitterで流れてきた記事で、良いものを見かけるけど、いざ必要なときに見当たらない
- メモなどにストックするものの、(溜まりすぎて) 見つけにくく、探しにくい
- それぞれに良記事を持っている状態で、知見が分散している

このような課題を、自分自身や周りのデザイナーが抱えていたため、kiitosというデザインナレッジをオープンにできる仕組みをつくってみました。個人のデザインの引き出しを増やしながら、デザイン領域の知見が可視化されていくことを願っています。

引用:同上

このような特徴から、下記のようにLP作成の目的やターゲットを決めてみました。

LP作成の目的
kittosのサービスを紹介する

サービスを利用してもらいたいターゲット
・検索していて、いい記事に巡り合わないと思っている人
・自分が見つけた記事をシェアしたいと思っている人
デザインの技術を身につけたいけど、どこから始めたらいいのか分からない人💡


似ているサービス
Feedly(RSSフィードのサービス。自分が気に入った記事のURLを登録しておくと、新着記事が更新された時に自動で配信してくれる)
Pinterest(デザイン・画像のストックの王道。kittosとほぼ同じサービス)
Slideshare(自分のスライドをシェアするSNS。)


上記既存の似ているサービスと比較すると、Pinterestが最もkittosと近いサービスではないかと思いました。

そこで、ターゲットの項目に追加で記入しましたが、デザインの技術を身につけたいけど、どこから始めたらいいのか分からない人(いわゆるデザイン初心者)にとって、記事やナレッジをストックしやすいプラットフォームにしてみてはどうか?と提案させていただきます。

実際、Pinterestを愛用する私ですが、職場の同僚でデザインを始めたいけど、どこから始めたいか分からない人に聞くと、「Pinterestはなんとなく知っているけど、自分の好みでしかストックできないので、新たな視点が知りたい」とポロッと言われたことがあります。

では、デザイン初心者にとって必要な項目はなんでしょうか。
kittosでできることの紹介の箇所に、「デザイン初心者におすすめ」のようなコメント?カテゴリー?があってもいいかもです。

3. 骨格をデザインする

LPで掲載する項目
・タイトル
・kittos利用時の画面(iOSアプリ版)
・kittosでできることの紹介(デザイン初心者にはうってつけ!とアピール)
・アプリダウンロード導線
・footer
参考にしたLP
LINEスケジュール(めっちゃシンプル)
iPhone 12(動きはあるが、掲載内容はめっちゃシンプル)
使用したツール
Adobe Xd

ワイヤーフレームをデザインし、こんな感じにしました。

画像2

4. 詳細をデザインする

色合いや、MVをどうするか悩んだ結果、こんな感じにしました。
MVのアイコンは、bookmarkのアイコンをモチーフに、kittosのロゴに使われている3色を背景・しおりアイコン・強調の三角に追加してみました。

フォントは、ロゴからも分かるように「丸くポップなイメージ」を想起させたので、まるゴシックのフォントを選びました。ただ、まるゴシックのフォントは太字機能がなく、大きさで差別化するようにしました。

最後に「デザインを学びたい方からの評判」を追加することで、特におすすめしたい!ということを伝えようとしています。

画像3


5. 反省点・議論点

各カテゴリーのタイトル、もう少しいいフォントがあれば太字にしたかったなぁ…。

気に入った方はぜひ「いいね!」お願いします。
似たような作品を随時公開していますので、ぜひ今後もチェックしてみてください。

今回の作品は、Cocoda!にも掲載しています。


Twitterも随時発信しています。よろしければフォローお願いします!



読んで下さった皆様の背中を押せるようなコンテンツを発信し続けます。ありがとうございます。