グリッドシステムのフレームワークを作ってみた

2023/11/30 29 users デザインカンプ フレームワーク 経緯 実装 納期

はじめに この記事では私が普段使っている、グリッドシステムを使ったレスポンシブなデザインカンプのフレームワークを紹介します。主にデザイナー初心者や1~2年程の経験者向けの内容です。 フレームワークを作成した経緯 私は仕事で主に所謂Web制作と言われるWebサイトのデザインと実装を両方やっており、業界的に納期... 続きを読む

グリッドシステムで強固なデザインレイアウトを作る | UX MILK

2020/05/24 13 users UX MILK デザインレイアウト

三分割法についての記事で作品におけるグリッドの意味について確認したので、今回はもう少し深く検証してみましょう。デザイナーという仕事の構造と背景がもたらす考え方として、私たちは自分が作りたいエレメントのことばかり考えてしまって、グリッドの有効性を看過してしまいがちです。 デザイナーの仕事の構造と背景... 続きを読む

レスポンシブデザインに見るデザインカンプと実装との溝 - シフトブレイン／スタンダードデザインユニット

2019/08/26 92 users デザインカンプ スタンダードデザインユニット 実装 解釈 仕様

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカ... 続きを読む

軽量CSSフレームワークではてなブログの固定ページにグリッドシステムを導入する - Minimal Green

2017/08/10 25 users Twitter Minimal Green 話題 固定ページ

2017 - 08 - 10 軽量CSSフレームワークではてなブログの固定ページにグリッドシステムを導入する ブログカスタマイズ CSS はてなブログで固定ページをサイトっぽいレイアウトにするにはどうすればよいか、という話題がTwitterでありました。はてなブログProの固定ページを使えば、WordPressの固定ページのようなデザインも可能です。 ただ、そのままではできないので、やり方をここで... 続きを読む

最新！CSSをもっと効率よく活用できるツールを一挙紹介！【もう試しましたか？】｜SeleQt【セレキュト】

2017/06/06 25 users SeleQt セレキュト CSS フレームワーク ツール

CSSが進歩に従って機能を活用するためのライブラリやツールが次々登場しています。こうしたものを利用することで、普段の作業時間を短縮できたり、まだ知らない機能について知ることができます。 今回は 今年リリースされたばかりの、最新CSSライブラリ、フレームワーク、ツール を紹介します。 CSS Flexboxツール＆ライブラリ 1. Waffle Grid Flexboxのグリッドシステムを簡単に利用... 続きを読む

flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」 - かちびと.net

2017/03/16 12 users CDN MIT class Flexbox ライセンス

Waffle grid Waffle gridはflexboxを使った、シンプル軽量なグリッドシステムです。7kbほどのスタイルシートでレスポンシブ、カスタマイズ性も考慮された設計との事です。ありがちなclassなのでフレームワーク的なものを使い慣れてる方は扱いやすいんじゃないでしょうか。 CDNもある ようです。ライセンスはMIT。 Waffle grid Post by かちびと.net PR... 続きを読む

Bootstrap 4 の新機能を徹底比較！Flexbox と通常グリッドの使い方まとめ - PhotoshopVIP

2016/11/25 40 users Flexbox Bootstrap グリッド 徹底比較 新機能

Bootstrap 4 では慣れ親しんだグリッドシステムに変更が加えられました。より大きな画面サイズに対応する XL グリッドが追加された他、新しいグリッドシステム「 フレックスボックス 」バージョンが収録されました。 通常のグリッドと Flexbox 版には互換性がないので、プロジェクトに応じてどちらを利用するか選択する必要があります。この記事では Bootstrap 4における2つのグリッドシ... 続きを読む

軽量でシンプルなレスポンシブフレームワーク「Skeleton」 |　バニデザノート

2015/07/27 62 users Skeleton グリッドレイアウト イレギュラー 横幅 羽根

「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじ... 続きを読む

BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル | コリス

2015/07/22 87 users コリス Bootstrap CSS ナビゲーション 要素

先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。 次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。 Base CSS and Navigation Systems in Bootstrap 下記は各ポイントを意訳したもの... 続きを読む

Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方 | コリス

2015/06/17 269 users コリス Bootstrap class フレームワーク 多く

Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing B... 続きを読む

Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ | コリス

2014/08/21 406 users コリス Ado スキルアップ チートシート タイポグラフィ

先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Ado... 続きを読む

グリッドシステムベースのデザインをするときに気をつけること |　バニデザノート

2014/07/08 69 users バニデザノート フレームワーク コーディング デザイン 例外

グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。 続きを読む

高さの異なるパネルを揃え、汎用性に優れたグリッドが簡単に使えるシンプルなフレームワーク -FlexGRID | コリス

2014/02/03 57 users コリス グリッド フレームワーク パネル CSS

CSSハックもJavaScriptも使用せずに、中身のテキストや画像の高さがバラバラでも各パネルの高さを同じにする、モバイルファーストのシンプルなグリッドシステムを紹介します。 非常にシンプルなグリッドなので、さまざまなプロジェクトに利用できると思います。 FlexGRID FlexGridは文字通り、柔軟なグリッドを提供するもので、非常にシンプルなHTMLと軽量のCSSで構成されています。 基本... 続きを読む

Bootstrap3でメガメニューを実現する『Yamm Megamenu』 | IDEA*IDEA

2013/11/27 21 users Bootstrap IDEA Bootstrap3 ところ

これ、ちょっといいかも・・・。コンテンツが増えてきたときに使えるメガメニューをBootstrap3で実現するプラグインですね。 ↑ こういうのですな。 ↑ サムネイルメニューも入れられます。 ↑ ちゃんとグリッドシステムになっています。 Bootstrapを見ながら自作するのも大変ですからね・・・。こういうプラグインを賢く使わせていただきたいところです。 » Yamm!3 Megamenu for... 続きを読む

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ | HTML5Experts.jp

2013/08/20 650 users Bootstrap CSSフレームワーク 流行 とおり リスト

人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザイン... 続きを読む

レスポンシブWebデザイン対応のシンプルで軽量なグリッドシステム・「.FITGRD」 - かちびと.net

2013/05/18 15 users net レスポンシブWebデザイン対応

続きを読む

一個覚えとくと重宝するかも！レスポンシブWEBデザイン対応のグリッドシステム色々！ | バンクーバーのうぇぶ屋

2013/02/12 254 users バンクーバー うぇぶ屋 従来 レスポンシブWebデザイン対応

先日、Responsive Grid Systemの仕様変更について記事を書かせて頂きましたが、あの反応としてやっぱりいくつかコメントもらったのが、逆に分かりにくくなったという物。 まぁ、従来の作り方とは大分変わったので、グリッドシステムとして僕の中で大事な要素の一つである『周りとの共有しやすさ』という面ではちょっと難ありかなと思うのが正直な所。一度慣れてしまえばこんな効率の良い作り方も中々無いか... 続きを読む

オシャレな写真加工アプリ『addLib S』を使ってみた : ライフハッカー［日本版］

2013/02/01 34 users ライフハッカー 写真加工アプリ 日本版 iPhone 黄金比

Apple , iPad , iPhone , iPod , オフにやること , 写真 , 趣味 オシャレな写真加工アプリ『addLib S』を使ってみた 2013.02.01 22:30 あなたの写真を、美しいグラフィック作品にしてみませんか？ 写真加工アプリ『addLib S』には、こんなキャッチコピーがついています。 グリッドシステム、フラクタル理論、黄金比、顔認識といった、デザインに関わる... 続きを読む

著作権放棄の、グリッドシステムを搭載したレスポンシブWebデザイン対応CSSフレームワーク・rwdgrid - かちびと.net

2012/10/31 57 users 語弊 レスポンシブWeb ライセンス フリーソフトウェア財団

著作権放棄のレスポンシブWeb デザイン対応CSSフレームワー ク、rwdgridのご紹介。自由に 使っていいフレームワークは 非常にありがたい存在ですね。 ありがたく使わせて頂きます。 著作権放棄、と言ってしまうと語弊があるのかもしれませんが、ライセンスはパブドメではなく、WTFPLです。あまり聞きなれませんが、フリーソフトウェア財団にもGPL互換として承認されている非常に条件の緩いライセンスに... 続きを読む

Photoshop VIP グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ

2012/08/08 55 users Photoshop Vip グリッド レスポンシブデザイン

Home　>　 まとめ　>　その他まとめ　>　グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ Webサイトやブログなどで、コンテンツを分かりやすく、見やすく表示する方法のひとつとして、垂直/水平方向に分割するガイドラインを使ったグリッドシステムがあります。 このグリッドに、Webデザイントレンドでもあるレスポンシブデザインを加えることで、より動きのある... 続きを読む

デザイナーのためのノート「Gridbooks」 – ビジュアルシンキング

2011/12/05 18 users ビジュアルシンキング RHODIA デザイナー ノート ドット

方眼ノートともまた違う、デザイナーさん向けのノートを紹介します。 Gridbooks Gridbooks グリッドシステムを組みやすいようにドットが配置されています。 Web用と広告用の2種類があり、それぞれノートタイプとPADタイプがあります。 WEB PAD AD PAD モレスキンとかRHODIAとか使っている人が持っていそう。 ノートタイプは$18、PADタイプは$10。 サイトのデザイン... 続きを読む

見出しやパラグラフの縦のリズムを大切にしたグリッドシステム -Gridlover | コリス

2011/11/14 32 users パラグラフ コリス ウェブページ フォント スケール

ウェブページで使用する文字のスケールやリズムを設計するのに役立つGridloverを紹介します。 Gridlover Gridloverでは下記の3点を調整し、見出しやパラグラフなどの縦のリズムを設計します。 フォントの [...] 続きを読む

[CSS]表示サイズに合わせて最適なグリッドを構築するスタイルシート -SimpleGrid | コリス

2011/08/29 98 users コリス グリッド CSS 水平スクロールバー class

SimpleGrid 3つの特徴 Responsive Web Design SimpleGridは4種類のスクリーンサイズで最適なレイアウトを提供します。 水平スクロールバーとは、さよならです。 ～720px 720px～ 985px～ 1235px～ 効率的なclass管理 同様のグリッドシステムの多くは、同じサイズのグリッドを一つのclassで管理します。SimpleGridではユニットの最... 続きを読む

[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid | コリス

2011/07/03 211 users grids Grid コリス class CSS

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。... 続きを読む

fladdict » デザイナ向けのDesignGuyという英語ポッドキャストがイイ感じ

2011/06/29 26 users fladdict タイポグラフィー デザイナ向け いい感じ

Design Guyはデザイナー向けの英語ポッドキャスト。iTunesで入手できます。 グラフィックデザインの歴史や、タイポグラフィーやグリッドシステムについてなどを、英語で授業してくれます。全40話で現在は更新停止。 海外の人とデザインの話をするときは、用語が違ったり人の名前の発音が違ったりで苦戦することもしばしば。なのでこういうの普段から聞いておくといいリハビリになるのではないかと。 英語苦手... 続きを読む