こんにちは、びび(＠vivilog_)です。
11月も終わりに近づき、セブ島でのweb制作の勉強も一通り学べたかなという感じになりました。
ではここからどう進めていけばいいのか？という問題に直面したわけですが、とりあえずは以前の振り返りの記事でも述べたように、自身のサービスの開発をメインに進めていこうと思っています。
参考プログラミングを学んで2ヶ月が経過した私が思うあれこれ。
それとは別に、今参加させていただいている共同開発でデザインを担当していることもあり、デザインも少し勉強したいかな？と思いました！
自身のポートフォリオサイトを作ってからは少しやりきった感があってなかなか作りたいもの、コードを書きたい！とならなかったので、ちょうどいい機会、デザインも並行して進めることにしました！
デザイナーへのパスポート、Cocoda!
デザインを勉強するにしてもどうやって？
以前からPrinterestなどでwebデザインをみて素敵だなあと思ったサイトはクリップしたり、いろんなサイトを巡回して配色やレイアウトなど、自分ができる限りの範囲で勉強はしていましたが、いざ本格的にやろうと思ったら何からやっていいかわからない！
悩んでいるところに、WORKROOMのルームメイトが何やら楽しそうにデザインしていました。
聞くと、Cocoda!というデザインスキルを磨きたい人のためのサービスがあるのだそう！
Daily Cocoda!で毎日デザイン
Cocoda!のコンテンツの中に『Daily Cocoda!』というUIデザイン100本ノックができるものがあります。
これは毎日お題が配られるので、そのお題に沿ってデザインしていくシステム。
ユーザー層やコンテンツがあらかじめ決められているので、さくっと取り掛かりやすいのが特徴です。
私は今このDaily Cocoda!に挑戦してやっと今日で8日目が終了したところ。
1日も欠かさずやっているので今の所毎日継続できています！
🗣️#cocoda #ゆりなのデザイン修行
7日目はフードデリバリーアプリのリスト画面。海外アプリ参考にしてみたので配色も大胆にしてみました。
検索窓の下のコンテンツが何回やってもしっくりこなかったのでもう少し考えてみます・・・#今日の積み上げ #駆け出しエンジニアと繋がりたい pic.twitter.com/nJdVpMRmoK— yurina 🐳 🇵🇭webデザイナー (@yurina_web) November 27, 2019
こんな感じで毎日ツイッターでもしっかり報告。
たまに感想くれる人がいて私はその度に泣きそうになります😭とってもうれしい・・・！
他のデザインはこんな感じ。
いかにオシャレに見せるか、これ大事👌
また、同じお題に挑戦した他の人のデザインを見ることができるのも良いです。
自分にはなかった発想が施されていたり、そのデザインにした意図などをコメントで残せるので、そのコメント読むだけでも楽しい！
もちろんやるのは自分のためなのですが、こうして他の人のデザインも見ることができると、『頑張っているのは自分だけじゃないんだ』と励まされることもしばしば・・・✨
デザインに使用している素材・サイト
ここからは私がCocoda！を取り組む際に使っているサイトや素材をご紹介します。
デザインツールは全てAdobe XDで作成しています。
XDはiphoneの画面の大きさのテンプレートがあったり、操作も直感的でかなり簡単なので、以前はphotoshopを使っていた私ですが、あっさりとXDに乗り換えてしまいました。
それくらい簡単で使いやすいので、デザイン特にwebデザインをする方はXDインストールしてみてください！
Adobeの製品を何かしら買っていたら無料でXDはインストールできるので、フォトショかイラレを買ってそれと合わせてインストールするのがおすすめです。
ちなみに私は、お題によってアイコン作成のお題があったりするので、イラストレーターのみ買っています。
フォトショップは以前使っていたのですが今は使ってないので・・・また必要になれば買うつもりです！
写真素材
unsplash.com超おしゃれな写真しか置いてないんじゃないかというくらいのおされ写真素材サイト。
私が写真を使うときはほぼ100％このサイトから引っ張ってきてます！
海外のサイトなので、例えば料理を検索したいときは『foods』や『dishes』のような単語で検索したり、他にも『white』など色名で検索すると写真をみたときの全体のカラーが白っぽいやつで絞り込めたりするのでとってもおすすめです！
おしゃれな女の子のためのフリー写真素材ならここ！
女の子のスキ！がたくさん詰まった素敵な写真ばかりです。
デザインするときだけでなく、ブログのアイキャッチやイメージ画像、あとはとにかくいい感じの写真を使いたいときによく利用してます。
モックアップ系
モックアップとは、実物に当てはめたときにどんな感じかイメージしやすいようにそのものにデザインをはめ込んだものです。
例えばこの画像。
画像の中にiPhoneらしきものがあって、その画面に私がデザインしたアプリの画面をはめ込んでいます。
このようなはめ込み画像のことをモックアップと言います。
スマートモックアップはスマホだけでなく、いろんな媒体でモックアップを作ることができるフリーソフトです。
使いたいモックを選んであとは画像を選択するだけなのでとっても簡単。
写真だけでなくイラストやアイコンもダウンロードできてしまうサイト。
モックアップも充実していて、検索窓で『mockup iphone』のように検索すると、私が使っているようなスマホのモックアップがたくさん出てきます。
プレミアム（有料）と無料のが混ぜて出てくるので、無料のが使いたい方はオプションで無料を選択して検索するのを忘れずに。
便利なサイト
おしゃれなポリゴン風のイメージを簡単に作れちゃうサイト。
モックアップの背景とかに使うとオシャレ感倍増しますね！
流行りのシェイプデザインをこれまた簡単に作れるサイト！手軽すぎる・・！
とっても簡単なので特に理由がなくとも色々作って遊んだりしてます。
画像のサイズがあまりにも大きい場合に圧縮するときによく使っているサイト。
それ以外にもできることたくさんあるのでブックマークしておくのをおすすめ！
デザインをするときにまず見るのがこのサイト。
いろんな方がデザインした作品が残っています。
例えばアプリのデザインを見たいなら『app game』のように、app＋どんな種類のアプリか名前を入れて検索すると、より詳しいデザインが出てきます！
あとは『UI』などの検索ワードもおすすめです！
Cocoda!で待ってます！
私も最近Cocoda!始めたばかりなんですが、とっても楽しいので一緒に切磋琢磨しあえる仲間募集しています！
みなさんよければ一緒にデザインの勉強しましょう〜！
web用のツイッター(＠yurina_web)では日々の学習状況や気づいたこと、作品などをシェアしていますので、こちらもよければフォローしてくださいね！
それでは！
