成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Post Flat Design - What Happens Next?
There’s been growing unrest about the future of interaction design trends. In the past week alone, I’ve read three separate discussions about the so-called “end of flat design.” This kind of talk is awesome because some of the best aesthetic and interaction design work is done at the dawn of a brand new trend. It gets designers thinking and inspires that special kind of creativity that our industr
使いにくい・成果がでない「残念なスマホサイト」は、もう撲滅しよう！
いま「スマホファースト」との言葉も広まり始めたように、誰もが普通にスマートフォンを持ち歩く時代が訪れ、企業がスマートフォン対応をより重視するようになってきた。だが、とりえあえずスマホ対応しました、といったレベルに留まっていたり、そうでないにしろ、本当に現在の「スマホサイト」が、本来のビジネス上の狙いが果たせるサイトになっているか、自信は持てるだろうか？ どうしても成果があがらないならば、やはりサイトそのものの作りが悪いことは疑わなくてはならない。フィーチャーフォン時代からサイトを運営していた企業にも、初めてモバイル端末向けのサイトを構築した企業にも、スマートフォン向けにサイトを作る場合、知らなければ気づきにくい、かつ陥りやすい独特の「スマホサイトの罠」に気をつけなくてはならない。 そこで本稿は、スマートフォンサイトの構築にノウハウを持ち、コンサルティングも手がけるドコモ・ドットコムに聞いた
スマホ・タブレット・PCのスクリーンサイズ・ppiなどが一目で確認可能な「Screensiz.es」
by Luke Wroblewski 市場に出ているスマートフォン・タブレット・PCのうち割とメジャーのスクリーンサイズやppiなどの一覧が確認できるようになっているのが「Screensiz.es」です。 Screensiz.es http://screensiz.es/ 表示される項目は「機種」「OS」「フィジカルサイズ（インチ）」「フィジカルサイズ（cm）」「幅（ピクセル）」「高さ（ピクセル）」「ppi」「ピクセル密度」「人気」の9項目。 対象となっているデバイスはスマートフォン・タブレット・PCモニターの3種類。 ◆スマートフォン スマートフォンはiPhone 4/4Sから2010年に発売されたSamsung Nexus Sまで全20機種。 ◆タブレット タブレットはApple 2からAcer Picassoまでの20機種。 ◆PCモニター PCはMacBook Proの13インチや
Web Components普及の夜明け！？Polymerを試してみた。 | OpenWeb
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
レスポンシブデザインの高速プロトタイピングツールAdobe Edge Reflow | DECONCEPTER
レスポンシブウェブデザインのワークフローを改善するツール 昨年Adobeが発表したEdge Tools & Servicesの中で唯一リリースされずにいたAdobe Edge Reflowが2月15日に発表された。 先行して公開されているEdge Web Fonts や Edge Inspectなどと連携しながら高速にレスポンシブデザインのモックアップ作成が可能となる。 Adobe Developers ConnectionにEdge Reflowの概要と今後の可能性について書かせていただきましたのでご覧ください。 レスポンシブWebデザイン制作におけるEdge Reflowの可能性 | ADC – Adobe Developer Connection Edge Reflowのメリット Edge Inspecetを活用してPCサイトとモバイルサイトのモックが並行して作成できるのは大きい。又
SassとCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
Webデザイナー・コーダー必見の神アプリ！MacでWindows IEなどのブラウザチェックが出来る「Sauce」が便利すぎてヤバイ
Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。 via: これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce | コリス Winを起動させるためのBoot CampもParallels Desktopも必要ない、と言うのがとても大きいですね:) アプリを起動したらアカウント登録画面を経てこの画面。アカウントは有料・無料があり、閲覧できるブラウザに制限などがかかります。 矢印の部分、Newボタンをクリック。 あとは見たいページのUR
ヤバイくらい簡単にプロフェッショナルなサイトが作れるStriking.lyが凄い | バンクーバーのうぇぶ屋
追記：【割引コードGET！】ヤバイくらい簡単にプロフェッショナルなサイトが作れるStrikingly.comが割引コードくれた！ | バンクーバーのうぇぶ屋 上記追記ですが、このStrikingly.comのデイビットさんと話をして、クーポンコード貰えたんでご紹介記事が上になりますー！ 以下より本記事本文 いやー、今日まで散々”簡単にサイトが作れるん時代っすよねー”的な事を色々書いてきましたが、もしかしたらこれは今までご紹介したどんな簡単WEBサイト作成サービスよりも凄いかもしれません。 超シンプル、超簡単、超楽、超綺麗。 無料版でもそのクオリティの高さにはちょっとビックリですが、有料版にすればA/Bテストにカスタムドメインまで全然オッケーとか色々ヤバイ高機能。 例えば、こんなサイト1時間も掛からず作れちゃう。簡単だけどレスポンシブ可もされてるし。使い方も説明が必要か迷うレベルで簡単。 S
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」:phpspot開発日誌
IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 2012年10月09日- ResponsiveIframes.js IFrame内もレスポンシブ対応にするjQueryプラグイン「ResponsiveIframes.js」 ページ内や画像をレスポンシブ対応にするものはありますが、ページ内に貼りつけたiframeでさえもブラウザサイズに応じて伸縮させることができます。 単にiframeのサイズを変えるだけじゃなくてiframeの中身のサイズも変えなくてはいけないため、結構大変そうですがライブラリで簡単に対応できそうですね 関連エントリ ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 Gmailスタイルのemoticonを実装できるjQueryプラグイン クリックで水滴を落としたようにアニメーションさ
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
新着記事
ゼロから始めるレスポンシブWebデザイン入門
WordPress3.4に最適化された、レスポンシブデザイン対応のWordPressのテーマファイル -The Boiler
Photoshop VIP ☞ iPhone表示にも対応、レスポンシブWebデザインの無料WordPressテーマ15選(プラグイン付)
商用利用も無料、洗練されたデザインのウェブ用UIエレメントのPSD素材 -Design Kindle | コリス