きなこブログ

備忘録、レポートなどなど。毎週日曜日の20時に更新していきたいと思います。

ペアデザインという取り組みをしてみました。

"ペアデザインという取り組みをしてみました。"

こんにちは、きなこです!
毎日ヒマな時間に意識して本を読むようになってから、読書にハマっております。
オススメの本があれば教えてください👍

今回は、思いつきで始めたペアデザインという取り組みについて紹介しようと思います。

ペアデザインとは

2人1組で共通のお題に沿って相手がデザインしたWebページをコーディングしていくという取り組みになります。
次に実際やってみた流れや具体的な方法を紹介するので、興味のある方は友達とやってみてください👍

ペアデザインのメリット

ペアデザインを行うことによって鍛えられるものは

  • デザイン力
  • 考える力(コンセプトに関することやなぜこうしたのかなど)
  • コーディング力
  • コミュニケーション能力

などがあると思います。
また、1回ペアデザインを行うだけで2つ作品が出来るため、ポートフォリオの作品を増やしたい方にもオススメです。

やってみた

今回はサークルのお友達のだいずちゃんが一緒にやってくれることになりました。

1. テーマを決める

スプレッドシートとかにやりたいテーマをたくさん書いて、共通のテーマを決めましょう。今回、私たちは架空のカフェのサイトを作ることになりました。

2. スケジュールを決める

お互いのペースやスケジュールを見つつ、いつまでにデザイン・コーディングをするかというスケジュールを決めました。
今回はデザイン&コンセプト決定に1週間、コーディングに3週間かけるというスケジューリングにしました。

また、デザインレビューはオフラインで行いたかったので、もくもく会を行う時間も作りました。

3. デザインを行う

ここからは個人でコンセプトを決めたりデザインを作っていったりします。


私は、「落ち着けるカフェ」というコンセプトで作りたかったのでシンプルでシックな感じのデザインにしました。

4. デザインレビュー

実際に会って、お互いのコンセプトやデザインを共有した上で、デザインレビューを行いました。


だいずちゃんが作ってくれたカフェのページのデザインはこちら。
瀬戸内のカフェというコンセプトで爽やかなページを作ってくれました。

5. コーディング

再び個人作業に。
今回は「ペアデザイン」なので、前工程でデザレビュした相手のデザインをコーディングすることになります。


こんな感じでもくもく進めつつ、予定の10月7日までに無事完成させることができました。

実際作ったもの

実際に作ったページがこちらになります。

pairdesign-cafe01-ddck.netlify.com

Githubはこちら。

github.com

ホスティングにはNetlifyを使いました。

余談ですが、URLの末尾の四文字は「design だいず cording きなこ」でddckにしました。笑
どちらがどこを担当して作ったのか分かればなんでも良いと思います。

そして、だいずちゃんが作ってくれたサイトがこちら。

DropCafe

メニューのスライドや余白、ロゴを文字で表現してくれたりととても頑張ってくれて素敵なページを作ってくれました。

次回のペアデザイン

だいずちゃんと次回行うペアデザインでは、Twitterで見かけた不思議な写真素材サイトの写真だけ使った何かを作ろうと計画しております。

nurse-web.jp

どんなものになるかは想像がつきませんが、興味のある方は暖かく見守って頂けると嬉しいです。笑

まとめと感想

思いつきでやってみた試みですが、それなりに自分の力になっているなという実感がありました。

反省点としては、フローがはっきりしていなかったり、ファイルの受け渡しでわちゃわちゃしたりしてしまったので、次回からはそこら辺を注意してもう一度取り組みたいと思います。

また、デザインの時点で「これコーディングしにくいかなぁ…」とかそういうの考えない方がスキルアップに繋がりそうです。世の中にあるものは全部表現できるでしょ!くらいのノリでいた方が良いと思います。

ペアデザインは取り組むとデザインとコーディングの力が(ちょこっとディレクションも)付くのでぜひいろんな人にやって欲しいなと思っています。

それでは、きなこでした!