WEBデザインとか、レイアウティングとか言ったって色々な種類がありますよね。シングルカラム、ダブルカラム、マルチカラム等のカラム分けもそうですが、ランディングページ、ブランディングページ、コミュニティサイト、ポータルサイト、そのそれぞれによって特有のレイアウトやデザインが存在したりしますが、同じくらいデザインテクニックも時と場合に応じた提案方法があるわけです。

今日は、今年に入ってWEB屋仲間との間で何度か話題に上がった（気がする）デザイン技法的な物をいくつかピックアップします。情報として激古い物も、新しい物も、え？これテクニックか？って言う物もあるかもしれませんが、この記事自体次回のレッスンの教材にするつもりなので、あまり突っ込まないで上げてください。

 

 

Grid System

話に上がるというより、最近はWEBレイアウトの話をするときは当たり前のように使ってますね。

「じゃーデザインしよっかー。」→（当たり前のように何かしらのグリッドシステムのアクション）

まぁ、もともとがWEBの基本がグリッドデザインなわけだから、指標的な物ができるのも当然っちゃ当然かと思う今日この頃なわけです。

Grid Systemは前に一度お勧めをまとめたので、ご参考頂けると嬉しいです！

 

 

Fluid Grid Layout

レイアウトに正式名称があるのか知りませんが、Fluid（ふるぃど）レイアウトとか言いますかね。流動的なレイアウト的な意味でしょうか。こう、ブラウザサイズ変えたりすると配置が変わったりするやつです。

最近は日本のサイトでもこのレイアウト採用してるところ多いと思うんですが、どうでしょうね。

• SAGA
• Save the Screen
• acube
• HIROYUKI TAKAGI ARCHITECT & ASSOCIATES
• masako isamu.com
• INFOBAHN

ごめん、うそ、めっちゃ多いわ。いっぱいあって探しきれんわ。

 

 

Minimal Design

無駄のないデザインのことですね。無駄のないというか、僕の解釈としては空間をうまく使うという方がしっくりきます。僕はこういうデザインの方が好きだったりする人間です。

僕はデザイナーを名乗っていないのですが、ベースとなるデザインの考え方はこれですね。まぁ、ぼく自身完全にMinimalオタクだと自負していますが、この辺のお話はまたどこかでできると嬉しいですね。

• Minimal Design Gallery

New!!

• 20 New Examples of Minimal Websites

WDLからMinimalデザインに関するまとめ記事が上がっていたので追記しました。

 

 

One / Single Page Deisgn

1ページに全部まとまってるやつです。ランディングページとはちょっと違うと思うんですよね。といっても明確な概念があるかどうかは知らないのですが、One Page Designとかでググると結構でてくるのでご参考までに紹介。去年、一昨年くらいからよく目にするようになった気がするようなしないような。

• 9 Beautiful One-Page Websites for Design Inspiration

 

 

Parallax Scrolling

パララックススクローリングって言えばいいかな。スクロールに合わせてコンテンツが展開していったり、エフェクトが効いたりするやつですね。この前Dentsu Networkのコンテンツがこれなことに気がついたんですが、前からですかね？

これ自体が一般化してきたのは結構最近なイメージがあります。僕自身知ったのは去年の末くらいだし。一回こういうの作ってみたいですねぇ。

• 21 Examples of Parallax Scrolling in Web Design

 

 

以上、どうでしたか？僕はまだParallaxをつかったプロジェクトには参加したことが無いのですが、やるなら企画の部分からガッツりやりたいですね、今度提案してみよっかな。。。

他にももちろん色々ありますがまずはこれだけ。