コンテンツ
- レスポンシブな方法論
- コンテンツを最初に保持するにはどうすればよいですか？
- どうして？
- 01.ビジネスとユーザーの目標を定義する
- 02.あなたが得るあらゆる機会にそれらを参照してください
- 03.後押しすることを恐れないでください
- 04.自分のチームもプッシュする
- 05.コンテンツのニーズをすべて事前に定義する
- プレゼンテーションからコンテンツを抽象化するにはどうすればよいですか？
- レイアウトの観点からコンテンツを考えるのをやめる必要があります
- クライアントにデザインとは無関係にコンテンツを計画するように強制する
- デザイン前にコンテンツを完成させる
- 実際のコンテンツを使用する–毎回
- では、レスポンシブデザインプロジェクトでワイヤーフレームはどのように機能するのでしょうか。
- スケッチ
- ブラウザ内フレームワーク
- 注釈
- ワイヤーフレームで実際のコンテンツを使用する
- 最初に小さな画面用にデザインするにはどうすればよいですか？
- 最初のデバイスからの抽象的なデザイン
- スタイルタイルを使用する
- インターフェイスの調和を作成する
- ブラウザですべてを表示
- 静的プログラムでバランスをとる
- 結論
明確にしましょう。デザインは、目前のより深い問題、すべての背後にある理由に焦点を当てている場合にのみ解決策です。堅実なプロセスは常に私たちの仕事を導くはずですが、私たちはもっと柔軟なものを受け入れる必要があります。私たちの媒体はついに流動的であることが証明されたので、私たちのプロセスはすべきではありませんか？システム設計について考えてみてください。全体像と細部の両方を確認する必要があります。不可能？それからは程遠い！
フランク・キメロはそれを彼の著書「The Shape of Design」に美しく書いています。「アーティストがイーゼルから離れて、作品の新しい視点を得る部分があります。絵画は近くと遠くで同じ部分です。近くにいるとき、アーティストは自分のマークを付けるために一生懸命働きます。遠くまで、彼はその品質を分析するために仕事を評価します。彼は仕事に彼に話しかけるために後退します。」
私たちの仕事、私たちの媒体に私たちに話をさせる必要があります。レスポンシブデザインの台頭により、私たちはようやく私たちの媒体を意図したとおりに受け入れようとしています。それは流動的です。一歩下がって作業を評価し、分析し、新しいやり方、新しいプロセスを受け入れる絶好の機会です。コードを理解していない静的なモックアップやWebデザイナーの時代は終わりました。レスポンシブプロセスの時間です。
レスポンシブな方法論
この記事の冒頭で、堅実なプロセスの大きな秘密を明かします。私たちはそのように夢中になっているからです。準備はいいですか？レスポンシブプロセスは責任あるプロセスです。漠然と？多分。愚かな？いいえ。それ以前のWeb標準の動きと同様に、レスポンシブデザインは、将来に適した方法でWebを前進させています。
他の設計プロセスと同様に、すべての背後にある「理由」に焦点を当てる必要があります。では、なぜWebサイトが存在するのでしょうか。コンテンツを配信するため。それはタスクベース、ソーシャル、情報提供である可能性があります…それは問題ではありません。それはすべてこれに帰着します：重要な理由、適切に構造化されたコンテンツ、および相互作用から始めます。
レスポンシブデザインプロセスについて私たちが最もよく耳にする質問は次のとおりです。
コンテンツを最初に保持するにはどうすればよいですか？
プロジェクトの開始時には、私たちは皆とても楽観的です。 「コンテンツファースト！」私達は言う。 「ユーザーの目標！重要なことを覚えておいてください！」それは本当です。しかし、それはどういう意味ですか？コンテンツファーストプロセスをどのように実装しますか？
知っている（または知っていると思う）場合でも、プロジェクトが進むにつれて忘れがちです。長期的なプロジェクトは、どんどん（そして…そして…）引きずられる傾向があります。理由を考えるのをやめ、方法に焦点を合わせ始めます。私たちは、自分たちのプロジェクトを、独立して存在できる別々の「発見」フェーズと「開発」フェーズに分割できると思い込んでいます。
真実は、私たちは常に理由を尋ね続けなければならないということです。どれだけ知っていると思っても、どれだけ計画を立てても、決定を下すたびに、ボタンをデザインしたり、見出しを書いたりするたびに、質問する必要があります…
どうして？
なぜ私はこれをしているのですか？誰のためですか？クライアントが達成するのに役立つビジネス目標は何ですか？ユーザーが対処するのにどのようなニーズがありますか？コンテンツを最初に保持するだけではいけません。最初に理由を保持します。
これにより、簡単に聞こえます。しかし、それをうまく行うには、プッシュする必要があります。クライアントとチームをプッシュして、最初に理由を定義します。 Lorem Ipsumはなく、「後で説明します」もありません。宿題をしなさい！あなたのすべての方法は、確かな理由から始める必要があります。イエローペンシルでは、これは私たちがプロジェクトを売り込み、見積もり、予算を立て、計画する方法に大きな変化をもたらしました。しっかりとした調査、戦略、計画を立てるために、予算と時間を費やす必要がありました。あなたもそうかもしれません。しかし、クライアントとチームがコンテンツのニーズを事前に定義することの大きなメリットを理解すると、彼らは決して振り返ることはありません。
そして、彼らを教育することが私たちの仕事です。 （クライアントとの取引についてもっと知りたい場合は、マイク・モンテイロの優れた本「デザインは仕事です」を読んでください。）クライアントは、すべての調査と作業を前もって行うことの価値を理解するのに苦労する可能性があります。そして、なぜ彼らはすべきですか？最後に「完成」したものは何もありません。多くの場合、請求書と古いWord文書を受け取るだけです。
それは彼らのせいではありません–それは私たちのせいです。その価値を実証するためのより良い仕事をすることは私たちの責任です。あらゆる段階で、すべてを非常に重要な理由に戻す必要があります。
これは、レスポンシブデザインにとって特に重要です。レスポンシブウェブサイトは、それほど多くの開発努力を必要としませんが、それははるかに多くの計画を意味します。しかし、実際には、ずっとやっておくべきだったと計画しています。現在の再設計-3年ごとのプロジェクトサイクルを目撃してください。あなたはそれを続けたいですか？絶対にありません。
したがって、プロジェクトプロセスの最初にコンテンツを保持するための3つのステップがあります。
01.ビジネスとユーザーの目標を定義する
プロジェクトのビジネス目標とユーザー目標の優先リストを作成します。ユーザーが最も知りたい、またはしたいことは何ですか？あなたの研究をしてください。野蛮な推測ではなく、情報に基づいた推論を行います。すべての利害関係者に同意してもらいます。
02.あなたが得るあらゆる機会にそれらを参照してください
決定を下すたびに、誰かが新しい機能やデザイン要素、またはコンテンツのページを提案するたびに、その要求をビジネスおよびユーザーの目標にマッピングするように依頼します。この機能はどのような本当のニーズを満たしますか？本当の理由は何ですか？ （ヒント：「私がしたいから」、「私は本当に青が好き」、「Facebookの全員」はカウントされません。）
03.後押しすることを恐れないでください
これは難しいものになる可能性があります。クライアントとの関係は微妙であり、戦争に勝つために戦いをあきらめたくなるかもしれません。しかし、覚えておいてください、私たちはみんな一緒にいます！それはビジネス対ユーザーではありません。私たち対彼ら。
ユーザーのニーズを満たすことは、ビジネスのニーズを満たすための最良の方法です。ユーザーがいなければ、ビジネスはありません。クライアント（優れたクライアント）は、すべてに「はい」と言うためにあなたを雇っていません。したがって、クライアントが目標やユーザーのニーズを満たさないものを求めた場合でも、恐れずに挑戦してください。それは自我についてではありません。可能な限り最高のソリューションを作成することです。
04.自分のチームもプッシュする
これは、クリエイティブチーム内で作業する場合にも課題になる可能性があります。役割の分離（ビジュアルデザイン、ユーザーエクスペリエンス、情報アーキテクチャ、コンテンツ戦略、コンテンツ制作）は、誤解を招く可能性があります。私たちは忙しくなり、メールに圧倒されます。特に「あなたの」仕事が終わったら、プロジェクトを最初から最後まで続けるのは難しいです。
チームの関係は、少なくともクライアントの関係と同じくらい重要です。クライアントと同じように、その理由を思い出さなければなりません。コラボレーションが鍵となります。コンテンツプラン、ワイヤーフレーム、またはデザインを単純に「引き渡す」ことはできません。可能な限り、私たちは手を取り合って取り組む必要があります。成果物を「完成」させて、他の何かに移るのは簡単です。状況が厳しくなると、プロジェクトにとどまるのははるかに困難になります。
創造的な仕事へのウォーターフォールアプローチはうまくいきません。チームメンバー間のアジャイルで共同作業は、より良い結果をもたらします。
05.コンテンツのニーズをすべて事前に定義する
レスポンシブウェブサイトの計画には時間がかかります。もはや、単一のコンテキストを計画しているだけではありません。現在わかっているすべてのコンテキストと、まだ存在していないコンテキストを計画しています。
ただし、これらすべての複雑さを事前に計画する方が、説明しなかった機能を元に戻して改造するよりもはるかに短い時間で済みます。だから、時間/努力/予算を費やしてください。設計に取り掛かる前に、クライアントとチームにすべてのコンテンツを定義する（そしてコミットする）ように強制します。ページテーブルを使用します。構造化されたコンテンツを使用します。今すぐあなたのコンテンツを将来にわたって保証してください！または後で泣きます。
プレゼンテーションからコンテンツを抽象化するにはどうすればよいですか？
あなたはこれをinternet-o-sphereの周りでよく耳にします。しかし、待って、何？そして待ってください–なぜですか？
プレゼンテーションは変わる可能性がある（そして変わるだろう）からです。 15年前に私たちがウェブサイトをデザインした方法は、私たちが現在それらを提示する方法からはほとんど認識できません。しかし、何が変わっていないか知っていますか？言葉。私たちは今でも「em」を使用しています。インターネットは主に（テキストベースの）コンテンツのために存在します。私たちは今でも情報の問題を解決するためにそれを使用しています。タスクを実行します。ただし、コンテンツがプレゼンテーションの手段（Flashの紹介ページなど）に依存している場合は、数年以内に使用できなくなる可能性があります。そして、それは最悪です。
レイアウトの観点からコンテンツを考えるのをやめる必要があります
私たちは（業界として）レイアウトの観点からコンテンツを考えるようにクライアントをトレーニングしました。 「サイドバーに入れてください」と私たちは言います。 「それはフッターに入るはずです。」やめる！やめて。やめる。場所ではありません。それは優先順位についてです。ユーザーにとって最も重要なコンテンツは何ですか？何を推測するので：レイアウトはコンテキスト間で変化します。小さな画面のデザインには（おそらく）サイドバーはありません。
あなたのクライアントが望んでいる巨大なスーパーメニュー？ iPhoneで飛ぶつもりはありません。
クライアントにデザインとは無関係にコンテンツを計画するように強制する
さて、あなたはそれらを強制する必要はありません。それらを奨励します。強くお勧めします。ページテーブルはこれに最適です。まだ読んでいない場合は、クリスティーナハルバーソンとメリッサラックのウェブ向けコンテンツ戦略に進んで、作成方法の詳細を確認してください。それらを優先順に整理します。場所やレイアウトを参照しないでください。これにより、クライアントはより生産的な方法でコンテンツについて考えることができ、ワイヤーフレームやデザインを完成させる前に、コンテンツ作成プロセスを進めることができます。
デザイン前にコンテンツを完成させる
はい、これが常に可能であるとは限りません。ただし、設計を開始する前に不確実性を排除できるほど、後で戻って変更する必要が少なくなります。
実際のコンテンツを使用する–毎回
可能であれば、エッジケースコンテンツを使用します–クライアントに最も複雑なページ、画像、メニューを表示します。これにより、プロセスの後半で、完成品に最も厄介なコンテンツが表示されたときに予期しない事態が発生するのを防ぐことができます。
機能的なブラウザ内ワイヤフレームは、世界に違いをもたらします。クライアントが、さまざまな画面サイズでコンテンツが移動および変化するのを観察できるようにします。ワイヤーフレームを提示するときにそれを指摘します（対面でのプレゼンテーションを行っていますよね？）レイアウトが変更されても、情報の優先順位が画面サイズ全体で同じままであることを示します。
では、レスポンシブデザインプロジェクトでワイヤーフレームはどのように機能するのでしょうか。
RWDのインタラクションデザインは、ブラウザにすばやく頻繁に取り入れなければならないと確信しています。すべてを説明する静的なドキュメントを作成することはほとんど不可能です。確かに、3つ、4つ、または5つのブレークポイントを示すドキュメントを作成することはできますが、それは話のほんの一部にすぎません。ブレークポイント間のすべての瞬間はどうですか？それはブラウザで起こります。
スケッチ
それでも、共同でアイデアをすばやくスケッチできるのは良いことです。これは特定の媒体で発生する必要はありませんが、紙に鉛筆で書くことについて何かがあります。ここで重要なのは、アイデアをすばやく繰り返し出すことです。可能な限りスケッチボードを作成するのが大好きです。そのためのアプリ、UIスケッチャーもあります。
ブラウザ内フレームワーク
これが私たちの本当のチケットです。ブラウザでRWDをデモンストレーションするときは、パターンとシステムを再利用するのが大好きです。もちろん、毎回ゼロから独自のシステムを作成することもできますが、それは私たちやクライアントの助けにはなりません。
また、TwitterのBootstrapやZurbのFoundationなどの高速レスポンシブプロトタイピングフレームワークを使用することも好きです。ワークフローに適合するため、私たちは個人的にFoundationに傾倒しています。どちらかが小画面で低帯域幅を優先するアプローチを採用するのは素晴らしいことですが、それが私たちのやり方です。
注釈
RWDワイヤーフレームの注釈は不可欠ですが、見過ごされがちです。大声で言ってください：ドキュメント、ドキュメント、ドキュメント！友人からこの例をいくつか見てきましたが、審査員はブラウザ内のレスポンシブワイヤフレームに適切に注釈を付けるための「最善の」方法をまだ検討していると思います。上記のように、私たちは定期的にFoundation by Zurbを使用しており、そのRevealアドオンを使用して注釈を表示するのが好きです。これらの注釈は、より大きな画面でのみ表示され、理想的にはオンとオフを切り替えることができます。
ワイヤーフレームで実際のコンテンツを使用する
Lorem Ipsumについては、ワイヤーフレームやデザインのモックアップについて多くの議論がありましたが、ワイヤーフレームに実際のコンテンツがない場合は、間違っています。コンテンツは、インタラクションの決定を通知し、デザインがいつ壊れるかを通知します。 Lorem Ipsumはどのようにそれを行うことができますか？
最初に小さな画面用にデザインするにはどうすればよいですか？
何年もの間、私たちは特定の解像度を念頭に置いて設計しました。これはデフォルト設定でした。ノートブックでのスケッチ、OmniGraffleでのワイヤーフレーミング、Photoshopでの作業、ブラウザでのデザインなど、キャンバスのサイズがどうなるかはわかっていました。当時は過ぎ去りました。私たちは、最初に小さな画面用に設計し、徐々に強化することを大いに信じています。では、デザイナーはどのようにしてワークフローを固定のキャンバスサイズから流動的なサイズに変更するのでしょうか。
最初のデバイスからの抽象的なデザイン
特定のデバイス向けに設計しているのでない限り、デバイスについて考えるのをやめ、エクスペリエンスについて考え始めることが不可欠です。以下のすべての手法は、設計者がデバイスにとらわれない状態を維持しながら（ある程度まで）エクスペリエンスを作成するのに役立ちます。
スタイルタイルを使用する
スタイルタイルを使用して方向を確立し、すばやく繰り返します。スタイルタイルを使用すると、設計者は具体的になりすぎずに設計システムの方向性を設定できます。彼らの作成者であるSamanthaWarrenは、次のように説明しています。
「スタイルタイルは、ムードボードが曖昧すぎて、コンプが文字通りすぎる場合に使用します。スタイルタイルは、レイアウトを定義せずに、実際のインターフェイス要素との直接接続を確立します。」
インターフェイスの調和を作成する
すべての視覚的要素とインタラクティブな要素が組み合わされたキャンバスを想像してみてください。特定のUIレイアウトを確認するのではなく、すべての要素がどのように連携するかを確認します。これはインターフェースハーモニーキャンバスです。インターフェイスハーモニーキャンバスを使用すると、デザイナーはアイデアをまとめることができますが、1つの画面サイズに焦点を合わせる必要はありません。さらに、完全なスタイルガイドを作成するのではなく、設計された要素を効率的に伝達および文書化するための優れた方法です。
さらに詳しく知りたい場合は、インターフェースの調和に関する2つの優れた記事がこことここにあります。
ブラウザですべてを表示
すべてをブラウザにまとめる必要があります。ここで、UIデザインが実際に活気づきます。実際のコンテンツが視覚要素とどのように相互作用するかを確認することは非常に重要です。静的な環境でこれを適切に行う方法はありません。ネイティブメディアでどのように応答するかを確認する必要があります。
静的プログラムでバランスをとる
ブラウザとPhotoshopなどの静的プログラムの間には流れがあります。流動的で自然な方法で設計システムを作成できるバランスが必要です。もちろん、これはPhotoshopでも発生しますが、レスポンシブデザインを行うデザイナーは、ブラウザーでもクリエイティブに考える方法を学ぶ必要があります。
結論
もう一度、感じて：重要な構造化されたコンテンツと相互作用から、理由から始めましょう。最初に小さな画面と低帯域幅に焦点を合わせ、レスポンシブコンセプトを徐々に強化します。私たちの媒体は成熟しつつあります。一度に1つのWebプロジェクトで、物事を正しく行い、世界を変えるチャンスがあります。
デザイナーのためのベスト20ワイヤーフレーミングツールを発見する
スティーブフィッシャーは、カナダのイエローペンシルで研究、分析、設計、戦略を調整し、RWD、UX、オープンソースなどのトピックについて話します。 Alaine Mackenzieは、YellowPencilのコンテンツストラテジストです。
