paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

【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エンジニアの地位向上を目指したいと考えています。

「paiza転職」は、自分のプログラミング力が他社で通用するか(こっそり)腕試しができる、IT/Webエンジニアのための転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。

paiza転職

まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。

paizaのスキルチェック

また、paiza転職をご利用いただいている企業の人事担当や、paiza転職を使って転職を成功した方々へのインタビューもございます。こちらもぜひチェックしてみてください。
詳しくはこちら

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.