ShunNote 
あけましておめでとうございます。シュンです。
先日Daily Cocoda!を50日間なんとか終わらせました！
今回はDaily Cocodaの進め方についてお話できればと思います。
本日のCocoda!
継続63日目。制作時間1h24m
DailyCocoda50ポートフォリオサイト
スクロールボタンを作品集とフッターの外側に配置考えたり
一目でポートフォリオとわかるように文字大きくしてメニューもシンプルにしました最終日まで完走お疲れ自分。まだまだ課題は多い😇#今日の積み上げ#uiux pic.twitter.com/3mqLaOy0IB
— シュン@ShunNote (@2021_Shun) January 14, 2020
目次
はじめに
Cocoda!を始めたのはこちらのnoteの記事を見てからです。
Cocoda!をやってみようか検討している人はこちらで見てから始めてみてもいいかもしれません。
結構軽い気持ちで始めたんですがまさかこんなに続けながらやるとは当初は思ってもいませんでした笑
note記事
DailyCocoda始めたのもあゆみさん(@ayumiueda_)のnoteを見て楽しそうと思ったからです
cocodaやってる方、非常に参考になるので是非見て欲しいです
ボクは10回は見ましたhttps://t.co/b21Z5OPkMV— シュン@ShunNote (@2021_Shun) January 21, 2020
Daily Cocoda!の進め方
テーマやお題に沿ってペルソナがあるので作品を作ります。
Cocoda!について知らない方はこちらの記事を読んでいただけると幸いです。
モックアップ
モックアップは実際には動かないけどビジュアルはそれっぽく作られたデザインのこと。
よくケータイショップに動かないスマホの模型が置いてあると思います。それです。ダミーのことです。
実際に形だけ作ることで作成段階ではわからない問題が確認できます。
ここでは画面のデザインのみを指します。
本日のCocoda!
継続55日目。制作時間1h
DailyCocoda42動画アプリの動画詳細画面
Amazonプライム好きなのでデザイン確認しつつ作成
SNSに時間割く余裕なくなってきたので
cocodaツイートする以外リマインダーでツイートしようかと考えてるのでリプライ返せないです🙇♀️#今日の積み上げ#uiux pic.twitter.com/KVJa8VI3vH— シュン@ShunNote (@2021_Shun) January 6, 2020
モックアップ作成
画面のデザインをツールを使って作成していきます。
ボクはAdobe XDを使用しましたがツールの指定はないので
Figma,Sketchを使用してる人もいるのでそちらで作っても大丈夫です。
デザインのイメージをギャラリーサイト等で検索
⬇︎
Adobe XD（画面デザイン）
⬇︎
Photoshop（iPhoneのデータ）
という順番で作成していました。
Cocodaのデザイン考える時は
『dribbble』で検索しながら考えてますイラストやロゴからモックアップまで見れるし
作品数も多いのでUIデザイン興味ない人でも
参考になるはず英語での検索が必要だけど簡単な単語だけでも検索結果が変わるので
検索力って大事だと思ったhttps://t.co/X7pjmCVvhq— シュン@ShunNote (@2021_Shun) January 9, 2020
モックアップ素材
モックアップ作成時に使っていたiPhoneデータや素材を紹介します。
mockuo.photos
Daily Cocoda!を始める前にデザインの基本を学べるカリキュラムをやっていた時は
mockup.photosを使って画面外の画像を作ってました。
デザインを当てはめるだけで誰でも使用イメージを作れるので簡単です。使い方は下記リンクから。
mockup.photos
本日のCocoda!
継続7日目。制作時間1h20m(モック作成込)
XDだけでなくPhotoshopの操作も慣れてきましたPhotoshopの操作も載せていこうと考えてます#Webデザイン #本日の積み上げ pic.twitter.com/HQrnHcnVsa
— シュン@ShunNote (@2021_Shun) November 18, 2019
本日のCocoda!
制作時間1h14m
UIキット使ったら想像以上に苦戦。モックアップはPhotoshopで作成。
スマホを持ってカフェを探してる人をイメージしてモックアップを作りました。限られた時間内で制作を終わらせるのが当面の目標です#Webデザイン #今日の積み上げ pic.twitter.com/KaFWP3eZ84
— シュン@ShunNote (@2021_Shun) November 21, 2019
Daily Cocoda!#01~#07 使用素材
Daily Cocoda!を始めた時に使用してたiPhone Xの画像データです。
画像が立体的で綺麗に見えるので最初の1週間くらいはこちらを使用していました。
https://dribbble.com/shots/3805459-iPhone-X-mockup
Cocoda!を投稿する時に
Photoshopでモバイルのモックアップ作る時に使用したiPhone7 https://t.co/0zeG5p8pBN
iPhone Xhttps://t.co/ZGDSd1sS5j
のモックアップデータですiPhone7は正面からデザインが見やすく色別で対応してます
iPhone Xは立体的で高級感があって一時期大変お世話になりました pic.twitter.com/zgAtxg3aiT— シュン@ShunNote (@2021_Shun) December 6, 2019
本日のCocoda!
継続19日目。制作時間1h19m音楽アプリの再生画面です
シンプルにするために配色を薄くしましたが
薄くし過ぎたかなデザインって「かっこいい」「可愛い」で成り立つものではないのだと改めて思いました。#今日の積み上げ #cocoda pic.twitter.com/SWodVtRPa2
— シュン@ShunNote (@2021_Shun) November 30, 2019
Daily Cocoda!#08~14
当初は同じデータを使い続けて綺麗に作品を並べるのを夢見ていたんですが
画面のデザインが見辛く感じ、正面から見えるiPhoneに変更しました。
本日のCocoda!
継続22日目。制作時間53m天気予報のアプリ画面。
シンプルに見やすいデザインにしましたが
最低気温等の気温差を書き忘れたのが残念です。デザイン考えるのも慣れてきたので
あとは時間内にできることを増やしてクオリティあげれるように頑張ります😌#今日の積み上げ #cocoda pic.twitter.com/nqKLwZcSay— シュン@ShunNote (@2021_Shun) December 3, 2019
Daily Cocoda! #15~
最終的にこちらに落ち着きました。
素材に関してですが他にもたくさんあるのでこちらで検索してみてください。
https://www.wp-benricho.com/iphone-mockup/
本日のCocoda!
継続38日目。制作時間42mリワードモーダルのデザイン
買い物したのがわかるようにモーダルを磨りガラス風のデザインにしました
イラストはunDrawに頼りきりです
ようやくDaily Cocoda折り返しまで来ました😃
まだまだこれからですね！#webデザイン勉強中#今日の積み上げ pic.twitter.com/I4PxxRxur8— シュン@ShunNote (@2021_Shun) December 20, 2019
まとめ
2ヶ月かからないくらいでDaily Cocoda!終わらせたんですが意識していたのは以下の通り。
- 決められた時間内で必ず作る
- 基本毎日やること
- 自分で0からデザインは作れない
- SNSに投稿し、アウトプットしよう
Daily Cocodaは一応大体1 時間くらい目安の時間が決められています。
時間を過ぎたからダメとかはないんですが決めた時間でやらないと気になったところを永遠に修正することになります。
また、デザイナーを目指すのであればきっと時間内で作業をしなければならない時もあるはずです。
どんなに酷い出来だったと自分で思っても妥協しましょう。
毎日やらないと何日か放置するだけできっとだらけます。続けることで習慣化できるようにやってました。
0から自分オリジナルの作品を作ろうとすると主観が入り過ぎて、第３者目線無視の作品が出来上がると思っていたので
ギャラリーサイトなどをみてインスピレーションが湧くようにしていました。
Cocoda中には丸パクリしてる人もいたので参考程度にオマージュしましょう。
Cocoda!内では作品を共有できますがあくまでCocoda!の中だけだったのでSNSでも投稿して反応やフィードバックがもらえるようにしていました。
より多くの人に見て貰えばモチベーションにも繋がります。
まとめだけ異常に長くなりましたが以上です！
最後まで見ていただき、ありがとうございます！
是非記事の共有をよろしくお願いします。
