【Webサービスを作ろう】事例からUI設計を学べる「Nicely done」がすごい勉強になる！
いろんなWebサービスの画面設計・UI設計をまとめている「Nicely done」というサービスの紹介。Webサービスの企画、開発をする上で参考になるはずです。Webデザインの勉強にも役立ててみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
海外ではあらゆるWebサービスの画面設計、UI設計をまとめている「Nicely done」というサービスがあります。
いろんなWebサービスをまとめているサイトは、国内にもありますがNicely doneの特徴は、Webサービスそれぞれの各ページを切り取って紹介しているところでしょう。
すでに使われているサービスのトップ画面、アカウント画面、ログイン画面など切り分けてまとめているので、どんな画面が並んでいるのか一目で分かります。
自分でもWebサービスを作ってみたいと思っている方やUIがどう遷移していくのか勉強したい方におすすめです。
Nicely doneとは
実際にNicely doneのサービスについて見ていきましょう。
トップ画面は、あらゆるWebサービスが載っているショーケースとなっています。
それぞれのサービスをクリックすると、そのサービスのUIを全て見ることができます。普段何気なく使っているサービスでも意外と多くの機能や画面があると感じるかもしれませんね。
実際にUI設計の事例を見てみる
実際のUI設計を見る上で今回は、クラウドファンディングサイトの「KickStarter」をピックアップしてみました。
以下の写真がKickStarterのそれぞれの画面を切り分けたものになります。
ランディングページ、ログイン画面、決済画面、メッセージ画面など全てのUIを表示すると意外と多く感じるかもしれませんね。
全体で20弱の画面図で構成されているWebサービスであることが分かるでしょう。
どんなWebサービスやアプリを作る際も、ワイヤーフレームやプロトタイプを作るはずです。
とはいえ、Webサービスを作ったことがない人からしたらどれくらい画面設計図が必要で、どんなUIにしたら良いかなど分からないことが多く出てくるかと思います。
タグやカテゴリーで検索することもできるので、「LPにはどんな情報を入れたら良いんだろう」といった問題も実際使われているサービスを見れば非常に参考になるでしょう。
カテゴリー欄では、Webサービスの特徴について選択することができます。
ECサイトの場合は決済システムのUI設計、SNSであれば個人アカウントのUI設計をするなど、作るサービスによって必要な機能やUIは変わってきます。
Webサービスのカテゴリ毎にUIを見ることができるので、自分の作りたいものに合わせて確認することができるはずです。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
