デザインが苦手なWebサービス開発者に朗報！今風のデザインがさくっと作れる『Twitter Bootstrap』が凄まじく充実している件 | IDEA*IDEA

2011/08/20 2350 users IDEA Twitter インターフェース twitter社

土曜日の朝ですが、これはテンションがあがる！！！ Twitter社から開発者むけに素敵なプレゼントですよ・・・これはすごい。今風のインターフェースがさくっと作れるCSSフレームワークですな。これだけでかなり高品質なデザインが実現できちゃうのではないでしょうか。 ↑ ここ最近で一番テンションあがった！Twitter△！ すんごくたくさんの機能があるのですが、いくつかご紹介。 ↑ まずはグリッド。部品... 続きを読む

時間の節約になるWeb制作関連ツール 12+1 | Webクリエイターボックス

2010/07/12 1604 users 節約 Webクリエイターボックス 短縮 時間 便利ツール

Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ... 続きを読む

JPEG画像をより美しく、より軽量に最適化するテクニック | コリス

2009/07/02 1070 users コリス SmashingMagazine ピクセル 軽量

JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8×8のピクセルのブロックから成り立っています。画... 続きを読む

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス Calc CSS 関数

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッド... 続きを読む

» 佐藤可士和氏のGU新ロゴ Toshi Omagari

2013/03/08 888 users 佐藤可士和氏 和文 動機 ロゴ 酷い

思いっきり仕事中ですが腹が立って仕方がなかったのでブログ更新します（どういう動機だ！） 佐藤可士和氏がGUというファッションブランドのロゴをリデザインしたそうです。まぁ言ってしまえば元のロゴも大して良くはないのですが、その新ロゴというのが笑止千万な出来なので徹底的に図解して非難したいと思います。 まずはその新ロゴ。和文の方もグリッド多用しまくりで個人的には酷いと思うのですが、まぁ欧文書体デザイナー... 続きを読む

成功者が共通して持つ「グリット」という能力--才能でも、努力でもない第3の要素とは？ | ログミー[o_O]

2014/12/22 849 users ダックワース ログミー 才能 スピーカー TED

成功に必要なのは努力か、才能か？　長年にわたり議論されるこの問いに対して、心理学者のAngela Lee Duckworth（アンジェラ・リー・ダックワース）氏は、新たな説を提唱します。彼女が語った、第３の成功因子「グリット」とは？（TEDより） 【スピーカー】 ペンシルバニア大学　心理学教授　Angela Lee Duckworth（アンジェラ・リー・ダックワース） 氏 【動画もぜひご覧くださ... 続きを読む

全米エリートが絶賛する究極の能力「グリット」を身につけよう｜Career Supli

2016/11/02 816 users Grit Career Supli 究極 ホワイトハウス 見地

全米から引っ張りだこの心理学者が明かす「究極の能力」 私たちが人生で成功するために必要な「究極の能力」とは何か。そう問われてどんな答えを返しますか？その答えを科学的な見地から「やり抜く力（GRIT）」だと結論づけたのは、この研究でアメリカで「天才賞」とさえ呼ばれる「マッカーサー賞」を受賞したアンジェラ・ダックワースさんでした。 ここではビジネス、スポーツ界のみならずホワイトハウスや米国陸軍士官学校... 続きを読む

生まれつきの才能や、IQは一切関係ない。成功者に共通する「グリット」という能力とは？ | TABI LABO

2015/03/22 741 users Grit TED スピーチ ペンシルベニア大学 意志

あなたはグリット（Grit）という言葉を知っているだろうか？不屈の精神や意志の力と訳されることが多く、その力が成功と密接に結びついていると話題になっている。才能や、IQの高さとは違うグリットという能力。 ペンシルベニア大学の心理学者、Angela Duckworth氏がこの能力こそが成功の鍵だと発見した。彼女がTEDで語った、グリットと成功の関係性。彼女のスピーチの内容を簡単にまとめると、 1 成... 続きを読む

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

2012/07/10 718 users コリス セレクタ シャドウ ボーダー グラデーション

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利... 続きを読む

Chromeの新しい機能拡張が便利すぎる！デザイナーやディレクター向けの新しいデザインツール-ProjectVisBug

2018/11/29 656 users Chrome デザイナー ディレクター向け アイデア テキスト

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、... 続きを読む

[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル | コリス

2011/03/27 655 users ローディング jQuery メインメニュー コリス div要素

まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。デモページ実装HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。HTML：背景背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 続きを読む

最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles | コリス

2014/12/09 556 users コリス Sketch psd ワイヤーフレーム ポートフォリオ

最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles ダウンロードできる素材のフォーマットは、4種類。 .psd（7... 続きを読む

ウェブサイトの制作に必ず役立つブックマークレットのまとめ | コリス

2013/01/21 548 users コリス セレクタ ブックマークレット アクセシビリティ CSS

ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを... 続きを読む

Bootstrap以外のCSS Frameworkを知らない人必見！CSSフレームワーク４４選 | エンジニア転職求人情報×IT人材紹介@SAK

2015/02/03 527 users CSS Framework Bootstrap 人必見 沢山

CSS Framework 2015年になったので、現状のCSSフレームワークをまとめてみました。Bootstrap以外にも沢山あります。 かなりの量があるのですが、単一機能のみ（グリッドだけとか）などもあります。 一通り見てみると、やはりBootstrapが良いなとは思うのですが、個人的にはSemantic UIが良いなと思いました。 名前空間の考え方や、設定はBootstrapが一番洗練されて... 続きを読む

グリッドデザインに使えるツールいろいろ | DesignWalker

2010/05/11 520 users DesignWalker グリッドデザイン DESIGN

ウェブサイトをデザインする際、レイアウトはどのようにおこなっていますか？ ガイドにあわせて、要素を配置できるグリッドを使用すると、レイアウトがワンランクアップしますよ！ 今回は、そんなグリッドデザインに使えるツールをいろいろご紹介します。 Grid Style In Modern Web Design: Showcase and Resources 美しいグリッドデザインのサイトがたくさん集められ... 続きを読む

配置をマスターして「機能するレイアウト」を作る大切なポイント | コリス

2010/07/06 503 users ウェブデザイン コリス エレメント 特質 レイアウト

ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強してみる – #12 Pinterest風グリッドレイアウトを作ってみた ｜ クラスメソッド開発ブログ

2013/01/15 502 users Pinterest HTML クラスメソッド開発ブログ 従来

HTML5 × CSS3 × jQueryを真面目に勉強してみる HTML5 × CSS3 × jQueryを真面目に勉強してみる – #12 Pinterest風グリッドレイアウトを作ってみた そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰め... 続きを読む

[JS]jQueryも外部CSSも不要！レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス

2013/05/22 491 users jQuery コリス スタンドアローン RESET スクリプト

スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示... 続きを読む

[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js | コリス

2012/05/17 487 users コリス div要素 スクリプト

とにかく揃えたい人にぴったりのjQueryのプラグインを紹介します。 jQuery.grrrid, grrreat for all grid-related layouts. jQuery.grrrid.jsのデモ jQ [...] 続きを読む

flashを使わないでギャラリーサイトや写真ブログを制作する際のデザインが参考になりそうなサイト集めました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2012/01/23 460 users Flash JavaScript Webデザインクリップ

今回は写真をメインにしたダイナミックなサイトや、グリットをうまく使った見やすく整理されたサイトをファッション関係・フォトグラファー・デザイン制作会社を中心に30サイト集めました。 クオリティー高い写真を使用しているので見た目のデザインがかっこいいことは言うまでもないのですが、それだけでなく、HTML5やJavascriptを駆使したFlashのようなユニークな画面遷移の動きのサイトも多く見ている人... 続きを読む

【文字配置編】行間が広がるのはナゼ？対策は？：Wordのムダ機能 完全解除！

2010/05/10 445 users 行間 ナゼ 体裁 word 途端

文書の体裁を整える際も、配置の自由が利かず、イライラする。例えば、文字サイズを大きくした途端、行間が不自然に広がることがある（図1）。これは、「グリッド」の働きが原因だ。 続きを読む

2011年のウェブデザインのトレンドを振り返る | コリス

2011/12/08 439 users ボーダーレス コリス 点線 ウェブデザイン ペーパー

2011年のウェブ制作の話題の中心はHTML5とCSS3でしょう。 ここではデザイン面を中心に、2011年に人気が高かったウェブデザインのトレンドを紹介します。 下記は各ポイントを意訳したものです。 Responsive Web Design 点線 サークル レトロスタイル リボン マジックナンバー『3』 少しめくれてるペーパー ボーダーレス グリッド 対角線 Responsive Web Des... 続きを読む

[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout | コリス

2011/03/27 429 users iPhone コリス フレームワーク CSS 可変レイアウト

IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。StackLayoutの主な特徴StackLayoutの対応ブラウザ・デバイスStackLayoutで使用する12個のclass名StackLayoutのデモStackLayoutの使い方StackLayoutの主な特徴わずか12個... 続きを読む

Photoshopの面倒なガイド引きを楽チンにするエクステンション -GuideGuide | コリス

2012/01/10 424 users GuideGuide コリス エクステンション エレメント

ウェブページのレイアウト用にグリッドを設計したり、エレメントの中心をだしたり、余白を確保するなど、Photoshopのガイド引きを楽チンにするエクステンションを紹介します。 この機能はデフォルトで実装してほしいですね。 GuideGuideの対応バージョン GuideGuideのインストール GuideGuideの使い方 GuideGuideの対応バージョン Photoshop Photoshop... 続きを読む

最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ | コリス

2014/04/10 418 users コリス ウェブデザイン psd エレメント ウェブページ

ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！ BrandaLoka - Creative Onepage PSD Template 斜めのグリッドを使い、ダイアモンド状のエレメントを使った美しいレイアウト。 Free P... 続きを読む