paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

【Webサイト・アプリ】デザインガイドライン作りに超役立つサイト8件

f:id:paiza:20161207133713j:plain
Photo by Pascal Maramis

f:id:paiza:20140916135428p:plainこんにちは。谷口です。

Webデザインの制作においては様々なフローがありますが、デザインガイドラインを作成することは、サイト内でのトーンを統一し、使いやすいサイトを作っていく上で大変重要です。

ガイドラインとは、直訳すると指針や指標という意味になります。Webデザインにおけるガイドラインとは、Webサイトのデザインに関する指標や指針を示したものということになります。

例えば、背景の色や文字のフォント、ボタンの形などに関して一定のルールを作り、それを守ることでWebサイト内での統一化をはかることができます。

今回は、Webデザインをされる方がデザインガイドラインを作成する際に、役に立ちそうなサービスや参考になりそうなサイトを8件ご紹介していきます。

■デザインガイドライン作りに役立つサイト

◆1.iOS Human Interface Guideline

https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html
f:id:paiza:20150714183520p:plain
AppleによるiOSのヒューマンインターフェースガイドラインには、「iOS向けの設計」や「色とタイポグラフィ」等、UI設計の基本事項が記載されています。

◆2.Material Design Guideline

http://www.google.com/design/
f:id:paiza:20150714183801p:plain
Googleによるマテリアルデザインにおけるガイドラインです。

◆3.アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付)

http://baigie.me/sogitani/2015/07/apple-google-design-guideline/
f:id:paiza:20150714183920p:plain
上記のiOS Human Interface GuidelineとMaterial Design Guidelineを、文字やボタンといった項目ごとにスライド付で比較された記事です。分かりやすい!スマートフォンサイトを作る際にはかなり参考になると思われます。

スライドはこちらです。

www.slideshare.net

◆4.Windows ユーザーエクスペリエンス ガイドライン

https://msdn.microsoft.com/ja-jp/library/aa511258.aspx
f:id:paiza:20150714184552p:plain
Microsoftによるユーザーエクスペリエンスガイドラインです。Windowsのデスクトップアプリを設計する方法についてが説明されています。

◆5.ソシオメディア UIデザインパターン

https://www.sociomedia.co.jp/category/uidesignpatterns
f:id:paiza:20150714185151p:plain
ユーザーインターフェース設計やユーザビリティ評価を行うソシオメディアは、これまでのUI設計に基づいた様々なUIデザインパターンを公開してくれています。

◆6.実用的なユーザビリティの10のポイント:ガイドライン

http://coliss.com/articles/build-websites/architectonics/usability/10-useful-usability-guidelines.html
f:id:paiza:20150714191038p:plain
Smashing Magazineの記事の意訳です。「ラベルはフィールドの上に配置」「リンクはやっぱりブルー」といった実用的なユーザビリティの10のポイントが記載されています。

◆7.コーディングを考慮したWebデザインガイドライン

www.slideshare.net
コーディング作業で困らないことを重視したデザインガイドラインに関するスライドです。デザイン担当者とコーディング担当者が別になる場合などに、大変参考になる指摘がたくさん記載されています。

◆8.Webデザインのセオリーを学ぼう

www.slideshare.net
「そもそもデザインとはなんぞ」というところから、実践的なレイアウトや色使い、フォント等についてもみっちり分かりやすく解説されたスライドです。Webデザインに携わる方なら一見の価値があると思います!

■まとめ

Webデザインをするにあたって、ガイドラインを設けていちいちそれに従うのは一件面倒に思えるかもしれません。

しかし、ガイドラインがあれば、他者とのサイトトーンに関する意識も共有でき、細部の説明が省けたり、サイト内でのトーンの不一致を防いだりすることができるので、結果としてよりスムーズに制作することができます。

Web制作においてガイドラインは非常に重要な役割を果たすものなのです。


paiza運営元のギノでは、現在paizaを一緒に作ってくれる【Web・UIデザイナー/ディレクター】を募集しています。受託でWebサービスを制作していたけど、自社サービスの制作に興味がある方、Webデザインを極めてよりよいサービスを作っていきたい方、大歓迎です!!
www.gi-no.jp




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp