【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のサービスについて見ていきましょう。

スクリーンショット 2016-07-05 12.26.46

トップ画面は、あらゆるWebサービスが載っているショーケースとなっています。

それぞれのサービスをクリックすると、そのサービスのUIを全て見ることができます。普段何気なく使っているサービスでも意外と多くの機能や画面があると感じるかもしれませんね。

 

実際にUI設計の事例を見てみる

実際のUI設計を見る上で今回は、クラウドファンディングサイトの「KickStarter」をピックアップしてみました。

以下の写真がKickStarterのそれぞれの画面を切り分けたものになります。

kickstarter

ランディングページ、ログイン画面、決済画面、メッセージ画面など全てのUIを表示すると意外と多く感じるかもしれませんね。

全体で20弱の画面図で構成されているWebサービスであることが分かるでしょう。

 

どんなWebサービスやアプリを作る際も、ワイヤーフレームプロトタイプを作るはずです。

とはいえ、Webサービスを作ったことがない人からしたらどれくらい画面設計図が必要で、どんなUIにしたら良いかなど分からないことが多く出てくるかと思います。

タグやカテゴリーで検索することもできるので、「LPにはどんな情報を入れたら良いんだろう」といった問題も実際使われているサービスを見れば非常に参考になるでしょう。

スクリーンショット 2016-07-05 15.13.08

カテゴリー欄では、Webサービスの特徴について選択することができます。

ECサイトの場合は決済システムのUI設計、SNSであれば個人アカウントのUI設計をするなど、作るサービスによって必要な機能やUIは変わってきます。

Webサービスのカテゴリ毎にUIを見ることができるので、自分の作りたいものに合わせて確認することができるはずです。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する