【WEBデザイン】使い回しやすいデザインを作ることの重要さ

こんにちは。島根県松江市にて、スマホアプリやWEBシステムの開発を行う、株式会社ブレイブスタジオです！本日もデザイナー兼note担当の佐伯がお送りいたします。

デザイナーと名乗っています筆者ですが、実はフロントエンドのコーディングも行うこともあります。

デザイナー（とくに、WEBやUIのデザイナー）はプログラミングを経験した方がいいか？という議題は幾度となくバトって炎上を繰り返していますが、筆者個人の意見としては経験した方がいいに一票です！

『見た目』だけに突っ走ると、余計な工数がかかってしまう？

WEBデザインは、デザイナーが作成したものがそのまま反映されるわけではなく、コードを書いて、初めて反映されます。

良い印象を持たせる「見た目」の部分のデザインに気を遣うことはもちろんですが、やはり裏で動いているコードのことも考えないと、コードを書くエンジニアを困らせてしまい、余計な工数がかかってしまう場合があります。

両方に気を遣えるバランスを保ちながら、デザインしていくことが重要です。

なので、多少のプログラミング知識は必要だなと思います。

そしてデザイナーに限らず、そもそもプログラミング自体は経験して損は無いですね。最初は難しいと感じますが、少しでもチャレンジしてみたい方は、HTMLを書くことからお勧めします。（と、ひろゆきさんがおっしゃっていました。）

具体的に、どんな知識が必要？

話が逸れてしまいましたが、本題に入ります。

最近、久しぶりにフロントエンドのコーディングをする機会がありまして、やっぱりSASS（SCSS）は便利だなあああ！と感心する日々でした。

それと同時に、使い回しやすいデザインを作ることは重要だなと改めて感じました。

WEBデザインでは、ボタンの形、フォントのサイズ、配色、レイアウトなど、さまざまなパーツが繰り返し使われることがベストです。

なぜなら、見た目の美しさはもちろん、繰り返し使えるものは変数が使えるので、コード量が少なります。

仮にこのようなデザインのボタンがあったとします。

普通にCSSで書くと、このような長いコードを書いてしまいます。

.button_blue {
 width: 240px;
 background-color: #216EFF;
 margin: 0 auto;
 font-size: 14px;
 font-weight: 600;
 color: #FFFFF;
 border-radius: 50px;
 padding: 24px 80px;
}

.button_orange {
 width: 260px;
 background-color: #FFBB21;
 margin: 0 auto;
 font-size: 14px;
 font-weight: 600;
 color: #FFFFF;
 border-radius: 50px;
 padding: 24px 80px;
}

ですがSCSSの変数を使うと・・・

@mixin Button($width, $background-color) {
 width: $width;
 background-color: $background-color;
 margin: 0 auto;
 font-size: 14px;
 font-weight: 600;
 color: #FFFFF;
 border-radius: 50px;
 padding: 24px 80px;
}

.button_blue {
 @include Button(240px, #216EFF)
}

.button_orange {
 @include Button(260px, #FFBB21)
}

『@mixin』で、青ボタンとオレンジボタンに共通しているスタイルを書いていきます。

値が変わるスタイル（ボタンの幅と、ボタンの色は）、引数として保持します。

『@include』で呼び出す際に、それぞれのクラスにボタンの幅とボタンの色を書いていきます。

さらにここからボタンが増えても、『@include Button(〇〇px, #〇〇)』と、値が変わる部分だけを書けば、簡単にボタンを増やすことができます。

変数をいろんなところで応用していけば、コード量が少なって見た目がスッキリし、保守性の高いコードになります👏

お互いが、より良い製品をめざすために

今回は使い回しやすいデザインの例として、SCSSの@mixinと@includeの話をしました。

ここまでゴリゴリに書かなくても、多少のコードの知識があるだけでもエンジニアの負担がグッと下がり、お互いハッピーになりそうな気がしませんか？

しかしコードのことばかり考えてしまうと、単調でつまらぬデザインになってしまうことも。

だからこそ、ディレクター、デザイナー、エンジニア、それぞれが興味を示し、何を重視するかをしっかり話し合うことが、より良い製品の第一歩になるのではと思います。

ーーー

◆株式会社ブレイブスタジオ コーポレートサイト
https://bravestudio.co.jp/

株式会社ブレイブスタジオでは、一緒に働く仲間を募集しています！
こちらにて応募を受け付けております！