Design Archive

多デバイス化によって生活が便利になっていく中で、Webのあり方もどんどん変化しているように思います。理解を深めるためにも、Webデザインに関する記事を何回かに渡って書いていこうと思います。

まず、グラフィックデザインとWebデザインはまったく別ものであるということについて。DTPの考え方を引き継いでいることもあり、あらゆる環境下で「同じ見た目」にするという風潮がWebにおいてもあります。IE6で同じ見た目にならないために大変な労力をかけている現状を見てもそれは明らかです。

しかし、印刷物である紙媒体とは違って、Webは見た目を完全にコントロールすることに長けていません。紙媒体がオブジェクトを動かせないことと同じように、特性による向き不向きはあります。

よく言われますが、Webデザインはグラフィックデザインよりも、プロダクトデザインに近い部分があります。見た目の美しさだけではなく、利用者の環境や、利用するシチュエーションなどを考慮し、"機能美"を追求するデザイン。

どの分野のデザインでも、利用者のことを徹底的に考え抜くという過程を省いては成り立ちませんが、プロダクトデザインやWebデザインは、見栄えよりも、目に見えているもの以外を考慮することに時間を費やします。つまり、Webデザインにおいてコントロールすべきことは見た目ではなく、利用者をゴールに誘導するためのデザインにあるということです。

それには、マーケティングやブランディング、UI設計に至るまで様々な知識が必要になりますし、それらを具現化するためのビジュアルデザイン、インタラクションデザインも欠かせません。それら全てが利用者に価値を与えるために必要な知識であり、Webデザインに求められていることではないでしょうか。

次回はコンテンツの重要性など、などもうちょっと専門的な内容を書きたいと思っております。なんだか今回は当たり前のことしか書いてないような(´・ω・`；)

以前「効率的にデザイン力を身につける方法」という記事で、デザイン力とは単純なグラフィックスキルのことだけを指すのではなく、そのデザインである必然性を見て取れる"目利き"の能力であると述べました。そして、デザイン力を効率的に高める手段として『模写』をお勧めしました。

色使いからグラデーション、ホワイトスペースに至るまで、全てを忠実に再現し、『なぜそのデザインなのか？』をあらゆる観点から自分なりに分析することによって、デザインに必要な『考える力』を養うことができます。今回はその模写をするにあたり、活用すればさらに効果が見込めるリソースをご紹介します。

20 High Quality Photoshop Web Design Tutorials

追記：もっとクオリティが高いチュートリアルサイトがありましたので、こちらもご確認ください。
60 Web Design Photoshop Layout Tutorials From 2010

模写を行うには当然元となるデザインが必要になりますが、前回の記事では玉石混交の中から玉を選び出す手っ取り早い方法として『アックゼロヨンアワード』の受賞作をチェックするということをお勧めしました。デザイン力を身に付けるにはそれだけでも十分なのですが、模写を行う以上Photoshopというツールの使い方はマスターする必要があります。いくら模写によって効率的にデザイン力が身に付くとはいえ、ツールの使い方がよく分からない、面倒くさいということになってしまうと先に進めなくなってしまうからです。

『20 High Quality Photoshop Web Design Tutorials』ではタイトル通り、クオリティの高いWebデザインのチュートリアルが20例紹介されています。ひとつひとつが詳細に解説されていて、初心者の方でも手順通りにやれば再現できるように作られています。英語に抵抗がある方でも多少Photoshopの理解がある人であればキャプチャを見るだけで操作方法は把握できるでしょう。

これで初心者の方に優しいということがお分かりかと思いますが、実は私を含め実務レベルでPhotoshopを使用している人であっても、痒いところに手が届くレイヤースタイルの使い方や、美しくレイアウトするためのガイド機能の使い方など、「今まで非効率なやり方をしていた」「この機能はこういう使い方も出来るのか」といった新しい発見があることは間違ありません。

ただし、今回のリソースはあくまで模写をするという前提で、有効に活用すればツールの使い方における効率化もできるよという話で、最初から答えを見ながらやるのはもはや『模写』ではなくなってしまいます。自分なりに試行錯誤し、制作者の意図を汲み取る、デザインの息遣いを感じ取ることを意識しなければデザイン力を身に付けることは出来ません。まずは自分で消化してから、「答え合わせ」をするようにしましょう。

僕はデザイナー駆け出しで、大した実績もありませんが「効率的にデザイン力を身につける方法」で書いた模写という勉強方法を続けたおかげで、何がそのデザインを美しくしているのかを感覚的に見極めることは出来るようになりました。最も、その根拠については自分の感性を信じるしかないのだけど。今日はグラデーションに焦点を当てていくつかのサイトを紹介してみようと思います。

グラデーションは、デザインを美しく見せるためのテクニックとして僕が非常に重要だと思うテクニックの一つです。Webデザインでは必ずといって良いほど使われていますが、その殆どがその魅力を十分に発揮していないように思います。水平或いは垂直にかけるだけでも印象派ガラリと変わりますが、もう少し工夫してみるとグンとデザインが引き締まり上に、より豊かな表現が可能になります。理屈はさておき、一見は百件にしかずということでいくつか事例をば。

よくある感じのグラデーション。単調でどこか物足りない。

コンテンツ部分に纏わりつくかのようにまばらににかけたグラデーション。一気にリッチ感が増す。

他にも色で魅せたり。

スパイスを加えたり。

湖を表現したり。

要するに何が言いたいかというと、カッコいいデザイン、美しいデザインていうのはイラストや物凄いグラフィックがあれば成り立つということではなくて、こうした誰もが当たり前に使うテクニックで実は差がついてるんだよということです。僕自身、これらの事例を眺めていて、グラデーション一つとっても、これだけ印象が変わるということを、改めて実感している次第です。複雑でトリッキーなデザインであれ、シンプルなデザインであれ、美しいと思わせるための本質的な部分は同じということでしょうか。次回はまた別の要素についてご紹介(という名のメモ)していきたいと思います。

マスカラマガジン

メイベリン ニューヨークがおくるマスカラWebマガジンVol.07が公開されました。ムラサキ×イエローというインパクトある配色だったので、思わずムラスポかと思ってしまいましたが、どうやら最近話題の西野カナとのコラボのようです。タイポグラフィやグラフィックが雑誌のように表現されているのが特徴的で、そのクオリティの高さに毎回圧倒されてしまいます。特集コンテンツもそれぞれにユニークなデザインが当てられ、まるで雑誌を捲っているような感覚を覚えます。こうした雑誌風のデザインを、Webデザインでどう表現するのかということにおいて、非常に参考になるサイトです。また、以下のURLからアクセスするとまずCMのようなFLASHが展開されるのですが、これもマスカラマガジンならではの大胆さですね。デザインコンセプトにブレがないのが分かります。

NISHINO KANA × MAYBELLINE NEW YORK

ボリューム エクスプレス マグナム ウォータープルーフ

限定色のグラマラス ボルドーコレクションで、秋冬の色を遊ぶ!

先日効率的にデザイン力を身につける方法なんて生意気な記事を書きましたが、最近ではデザインテンプレートをPSDファイルごと提供してたりするんですね。mBlogさんで紹介されていたのですが、25 Slick PSD Website Templates Free for Downloadでは、デザインテンプレートをダウンロードできるサイトがまとめられています。いくつかピックアップ。

Crisp Presentation PSD Template

Midnight Sun PSD Template

Cambridge PSD Template

ええ、クオリティが高いものばかりです。これは活用しない手はないですね。初心者の方はどうやってデザインが作られているのか、なぜこのデザインがカッコよく見えるのかなどを探ってみるのが良いでしょう。ただ、それだけでは分かったつもりになって本質的な理解がないまま終わるパターンになりがちですので、あくまで参考程度に見るのが良いでしょう。効率的にデザイン力を身につける方法で記述しましたが、模写を行うことによって、制作者の意図を感じ取り、新たな気づきを得て「なぜそのデザインなのか」を自分なりに試行錯誤することが重要なのです。これは単に眺めても絶対に気づくことができない、見えてこないものです。すでにデザイナーとして活躍されている方も、レイヤースタイルの使い回しなどが出来ますし、作業の効率化に繋がるかもしれませんね。私はこっそり当ブログのデザインに活用しようと目論んでいます。

ここでいうデザイン力というのは、グラフィックスキルはもちろんですが、そのデザインである必然性を知ることの方が重要です。では、どうすれば良いのか。答えは基本的なことです、模写をするのです。賢者は歴史に学び、愚者は経験に学ぶ ― 自分の経験や理屈で物事を判断するのではなく、先人達の事跡から学ぶということ。それはWEBでなくとも、DTPでも料理人でも土方でも同じく重要なことだと思います。ただ、WEBデザインは歴史が浅いので、リソースの選び方には注意が必要です。

では、以下のサイトを見てみましょう。

西村あさひ法律事務所は個人的に好きなサイトの一つです。私が以前このサイトを選んだ理由は、業界内でも評価が高い株式会社ビジネスアーキテクツが制作したWebサイトだからです。例えばそういった具合に、石の中から玉を見つける工夫は必要です。当ブログでもサイト分析などで度々取り上げていますが、業界内の錚々たる面々が一同に会し、総合的な評価軸からWebサイトを選定するアックゼロヨンアワードの結果発表をチェックしておけば、まず間違いないでしょう。

では「そのデザインである必然性を知る」とはどういうことなのでしょうか。Webデザインを勉強し始めた当時、恩師にとあるWebサイトを模写してみろと言われ、正直見るだけで十分だと思っていた私は、細かい部分は無視しておおまかなものを作成しました。その成果物を見た恩師に「これじゃあ模写の意味がない。まったく同じものを作れ」と一蹴され、ブーたれながらも真剣に取り組み、グラデーションの表現、色使い、ホワイトスペースから文字間隔に至るまで、忠実に再現しました。

そうすると、制作者の意図を感じ取ったかのように、今まで見えていなかったものが見えてきたのです。なぜここに1pxの線を入れたのか、なぜ15pxのホワイトスペースを確保したのか、なぜこの背景色だけが違うのか、それらの気づきは模写している合間に発見され、脳はその理由を探ろうと思考を始めます。1pxの線を消したらどうなるのか、ホワイトスペースを10pxにしたらどうなるのか、背景色を統一したらどうなるのか、レイヤーを消したり、移動させたりしながら、疑問を解決しようとします。取り組むことで新たな気づきを得て、「なぜそのデザインなのか」を自分なりに試行錯誤し、消化する。それが恩師が言いたかった模写をする意味であり、本質だと思います。

「そのデザインである必然性を知る」とはそういうことなのですが、伝わりましたでしょうか。タイトルを「効率的にデザイン力を身につける方法」としたのは、グラフィックもデザインもほぼ初心者だった自分が、たったの半年間で制作会社に入社できる程度の能力は身につけることができた、という実体験に基づいています。週に1枚の模写を半年間続ければ十分プロにも通用する能力を身につけられると思いますので、騙されたと思って実践してみてください。かなり感覚的なものを文章化したので、不適切な表現があったかもしれませんが、これからデザインを始めようとしている方々の参考なれば幸いです。

発想自体はありがちな感じですが、とても表現力に富んだデザインだと思います。メインコンテンツの範囲のみをスクロールさせ、視線を誘導するインタフェースは、理に適った設計だと思います。メインコンテンツと背景のコントラストもはっきりしていることからも、制作者の意図が読み取れますね。私の場合、思わずガイドで囲まれている範囲に注目してしまいますが、これは完全に職業病です。
Fudge @ 100% (Layer 1, RGB/16)

キャンバスの上で彩られたテイストというのは特に珍しいというわけではないですが、REPLAYはイラストからフォントまでテイストに一貫性があり、表現のクオリティも高いと思います。これだけポップなデザインなのにこのまとまり感は素晴らしい。

追記：コリスさんの2010年に備えて、知っておきたいウェブデザインのトレンドで以下のような項目がありました。

手描き風のデザインは決して新しいものではありません。しかしこのトレンドはまだまだ発展する見込みがあります。これからは手描き風のデザインはエレメンタルなものとして扱われ、個人サイトだけでなく企業サイトでも採用されるようになるでしょう。

というわけでアトリエにでも通いましょうかね(笑)。
REPLAY

1pxのラインを入れるだけで、こうも締まりがでるものなのですね。
digitalartifex

デザイナーのポートフォリオサイトだと思われます。各ページで光が拡散したような美しいグラフィックがあり、手前にある透過されたボックスがまた美しい。透明度の調整や、滑らかな艶の出し方など参考になりそうですね。
http://www.rareview.com/index.asp

ネットワーク関係のコーポレートサイトだと思われます。光によって背景に美しい濃淡が現れる様子が、グラデーションで上手く表現されています。見出しが全てFLASHで、テキストがコピーできるのは面白いですね。
http://www.roinetworks.com/index.asp

デザイナーのポートフォリオサイトでしょうか。ポートフォリオはFlickrで管理しているようですね。
http://www.psdlayout.com/

デザイナーへの道を知る30人の言葉という書籍を読了。先人達のお言葉を自分用にメモ。

▽松永真「常に白紙であれ」スコッティやブレンディのパケージデザインでも有名な松永真は、「人々が自分に求めているものはなんだろう、自分が本当に欲しいものはなんだろう」と常に自問しているという。デザイナーであり続けたいなら、客観性も含めて、適性というのは不可欠。全身全霊で打ち込んだものであれば、その時に評価されなくても失敗にはならない。何より努力した事は身体が覚えているから、必ず次の仕事で生かせると話している。

▽廣田尚子「実力に輪郭を与えられるのは自分だけ」オリジナルブランド「NAOCA」を手がける廣田尚子は、大学卒業後に提出したコンペで見事受賞し、その時に初めて自分の資質に輪郭が生じたと話している。会社という組織に属していると"自分"というものが見えにくい、自分自身の力が本当はどんな形をしているのかが見えにくいという。廣田は「時間がない」という発言はしない。多忙を嘆くより、手持ちの時間をいかに大切に使うか、その中でどれだけ密度のある仕事をするかが大切だと話している。

▽永井一生「一貫性のある考え方こそが個性である」今やデザイン界の重鎮である永井一正は、デジタル化が進んだ事により言われがちになった「表現の画一化」について、「確かに、画一化を感じる時もありますが、最終的に生き残るデザイナーというのは、個性のある人ですね。ただ、間違えてほしくないのは、デザイナーの個性とはアーティストのそれとは違うという事。デザインには常に主観性と客観性、深い集中と広い視野が必要です。クライアントの意向を掘り下げるだけでなく、社会全体の動向にも気を配っています。そういう状況に耐えられるだけの自分の視点、視野、ビジョンを確立していく事が不可欠です。そこで確立された誰の受け売りでもない一貫性のある考え方こそが、デザイナーにとっての個性なのです。」と話している。


特に印象に残ったものだけアウトプットしたが、この手の本を読んで大体の先人達に共通しているのが「考えるより行動」と「人とのつながり」だ。行動してみて、初めて気づけること、学べることというのは必ずあると思うし、もし自分の思惑と違っても、その経験は必ず次の仕事で生かせる。ただ人生には年齢や社会的立場な制限があるので、大まかな方向性だけを決めて行動し、軌道修正しながら柔軟に進んでゆくのが理想的だと思う。また、クリエイティブ業界は人とのつながりが本当に大切なのだな、と改め思った。先人達の殆どが、弟子入りするなどして、チャンスの幅を広げている。家や会社に籠って黙々と作業するよりは、能動的にチャンスを作り、様々な人やモノに触れ、良い仕事をしていきたいと思った。