紙のデザイナーがウェブデザインする時に絶対に覚えておいた方がいいこと
紙のデザインとウェブのデザインは違うと良くいいますが、デザインの本質は問題を解決するということで同じです。これについてはまた書きます。
今はモバイルファーストの時代ですので、紙のデザインをやっている人もレスポンシブデザインを意識しないといけなくなります。
CSSフレームワークのことを意識すべし
レスポンシブデザインは自力でコーディングしようとすると非常に面倒くさいです。
モバイル端末によって解像度が違うし、どの解像度でどのデザインを適応させるかなど分岐が増えまくります。
そういう問題を解決すべく、最近は便利なCSSフレームワークというものがあったりします。
CSSフレームワークとは何かというと、レスポンシブレイアウトなどの面倒なコーディングをある制約の上で、簡単に記述できるように、頭のいい人が用意してくれたCSSのツールです。
代表的な端末でレスポンシブデザインが最適化されるのですが、独自でブレイクポイントを追加するなどすると面倒になります。
Twitter Bootstrapが代表的
一番メジャーなCSSフレームワークはTwitterBootstrapです。
フレームワークそれぞれに作法があるのですが、とりあえずBootstrapを覚えておけばいいでしょう。
Grid Layout
Bootstrapの作法で言えば、Grid Layoutです。
横幅を12分割して、端末解像度によって使いたいレイアウトによって12を使います。
例えば左サイドバー、右メインコンテンツの場合
サイドバー(3) + メインコンテンツ(9) = 12
といった具合です。
4カラムで
コンテンツ(3) + コンテンツ(3) + コンテンツ(3) + コンテンツ(3) = 12
というのもアリです。
でも12を割るという制約のため5カラムができないのは想像できると思います。
これは覚えておいた方がいいです。
デフォルトカラーとパーツ
Bootstrapにはデフォルトのカラーと用意されているコンポーネントと呼ばれるパーツがあります。
例えば、ボタンを作る必要がある場合、新規にCSSを書いてもいいのですが、既に用意されているパーツが使えるのであれば使ったほうが早いし、デザインをBootstrapに合わせる方が効率的です。
アイコンのフレームワークを知っておく
アイコンも、ウェブでよく使うアイコンを偉い人がウェブフォントにして公開してくれてたりします。
代表的なのは Font Awesome でこれらのアイコンはCSSで書かれているので、拡大縮小しても解像度を保ってくれます。
Retinaディスプレイなどが出てきてからは、端末に寄ってDPiにばらつきがあったりしますので画像でアイコンを作るのは良くないです。拡大したら荒くなるし、端末ごとに指定するのも面倒です。
コーダーはできる限りコードでアイコンを書くので、フレームワークにアイコンがあるのであればそのデザインを使いましょう。
JSライブラリの制約を知っておく
Javascriptは最近は時代遅れになりつつある、jQueryの代りにReactやAngularなどが主流になってきてます。
AngularはjQueryの弱点であったコールバック地獄などを解消してくれますが、jQueryの方が動きをつけるプラグインが豊富だったりします。
例えば、Angularではフォームやリストなどを作りたい時大変便利ですが、
フェードアウトして消えるなどのjQueryでは簡単にできてた動作が大変だったりします。
カルーセルやフォトビューアーなどのプラグインはjQueryの得意分野ですが、プラグインによって、できない動きやデザインがあったりします。
そのあたりも使いたいプラグインのデモを見て確認するといいでしょう。
と、色々面倒なウェブデザインですが、デザインの提供を頂ければ弊社でも安価でシステムの開発ができるので是非お問い合わせお願いしますよっと♪
最新記事 by まなびん (全て見る)
- 日本最大級セミナーのポータルサイトの開発に関わらせて頂いています - 2019年10月24日
- エンジニアとして求人応募する際に意識してほしいこと - 2019年10月23日
- 受託が忙しく自社サービス開発できないので開発メンバー募集！ - 2019年1月28日