Essential tools for every web designer
Every web designer requires the right tools to do their job. To create well crafted original designs you certainly need to be inspired to do so. Getting to that point is sometimes the hardest challenge in the field of web design. Luckily enough for us and our fellow design community there are tools available to assist in completing the job quicker and more efficiently. Below, I have outlined a lis
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
[ HUE / 360 ] The Color Scheme Application
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
知らない人は遅れてる？新Zen-Coding Emmet
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
How to Create a Website Using Only iPad
2013年11月28日 Webサイト制作, 便利ツール 病院の待合室で何時間も待たされ、「暇だしWebサイトでも作ろっかなー」なんて思った事はありませんか？きっとあまりないと思いますが、今年にはいっていろいろあった私はそんな機会がたくさんあったので、いくつかのiPadアプリを使って作ってみました。作ったHTMLテンプレートは無料配布しています！そうです、アレ、iPadで作ったものだったのです。ふふ。 ↑私が10年以上利用している会計ソフト！ あると便利なスタイラスペン スタイラスペンはiPadなどのタブレットで使えるペンです。iPadを使ってお絵かきしたい人は持っているとなにかと便利。カナダのボクシングデーで$5位になっていたのでノリで買ったのがこのコ。ちょっとメーカーは覚えていないのですが、よくある無難なタイプの物ですね。書き心地は悪くないのですが、ペン先が太いので、細かい字や絵は書きづ
Webサイトのワイヤーフレームを作る時に参考になる10のURL « nia.note
By bschmove WebサイトやWebサービスを作るときにさけては通れないのが、ワイヤーフレームの作成。さまざまなツールやノウハウがネット上に存在しますが、その中から私が良いと思った10のURLを紹介します。 有名なものからあまり見ないものまで、サイトそのものやブログのエントリなどを雑多に紹介しています。気になるものがあればぜひリンク先を確認してみてください。 資料：Wireframe Showcase Web サイトのワイヤーフレームと完成したものを比較できるサービスです。更新頻度は多くないようですが、月に２回程度、新しいサイトの情報が追加されています。 ワイヤーフレームといっても、手書きのものもあればイメージデータのものもあります。また、完成したサイトにどれくらい近いか、という点においても、ばらつきがあることが分かります。 資料：I ♥ wireframes ワイヤーフレームのイ
URL指定可能なレスポンシブWebデザイン対応確認ツール・responsive.isと似たようなやつ何個か
ちょっと便利かも、と思ったのでメモ。 URL指定が出来るレスポンシブWebデザイン 対応確認ツールです。この手のツール はかなり増えているので今更感も否め 無いんですが、URL指定で直接見れるの で、人に見せるのには結構いいかも知 れないです。 というわけで、レスポンシブWebデザインの対応確認ツールです。他にいろいろ。先に紹介します。 ResponsivepxResponsive Design TestingSimple Media Queries TesterscreenflyResizer使い方の説明は多分不要です。これらは同じ目的で作られてますので使いやすいのを選ぶ感じで。 で、今日はresponsive.isっていうツールと、responsinatorっていうツールの2つをご紹介です。 ちょっとキャプチャだと分かりにくいんですけど・・・最上部にスマフォとかタブレットのアイコンがあ
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
12 Websites Turn Yourself into a Cartoon - Design Treasure | Design Treasure
A cartoon is a form of two-dimensional illustrated visual art.And everybody likes cartoon characters.They make us happy and keep our mind blowing.The word cartoon refers to several very different forms of visual art and illustration.An cartoon character drawn by a artist called a cartoonist.Like cartoon a caricature is a portrait that exaggerates or distorts the essence of a person, animal or obje
ドラッグアンドドロップでPCサイトをスマートフォン対応サイトに 「shutto」
ねとらぼで試してみた。編集画面で右の枠から左の枠へ各要素をドラッグアンドドロップで並べるだけでOK HTMLの知識が無くてもドラッグアンドドロップで簡単に、PCサイトからスマートフォン対応サイトを作成できるサービス「shutto」が11月22日にスタートした。@takeshiyakoさんが公開した。 shuttoでスマートフォンに対応させたいPCサイトのURLを入力すると、編集画面がオープン。右側に表示されているPCサイトからヘッダーやロゴ、テキストといった各要素を、スマートフォンに見立てた左側の枠内へドラッグアンドドロップで並べていく。 そうすると、スマートフォン対応サイトのデモ画面が完成。保存をクリックすると、shuttoを使って変換したページが実際どのように見えるかを確認できる。さらにshuttoで生成したJavascriptを自分のサイトに埋め込めば、URLはそのままに、スマートフ
アドビ、ウェブデザインツール「Muse」を公開--コーディング不要の新アプリ
Adobe Systemsは米国時間8月14日、手動コーディングを学習したくないユーザーに向けたウェブデザインツールへの取り組みを拡大させた。 同社は「Muse」というコードネームの新しいアプリケーションを発表した。Adobeの「AIR」プラットフォームを基に構築されたMuseを利用すれば、ユーザーは同社の「InDesign」や「Illustrator」などのソフトウェアでサイトのモックアップを作るのと同じ感覚で、ウェブサイトを作成し公開できる。これまでは、モックアップを実際のサイトに仕上げるにあたってデザイナーが自らのデザインをコーディング担当の開発者に渡す必要があったが、Adobeはそうしたデザイナーの作業プロセスがMuseによって簡素化されるとしている。 Muse（Adobeによるとベータ段階を終えたときに新しい名称が付けられる予定という）を利用すれば、ユーザーは慣れ親しんだAdob
グーグル、「Page Speed Service」を発表--顧客ウェブサイトを高速化およびホスティング
Googleがウェブの高速化を掲げて再び動き出した。同社は米国時間7月28日、顧客のウェブページを書き換え、そして、ホストすることで、ブラウザでの読み込みが速くなるようにする新サービスを発表した。 しかし、今回のサービスは無償ではない。 同社がこの分野でこれまでに提供したサービスは無償だった。しかしGoogleは今回、この新しい「Page Speed Service」を有料で提供する予定である（同サービスの一般提供開始時期は未定）。Googleは以前、ウェブが高速になれば、ウェブ上での活動が増え、最終的にそれがGoogleの広告収益増加につながると主張していた。しかし、Page Speed Serviceについては、サービスそのものに対して課金するという従来型の方法で収益増加を図るつもりである。 同社のエンジニアリングマネージャーを務めるRam Ramani氏は28日のブログ投稿で「現時点
WEBディレクションで使うＩＡツール | ユージック
WEBディレクションで使うＩＡツール 2007年10月15日 WEBディレクションで使うマーケティング戦略や情報整理でのフェーズにあたるＩＡ(インフォメーションアーキテクツ)で僕が使うツールをご紹介します。 WEB制作でのマーケティング戦略や情報整理といっても、そんなに特別なものは使用しておらず、僕は従来からのマーケティングツールを使用しています。 SWOT分析 これは企業の内部的要因である強み、弱みと企業の周囲を取り巻く外部的要因である機会、脅威などをまとめるマーケティングツールです。僕が使用しているのはこのSWOT分析の拡張版で、各変数のリストからそれぞれの戦略を立てる項目を作るものを使用しています。このツールはマクロ的な視点からその企業の現状を把握する際に使えます。 ポジショニング分析 企業が業界や市場においてどのような立ち位置に立っているのか(現状分析)に使えるマーケティングツール
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2012/06/google-pagespeed-insight.html
Twitter bootstrap入門 #twtr_hack
サイトのサムネイル、PDF の生成サービス
あらゆるデバイスでの画面表示確認が簡単に行えるサイト「Screenfly」 | ライフハッカー・ジャパン
layer8.sh
Google Swiffy