Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
レスポンシブ時代のビューポートチェックWEBサービス「Responsive.is」
現在では様々な端末がリリースされ、その全てで最適な表示をさせるためにレスポンシブなWEBサイトが求められていますが、端末ごとのチェックはとても面倒なもの。今日紹介するレスポンシブ時代のビューポートチェックWEBサービス「Responsive.is」は、WEB上で様々なビューポートをシュミレートしてくれるものとなっています。 PC、タブレット縦、タブレット横、スマートフォン縦、スマートフォン横と様々なビューポートが確認でき、全体のどの部分を表示しているのかも分かるようになっています。下記は様々なビューポートで同一のサイトを表示したものとなります。 詳しくは以下 WEB上で完結し、URLを入力するだけで利用できるのは良いですね。最終的には実機で行わないとはいけないのですが、構築途中や様々なサイトの対策の検証用には良いWEBサービスだと思います。 Responsive.is – Display
簡易的なワイヤーフレームを手軽に作成、URLも発行してくれるWebサービス・Wireframe.cc
ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。 こんな感じ。ドラッグで範囲を決めてエレメントを選定するだけ。メモも残せます。 背面、前面設定なども出来ます。 機能はシンプルながら、最低限欲しい物は揃っていて、操作性も良い感じです。URLさえ分かれば誰でも編集できてしまうので、場所の離れた方とのレイアウトの打ち合わせ等、簡易的な用途として使うのもいいかもしれないです。 Wireframe.cc
ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js
サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile();本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js
[CSS]柔軟性のあるグリッドをシンプルで簡単に実装するスタイルシートのチュートリアル
すべてのモダンブラウザとIE8+に対応したグリッドを複雑なフレームワークを使うのではなく、シンプルで簡単に実装するスタイルシートのチュートリアルを紹介します。 Don't Overthink It Grids 下記は各ポイントを意訳したものです。 ラッパー カラム フロートのクリア ガター（溝） 外側のガター（溝） カラムの追加 対応ブラウザ ラッパー まずは、グリッドを包むラッパーです。 グリッド用のラッパーはセマンティック的には特に意味がなく、ただのラッパー（包み紙）です。使用する要素はdivがよいです。 HTML <div class="grid"> <!-- 100% wide --> </div> 表示例 ラッパーとなるdiv要素はブロックレベルのエレメントで、この中にグリッドを包み込みます。 カラム カラムはよく見かけるメイン コンテンツとサイドバーの2つです。 メイン コンテ
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
画像レイアウト関連で便利なjQueryプラグイン等まとめ:phpspot開発日誌
ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ
Facebookページの制作に役立つ、タイムラインとニュースフィードの新レイアウトに対応したPSD素材
Facebookのタイムラインとニュースフィードをピクセル単位で忠実に再現したテンプレートのPSD素材を紹介します。 PSDは制作に利用できるようすべて編集可能な状態です。
ウェブサイト設計の時に役立つ７つのテクニック／【その6】目線の操作 (ユーザビリティ実践メモ)
今回のテーマは「目線の操作」です。ユーザの視線を集める要素と遠ざける要素をうまく使い分けることで、意図通りにユーザにメッセージを伝達するためのコツをご紹介します。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 ←今回のテーマ 他サイトでの慣習 「目線の操作」を構成する3つの要素 視線の開始位置 視線を集める要素 視線を遠ざける要素 1. 視線の開始位置 例えば、以下は弊社のHPですが、このサイトを見るときどこから見ますか？「徹底した顧客心理分析により・・・」というブランドパネルか、その下の「コンサルティング事例・実績」ではないでしょうか？ 弊社HPの例 ビービットのサイトには、「ビービットは何をやっているんだろう？どのような会社なんだろう？」ということを漠然と思いながら来訪する方が多いため、その疑問に直接答えられるようメインメッセージや実績エリアに目
ウェブサイト設計の時に役立つ7つのテクニック／【その2】関連性 (ユーザビリティ実践メモ)
実際にウェブサイトを作っていくときに役立つ7つのテクニック、第2回のテーマは「関連性」です。関連性の強い情報の見せ方について、実例や犯しやすいミスを交えて解説していきます。 ファーストビュー 関連性 ←今回のテーマ 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第2回は「関連性」についてです。ユーザに2つの要素の関連性を認識してもらうには、1つの「まとまり」に見えることが必要です。人がどのようにまとまりを感じるかについては、ゲシュタルト心理学などの分野で議論されてきました。その中で、ウェブサイトを作る上で重要なのは、以下の2点です。 近接 閉合 1.近接 近接とは、簡単に言えば近いということです。例として、以下の図を見てください。 図1 上の図を見たときに、下の図のように右上の2つ、左下の1つをまとまりとして感じたのではないでしょうか。このように、人
Media QueryでiPhoneやiPadにも自動でレイアウトを調整するHTML5製のWPテーマ・BLASKAN
過去にも何度かご紹介していますが、 Media QueryでiPhoneやiPadを含め た、様々なデバイスにレイアウトを調整 済みのWordPressテーマ・BLASKAN のご紹介。シンプルで良かったので 備忘録です。 同じようにMedia Queryを使ったレスポンシブなWebデザインを構築できるWordPressのテーマは過去にまとめましたので合わせてどうぞ。 css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろスマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそう新たに仲間入りのテーマです。
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
jQuery UI.Layout Plug-in
OVERVIEW This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI Layout plug-in can create any UI look you want - from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc. Combined it with other jQuery UI widgets to create a sophisticated application. There are no limitations
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressの可能性がさらに広がる！Webデザインのトレンドを効果的に取り入れる便利なプラグインのまとめ
Online Mockup, Wireframe & UI Prototyping Tool
画面サイズごとの表示を確認出来る・「Screenqueri.es」
レスポンシブWebデザインのレイアウトチェックツール・「The Responsinator」
