便利なサイト
FLATICON | アイコンのダウンロード
アイコン検索はこのサイトが便利です。検索する時に、キーワード候補とそこに含まれるアイコン数が表示されるのがとても親切です。検索結果では、一つひとつのアイコンが表示されので見やすくなっています。ダウンロードファイルの形式は PNG と SVG となります。
Vecteezy | イラストのダウンロード
Vector Graphics が無料でダウンローできます。Free版と契約が必要な Pro版がありますが、Free版でも十分な数のイラストがあります。
Design Zone | アイコンのダウンロード
イラストや背景もありますが、アイコンが多いサイトです。会員登録は必要なく、キーワードで検索可能です。ダウンロードファイルには、PNG だけでなく EPS、AI も含まれていますので、変更が可能です。
unDraw | イラストのダウンロード
イラストの無料ダウンロードができる海外サイトです。会員登録は必要なく、SVG および PNG でダウンロードできます。ダウンロード時にキーカラーを指定することで、配色を変更できます。
Unsplash | 写真のダウンロード
海外サイトですが、無料素材サイトとしては掲載数が他を圧倒しています。また、日本の素材サイトでは見られないようなクオリティの高さがあります。とにかく手っ取り早く無料で手に入れる必要があれば、まずこのサイトをのぞいてみることです。
Pexels | 写真のダウンロード
こちらも海外サイトですが、プロが撮影したようなクオリティの高い写真がすべて無料で手に入ります。サイズを指定してダウンロードでき、幅2000px以上の大きなサイズの写真が欲しい時に重宝します。
Adobe Stock
Adobe が運営しているサイトで、掲載数は圧倒的です。ただし有料プランしかありません。Photoshop などのアプリと連携しているのがメリットとしてあげられます。Fotolia という有名な素材サイトがあるのですが、Adobe Stock に統合されました。
Printout Factory
RICOHが運営している、無料で使えるテンプレート&素材集を提供しているサイトです。
写真はなく、クリップアートやイラストのみとなります。エクセルやワード形式の、ビジネスで使えるテンプレートもあります。会員登録は必要なく、誰でも直接ダウンロードできます。
写真素材 足成
無料の写真素材を提供しているサイトでは、かなり有名です。
人物モデルの無料写真も提供しているのですが、このサイトのモデルはいたるところのWebサイトで使われているので、かぶってしまうのは仕方ありません。
写真AC
ロイヤリティーフリーで商用にも使える写真素材を提供しており、この手のサイトではかなり豊富にストックしています。ダウンロードするには会員登録が必要です。有料の会員となるとダウンロードし放題となります。なお、グループサイトには、イラストACやシルエットACもあります。
color-sample.com
色見本を、色名や16進コードとともに掲載しています。
キーカラーが決まったら、その色に対してさまざまな配色候補や配色見本を示しており、非常に参考になります。
Google Design
oogle のデザインに関するページへの入口です。Newsページで定期的に動向をチェックしておくとよいでしょう。
Material Design や Google Fonts のページへはここから移動できます。
Color Scheme Designer
トライアドやテトラードなど色相環を分割し、自分で配色パターンを作成するなら、このツールが非常に使いやすくておすすめです。直感的な操作で細かい調整をすることができます。
作成した配色でサンプルサイトを表示してくれる機能は、クライントと配色によるイメージの共有をするのに役立つでしょう。
また、その他にも便利な機能が備わっており、作成した配色パターンをさまざまな形式でエクスポートできたり、色覚異常やグレースケールの表示シミュレーションもしてくれます。
RESPONSIVE WEB DESIGN JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
レスポンシブWebデザインで制作するなら、デザイン面で非常に参考になります。
960 GRID SYSTEM
グリッドシステムのサイトでは最も有名。
参考サイト一覧では、そのサイトのグリッドを表示することができます。
CSSやテンプレートもすべて無料でダウンロードし利用できます。
Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/
CSS3 のボタンコードを作成できます。Presets でサンプルを選び、細かい調整を行なってボタンを作成します。特にグラデーションは Photoshop のような操作で、かなり細かく設定できます。
似顔絵イラストメーカー
http://illustmaker.abi-station.com/
ブログのプロフィールページなどで使える似顔絵を、無料で作成できるサイトです。
目、鼻、服装、アクセサリーなど、外見のパーツを組み合わせて似顔絵を作成していきます。
ao-system ファビコン作成
https://ao-system.net/favicon/
ファビコンを作るなら、こちらのサイトが便利です。16x16,32x32,48x48と、複数画像を指定してマルチアイコンを作ることができます。読み込ませる画像のファイルタイプは、JPG,PNG,GIFが指定可能です。また、透過マルチアイコンも作るページもあります。
CSS Button Generator
https://www.css3buttongenerator.com/
CSSのボタン作成コードを生成してくれるサイトはたくさんありますが、このサイトは操作が直観的でわかりやすくおすすめです。もっと細かく色んな設定が、グラフィカルにできるサイトもありますが、実際の制作ではこのくらいで十分です。
LUFTTOOLS | パスワードを生成する
http://www.luft.co.jp/cgi/randam.php
オンラインでパスワードを一括して生成することができるサイトです。文字数は2~40文字、個数は1,000個まで生成できます。
パスワードに使用する文字の種類(数字、英字、記号)も指定でき、生成したパスワードはテキストファイルでダウンロードできます。
WayBack Machine | 過去のWebページを閲覧する
世界中の Webサイトをアーカイブとして保存しているサイトです。
現在は公開されていない過去のページを閲覧することができます。
XAMPPダウンロードサイト
https://www.apachefriends.org/index.html
このサイトから、XAMPPをダウンロードできます。
Google Hosted Libraries
https://developers.google.com/speed/libraries/
jQueryなどのオープンソースJavaScriptライブラリをホスティングできる、Googleのサービスサイトです。このサービスを利用すれば、自分のサイト上にファイルを置く必要はありません。
Lightbox2
https://lokeshdhakar.com/projects/lightbox2/
同一画面上に画像を上乗せ表示するためのスクリプト「Lightbox」を配布しているサイトです。
jQuery
jQueryの本家サイトで、jQuery本体やプラグインをダウンロードすることができます。
また、APIについて調べる時も、日本語サイトでは足りない部分もありますので、確かな情報はこのサイトで調べます。
WordPress.org 日本語サイト
WordPressの最新版はここからダウンロードできます。
テーマやプラグインを、何らかの原因で管理画面からインストールできない場合も、このサイトからダウンロードできます。
WordPress コーディングスタンダード
https://make.wordpress.org/core/handbook/best-practices/coding-standards/
WordPressチームが出しているコーディングスタンダードがあります。CSS, HTML, JavaScript, PHP について規定していますので、WordPressサイトを制作する際は参考にするとよいでしょう。
Can I use | 各種ブラウザの規格対応状況を調べる
CSS3 や HTML5 の各仕様が、代表的なブラウザのどのバージョンで対応しているか、一覧で表示してくれます。
日本PHPユーザ会
PHPに関する各種の情報が掲載されています。
このサイトからPHP公式マニュアルにアクセスしたり、PHPのダウンロードを行うことができます。
とほほのWWW入門
http://www.tohoho-web.com/www.htm
HTMLやCSSの文法をちょっと調べたい時に、リファレンスサイトとしてよくお世話になっています。このサイトは他のサイトと違って、広告が一切表示されないため非常に見やすくなっており、それが何よりのお気に入りです。
WordPress Codex 日本語版
http://wpdocs.osdn.jp/Main_Page
日本語で書かれたWordPressの公式オンラインマニュアル。
Wikiで制作されているサイトで、コンテンツは誰でも編集できます。ただ、訳されていない部分も多数存在するので、本家の英語版codexを見ないと載っていない情報もあります。
WordPress Codex
WordPressの公式オンラインマニュアル。
英語のサイトですが、WordPressに関する情報を調べるなら最も確実。
サーバ監視/ネットワーク監視サービス | アクセス情報を確認する
http://www.cman.jp/network/support/go_access.cgi
このページにアクセスすると、アクセスした自分の機器のIPアドレスやホスト名、また発信している各種情報(ユーザーエージェント、画面サイズなど)を確認できます。
W3C Link Checker
http://validator.w3.org/checklink
Webサイト全体のリンクとアンカーをチェックしてくれます。
チェックする際は、URLを入力します。
W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/
CSSをチェックしてくれます。
チェックする際は、URIを入力するか、ファイルをアップロードします。
W3C Markup Validation Service
HTML/XHTML文書をチェックしてくれます。
チェックする際は、URIを入力するか、ファイルをアップロードします。
CSSはこのサイトではチェックしてくれません。
Unicorn - W3C 統合検証サービス
http://validator.w3.org/unicorn/
HTML/XHTML文書をチェックしてくれる日本語サイトです。
このサイトではCSSもチェックしてくれます。
チェックする際は、URIを入力するか、ファイルをアップロードします。
HTML 5 Outliner
https://gsnedders.html5.org/outliner/
HTML5のアウトラインをチェックしてくれるサイトです。
チェックする際は、URLを入力するか、ファイルをアップロードします。