877
1043

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

本記事は、身の回りの困りごとを楽しく解決! by Works Human Intelligence Advent Calendar 2022の13日目の記事です。

はじめに

エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」

デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」

私「『いい意味で』を先頭に付ければ何いっても許される説!!」

知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」

私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか?」

知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」

てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。

ポートフォリオのアイディアが思いつかない」「開発したデザインがイマイチパッとしない」といった悩みを持っている人はぜひ参考にしてみてください。

対象者

  • エンジニアでも参考にできるデザインサービスを知りたい人
  • ポートフォリオや個人開発のデザインが思いつかない人
  • アイディアをデザインを参考に考えたい人

日本語サイト

Pinterest

スクリーンショット 2022-12-20 22.38.56.jpg

Pinterestではバナー、LP、Webサイト、Webアプリ、UIといった幅広いデザインを参考にできるサイトになっています。

投稿数も多いので自分の開発したいテーマのデザインやUIも簡単に見つけることができます。

マネるデザイン研究所

スクリーンショット 2022-12-20 22.46.34.jpg

マネしたいようなWebデザインを集めたサイトになっています。

「なぜマネしたいのか」が言語化されているので、良いデザインを作るためのヒントを学ぶことができます。

動くWebデザインアイディア帳

スクリーンショット 2022-12-20 22.48.12.jpg

動くWebデザインアイディア帳ではWebの「動き」に特化したデザインを学ぶことができます。

本サイトではデザインだけでなく動きの実装方法などコードも解説されているため、エンジニアとしても学びのあるサイトになっています。

jajaaan

スクリーンショット 2022-12-20 22.51.32.jpg

こちらのサイトではボタンや見出しといったWebサイト制作や開発で使えるデザインが数多く掲載されています。

またデザイン毎に具体的なコードも掲載されているので、使いたいデザインをサクッと再現することができます。

お道具箱

スクリーンショット 2022-12-20 22.49.40.jpg

お道具箱ではWebデザインやコーディングで使えるツールがまとめられているサイトになっています。

デザイン以外にもHTMLやCSSといったコーディングで使う技術のツールもまとまっています。

海外サイト

Mobbin

スクリーンショット 2022-12-20 22.59.04.jpg

Mobbinでは1つのアプリに対するページ遷移など細かいUIを参考にすることができます。

掲載されているアプリの数がかなり多いので自分が作りたいアプリのデザインを見つけることができます。

dribbble

スクリーンショット 2022-12-20 23.01.14.jpg

dribbbleではトレンドアプリのデザインをキャッチアップすることができます。

UI Sources

スクリーンショット 2022-12-20 23.04.34.jpg

UI Sourcesではカテゴリ別にデザインが分類されているので、自分の開発したいテーマのデザインを簡単に見つけることができます。

また一貫したユーザー操作も掲載されているのでUXを参考にする上でも役立つサイトになっています。

Bestfolios

スクリーンショット 2022-12-20 23.11.29.jpg

Bestfoliosでは、ポートフォリオデザインが多数掲載されています。

Webアプリのポートフォリオもあるので世界中のアイディアを参考にすることができます。

uplabs

スクリーンショット 2022-12-20 23.16.51.jpg

uplabsではスマホアプリのUIが掲載されているサイトになっています。

Behance

スクリーンショット 2022-12-20 23.19.37.jpg

BehanceはAdobeが運営しているクリエイター向けSNSになっています。

幅広いジャンルの投稿があるのでアイディアとデザインサンプルの両方を参考にする上でかなり重宝できるサイトになっています。

UXArchive

スクリーンショット 2022-12-20 23.14.54.jpg

UXArchiveではアプリ内でのユーザーの導線設計を参考することできます。

アプリの画面遷移が見やすくまとまっているのでUXも参考にすることができます。

その他

最後に個人的に参考にできるエンジニア向けの記事と書籍を紹介します。

記事

なぜエンジニアが作る画面はダサいのか

エンジニアでもわかりやすいようにデザインの作り方を解説してくれています。

【個人開発・ポートフォリオに】無料で簡単にいい感じのデザインにできるサービスまとめ

エンジニア向け デザイン基礎(社内勉強会の資料)

デザインに興味があるエンジニア向けのTips10選

書籍

なるほどデザイン

スクリーンショット 2022-12-20 23.26.24.jpg

会社のデザイナーの方におすすめされた書籍。

「なぜ」そのデザインがいいのかが具体例をもとに解説してくれている。「なるほど」ってなる

オブジェクト指向UIデザイン

スクリーンショット 2022-12-20 23.27.58.jpg

アプリの情報整理からデザインに落とし込むまでの過程を学べる。

演習問題が数多く掲載されているので、アウトプットもできる。

最後に

いかがだったでしょうか。

今回はエンジニア向けのデザインサイトをまとめました。

他にもいろいろな記事を書いているので合わせて読んでいただけると嬉しいです。

877
1043
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
877
1043

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?