“引っかかり”のあるデザインを考える。

たとえば 、宮崎駿さんは 、 『崖の上のポニョ 』の制作の際に 「上手な線を描くな 」 「なめらかな線を描くな 」という指示を出していたといいます 。別の言い方だと 、 「引っかかりがある線を描け 」ということらしいのです 。素直な線というのは 、みんなが見ているから飽きられている 。ちょっと歪んでいることで 、みんなが気にするようになるでしょう 。だから 「他人が描けない線を描け 」と 、非常に難しい注文をつけるわけです 。

コンテンツの秘密 僕がジブリで考えたこと 川上量生

この考え方、自分がWEBデザインを作るときに非常に参考になりました。

自分が作るデザインの傾向として、フラット”すぎる”デザインというか、きれいだけどのっぺりとしてやや物足りない、ということがままあるのですが、「引っかかりがある」ようにするための「装飾」を入れてみたところ、以前よりも少し良くなった気がします。

フラットな線やモチーフがある程度続いたら、よしなに線を傾けたり、色の色相や明度彩度を変化させたり、少しずらしたり、といった「ノイズ」を配置するように心がける。

今までの考え方では、そういった装飾は意図や意味がないから極力省くべきもの、と思っていたのですが、実はそうじゃなくて、「引っかかり」を作るという役割を担っていたことにようやく気づけたような気がします。よく言われるメリハリを出すとか、リズムをつける、というような原理原則なのでしょう。

役割を持った装飾であれば、デザインに組み入れるのに抵抗はありません。なんだか楽になってきました。が、理解して消化して成果物に反映させていくには実装力が必要。これからは適切な「引っかかり」を作れるようにさらにデザイン力を高めていかなくては。おお忙しい!

WEBデザイン制作でよく使うFireFoxアドオン五つとブックマークレット一つ。

アドオンやブックマークレットを活用すると、WEB制作が効率良く行えます。人によって使うものは様々だと思いますが、自分がよく使うものを絞ってピックアップしてみました。

Firebug

HTMLやCSSを確認するインスペクタ。基本ですね。
配布元:Firebug :: Add-ons for Firefox

ColorZilla

ブラウザ上のカラーを取得できるスポイトやカラーパレットを提供するアドオン。サイトで使われている色を解析する機能もあるようです。
配布元:ColorZilla :: Add-ons for Firefox

Web Developer

様々なWEB制作を補助する様々なツールを提供するアドオン。ブロックレベル要素を枠で囲んで表示する機能が好きです。
配布元:Webdeveloperのダウンロード:ミナトラボ

Open In Chrome

ナビゲーションツールバーに表示されるボタンを押すと、そのときFireFoxで表示させているサイトと同じサイトをGoogleChromeで表示させることができます。レイアウト確認などで意外とよく使います。ラクチンです。
窓の杜 – 【REVIEW】「Firefox」で表示中のページを「Google Chrome」で開き直す「Open In Chrome」

配布元:Open In Chrome :: Add-ons for Firefox

Pearl Crescent Page Saver Basic

サイト全体のスクリーンショットがクリック一発で保存できるアドオン。表示部分のみも保存可能。
配布元:Pearl Crescent Page Saver Basic :: Add-ons for Firefox

XRAY(ブックマークレット)

XRAYを起動して、サイト上のパーツをクリックするとCSSのプロパティがオーバーレイ表示されます。FireBugを起動させるまでもないときに重宝。
WebページのCSSプロパティ・値をワンクリックで表示してくれるブックマークレット「XRAY」が神便利!!! | OZPAの表4

その他、FireFoxにはメニューバーの「ツール」→「WEB開発」の中にいろいろな開発ツールが入っていて充実していますね。最近はchlormeのインスペクタの使い方も覚えてきましたが、自分はFireFoxの方で環境が整ってます。

以上、取り立ててお得な情報というわけでもないですが(汗)忘備録として。

最近見つけたスクロールがスムーズでデザインが美しいWEBサイト五選。

クリックすると自動的にスクロールするインターフェースのサイトは昔からありますが、最近はデザインを含めてかなり洗練されたスクロールを備えたサイトをよく見かけるようになりました。その中でも特にいいな、と思ったサイトをご紹介します。

SOMEWARE | 薬院六角のライフスタイルショップ

someware
きれいで落ち着いた雰囲気のヘッダイメージと、すぐ下にあるサイトロゴがアートな雰囲気を演出してますね。すごくしゃれてると思います。
続くコンテンツも余分な装飾が無く、「読ませる」デザイン。静寂の中に主張を感じます。
SOMEWARE | 薬院六角のライフスタイルショップ

二番工房

二番工房
テレビCMなどを手がける広告制作会社のサイト。職人気質を感じさせる渋いデザイン。信頼感を感じさせます。スクロールの際に背景画像がちらっと見える、演出が効果的に感じます。
二番工房

はなみち舎 ― 岡山市のレトロモダンな雑貨・和風ファッションのお店

はなみち舎
レトロチックな服と雑貨を販売するお店のサイト。とにかくビジュアルがハイクオリティ。久々にツボにはまりました。好きだな〜このイメージ。唯一無二の雰囲気を作り出すことに成功してると思います。
はなみち舎 ― 岡山市のレトロモダンな雑貨・和風ファッションのお店

discovery-go

discovery-go
宣伝広告媒体、写真映像制作などをやっている会社のようです。存在感がほとばしるサイトデザイン。上下左右にコンテンツが展開するやや複雑なデザインを上手くまとめています。こういうのやりたいけどなかなか難しい。
discovery-go

星のや 京都 HOSHINOYA Kyoto|京都旅館

星のや京都
京都の旅館のサイト。左右からのびるメニューや空き室検索がテクニカル。サイトの品質の高さが旅館のイメージアップにつながってると思います。”しっかりしてる感”が出てますね。
星のや 京都 HOSHINOYA Kyoto|京都旅館

どのサイトもすごくクオリティが高くて好きなサイトです。制作の参考にさせて頂きます!

きれいなデザインのサイト:OJAGA DESIGN

センスの良いサイトを見つけたのでご紹介します。

オジャガデザイン_400x300
TOPページ / OJAGA DESIGN || MADE IN JAPAN

カラフルなレザーをマテリアルにした製品などを販売しているサイトです。商品が大変魅力的でインパクトがあるので、それを最大限表現しつつ高級感を感じさせるショップのブランドを感じさせるシンプルで統一感のあるデザインです。