2014.11.14ちょっと仕事で「ん?」って思った機会があったので週末に改めてしらべてみました。”ホワイトスペース”の話です。デザインの話をするときはここからするっていう方も多いと聞きます。参考ウェブサイトまとめ参考にした書籍ホワイトスペースってなに??ホワイトスペースとは、文字、画像など、デザインのエレメントが何もない場所のことです。ここが何もないのですが、あらゆるデザインにおいて重要なエレメントになります。ホワイトスペースをうまく操ることで、あるコンテンツに注目させたり、全体的に見やすいデザインになったり、様々な効果が期待できます。“ホワイトスペースの美しい形”ほとんどのグラフィックデザインで最も面積が大きい適度に「間」をもたせる注目させたいコンテンツに視線を集める。同じ内容のグラフィックデザインもスペースのつくりかたによって、見え方はまるっきり違ってきます。デザイナー自身はクライアントが何を表したいのかをきっちり理解しておく必要があります。うまくホワイトスペースを活用するコツ上の図のように、エレメントが画面全体にまんべんなく広がっていると、ホワイトスペースがまとまらず、散漫な印象になります。内容に応じて、寄せたり詰めたりして、意識的にホワイトスペースを作成しましょう。おおまかに気をつけたいことは以下の3点になるかなー。“結果的にあいてしまった余白”をなくすコンテンツのラインを揃え、詰めるべきコンテンツをしっかりと寄せるコンテンツの抜けをどのあたりにおくかを考えておくウェブデザインでワイヤーフレームを利用するのもこの結果的に空いてしまった余白を極力少なくすることにつながります。グラフィックデザインは第一印象はとても大切なので、ここには特に神経を使いますよね。コンテンツのラインを揃えたり、抜けをどのあたりにおくかを計算しておくことによってそのコンテンツ全体の印象を変えることができます。抜けを極端に増やしたり減らしたりやりすぎてもちょっと問題がでてきそうです。画面の4辺のホワイトスペース抜け間につながり、少し間抜けな印象になりがち。画面の4辺全てをコンテンツでふさぐ窮屈で息苦しい印象になりがち。ホワイトスペースのテクニックの例1.視線を集めるテクニックもっとも目立たせたい要素の周囲に大きなホワイトスペースを作る。そのほかのエレメントを小さめにして、目立たせたいコンテンツから離すことで中央に視線を集中させるテクニックです。タケヒログラフィックデザイナーのカワセタケヒロ氏のポートフォリオサイト。トップページは余計な装飾はなく、中央の名前に視点が集まるようにデザインされています。氏のサイトは1ページで作成されていてなんかきれいですね。グラフィックデザイナーやフォトグラファーのウェブサイトは特にホワイトスペースがうまく計算されていて、コンテンツが引き立つように作られているものが多い気がします。2.ティザー広告ホワイトスペースのテクニックとはちょっと違ってくるかも知れませんが、ティザー効果をご紹介。ティザーとは英語の”tease:じらす”という単語が語源で、目的の要素を明らかにせず、見る人の興味・好奇心をかき立てる手法です。構成要素を減らし、2つ(複数)のパートにわけて視線を行き来させる対比の効果もあります。じらし広告ともいいます。一般的に注目度の高い商品・サービスで行うあまりしつこいとあきられる興味をそそるといっても一見何の広告なのかわからないものなので、見る人にがっかりさせたりあきさせないような工夫が必要です。知名度の高い商品でつかうことをおすすめします。自動車メーカーなどでよく見ますね。最近では今、ニュースを賑わせているオリンパスのカメラ、”PEN”の海外サイトで布をかぶせるといったプロモーションの形で使われていましたね。Inc.参考ウェブサイト最近ではFacebookページのウェルカムページなどでもよく使われています。”いいね”を押してもらうようにキーワード等で興味をひくといったページが増えました。Japanあれ??スクリーンショットとページのデザインがかわってる。ご愛敬でXDまとめ今回のホワイトスペースの話はまだまださわりの部分にすぎません。余白の話はこれだけに限らず、文字組や行間などのDTPデザインに関わるものや、グリッドレイアウトなども考える必要がでてきます。その辺の話も後々勉強して、ブログの記事にしていこうかなと思います。それでは参考にした書籍アマゾンのページにとびます。デザインのルール、レイアウトのセオリー。LINEnaoをフォローするnao2daimemo関連記事Designおさえておきたい代表的な欧文フォント24今更かもですが、自分用に備忘録。使う(使われている)代表的な欧文フォントを24種類まとめました。何かと触れることがおおいのでフォントの基礎的な勉強の意味合いも込めて。僕はクライアントワークのときにはIllustratorのバージョンは主にCS5を使っています。クライアントさんによってはテキストオブジェクトをアウトライン化する前のデータも提出することがあるのですが先方のバージョンがAi10以下のときはバー...2012.01.25Designあれ?イラストレーターでshiftとoptionが効かない。(Mac)今日仕事でイラレ(CS3)使ってたら、急に"shift"と"option"が効かなくなってしまいました。!!不便すぎるー!!2011.10.26Design[レビュー]CregleからiPenが届いたXDさっそく使ってみましたー!KickstarterでiPenに投資したことは以前の記事でご紹介しました。そのiPenがやっと届いたよー:-D。Appleの認可が下りずに当初は1月15日くらいの予定だったのでまる2ヶ月くらい遅れましたがまあそれは仕方がない。FiftyThree”がすてきすぎる。FiftyThree」ですが、ちょっと使ってみてこれちょっといい感じかもって思ったので今更ながらご紹介します。このアプリ、シンプルできれいなU...2012.04.07あれ?イラストレーターでshiftとoptionが効かない。コメントをキャンセルメールアドレスが公開されることはありません。2daimemo.ホーム検索トップ。