デザインポータルサイト Grids作ったよー

どうも、フロントエンド/マークアップ/WebデザインをしていますQOOPU.NET(クープ)のテルです。

先日、リニューアルしたサイトGridsについて少しツラツラと書いてみようと思います。
Gridsを見てくれている人、またこれからデザインポータルを作る人が読んでくれたら嬉しいです。

●Gridsとは

Gridsをこれから見てくれる人に簡単に説明しますと、デザインにガイドを引いて、デザインの中に隠された図形を可視化しています。
と言っても、見えた部分については言及してないので、見る人が見るとただ線を引いたように見えます。
(ルール自体を言及しない理由としては、解釈が人それぞれと言うこと、自分で考えたほうが意味があるからです。全部説明されてるものって面白くないって僕は思うので。)

AboutページにGridsについてもっと詳しく書いていますので、
興味を持っていただけたらそちらを見てもらえたらと思います。

●Gridsを作ったきっかけ

昔、アメリカにいた頃(もうずっと前の話ですが)1冊の本に出会いました。
「Making and Breaking the Grid(グリッドを作ってぶっ壊せ)」と言う本です。
日本語版も出てますので是非。

IMG_6121 (1)

グリッドについてだけ書かれた本です。
グリッドオタクのためのグリッド必修本でございます。

この本の影響もあって、デザインにグリッドを引くのが趣味です。
自分はデザインポータルサイトを流し見していて、気になったデザインにグリッドを引いたりしていました。
そうして自分なりに情報を集めているうちに、せっかくだから見やすい形にまとめておこうとして
Gridsをローンチしたと言うわけです。

●Grids各種機能について

フォント提案機能

「匠の文字とデザイン」と言う本が昨年話題になりましたよね。
デザインの中で実際に使われているフォントを、デザインと共に掲載した素晴らしい本です。

常にアップデートできる形で、「匠の文字とデザイン」のようにデザインの中で使われているフォントが知れたら凄い!俺が凄い楽しい!というところがフォント表示機能のアイデアのもとになっています。
自分一人だとフォントの知識に限界があるので、皆さんの知識も拝借してWEB版「匠の文字とデザイン」ができたらいいなと思い
フォント提案機能をつけました。

最近だと「実例付きフォント字典」が気になりますね。

フォント検索でもっと引っかかるよう、もっと充実させるのが今後の目標ですね。

使用プラグインの表示

WEBサイトだと多種多様なプラグインがあって、それを都度ソースを開き「.js」で検索し見るのが面倒だなと思い
メモとしてサイトに使われているプラグインを記載しています。

たまに知らないプラグインとか出てきて楽しいです。
このサイト、スライダーこのプラグインなんだ!?とか思ってもらえたら嬉しいです。

フロントエンドの人にも見てもらえるようにこの機能を実装しています。

グリッド画像切り替え機能

青、ピンク、黄色、白、黒とグリッドの色を切り替えられます。
デザインによって見え方もかなり違いますので、マウスオーバーでサクッと変えられる機能は僕自身が重宝していますw

●グラフィックもWEBも全部まとめて掲載してます

グラフィック/WEBなど、デザインを問わないところが最近は気に入っています。

サイトを作った時は、僕自身がWEBデザイナー(フロントエンドエンジニア)なので
WEBデザインだけを掲載していこうと思っていたのですが、
友人からもっと紙のデザインを載せてみたら?とアドバイスいただき、ガイドを引き始めたところ
個人的にかなり面白くてハマりましたw

WEBではあんまりない(と思います)円に要素を配置するデザイン。
イラストとかだと多い印象ですね。

Handsome Daigo
Wasshoi!

その他、ゲームのパッケージも掲載できるし
CDジャケット、アーティスト写真にガイドを引いてみても面白いかもしれませんね。

●まとめ

Gridsではガイドを引いて整えられたデザインルールだけを見せたいわけではなくて
どちらかと言うと、デザインの中に隠された図形を可視化するためにグリッドを引いています。

ロゴデザインのコンストラクショングリッドに近いのかもしれません。

oniguiliさんの写真が好きなんですが
oniguiliさんが撮る写真には図形が隠れているなと思います。
地面や道路が斜めに入るような構図にし、写真に図形を隠して入れ込むことで魅力的に見せているのかなと思います。

黄金比もそうですが、図形が規則的に入っているとキレイに見えますよね。

今後も更新しつつ、サイトもアップデートしていきますので。
気長にお付き合いいただけると嬉しいです。

それでは、また次の記事でお会いしましょう〜
以上、QOOPU.NET(クープ)テル・豊田でした!

  • このエントリーをはてなブックマークに追加