私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。
有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。
Webデザインギャラリー | I/O 3000
まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。
このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。
他にはこんなサイトをよく見ます。
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。
一応Dreamweaverも持っていますが、テンプレート機能以外はほとんど使っていません。宝の持ち腐れです。
HTMLやCSSを書いていて、ちょっと確認したいときなどにこのサイトにお世話になります。とても分かりやすいです。
WEB色見本 原色大辞典 - HTML Color Names
その名のとおり様々な色が掲載されています。色に関する知識はあまりないので、ここで無難な色を探して使っています。
カラーピッカーもかなり便利です。6桁のカラーコードからRGBカラーに変換するときによく使います。
0to255
色を指定すると、その色より明るい色と暗い色がグラデーションで表示されます。
統一感のある色使いにしたいときに重宝します。
マウスを乗せたときにちょっと色を変えるときなどにこれを使えば自然な色の変化になります。
Subtle Patterns | Free textures for your next web project
テクスチャ画像の素材サイトです。比較的最近できたサイトですが、いい感じの素材がたくさんそろっています。
背景にこのようなテクスチャ画像を使うと、結構印象が違ってきますね。
掲載数もどんどん増えていますので今後にも期待です。
背景画像を作るときには以下のサイトもよく使っています。
- BgPatterns ― Background Patterns Maker
- 10,000s Cool FREE Seamless Patterns for Blogger and Twitter Backgrounds, Blog and Website Wallpapers
写真素材 足成【フリーフォト、無料写真素材サイト】
かなり有名なサイトですね。風景や街並みから小物や人物まで様々なジャンルの写真素材が掲載されています。
「煩わしいクレジットやリンクの表記、ユーザー登録は一切不要」ということで、かなり使い勝手が良いです。
掲載数もかなり多く、2012年05月17日に6万枚を突破したようです。画像があるとサイトの印象はグッとよくなりますね。
海外のサイトでしたらここらへんを見ています。
CSS3 Playground by Mike Plate
CSS3ジェネレータです。CSS3プロパティの勉強になるジェネレータ16個で紹介したジェネレータの1つです
グラデーションを作るときに便利なので使ってます。逆に他の機能は全然使っていないです。
あとここもたまに使います。
Compress javascript and css. Amazing code compression. Quick,easy and free!
コードの圧縮や外部ファイル化とページの読み込み速度についてで紹介しましたが、実際よく使っています。
夜間サーバーが込み合ってしまい、これを試したところかなりましになりました。いいサーバーを借りればいいのでしょうけど、個人の趣味レベルであまりお金もかけられないので。
圧縮したCSSはこちらできれいになります。
PageSpeed Insights ― Google Developers
前にも紹介しましたが、大事なところですのでまたまた紹介します。
サイトのURLを入力すると、高速化へのヒントをたくさん教えてくれます。外部サービスを使っていると対応できない場合もありますが、重要なことですのでぜひチェックしてみてください。
ちなみに速さの測定なんかでは次のサイトをよく使っています。
ということで個人的によくお世話になっているサイトを紹介しました。もっといいのがあるよって方はぜひ教えてください！
@webpark2さんのツイート
このサイトなんかはお世話になってます。