なぜ最近ワンカラムが流行っているのか？実験、検証してみた！ | ブログ | 株式会社イー・エージェンシー
最近ワンカラムレイアウトをよく見かけませんか？なんで増えているのでしょうか？その理由を僕なりに考察してみました。 1.バイラルメディアで採用されていることが多い。 バイラルメディアは、1カラム化することでシェア数されやすくするということに趣旨を置いたサイトです。サイト閲覧数よりもFacebookやTwitterでのシェア数がKPIとなっています。そのため１セッション当たりの閲覧PV数よりもシェアされやすいワンカラムを採用しているところが多いです。 2.レスポンシブデザインの普及 レスポンシブデザインの普及によりスマホでは１カラム、PCでは２カラム（サイドバーあり）になっているサイトが増えてきました。繰り返し改善していく上でPCとスマホが同じようにワンカラムレイアウトならばサイトの改善がし易いです。 ワンカラムレイアウトのメリット・デメリット。 メリットについて 1カラム構成の最大のメリット
複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」:phpspot開発日誌
Gridmanager Demos 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」。 次のようにカラムごとにツールを付与して、コンテンツを追加したり消したり、移動できたり、幅を調整したりとかなり高度な事が誰でも簡単にできるUIが実現可能です。 jQueryプラグインの形で誰でも簡単に実現できるところがすごい。複雑なレイアウトのサイトであっても見たまま編集ができるというのはよさそうですね。 ライブプレビューも可能 レスポンシブにも対応 関連エントリ 軽量でシンプルデザインなWYSIWYGエディタ実装ができる「Trumbowyg」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summernote」 軽量でシンプルなHTMLのWYSIWYGエディタ「SCEditor」 オンラインで使えるWYSIWYGなCSS3コードジェネレーター「Enj
Paletta – 選択した色に合わせたカラーリングを自動展開
Webサイトに限らずデザインをする際に大事なのは全体としての調和がとれていることです。それは色合いであったり、オブジェクトの形であったりします。そういった全体のパランスが保たれていることがまず基本でしょう。 最近は多くのHTML5デザインフレームワークがありますので、そういったフレームワークとPalettaを組み合わせてカラーテーマを作ると格好いいサイトに仕上がりそうです。 Palettaの使い方 全て同色系という訳ではなく、黒やグレーも織り交ぜつつ全体としてバランスが保たれるようになっています。とは言え全ての色を使う訳ではなく、この中から3〜4つ程度をピックアップして適用するといい具合のカラーリングになるのではないでしょうか。 PalettaはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Paletta - HS
16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL
ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか？ 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 外注を活用したホームページデザインの業務切り出しフロー 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Google製無料広告制作ツール「Web Designer」とは
グーグル製HTML5アニメーション作成ツールとして注目を集める「Google Web Designer」。本連載では、全4回にわたってGoogle Web Designerについて紹介します。 連載ラインナップ（予定） 第1回：Google Web Designerとは 第2回：Google Web Designerの基本操作 第3回：バナーのチュートリアルで学ぶGoogle Web Designerの使い方 第4回：コンポーネントを使ったインタラクティブバナーの制作 4回の連載で、Google Web Designerのインストールや基本操作を学び、最終的には簡単なアニメーションバナーから、より動きのあるバナーの作成を目指します。 ※本連載は、Windows環境での作業をベースに説明を進めていきます。 Google Web Designerでできること Google Web Design
web・スマートフォンアプリ設計に役立つ ワイヤーフレームUIキット「18 Free UI and Wireframe Kits」
TOP > Design > web・スマートフォンアプリ設計に役立つ ワイヤーフレームUIキット「18 Free UI and Wireframe Kits」 デザイン制作を行う際にはまず、全体の設計を行うためにワイヤーフレームを使って構成を考えることが多いと思いますが、本物のイメージにより近づけるため、また提案としてクライアントに提出するために、より現物に近いものをできれば作っておきたいもの。そんな時に役立つワイヤーフレームUIキット「18 Free UI and Wireframe Kits」を今回は紹介したいと思います。 webやスマートフォンアプリの設計をスムーズに進めることができそうな、制度の高いワイヤーフレームが揃っています。 詳しくは以下 Dribbble – A_better_look.jpg by Chris Bannister 定番のレイアウトのwebサイト制
サンプルで学ぶTumblrテーマの作り方 (1/2)
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、既存のテーマを簡単にカスタマイズする方法を説明しました。今回は、いよいよオリジナルのTumblrテーマを実際に作っていきます。 Tumblrテーマの開発環境を準備しよう WordPressのようなCMSのテーマ制作では、MAMPやVagrantなどでローカル開発環境を構築して作業し、完成後に本番環境にコピーする流れが一般的です。Tumblrの場合は、ブラウザー上でテーマのHTMLを直接編集できるので、今回はHTMLファイルをデザインカスタマイズ画面に貼り付けて、保存とプレビューを繰り返しながら作っていきましょう。
CSS3ベースの新しいhoverエフェクトが実装できる「iHover」:phpspot開発日誌
iHover CSS3ベースの新しいhoverエフェクトが実装できる「iHover」 マウスオーバーした際のホバーエフェクトをCSS3アニメーションを使ってリッチにすることが出来ます。 コードは必要な物を読み込んだ後、マークアップにclass属性でアニメーションタイプを指定すればOKみたい ちょっと派手目で、乱用は控えたいところですが、お手軽でいいですね。 関連エントリ CSS3のグラデーションがより簡単に使えるようになるjQueryプラグイン「Rainbow.js」 FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」 WEBデザイナ必携のHTML5&CSS3のコードジェネレータ「HTML5 & CSS3 Tools and Tutorials」
フリーのBootstrapテーマが満載「Bootstrap Zero」:phpspot開発日誌
Bootstrap Zero - Free Bootstrap Templates and Themes フリーのBootstrapテーマが満載「Bootstrap Zero」。 フリーで使えるテンプレートが沢山ありますので、叩き台として活用できそうです。 Facebookっぽいテンプレも。 関連エントリ Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」 Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 Bootstrapなalert,confirm,promptが実装できる「Bootbox.js」 Bootstrap3のUIをベクター形式でダウンロードできる「Bootstrap 3 UI Kit」 Bootstrap対応でレスポンシブなWYSIWYGエディタ「Summer
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
色彩センスのいらない配色講座
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
漢字が使えるフリーの和文フォント242種類をまとめてみた。 - buena suerte!
自分用にまとめのまとめみたいな感じです。 同じフォントでも、等幅、プロポーショナル、太さの種類が複数ある等々のものは、どれも同種としてカウントしたつもりです。ただ、漢字部分は同じで、ひらがなカタカナ部分だけ違うとか、英数字部分だけ違うとか、微妙な違いのフォントがあるので、似たようなのがカウントされてたりするかもしれない。 それでも、かなり古いものから、定番もの、最近リリースされたもの、最近更新されたものまで、まともに使えないのもあるけど、単純にリストの数かぞえたら、番外編抜いても242種類もありました。多すぎて整理できてないのはあれですが。 自分なりに注釈付けてますけど、間違いがあるかもしれないんで、（特に商用）利用する前には、必ず規約やライセンス、付属のテキストをよく確認して下さい。また、ライセンス上無保証であるものも多いので、いずれも自己責任での利用をお願いします。 2012/02/1
HTMLデザインを崩さないテンプレートエンジンの作り方
1. RubyKaigi 2010 HTMLデザインを崩さない テンプレートエンジンの作り方 makoto kuwata http://www.kuwata-lab.com/ English ver: http://slidesha.re/a3s2ZZ copyright(c) 2010 kuwata-lab.com all rights reserved. 1 2. はじめに 目的 ✤ テンプレートエンジン利用者に、正しい 知識を理解してもらう ✤ テンプレートエンジン設計者に、あるべ き姿を考えてもらう 動機 ✤ 間違った説明が蔓延しており是正したい ✤ eRubyは決して理想解ではないことを 知ってほしい 対象者 ✤ テンプレートエンジンの利用者と設計者 copyright(c) 2010 kuwata-lab.com all rights reserved. 2 3. お詫び ✤
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
Bootstrapの使い方超入門 (1/4) - ＠IT
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon
いまさら聞けない「Twitter Bootstrap」とは？ (1/2)
スマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。 そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か、ということです。 この連載では、特にスタートアップで注目を浴びているフロントエンドツール「Twitter Bootstrap」について、基本的な使い方から実際のWebアプリ開発での導入方法までを紹介します。まずはTwitter Bootstrapが何なのか、どのような場面で使われているのか、確認しましょう。 Twitter Bootstrapの特徴 Twitter Bootstrapは、米ツイッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Web制作のためのTumblrテーマカスタマイズ入門
