※2024/11/21現在
タグが「 グリッド 」のWEBデザイン一覧
グリッドレイアウトとは、見えない線（グリッド）に沿って各要素をレイアウトする手法の事を言う。
WEB製作が複雑・高機能化したことで、レイアウトに関するCSSソースコードが肥大化してきており、それを解決するためにtwitter bootstrapやfoundationなどのグリッドシステムと呼ばれるCSSフレームワークを使用するケースが多い。
これらのグリッドシステムでは、12個（24個の場合もある）に分割されたグリッドをいくつ使うか、によってレイアウトすることができ、1カラム、2カラム、3カラム、4カラム、6カラム、12カラムと、様々なレイアウトに簡単に対応できるようになる。
しかし、12は5では割り切れないため、5カラムでのレイアウトはできない。
-
-
-
-
3Doodler2.0
http://the3doodler.jp/3doodler-2/
2.0にバーションアップされた空中に絵を描ける3Dペン「3Doodler」のウェブサイト。 3Doodlerは世界初の3Dペンとして発売された商品です。 商品そのもののインパクトが強いので、過剰なデザインに頼らず最低限の […]
詳しく見る -
BAKE
http://www.bake-jp.com/#content
最近話題の焼き菓子系スタートアップ起業のウェブサイト。 スイーツというともっとゴチャゴチャっとした印象の女性的なウェブサイトが多いんですが、こちらは男性的でポップカルチャー寄りのイエローとブラックで構成された配色が素敵で […]
詳しく見る -
-
-
宮古島Style
http://www.miyakojima-style.jp/
沖縄 宮古島の観光紹介サイト。 ハイセンスな家具通販ウェブサイトのような高級感のあるデザインで、「こういう休日を沖縄で過ごすのもいいなぁ」と思わせてくれるデザインですね。 レスポンシブWEBデザインになっています。
詳しく見る -
-
ひろびろ ひろしま移住サポートメディア
http://www.hiroshima-hirobiro.jp/
広島への移住を後押しするウェブメディア。 半円形に切り取られたメインビジュアルのギャラリーや、メニュー部分が印象的ですね。 コンテンツのリスト部分はMasonryでタイル敷き詰め型のレイアウトになっています。
詳しく見る -
スウェーデン矯正歯科
矯正歯科クリニックのウェブサイト。 ガター無しのタイル型グリッドレイアウトでビビッドな色使いのフラットデザインを取り入れることで、明るくポップな印象に仕上がっています。 PC向けでもハンバーガーメニューを使用しているのが […]
詳しく見る -
PECOTOY
http://www.pecotoy.com/shop/main/index.php
韓国の紙製のフィギュア（ペーパートイ）PECOTOYのウェブサイト。 立体感のあるロゴマークや、ポリゴン風の背景、サークルデザイン、背景動画など、最近のトレンドをふんだんに取り込んだオシャレなデザインに仕上がっています。
詳しく見る -
Tens Sanglasses
サングラスブランドのウェブサイト。 サングラスの黄色いレンズをイメージしたようなベージュカラーをキーカラーに、スッキリとした配色。 計算され尽くされたずれたグリッドデザインも美しいです。 レスポンシブでのスマホ表示も完璧 […]
詳しく見る -
-
P.G.C.D. JAPAN
スキンケアブランド P.G.C.D.のウェブサイト。 Windows8のメトロUI（モダンUI）のような隙間なしのタイル敷き詰め型レイアウトですが、LazyLoadで遅れて読み込んでくることで動きを出し、高級感や躍動感を […]
詳しく見る -
大府あおぞら有床クリニック
メインビジュアルが青空と医院の外観写真を広く大胆に使っており、意外性のあるデザインに仕上がっています。 トップページのメインビジュアル以下のコンテンツはスッキリとグリッドにそってパステルカラーでまとまっており、見やすいで […]
詳しく見る -
渡邊万洋税理士事務所
岐阜県の税理士事務所のウェブサイト。 横幅いっぱいの背景画像をbackground-size:coverで設置したメインビジュアルなど、シンプルながらも今風なデザインに仕上がっています。 士業ということで、クレバーさと清 […]
詳しく見る -
-
-
V76 by Vaughn
これは、実際にサイトを見てもらうのが一番早いんですが、左半分はstickyなカルーセルスライダー・右半分がコンテンツで右側だけスクロールします。 「こういう作り方もあるのか！やられた！」と思うようなデザインでした。
詳しく見る -
-
Made by Few
ウェブマーケティングカンファレンスのウェブサイト。 斜めにレイアウトされたタイルがスピード感を演出しています。 バランス感覚がすごく難しいデザインになりがちなのですが、うまくまとめています。
詳しく見る -
-
味の明太子 博多中洲いとや
http://www.itoya-mentaiko.co.jp/
明太子専門のウェブサイト。 高級感と和風の伝統を感じるデザインは、縦書き＋ホワイトスペース広めのゆったりとしたスペースによって生み出されています。 ゆったりとした配置が、禅の精神を演出しているように感じます。 メインビジ […]
詳しく見る -
-
RQ+（リューキュープラス）
沖縄の観光スポットやイベントを紹介するメディア RQ+（リューキュープラス）のウェブサイト。 2015年の流行であるくすんだ色味のペールトーンでカラフルな色使いが素敵です。 google nowのようなカード型のデザイン […]
詳しく見る -
川平デンタルクリニック
横浜市の歯医者のウェブサイト。 歪んだ曲線で切り取られたようにマスクされたメインビジュアルのカルーセル、水彩画タッチの色使い、薄い水玉テクスチャや方眼など、細かい部分までデザインにこだわって作られています。 ワンページデ […]
詳しく見る