鈴木智子のホームページのアクセスアップ講座 ブログ WEBデザインについて

WEBデザインについて

西新宿ドットネットではPC版のデザインに960 Grid Systemを採用してきました。
フューチャーフォン、タブレット、スマホについてはCMSに組込み、URLが同一のアダプティブWEBデザイン(adaptive web design)を採用し続けて来ました。
レスポンシブWEBデザインと見た目的には同じですがアダプティブWEBデザイン(adaptive web design)はユーザーエージェントによって表示するコンテンツを変える手法です。

Googleフレンドリーなコーディング

Googleがスマホサイトをより重要視しレスポンシブWEBデザインを推奨した現在、旧来のの方式に決別する時が来ました。
最近では通信環境の整備、スマホの処理能力向上した状態が伺えます。
そこで西新宿ドットネットもレスポンシブWEBデザインへと移行します。

採用するテクノロジー

コーディング

コーディングの基本はhtml5doctorです。

http://www.html5.jp/html5doctor/

フォント

フォントは通信環境が整備されているのでWEBフォントを採用します。
様々なWEBフォントが用意されていますがGoogleのNoto Sans JPを採用します。
その他にも必要に応じて対応します。

https://googlefonts.github.io/japanese/

アイコン

WebアイコンフォントはFont Awesomeを採用します。
Bootstrapのアイコンを使いやすくするための物だったのですがBootstrapを使うよりもこちらを使う方が簡単なので採用しました。

http://fontawesome.io/icons/

デザイン

レスポンシブWEBデザインはデザインとコーディングが一体となっており動的な要素もあるので数多くのデザインテンプレートを用意しておかなければなりません。
デザインテンプレートを使わずにBootstrapと言うフレームワークを利用する手法もありますがデザインありきでコーディングすると対応出来ないケースも出てきます。

http://getbootstrap.com/

そこで西新宿ドットネットではhtml5upやpixelarityなどにならってデザインテンプレートを数多くリリースして行くことと決定しました。

企業向けデザインテンプレート(No.001)

その第一弾として企業向けデザインテンプレートを作成しました。

デモ

2017/07/04 14:10

このページのTOPへ

follow me

鈴木智子のホームページのアクセスアップ講座