ガイドライン

A collection of 7 posts

ガイドライン

NASAのマニュアルからデザインシステムを学ぶ

Web サイトやアプリのデザインにおいて、再利用可能な部品(UI)をカタログしたスタイルガイドが必要とされています。公開されてから次のリニューアルまでデザインが変わらないという状況はまれですし、即座に対応しなければならない場合もあります。制作時は想定されていなかった要素も出てくるでしょうし、対応できる技術が変われば、コードから見直しも考えられます。変わり続けるのはコンテンツだけででなく、デザインにも同様のことが言えるわけです。 Web サイトやアプリといったデジタルプロダクトだけでなく、紙媒体やソーシャルメディアなどあらゆる場でデザインの一貫性が求められています。そうした場合、フロントエンド寄りのスタイルガイドだけでは不十分で、ロゴ規約や書体の扱い方などデザインに関わる様々な素材・ツールを揃えた何かが必要です。デザインSDKのようなもの。特定のデザイナーに知識やスキルを集約させない、拡張性と柔軟性を可能にするデザインシステムを作ることが、デザインの運用に欠かせなくなります。 幸い Material Design のような参考になるサイトがありますが、もっと以前からデザインの『システム化』を試みた組織があります。デザイナー Richard Danne と Bruce Blackburn が 1975 年に作成した NASA Graphics Standards Manual は、

ガイドライン

コンテンツ運用に役立つツールあれこれ

意外と忘れがちな運用向けツール Web サイトは作ってからが本番と言われて久しいですが、運用は簡単なことではありません。 CMS を実装することでコンテンツ入力の敷居は下がりますが、誰かがコンテンツを作らない限り何も始まりません。また、コンテンツ設計・制作・配信・分析の各ステージで必要になるツールが異なることがあります。例えば設計時であれば、ペルソナや運用ガイドラインが必要ですが、配信時であればエディトリアルカレンダーやソーシャルメディアガイドラインが求められます。 デザインもイラストも文章もひとりで作って出せる場合があります。しかし、こうした個に頼る運用では成長が難しくなります。コンテンツが作れたとしても、何か基準がなければ「我が社として適切なコンテンツを出している」と言い切れないですし、配信を躊躇することもあるでしょう。チームで役割分担した場合でも課題はあります。デザインチームがグラフィックを作るまで何もできないという状態はなるべく避けたい一方、不本意な見た目のまま公開されるのも困ります。 日々の運用に役立つツールを揃えるのは、短期的には効果が見難いですが、コンテンツ制作の量と質を向上するために欠かすことができません。Word や PDF といった印刷物に適した形式ではなく、オンラインツールを活用したほうが、共有だけでなく、情報の更新がしやすくなります。 コンテンツ運用のためのツール一覧 簡単なところだと、言葉を合わせるための『辞書』を作ることができます。Google スプレッドシート で共有するのも手段ですし、

ガイドライン

デザインSDKの可能性を探る

SDKから学べること SDK(Software Development Kit – ソフトウェア開発キット)とは、ソフトウェアを開発するために必要な文書、関連ファイル、ツールが揃ったバンドルのようなものです。例えば Android SDK には、Android アプリを開発するために必要なライブラリだけでなく、プレビューをするためのエミューレータや、開発を効率良くおこなうためのユティリティが含まれています。 良い SDK には、以下の 4 つの特徴があります。 コアライブラリが安定していて、主張通りに動作していること。 ドキュメンテーションはもちろん Issue Tracking が維持・管理されていること。ソースを読んで学習せよでは十分ではない。 どのように書けば動作するのか分かる例が用意されていること 。コンポーネントの互換性など、ドキュメンテーションだけでは説明しきれないことが分かるもの。 拡張性、柔軟性があること。別の言語で書かれたプログラムを組み合わせたるなど、ある程度のカスタマイズを可能にしている。 もちろん私は SDK 開発者ではありませんし知識も浅いですが、SDK

ガイドライン

問題解決のためのスタイルガイド入門

定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドとしてまとめるかです。 一緒につくるスタイルガイド Webサイト向けのスタイルガイドに含める要素は、案件によって変えるようにしています。Style Guide Boilerplate を基に HTML 要素を網羅しておくことは、どの案件でも最低限必要になりますが、それ以外は以下の条件を見ながら変えるようにしています。 ブランドガイドラインがあるかどうか ロゴ、色、タイポグラフィなど明確なガイドラインが社内で共有されているかどうか。

UI

UIデザインガイドラインのまとめ

デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction Guidelines Windows UX チームが公開しているガイドライン。Vista や Office 2007 に向けたガイドラインも含まれています。XPのほうが見たい方はこちらのガイドラインが参考になります Sun

インターネット

インテルのソーシャルメディアガイドライン

インテルは比較的早い時期からブログを始めており、更新頻度も高くコメントも受け付けています (日本語版はこちら)。ブログというツールは気軽に導入出来たとしても、顧客と企業を繋げるひとつの窓口として運営していくのは大変なことです。インテルほどの大きな企業がどのようにソーシャルメディアと付き合っているのでしょうか。インテルでは Intel Social Media Guidelines というガイドラインを設けています。ブログだけでなく Wiki や SNS にも通じるこのガイドライン。当然インテル向けに書かれている内容ですが、応用出来そうな内容です。 ブログを長くしている方にとっては『当たり前』な内容かもしれませんが、社内やチームの共有ツールとしてこうしたガイドラインはあったほうが良いでしょう。 透明であること ブログを書く際は本名を書き、何の仕事をしているのか明示すること 慎重に情報を公開 透明であると同時にプライバシーポリシーをはじめ法に反していないか確認すること 自分が知っていることを書く 自分の専門分野はもちろん、他者の情報ではなく自分の見解で文章を書くこと 視点を明確にあらわす 公開される情報は社の基準や価値観に反映したものであること 会話である 実際、職場で会話をするかのように読者に語りかけなくてはいけない。完結するものではなくレスポンスがくることも考慮すること 付加価値があるかどうか 読者にスキルや知識を提供しているコンテンツであること 責任をもって取り組む 書いた内容の責任は筆者にある。社の運営基準の理解も必要 おもしろみも大切 自分の情熱や社で行われている興味深い取り組みを共有する

google

Google のデザインガイドライン10項目

以前 Google の UX プロセスというエントリーで、Google が考えるユーザー体験を向上するための対策を紹介しました。Google のような数多くのサービスを運営している大企業でなかったとしても、参考になる項目が幾つかありましたが、先日 Google Operating System で Google’s Design Guidelines という記事が掲載されました。Google アプリケーションのユーザー体験を担当する Jon Wiley 氏が WritersUS Conference で語った Google のデザインガイドライン10項目がリストされています。 使える: 人々の生活、仕事、夢にフォーカスする 早い: ミリ秒でも早くする シンプル: 簡略化することの重要性 魅力的: 初心者にも上級者も引きつける何かをつくる 先進的: 新しいものを生み出すことに意欲的になる ユニバーサル: