2015/09/11 クリエイター

ネタに詰まった時に参考になる事例つきデザイン・レイアウト集

ネタに詰まった時に参考になる事例つきデザイン・レイアウト集 Webデザインのネタに詰まった時の参考に、デザインレイアウトをまとめました。
こういうデザインもいいなぁと感じさせる、センスの高いデザインのサイトを厳選してピックアップしているので、レイアウトの参考に活用してもらえれば嬉しいです。
優れたデザインレイアウトを見れば、何かしら突破口が見つかるかもしれません。

メリハリをつける:TommykairaZZ

スポーツカー・TommykairaZZ(トミーカイラZZ)のサイトです。

赤(オレンジに見えますが)の車のボディと白のテキストのメリハリが素晴らしいですね。
車を含め、色は赤、白、黒の3色で構成されていて、赤がアクセントカラーとなって印象を高めています。


http://tommykairazz.com/

写真とテキストを大胆に配置:bianca kamakura

鎌倉にある美容室「bianca kamakura」のサイトです。

写真を画面いっぱいに表示させ、その上に大きめにショップ名を配置しています。
ショップ名のサイズは大きめですが、白で統一しているのでイメージを邪魔せず、かつショップ名にも目がいきます。

すごくセンスがいいデザインですね。
美容室なのでサイトのセンスが高いと行きたくなります。


http://bianca-hair.com/

動画とテキストの共存:戎邸

徳島県海部郡にあるサテライトオフィス・戎邸のサイトです。

動画とテキストがしっかり共存していて、どちらもしっかり視認できるバランスでデザインされています。


http://ebisu-tei.com/

グリッドレイアウト:湖都コーポレーション

滋賀県のハウスメーカー・湖都コーポレーションのサイトです。

サイズの異なる四角を並べたグリッドレイアウトでデザインし、かつ動画以外はモノクロにすることで動画がより色鮮やかに見えます。
とてもセンスがいいデザインですね。


http://www.koto-cp.com/

画面を二分割して対比を演出:東京大学i.school

東京大学知の構造化センター主宰の教育プロジェクト東京大学i.schoolのサイトです。

画面を真ん中で二分割し、左右で色合いを変えることで対比を演出しています。
デザイン性を重視するため、ゴーストボタンを使っているのもポイントです。
※ゴーストボタンは背景色を透過にし、囲み線で表現するボタンです。


http://ischool.t.u-tokyo.ac.jp/

線デザイン:LETTERS

東京中野にあるWebデザイン会社・株式会社レターズのサイトです。

これぞまさに線デザインの極みといっていいようなデザインで、スクロールするとパララックスで線が描かれていきます。
こちらの事例は線で表現したサイトですが、レイアウトに一本線を入れるだけで印象が違ったデザインになります。


http://letters-inc.jp/

大人っぽさを演出:Seiko Premium Boutique

セイコーのプレミアムブランド専門店・Seiko Premium Boutiqueのサイトです。

背景写真はモノクロに、シンプルにテキストは白で統一。
あまりテキストのサイズを大きくせず、控えめにプランド名を載せることで控えめな大人っぽい雰囲気が感じられます。
フォントサイズがもう少し大きかったら、主張しすぎて控えめな感じが損なわれてしまうことでしょう。


http://www.seiko-watch.co.jp/boutique/premium_ginza/jp/

縦書のメニュー:芦田青峯堂

兵庫県姫路市にある古美術店・芦田青峯堂のサイトです。

日本語には他の言語には真似できない、縦書きという選択肢があります。
メニューを縦書きにすると、横書きとは違った印象が生まれます。
縦書きにしても読みやすいのは日本語だけなので、和に関するショップやサービスのサイトなら縦書きも考えてみるといいかもしれませんね。


http://ashida-seihodo.com/

ポリゴンスタイル:MIDORI AOYAMA

東京を拠点に活動するDJ・MIDORI AOYAMA氏のサイトです。

ポリゴン風デザインは密かに流行り始めていて、デザインにも取り入れているサイトもよく見かけるようになりました。
こちらのサイトのように、部分的にポリゴンにしてみるのもかっこいいですね。
ポリゴンはうまく使えばアーティスティックな雰囲気を演出できます。


http://midoriaoyama.jp/
Webデザインの求人案件 Webデザインの求人案件

Webデザイナーやクリエイターの求人・案件情報です。
制作会社もあれば自社サービスのUIデザイン案件等、幅広く掲載しています。