Home > スポンサー広告 > 「ウェブデザイン」の「枠」のほうのデザインのおはなし

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/149-03c3a468
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 「ウェブデザイン」の「枠」のほうのデザインのおはなし

Home > デザイン > 「ウェブデザイン」の「枠」のほうのデザインのおはなし

「ウェブデザイン」の「枠」のほうのデザインのおはなし

des01.jpg

普段は、確定してたり、理解したことしかお伝えしないバニデザノートですが
ぼんやりデザイン感シリーズをちょこちょこやっていきたいと思ってます。

今回は、ウェブデザインのなかでもよく混乱しがちになる、
「枠」と「コンテンツ」の2つのなかから、「枠」のほうのお話を書いてみたいと思います。

ウェブデザインには、枠と、コンテンツ(中身)の2つのデザインがある

「ウェブデザイン」という作業のなかでも
「見える」部分。人に印象を与える、色や、かたちや、文字の大きさ、空間などがあたえる「雰囲気」の部分には、「枠」と「コンテンツ(中身)」があります。

これは、結構混乱しやすい部分で。「作れない」って思うときは、このどちらをつくろうとしているのかわからなくなっていることも多いとおもいます。

ウェブデザインというものを、
「クリエイティブなもの(本体)」として見るか
「クリエイティブなものを載せる器」として見るか
その両方を表現する「何か」なのか。

新しいインターフェイスを考えるときは、「枠」のほうを見ているはず。
情報をとりまとめて、構成するときも、「枠」だ。
けれど、文字や文章を書いたり、絵や図を作るときは、「中身」を見ているはずで。

では、ウェブサイトのポートフォリオサイトを作るときはどうだろう。
ポートフォリオ自体は、「枠」です。
作ったウェブサイトは、スクリーンショットになった時点で「コンテンツ(中身)」ですが、そのサイト自体が生きているなら、その中で「枠」と「中身」があって、と、無限ループです。

「枠」で認識されているサイト
Pinterestなどがいい例ですね。

SNS系は、「枠」自体にキャラクターがあるように思われているものが多いですね。
枠、ナビゲーション、ボタン、情報の配置などに重きを置いているサイトでは、中身をユーザーに投げても大丈夫なように出来ています。

・「枠」のデザインが高性能であれば、
 「コンテンツ(中身)」をさらに見たい気持ちにさせられる
・「枠」が中身以上に強い印象を持つものであれば、
  中身があまりなくても説得力を持たせることもできる
=「枠」と「中身」のバランスがよければ、相乗効果でいい雰囲気を出すことができる

コンテンツを置くステージは、装飾が多いのがいいのか、シンプルなほうがいいのか
どんな風に情報を整理すれば見やすいのか、そういったことを考えて組み立てていきます。

存在感があるのに、存在感がないかのように溶けこませたい

わたしが「枠」のデザインを考えるとき、
もともと得意だったのは、装飾で固めて、説得力を強めるほうのデザインでした。
テクスチャや、線で囲って、あたかもそこにその世界があるかのようなイメージを作り出す。
(コンテンツが少々ダメでも、大丈夫なように。)

いま研究しているのは、悪目立ちせず、悪い印象を与えず、溶け込んでいるのに、キャラクターのある、そういう「枠」のこと。
当たり前のようにあるのに、すこしだけ特別な。
いらないものは削ぎ落とし、必要なものをかっこ良く。
透明なのに、体積がある空気みたいな。

そういう普通なのに普通に難しいことを追求するのって面白いですよね。


「枠」を追求するのと、コンテンツを追求するのは全然違うものなのかなぁって思うのです。
UIとかは、枠のほうだとおもう。

枠と中身を同時に考えて、全部を「ウェブデザイン」とかんがえてしまうと
「では、中身は?」ってなった時に、きっと混乱してしまう。
整理する情報や、デザインしたいデータが用意しきれなくて、ボタンやナビゲーションなんかの、すでにフォーマットのある「わかりやすいもの」に頼ってしまって進めなくなるのかなーとか思いました。

フォーマットのあるものは、すでにデザインされているもので
装飾を足しているだけのような気もしますね。
装飾はデザインかな、どっちかな。
装飾も他のフォーマットから持ってきていたら、どうかな。
そんなことを考えたりします。


これからも、ちょっとずつ掘り下げていけたらとおもいます。
ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/149-03c3a468
Listed below are links to weblogs that reference
「ウェブデザイン」の「枠」のほうのデザインのおはなし from バニデザノート

Home > デザイン > 「ウェブデザイン」の「枠」のほうのデザインのおはなし

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。