紙のデザイナーがウェブデザインする時に絶対に覚えておいた方がいいこと

紙のデザインとウェブのデザインは違うと良くいいますが、デザインの本質は問題を解決するということで同じです。これについてはまた書きます。

今はモバイルファーストの時代ですので、紙のデザインをやっている人もレスポンシブデザインを意識しないといけなくなります。

CSSフレームワークのことを意識すべし

レスポンシブデザインは自力でコーディングしようとすると非常に面倒くさいです。

モバイル端末によって解像度が違うし、どの解像度でどのデザインを適応させるかなど分岐が増えまくります。

 

そういう問題を解決すべく、最近は便利なCSSフレームワークというものがあったりします。

CSSフレームワークとは何かというと、レスポンシブレイアウトなどの面倒なコーディングをある制約の上で、簡単に記述できるように、頭のいい人が用意してくれたCSSのツールです。

代表的な端末でレスポンシブデザインが最適化されるのですが、独自でブレイクポイントを追加するなどすると面倒になります。

Twitter Bootstrapが代表的

一番メジャーなCSSフレームワークはTwitterBootstrapです。

フレームワークそれぞれに作法があるのですが、とりあえずBootstrapを覚えておけばいいでしょう。

Grid Layout

Bootstrapの作法で言えば、Grid Layoutです。

grid-layouts

横幅を12分割して、端末解像度によって使いたいレイアウトによって12を使います。

例えば左サイドバー、右メインコンテンツの場合

サイドバー(3) + メインコンテンツ(9)  = 12

といった具合です。

 

4カラムで

コンテンツ(3) + コンテンツ(3) + コンテンツ(3) + コンテンツ(3) = 12

というのもアリです。

 

でも12を割るという制約のため5カラムができないのは想像できると思います。

これは覚えておいた方がいいです。

デフォルトカラーとパーツ

Bootstrapにはデフォルトのカラーと用意されているコンポーネントと呼ばれるパーツがあります。

例えばボタンとボタンのカラーはこちら

例えば、ボタンを作る必要がある場合、新規にCSSを書いてもいいのですが、既に用意されているパーツが使えるのであれば使ったほうが早いし、デザインをBootstrapに合わせる方が効率的です。

 

アイコンのフレームワークを知っておく

アイコンも、ウェブでよく使うアイコンを偉い人がウェブフォントにして公開してくれてたりします。

代表的なのは Font Awesome でこれらのアイコンはCSSで書かれているので、拡大縮小しても解像度を保ってくれます。

font-awesome

Retinaディスプレイなどが出てきてからは、端末に寄ってDPiにばらつきがあったりしますので画像でアイコンを作るのは良くないです。拡大したら荒くなるし、端末ごとに指定するのも面倒です。

コーダーはできる限りコードでアイコンを書くので、フレームワークにアイコンがあるのであればそのデザインを使いましょう。

JSライブラリの制約を知っておく

Javascriptは最近は時代遅れになりつつある、jQueryの代りにReactやAngularなどが主流になってきてます。

AngularはjQueryの弱点であったコールバック地獄などを解消してくれますが、jQueryの方が動きをつけるプラグインが豊富だったりします。

 

例えば、Angularではフォームやリストなどを作りたい時大変便利ですが、

フェードアウトして消えるなどのjQueryでは簡単にできてた動作が大変だったりします。

Angularのdemoはこちら

 

カルーセルやフォトビューアーなどのプラグインはjQueryの得意分野ですが、プラグインによって、できない動きやデザインがあったりします。

そのあたりも使いたいプラグインのデモを見て確認するといいでしょう。

 

と、色々面倒なウェブデザインですが、デザインの提供を頂ければ弊社でも安価でシステムの開発ができるので是非お問い合わせお願いしますよっと♪

The following two tabs change content below.
西尾学
会社の代表やってます。遊ぶように仕事やってます。