Photo by Pascal Maramis
こんにちは。谷口です。
Webデザインの制作においては様々なフローがありますが、デザインガイドラインを作成することは、サイト内でのトーンを統一し、使いやすいサイトを作っていく上で大変重要です。
ガイドラインとは、直訳すると指針や指標という意味になります。Webデザインにおけるガイドラインとは、Webサイトのデザインに関する指標や指針を示したものということになります。
例えば、背景の色や文字のフォント、ボタンの形などに関して一定のルールを作り、それを守ることでWebサイト内での統一化をはかることができます。
今回は、Webデザインをされる方がデザインガイドラインを作成する際に、役に立ちそうなサービスや参考になりそうなサイトを8件ご紹介していきます。
■デザインガイドライン作りに役立つサイト
◆1.iOS Human Interface Guideline
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html
AppleによるiOSのヒューマンインターフェースガイドラインには、「iOS向けの設計」や「色とタイポグラフィ」等、UI設計の基本事項が記載されています。
◆2.Material Design Guideline
http://www.google.com/design/
Googleによるマテリアルデザインにおけるガイドラインです。
◆3.アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付)
http://baigie.me/sogitani/2015/07/apple-google-design-guideline/
上記のiOS Human Interface GuidelineとMaterial Design Guidelineを、文字やボタンといった項目ごとにスライド付で比較された記事です。分かりやすい!スマートフォンサイトを作る際にはかなり参考になると思われます。
スライドはこちらです。
◆4.Windows ユーザーエクスペリエンス ガイドライン
https://msdn.microsoft.com/ja-jp/library/aa511258.aspx
Microsoftによるユーザーエクスペリエンスガイドラインです。Windowsのデスクトップアプリを設計する方法についてが説明されています。
◆5.ソシオメディア UIデザインパターン
https://www.sociomedia.co.jp/category/uidesignpatterns
ユーザーインターフェース設計やユーザビリティ評価を行うソシオメディアは、これまでのUI設計に基づいた様々なUIデザインパターンを公開してくれています。
◆6.実用的なユーザビリティの10のポイント:ガイドライン編
http://coliss.com/articles/build-websites/architectonics/usability/10-useful-usability-guidelines.html
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エンジニアの地位向上を目指したいと考えています。
「paiza転職」は、自分のプログラミング力が他社で通用するか(こっそり)腕試しができる、IT/Webエンジニアのための転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。
まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。
また、paiza転職をご利用いただいている企業の人事担当や、paiza転職を使って転職を成功した方々へのインタビューもございます。こちらもぜひチェックしてみてください。
詳しくはこちら