スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

私がよく使っているウェブサイト作成に役立つサイトやツールのまとめ【2014年8月】

こういの記事を定期的に書いていますが、以前のものは古くなっているので書いてみます。ウェブサイト、ブックマークレット、拡張機能(Chrome)から本当によく使っているものを無理やり数を増やすことなく厳選して紹介します。

webtool-bookmarklet-matome.png

実際にウェブサイトを作成する時にお世話になるであろう順番で紹介します。ウェブサイト、ブックマークレット、拡張機能(Chrome)ごとで分けていませんのでご注意ください。

I/O 3000 | Webデザインギャラリー

website-tool-bookmarklet1.png 【ウェブサイト】

ギャラリーサイトって同じサイトが紹介されていることも多いので、あまり色々を見ません。最近はこちらをよく見ます。更新頻度も高く、カテゴリやタグ分けも使いやすくなっています。

とはいうものの、もっと色々見たいというときもあるので、そんなときは以下のサイトもよくみます。どれもきれいで見やすいサイトです。やっぱり無限スクロールがいいですね。

【HTMLタグの簡単検索】TAG index - ホームページ作成情報

website-tool-bookmarklet.png 【ウェブサイト】

かなり昔からお世話になっています。HTMLやCSSの基本的な部分で気になるところがあるとここで調べます。有名ですので知っている方も多いと思います。CSS3は以下のサイトで確認することが多いです。

Can I use... Support tables for HTML5, CSS3, etc

website-tool-bookmarklet3.png 【ウェブサイト】

CSSやHTML5などのブラウザごとの対応状況が分かります。英語のサイトですが特に問題ないと思います。前後のバージョンまで幅広く確認できますのでかなり便利です。

サクッと確認したい場合はこちらも便利です。

Explore | Most Popular - Adobe Kuler

website-tool-bookmarklet7.png 【ウェブサイト】

Adobeが提供しているカラーパレット投稿サイトです。日本語もありますが、数が少ないので英語のものをよく見ます。

ColorZilla

addon-1.png 【Chrome 拡張機能】

マウスを乗せた場所の色を教えてくれます。この拡張機能の便利なところは画像であっても色を確認してくれるところです。

ワンクリックでカラーコード(初期設定は#336699のようなカラーコードですが、#なし、rga、hslでも取得可能です)をコピーすることもできるので使い勝手も良いです。

0to255

website-tool-bookmarklet4.png 【ウェブサイト】

このブログで数え切れないくらい紹介しています。色を指定すると#fffから#000までのグラデーションを32段階で表示してくれます。

マウスを乗せたときの色をちょっと濃くしたい(薄くしたい)ときや統一感のあるメニューを作りたい場合に便利です。以下の記事のサンプルなんかは0to255を使って色を決めています。

web計。

website-tool-bookmarklet6.png 【ウェブサイト】

黄金比や白銀比をさくっと計算してくれます。画像のサイズを決めるときに使います。実際守れないときも多いですが。。

関係ないですが、こういうシンプルだけど何度も訪問されるサイトって運営する側からすると理想的な気がします。

TinyPNG – Compress PNG images while preserving transparency

website-tool-bookmarklet5.png

png形式の画像を圧縮してくれます。このブログで使う画像には使用していないですが、画面いっぱいになるような大きな画像を使うときには利用します。シンプルで使いやすいです。

Create Link

addon-1.png 【Chrome 拡張機能】

見ているサイトへのリンクを作成してくれます。地味ですがかなり重宝しています。作成されるリンクタグはカスタマイズできます。

<a href="%url%" target="_blank">%text%</a>

このようにするとリンク先を別枠で開くようになります。

Viewport Resizer

bookmarklet06.png 【ブックマークレット】

レスポンシブなサイトの表示確認に便利なブックマークレットです。スマホやタブレットなど様々なデバイスでの表示確認に便利です。表示確認する方法はウェブサービスや他のブックマークレットなどもありますが個人的にはこれがお勧めです。

Design

bookmarklet03.png 【ブックマークレット】

サイト上にグリッドを表示するブックマークレットです。メジャーを表示できたり、サイズを測れたりもできます。よく似たものは他にもありますが、横幅やカラム数などきめ細かに指定できますので、グリッドデザインの確認に便利です。

CSSViewer

addon-1.png 【Chrome 拡張機能】

マウスを乗せた場所のスタイルの状況を知ることができます。余白を調整したいときに使います。調整したい余白がどの要素にあたるのかがすぐに分かります。

次に紹介するものはさらにスタイルの変更もできるわけですが、こちらの方が見やすいのでちょっと確認したいというときはこちらを使います。

まとめ

というわけで、私が普段お世話になっているウェブサイト、ブックマークレット、Chrome拡張機能を紹介しました。

数にこだわらず厳選しましたので、本当にどれもにおすすめです。知らないものがあればぜひお試しください。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。