#デザインとコーディング で相乗効果を生み出すために知っておきたいこと 「デザインとコーディングの勉強会@那覇 #1 〜新垣 雄一郎〜」

REPORT

#デザインとコーディング

Web制作に必要なワイヤフレーム、デザイン、コーディングなどを学べる機会として、主催・新垣 雄一郎さんで「デザインとコーディングの勉強会@那覇 #1 」が開催されました。

会場には、約15名のデザイナーさんやエンジニアさんがお越しになり、日常で抱える不安な点を解消すべく、勉強会が進んでいきます。

「デジタルと紙」でのデザインの違いを知る

新垣さんは、大学時代にデザインを教わってきた教授から「デザインが仕上げる前から紙で印刷をするように」と教わったそう。

そこから、完成するデザインの前に、とくに色合いや文字の表記の仕方を確認するようになりました。

さらに、日常で心がけていることとして、デザインが載せられる場まで意識すること。具体例として挙げられたのは「ポスター」でした。

例えば、ポスターが掲載される学校の掲示板をイメージして、余白が十分にあるのか、他の印刷物と情報が混じらないか、など細部までデザインを仕上げていきます。

👆講師の新垣 雄一郎。株式会社レキサス デザイナー (8年目)。Webシステムの画面設計、デザイン、フロントエンドが仕事の中心で、エンジニアとコラボしてデザイン周りを担当することが得意。アプリ・印刷・イラストにも少し手を出しています。

モバイルファーストの誤解 チーム工程を意識した制作フロー

昨今、「モバイルファースト」がうたわれるよう、スマホでの表示を意識しながら制作されます。

新垣さんがコーディングに入って制作していくなかで、大幅な工程数の増加により、クライアントとの調整が遅れることがあったと言います。

そこで、クライアントに早めにふれてもらうこと、それを実現するために、パソコンで50パーセント、例えば画面遷移が確認できるレベルで一度チェックをもらいながら、予算組みしていったそう。

制作フローとして、社内でのディレクターや営業との調整、クライアントとの調整、さまざまな関係性があるなかで、いかに最速でクライアントの細かな要望を叶えていると言います。

「デザインとコーディング」視点の違いからこそ、最適な制作物を作り出す

さて、デザイナーの共通言語として「思考・概念を組み立てる」デザイン4大原則があります。

近接(Proximity)整列(Alignment)強弱(Contrast)反復(Repetition)」があり、原則はコーディングにも通じるそう。

例えば、ソースコードの誤りとして「タグ」のつけ忘れがありますよね。そのとき、デザインの原則である「整列」を意識したソースコードにより、ミスが減っていくそう。

お互いに共通する原則、またはそれぞれの原則を生かすことで、「デザインとコーディング」のお互いの質は高まると新垣さんは語ります。

次回は中部で開催予定!? 「デザインとコーディング」を伝えていきたい

本日、お越しになれなかったかたで、他の地域で開催してほしいと感想をもらうほど、反響があった勉強会でした。

最後は、新垣さんから個別の質疑応答する時間を設けてもらい、会場にお越しのディレクターさんやデザイナーをはじめた人など、貴重な情報交換になっていたようでした。

「エネルギーを使い果たしました!!」と笑顔で語る新垣さんのがんばりもあり、大いに盛り上がるひとときとなりました。みなさん、ありがとうございました。

主催: 新垣 雄一郎 (Yuichiro Arakaki) さん

前回のデザインイベントはこちら

「ロゴを動かしたい…」から始まったデザイン勉強会