moppy/Creative/2020年上期勉強会第11回【WEBサイトのレイアウトを基礎から学ぶ】

こんにちは！採用担当の鈴木です！
今回も勉強会のご紹介です(=ﾟωﾟ)ﾉ

またまたクリエイティブグループの勉強会が開かれていたので、お邪魔させていただきました！
発表者Tさんは、セレスに新卒で入社し2年目のメンバー！
未経験ながらもモッピーのクリエイティブチームの一員として日々モッピーを盛り上げてくれています(^^)/

それでは見ていきましょう！！！

【WEBサイトのレイアウトを基礎から学ぶ】

【アジェンダ】
・はじめに…
・レイアウトの種類と特徴
・レイアウトの決め方
・モッピーを例に実際に考えてみる
・まとめ

本題に入る前に、そもそもWEBサイトはどのような流れで制作されるのかをおさらい。

【補足】
Step1,2,3で“WEBサイトを経て実現したい目的”と“ペルソナ”を明確に設定する
Step4,5では、目的やペルソナに合わせて“内容”と“見せ方（UI/UX）”を定める
そしてStep6,7で、Step1～5に考慮してモックやプロトタイプを作成する

良いWEBサイト制作とは“オシャレさ”や“見やすいさ”だけでなく、目的を達成することを念頭において制作していく事のように感じました。
改めて、WEBデザイナーとは制作スキルとマーケティングスキルの両方が必要であることが良く分かります。

WEBサイト制作の流れの以外にも。。。
【デザインの4原則について】

【人間の視線について】

レイアウトの設定をする上で把握しておくべき事について触れていき、続いて「レイアウトの種類と特徴」へ…

4種類のレイアウトについて、実際のWEBサイトを例にしながらそれぞれの特徴やメリデメの紹介。
目的により適切なレイアウトがあるという事で、言われてみれば確かに記事系サイトのレイアウトって似通っているような気がしますね！

さて、ここまでを振り返り主題である「レイアウトの基礎」とは単純に種類や特徴を抑えておくことだけでなく、概念的には「レイアウトを決めるまでの過程が基盤となるからしっかり一貫してないといけないよ」という事ではないかなと思いました。

勉強会でもレイアウトの決定について

としていて、冒頭のWEBサイト制作の流れのStep1～4をベースに考えるべきとの事でした。

この後、実際にモッピーを例にどのようなレイアウトが良いかについてディスカッションを行いました！
ディスカッションでは、前回同様に担当プロダクトに関係なく皆さん意見出しに積極的で、クリエイティブ全体で一つ一つのプロダクトの質を高めていこうというのが伝わってきました！勉強会のたびに学びがあるのは良いことですね(・∀・)ｲｲﾈ!!

ディスカッションを終え勉強会は終了！

ストーリーにはざっくりとまとめているものの、勉強会の所要時間は約1時間ほど！
より詳細もお伝えしたいですが、文字量がえぐくなるのでこのくらいで（笑）
セレスの勉強会に参加してみたいという方は、是非社外向けの勉強会が開催された際にご参加いただけたらと思います('◇')ゞ

それまで待てない．．．という方は中途採用も行っているので、話を聞きに行きたいボタンをお願いします！

▽▽▽セレスのデザイナー▽▽▽