スポンサーサイト

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

私がウェブサイト作成時にお世話になっているサイトをご紹介

こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。

web-tool00.png

有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。

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

web-tool01.png

まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。

このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。

他にはこんなサイトをよく見ます。

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

web-tool01.png

プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。

一応Dreamweaverも持っていますが、テンプレート機能以外はほとんど使っていません。宝の持ち腐れです。

HTMLやCSSを書いていて、ちょっと確認したいときなどにこのサイトにお世話になります。とても分かりやすいです。

WEB色見本 原色大辞典 - HTML Color Names

web-tool01.png

その名のとおり様々な色が掲載されています。色に関する知識はあまりないので、ここで無難な色を探して使っています。

カラーピッカーもかなり便利です。6桁のカラーコードからRGBカラーに変換するときによく使います。

0to255

web-tool01.png

色を指定すると、その色より明るい色と暗い色がグラデーションで表示されます。

統一感のある色使いにしたいときに重宝します。

マウスを乗せたときにちょっと色を変えるときなどにこれを使えば自然な色の変化になります。

Subtle Patterns | Free textures for your next web project

web-tool01.png

テクスチャ画像の素材サイトです。比較的最近できたサイトですが、いい感じの素材がたくさんそろっています。

背景にこのようなテクスチャ画像を使うと、結構印象が違ってきますね。

掲載数もどんどん増えていますので今後にも期待です。

背景画像を作るときには以下のサイトもよく使っています。

写真素材 足成【フリーフォト、無料写真素材サイト】

web-tool01.png

かなり有名なサイトですね。風景や街並みから小物や人物まで様々なジャンルの写真素材が掲載されています。

「煩わしいクレジットやリンクの表記、ユーザー登録は一切不要」ということで、かなり使い勝手が良いです。

掲載数もかなり多く、2012年05月17日に6万枚を突破したようです。画像があるとサイトの印象はグッとよくなりますね。

海外のサイトでしたらここらへんを見ています。

CSS3 Playground by Mike Plate

web-tool01.png

CSS3ジェネレータです。CSS3プロパティの勉強になるジェネレータ16個で紹介したジェネレータの1つです

グラデーションを作るときに便利なので使ってます。逆に他の機能は全然使っていないです。

あとここもたまに使います。

Compress javascript and css. Amazing code compression. Quick,easy and free!

web-tool01.png

コードの圧縮や外部ファイル化とページの読み込み速度についてで紹介しましたが、実際よく使っています。

夜間サーバーが込み合ってしまい、これを試したところかなりましになりました。いいサーバーを借りればいいのでしょうけど、個人の趣味レベルであまりお金もかけられないので。

圧縮したCSSはこちらできれいになります。

PageSpeed Insights ― Google Developers

web-tool08.png

前にも紹介しましたが、大事なところですのでまたまた紹介します。

サイトのURLを入力すると、高速化へのヒントをたくさん教えてくれます。外部サービスを使っていると対応できない場合もありますが、重要なことですのでぜひチェックしてみてください。

ちなみに速さの測定なんかでは次のサイトをよく使っています。


ということで個人的によくお世話になっているサイトを紹介しました。もっといいのがあるよって方はぜひ教えてください!

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
http://kage-design.com/
このサイトなんかはお世話になってます。
【2012/06/15 20:17】 | まさお #4B33lOYw | [edit]
まさおさん

コメントありがとうございます。
このサイトには私もたまにお世話になっています。

国産のベクター素材集ってあまりないでの
ありがたいです。
【2012/06/18 07:48】 | 管理人 #E2ywrYdA | [edit]
ウィジェットみたいのが、真ん中に表示されつづけて、
消せなくて、全然記事が読めません。(ie8)
【2012/06/20 10:01】 | おち #SFo5/nok | [edit]
おちさん

ご指摘ありがとうございます。
まったく気付いていませんでした。。
恥ずかしい限りです。

先日コメント欄を設置したときに
間違えてしまっていたようです。

本当にありがとうございました!
【2012/06/21 17:36】 | 管理人 #E2ywrYdA | [edit]









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

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