UIを勉強するために実践したことと便利なサイト10選!

こんにちは、びび(@vivilog_)です。

11月も終わりに近づき、セブ島でのweb制作の勉強も一通り学べたかなという感じになりました。

ではここからどう進めていけばいいのか?という問題に直面したわけですが、とりあえずは以前の振り返りの記事でも述べたように、自身のサービスの開発をメインに進めていこうと思っています。

参考プログラミングを学んで2ヶ月が経過した私が思うあれこれ。

それとは別に、今参加させていただいている共同開発でデザインを担当していることもあり、デザインも少し勉強したいかな?と思いました!

自身のポートフォリオサイトを作ってからは少しやりきった感があってなかなか作りたいもの、コードを書きたい!とならなかったので、ちょうどいい機会、デザインも並行して進めることにしました!

デザイナーへのパスポート、Cocoda!

デザインを勉強するにしてもどうやって?

以前からPrinterestなどでwebデザインをみて素敵だなあと思ったサイトはクリップしたり、いろんなサイトを巡回して配色やレイアウトなど、自分ができる限りの範囲で勉強はしていましたが、いざ本格的にやろうと思ったら何からやっていいかわからない!

悩んでいるところに、WORKROOMのルームメイトが何やら楽しそうにデザインしていました。

聞くと、Cocoda!というデザインスキルを磨きたい人のためのサービスがあるのだそう!

参考Cocoda!公式サイト

Daily Cocoda!で毎日デザイン

Cocoda!のコンテンツの中に『Daily Cocoda!』というUIデザイン100本ノックができるものがあります。

これは毎日お題が配られるので、そのお題に沿ってデザインしていくシステム。

ユーザー層やコンテンツがあらかじめ決められているので、さくっと取り掛かりやすいのが特徴です。

私は今このDaily Cocoda!に挑戦してやっと今日で8日目が終了したところ。

1日も欠かさずやっているので今の所毎日継続できています!

こんな感じで毎日ツイッターでもしっかり報告。

たまに感想くれる人がいて私はその度に泣きそうになります😭とってもうれしい・・・!

他のデザインはこんな感じ。

いかにオシャレに見せるか、これ大事👌

また、同じお題に挑戦した他の人のデザインを見ることができるのも良いです。

自分にはなかった発想が施されていたり、そのデザインにした意図などをコメントで残せるので、そのコメント読むだけでも楽しい!

もちろんやるのは自分のためなのですが、こうして他の人のデザインも見ることができると、『頑張っているのは自分だけじゃないんだ』と励まされることもしばしば・・・✨

デザインに使用している素材・サイト

ここからは私がCocoda!を取り組む際に使っているサイトや素材をご紹介します。

デザインツールは全てAdobe XDで作成しています。

XDはiphoneの画面の大きさのテンプレートがあったり、操作も直感的でかなり簡単なので、以前はphotoshopを使っていた私ですが、あっさりとXDに乗り換えてしまいました。

それくらい簡単で使いやすいので、デザイン特にwebデザインをする方はXDインストールしてみてください!

Adobeの製品を何かしら買っていたら無料でXDはインストールできるので、フォトショかイラレを買ってそれと合わせてインストールするのがおすすめです。

ちなみに私は、お題によってアイコン作成のお題があったりするので、イラストレーターのみ買っています。

フォトショップは以前使っていたのですが今は使ってないので・・・また必要になれば買うつもりです!

写真素材

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

超おしゃれな写真しか置いてないんじゃないかというくらいのおされ写真素材サイト。

私が写真を使うときはほぼ100%このサイトから引っ張ってきてます!

海外のサイトなので、例えば料理を検索したいときは『foods』や『dishes』のような単語で検索したり、他にも『white』など色名で検索すると写真をみたときの全体のカラーが白っぽいやつで絞り込めたりするのでとってもおすすめです!

GIRLY DROP(ガーリードロップ)は、眺めるだけで、キュンとする♡女の子による女の子な無料(フリー)写真画像サイトです。通称「がりどろ」または「ガリドロ」☆商用利用可能で会員登録やクレジットは不要!写真はオシャレな加工済みです♫

おしゃれな女の子のためのフリー写真素材ならここ!

女の子のスキ!がたくさん詰まった素敵な写真ばかりです。

デザインするときだけでなく、ブログのアイキャッチやイメージ画像、あとはとにかくいい感じの写真を使いたいときによく利用してます。

モックアップ系

モックアップとは、実物に当てはめたときにどんな感じかイメージしやすいようにそのものにデザインをはめ込んだものです。

例えばこの画像。

画像の中にiPhoneらしきものがあって、その画面に私がデザインしたアプリの画面をはめ込んでいます。

このようなはめ込み画像のことをモックアップと言います。

Create stunning and high-quality product photos with Smartmockups online mockup generator. It's easy, quick, and free to use.

スマートモックアップはスマホだけでなく、いろんな媒体でモックアップを作ることができるフリーソフトです。

使いたいモックを選んであとは画像を選択するだけなのでとっても簡単。

8,840,000以上のプレミアムリソースと、毎月2,913,000での9.99 EURのpプレミアムベクターへのアクセス。Freepikのプレミアムを今すぐ利用しましょう!

写真だけでなくイラストやアイコンもダウンロードできてしまうサイト。

モックアップも充実していて、検索窓で『mockup iphone』のように検索すると、私が使っているようなスマホのモックアップがたくさん出てきます。

プレミアム(有料)と無料のが混ぜて出てくるので、無料のが使いたい方はオプションで無料を選択して検索するのを忘れずに。

便利なサイト

Create colorful low poly triangle patterns that can be used as wallpapers and website assets.

おしゃれなポリゴン風のイメージを簡単に作れちゃうサイト。

モックアップの背景とかに使うとオシャレ感倍増しますね!

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

流行りのシェイプデザインをこれまた簡単に作れるサイト!手軽すぎる・・!

とっても簡単なので特に理由がなくとも色々作って遊んだりしてます。

iLoveIMGは、使いやすくて完全無料の画像処理用オンラインサービスです。画像の圧縮、サイズ変更、切り抜き、変換などが可能です!

画像のサイズがあまりにも大きい場合に圧縮するときによく使っているサイト。

それ以外にもできることたくさんあるのでブックマークしておくのをおすすめ!

Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.

デザインをするときにまず見るのがこのサイト。

いろんな方がデザインした作品が残っています。

例えばアプリのデザインを見たいなら『app game』のように、app+どんな種類のアプリか名前を入れて検索すると、より詳しいデザインが出てきます!

あとは『UI』などの検索ワードもおすすめです!

Cocoda!で待ってます!

私も最近Cocoda!始めたばかりなんですが、とっても楽しいので一緒に切磋琢磨しあえる仲間募集しています!

みなさんよければ一緒にデザインの勉強しましょう〜!

参考びびのCocoda!作品ページ

web用のツイッター(@yurina_web)では日々の学習状況や気づいたこと、作品などをシェアしていますので、こちらもよければフォローしてくださいね!

それでは!