マガジンのカバー画像

Cocoda!

8
Cocoda! での取り組みをまとめました。
運営しているクリエイター

#フロントエンド

レイアウトの学び_メッセージの明確化

こんにちは。 フロントエンドエンジニアのなけと申します。 前回から3週間も空いてしまった!!!😱 ほぼデイリーで取り組むのは中々難しいですね.. ..🎨 レイアウトを考える際に役立つ3つのポイント。 前回はターゲットを明確にすることを学びました。 今回はメッセージ(内容)を明確にすることを意識して、カフェのホームページを作ってみました。 ..🎨 カフェの構成要素は色々あると思うのですが、 「お店の雰囲気や商品」に焦点を当てて作成しました。完成したものはこちらです。

レイアウトの学び_ターゲットの明確化

こんにちは。 フロントエンドエンジニアのなけと申します。 展覧会を気軽に楽しむ!artmateを開発しています。 さて、前回でデザイン4原則の課題を終えました。 今回からは実際にデザインを作るためのフレームワークを学びます。 枠組みを理解していれば作るものに説得力が出ますね。 取り組んだお題:ターゲットが明確なレイアウトを作ろう ..🎨 子どもやその親をターゲットとした遊び場のLPです。 早速ですが、完成したものはこちらです! 【ポイント】 ・青や黄色などの、明るく

デザイン4原則の学び_コントラスト編

こんにちは。 フロントエンドエンジニアのなけと申します。 展覧会を気軽に楽しむ!artmateを開発しています。 今日でデザイン4原則のお題は最後です! 取り組んだお題:デザイン4原則(コントラスト) ..🎨 食べログ的なサービスの検索一覧画面が今回のお題でした🙌 早速ですが、完成したものがこちらです!! テキストのメリハリ、アイコンによる視認性のメリハリなど、 コントラストを付けることで情報に優先度、強弱が生まれました! 「近接」「整列」「反復」、そして「コントラ

デザイン4原則の学び_反復編

こんにちは。 普段はエンジニアをやっているなけと申します。 iPad Proの液晶を割ってしまいめちゃくちゃ萎えてます😞 気を取り直して、今日もCocoda!に取り組みました。 取り組んだお題:デザイン4原則(反復) ..🎨 求人サイトの検索一覧画面が今回のお題でした🙌 早速ですが、完成したものがこちらです!! 今回勉強になったのは、「パターンの反復」です。 「単純な繰り返し」としての反復(例:カードUIの反復)だけでなく 中段左の「アイコン + テキスト」のようなパ

デザイン4原則の学び_整列編

こんにちは。 普段はエンジニアをやっているなけと申します。 急にめちゃめちゃ寒くなってないですか??🍃 今回も前回に引き続き、デザインの初歩の勉強です。 取り組んだお題:デザイン4原則(隣接) ..🎨 会員登録の入力フォームが今回のお題でした🙌 早速ですが、完成したものがこちらです!! ポイントは2つあって、 1つはタイトルとフォームの項目は左寄せで統一していて、 一方で、ボタンは振る舞いが異なるので中央寄せしているという点です。 ユーザー登録が必要なサービスは多い

デザイン4原則の学び_近接編

こんにちは。 普段はエンジニアをやっているなけと申します。 XDにも慣れてきたところでデザイン4原則の勉強です。 Cocoda!すごいなあ..1つずつ課題がありますね。 取り組んだお題:デザイン4原則(近接) ..🎨 ECサイトの商品一覧ページが題材でした。 早速ですが、完成したものがこちらです!! コレクションUIとリストUIの2パターン作ってみました! どちらも近接によって商品毎の区切りが明確になっていますね。 そして今回もコーダー目線でレイヤー整理も行いました

名刺デザインで 「 よはく 」 を学ぼう

こんにちは。 普段はエンジニアをやっているなけと申します。 さて、前回はSNSのプロフィール画面を作りましたが 今日は名刺のデザインに挑戦してみます! 取り組んだお題:はじめてのデザイン ..🎨 慣れていないので30分くらい掛かっちゃいました。 今回は下記の2点が勉強になりました。 1. 余白 名刺ってWebページやポスターなんかよりも 余白の割合が大きいので、0 -> 1で作るとしたら 情報と余白のバランス考えるのが難しいだろうな〜って🤔 色々なサイト、本で余白の

Cocoda!をはじめた

こんにちは。 普段はエンジニアをやっているなけと申します。 フロントメインでUXデザイン、IAなどにも興味を持ちつつも ずっとアウトプットしよう!という気持ちにはなれず、、 2年ぶりくらいにCocoda!を除いたらとても使いやすく なっていたので良い!!!!と思って始めました😊 取り組んだお題:UIデザインをはじめよう ..🎨 2~3時間掛けてついに完成したのですが、なるほど。 これは、コーダーにとって良い勉強になりますね。 良いデザインデータとは何か、を学べる気がしま