デザインガイドライン

ガイドラインについて

Webページデザインの理解向上・品質の均一化などを目的としたガイドラインです。

対象

大事なこと

個人での制作と違い、お客様はデザインされたサイトにそれなりの大金を払うことになります。 大金払ってるのにダメなデザインで満足するわけないよねー。ということ。

デザイン基本事項

他社のデザインを調べることで、業界の方向性を理解したり、逆に差別化を考える上での参考にしやすくなります。

グリッドベースのレイアウトは頭を揃えやすく、自然と整ったデザインにしやすい。レスポンシブ化する場合の目安にしやすいメリットもあります。

グリッドやガッター幅など、デザイン時のレギュレーションサイズを決める際の基準を決めておきます。5で割れる値なら考えやすいです。例えばpaddingの幅は15pxにするなど。

デザインとして必要な場合以外は、種類が多すぎるとまとまりがなくなり、コーディング設計も難しくなります。

適度な間隔があることで、文章の視認性が上がり各要素の関連性も認識しやすくなります。

IE9以前や旧Androidブラウザなどはプログレッシブ・エンハンスメント対応で可

参考スライド

Webデザインのセオリーを学ぼう from Toshiaki Sasaki

配色

予めWebサイトのカラースキーム・カラープラン(配色設計)を立てる(hex値(#FFFとか)で決めておくとコーディングも楽)

基本は3色とし、増やしたい場合はベース・メイン・サブ・各3色ずつくらいがオススメ。
基本色がちゃんとできていれば、それだけデザインは成立させやすい。

参考 http://www.sipec-square.net/~mt-home/students/miyazono/project/sakkaku/page01.html

参考スライド

色彩センスのいらない配色講座 from Mariko Yamaguchi
ノンデザイナーのための配色理論 from tsukasa obara

配置・レイアウト

セクションの区切り方や、境界の見せ方。ドロップシャドウなどの濃度やぼけ足の加減でも情報の強調度合いや意味が生まれる。

配置別

黄金比・白銀比

Photoshop・PSD関連

基本

ページの参考サイズ

以下はオーエス案件での主なコンテナサイズ。
実際は作業する案件や、そのレギュレーションに合わせる。

PCサイト レスポンシブサイト(Bootstrap3) スマートフォンサイト
標準 960px 970px(md) 640px
1160px 1170px (lg) 768px

【TIPS】

参考スライド・URL

コーディングを考慮したWebデザインガイドライン from Hiroyuki Makishita

参考URL

Photoshop キーボードショートカット各種

操作によってはキーボドショートカットじゃないほうが早いこともあるので、使いやすさに応じて。


画像・写真

画像の書き出し形式

ファイルサイズと画質に応じた形式を利用する。また、書き出しの際はできるだけ圧縮する。 ページの表示速度や、SEO・LPOにも影響することに留意する。

【TIPS】

テキスト

文字組

参考URL

http://stocker.jp/diary/typographic/

参考スライド

いますぐ使えるタイポグラフィ from Shinichiro Yabu
いますぐ使えるタイポグラフィ2〜書体のはなし from Shinichiro Yabu
「Webデザイナーのためのタイポグラフィと文字組版」 from swwwitch, inc.
デザインに自信がつく、タイポグラフィの基本 from Takuya Nishitani

フォント

ダウンロード素材や有料のフォントは利用が制限されます。フリーフォントでも、利用が制限されていることがあるので規約はよく読み厳重に注意する。

Webフォント

ライセンス的に問題なければサブセットを作るなどの対処方法もある。

【TIPS】

主要なOS標準の日本語フォント(ゴシック)

その他

参考:各OSに標準インストールされているフォント

Windows

Mac

iOS

文章・体裁・他

流行性(フラットデザイン・マテリアルデザインの取り入れなど)

フラットデザイン = 物足りないみたいなことを言われる場合もあるが、そう言われる場合はフラットデザインでなく、単にデザインの仕方がわるい。

Material-designなどのガイドラインは、理由があって策定されているものなので、利用しないにしてもその意図を理解することは上達の近道。

参考

フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大 from schoowebcampus

CSS3関連

スマートフォン・デバイス対応

エンドユーザーがスクロールできることに気づかないこともあるので、実機などでも確認する。

その他の重要事項

古臭くならないように注意する。 とくにHPP案件は古い感じが出やすいので強い意思をもってデザインする。

よくおちいりがち。強い意思をもってデザインする

パターン画像だらけは印象が悪いだけでなく、レスポンシブ化やRetina対応の弊害になります。逃げちゃダメ。

付録・参考資料

webデザインギャラリー・参考サイト

その他の参考

Back to TOP

▼・w・▼