便利なサイト

FLATICON | アイコンのダウンロード

https://www.flaticon.com/

アイコン検索はこのサイトが便利です。検索する時に、キーワード候補とそこに含まれるアイコン数が表示されるのがとても親切です。検索結果では、一つひとつのアイコンが表示されので見やすくなっています。ダウンロードファイルの形式は PNG と SVG となります。

Vecteezy | イラストのダウンロード

https://www.vecteezy.com/

Vector Graphics が無料でダウンローできます。Free版と契約が必要な Pro版がありますが、Free版でも十分な数のイラストがあります。

Design Zone | アイコンのダウンロード

https://deszone.net/

イラストや背景もありますが、アイコンが多いサイトです。会員登録は必要なく、キーワードで検索可能です。ダウンロードファイルには、PNG だけでなく EPS、AI も含まれていますので、変更が可能です。

unDraw | イラストのダウンロード

https://undraw.co/

イラストの無料ダウンロードができる海外サイトです。会員登録は必要なく、SVG および PNG でダウンロードできます。ダウンロード時にキーカラーを指定することで、配色を変更できます。

Unsplash | 写真のダウンロード

https://unsplash.com/

海外サイトですが、無料素材サイトとしては掲載数が他を圧倒しています。また、日本の素材サイトでは見られないようなクオリティの高さがあります。とにかく手っ取り早く無料で手に入れる必要があれば、まずこのサイトをのぞいてみることです。

Pexels | 写真のダウンロード

https://www.pexels.com/

こちらも海外サイトですが、プロが撮影したようなクオリティの高い写真がすべて無料で手に入ります。サイズを指定してダウンロードでき、幅2000px以上の大きなサイズの写真が欲しい時に重宝します。

Adobe Stock

https://stock.adobe.com/jp/

Adobe が運営しているサイトで、掲載数は圧倒的です。ただし有料プランしかありません。Photoshop などのアプリと連携しているのがメリットとしてあげられます。Fotolia という有名な素材サイトがあるのですが、Adobe Stock に統合されました。

Printout Factory

https://www.printout.jp/

RICOHが運営している、無料で使えるテンプレート&素材集を提供しているサイトです。
写真はなく、クリップアートやイラストのみとなります。エクセルやワード形式の、ビジネスで使えるテンプレートもあります。会員登録は必要なく、誰でも直接ダウンロードできます。

写真素材 足成

http://www.ashinari.com/

無料の写真素材を提供しているサイトでは、かなり有名です。
人物モデルの無料写真も提供しているのですが、このサイトのモデルはいたるところのWebサイトで使われているので、かぶってしまうのは仕方ありません。

写真AC

https://www.photo-ac.com/

ロイヤリティーフリーで商用にも使える写真素材を提供しており、この手のサイトではかなり豊富にストックしています。ダウンロードするには会員登録が必要です。有料の会員となるとダウンロードし放題となります。なお、グループサイトには、イラストACやシルエットACもあります。

color-sample.com

https://www.color-sample.com/

色見本を、色名や16進コードとともに掲載しています。
キーカラーが決まったら、その色に対してさまざまな配色候補や配色見本を示しており、非常に参考になります。

Google Design

https://design.google/

oogle のデザインに関するページへの入口です。Newsページで定期的に動向をチェックしておくとよいでしょう。
Material Design や Google Fonts のページへはここから移動できます。

Color Scheme Designer

http://paletton.com/

トライアドやテトラードなど色相環を分割し、自分で配色パターンを作成するなら、このツールが非常に使いやすくておすすめです。直感的な操作で細かい調整をすることができます。
作成した配色でサンプルサイトを表示してくれる機能は、クライントと配色によるイメージの共有をするのに役立つでしょう。
また、その他にも便利な機能が備わっており、作成した配色パターンをさまざまな形式でエクスポートできたり、色覚異常やグレースケールの表示シミュレーションもしてくれます。

RESPONSIVE WEB DESIGN JP

http://responsive-jp.com/

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
レスポンシブWebデザインで制作するなら、デザイン面で非常に参考になります。

960 GRID SYSTEM

https://960.gs/

グリッドシステムのサイトでは最も有名。
参考サイト一覧では、そのサイトのグリッドを表示することができます。
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ページを閲覧する

https://web.archive.org/

世界中の 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

https://jquery.com/

jQueryの本家サイトで、jQuery本体やプラグインをダウンロードすることができます。
また、APIについて調べる時も、日本語サイトでは足りない部分もありますので、確かな情報はこのサイトで調べます。

WordPress.org 日本語サイト

https://ja.wordpress.org/

WordPressの最新版はここからダウンロードできます。
テーマやプラグインを、何らかの原因で管理画面からインストールできない場合も、このサイトからダウンロードできます。

WordPress コーディングスタンダード

https://make.wordpress.org/core/handbook/best-practices/coding-standards/

WordPressチームが出しているコーディングスタンダードがあります。CSS, HTML, JavaScript, PHP について規定していますので、WordPressサイトを制作する際は参考にするとよいでしょう。

Can I use | 各種ブラウザの規格対応状況を調べる

https://caniuse.com/

CSS3 や HTML5 の各仕様が、代表的なブラウザのどのバージョンで対応しているか、一覧で表示してくれます。

日本PHPユーザ会

http://www.php.gr.jp/

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

https://codex.wordpress.org/

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

http://validator.w3.org/

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を入力するか、ファイルをアップロードします。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ