ホームページを制作するためには、プログラミングだけでなく、様々なツールが必要になります。
例えば、画像編集ツール・イラスト制作ツール・エディタなどです。
今回は、ホームページ制作に必要なツールを紹介します。
「これからホームページを制作したい・すでにあるホームページをカスタマイズしたい」という人はぜひ参考にしてください。
ツールを上手に使えば、美しくおしゃれなホームページを制作することができます。
画像提供サイト
ホームページを制作する上で重要なのが画像です。
画像のクオリティでホームページの美しさが決まると行っても過言ではありません。
ここでは、画像提供サイト・画像編集ツールなどを紹介します。
画像提供サイト
ホームページで使用する画像を用意する手段として、よく使われるのが画像提供サイトです。
画像提供には、多数の画像が用意されていているので、ホームページに合った画像を選んで使用することができます。
無料・有料の画像提供サイトを紹介します。
無料の画像提供サイト
まずは無料の画像の提供サイトから紹介します。
ぱくたそ
ぱくたそは無料で使える画像提供サイトとして、最大級の画像枚数・知名度を誇っています。
人物・天気・自然・街並み・日常・IT・動物・交通・工業など様々なジャンルの写真が用意されているのが特徴です。
また、ジャンルだけでなくモデル・カメラマンを基準に選ぶこともできます。
特に人物画像が多く、汎用性の高い画像からクスッと笑える画像まで幅広く使えるのがメリットです。
また、フリー素材のモデルも募集しているので、審査に通ればモデルデビューすることもできます。
ぱくたそURL：https://www.pakutaso.com/modelabout.html
足成
足成は、ワード検索とジャンルから使用したい写真を見つけることができます。
特徴は、自然・風景などの写真が多いことです。
なので、自然・風景などの写真を使いたいときは足成で写真を探すことをおすすめします。
デメリットは、画像によってサイズが違うことです。
画像サイズが統一されていないので、使用するときはその点に注意しましょう。
足成 URL：http://www.ashinari.com/
IM FREE
海外風のおしゃれな画像を提供しているのが、IM FREEです。
22のシャンルの中から選ぶことができます。
また、写真だけでなくアイコンなども使用するこができます。
画像枚数が少なく、英語表記で使いづらいのがデメリットです。
IM FREE URL:http://imcreator.com/free
ニコニ・コモンズ
ニコニ・コモンズは、ニコニコ動画の関連サービスです。
クリエイターが作成したオリジナリティ溢れる画像がたくさん用意されています。
他にはない画像もこのサイトで見つけることも可能です。
また、画像だけでなく音楽や動画などの素材も提供しています。
しかし、ニコニ・コモンズで提供されている画像は商用利用が制限されている画像が多いのがデメリットです。
商用利用できる画像も製作者に連絡しなければならないなどの制約があり、利用するまでに手間がかかります。
ニコニ・コモンズ URL:http://commons.nicovideo.jp/
pixabay
pixabayは、高品質でおしゃれな画像が用意されており、画像のクオリティは無料提供サイトの中でも群を抜いています。
シンプルで使いやすく、様々なWEBサイトで使用することが可能です。
画像を使用したいとき、まずはpixabayで探すことをおすすめします。
pixabay URL:https://pixabay.com/ja/
Material
アイコンを中心に取り扱っているのがMaterialです。
アイコンは画像と同じくらい需要があり、ホームページ制作にもよく使用されます。
時計・家・注意など様々なアイコンが用意されています。
シンプルで使いやすいので、ぜひ使用してください。
Material URL:https://material.io/icons/
有料の画像提供サイト
次に有料で使える画像サイトを紹介します。
クオリティーを求める人は有料の画像サイトを使用するのがおすすです。
PIXTA
日本の風景・文化・お祭り・風習・行事など様々な写真が用意されています。
他の有料サイトよりも安く、枚数も多いところが特徴です。
日本に関わる写真を探すなら、PIXTAがおすすめ。
PIXTA URL：https://pixta.jp/
アマナイメージズ
アマナイメージズは、写真だけでなく、イラストも用意されているのが特徴です。
取り扱っているコンテンツは、250万点以上になります。
価格は相場よりも高いですが、著作権フリーで使用できるモノもあります。
アマナイメージズ URL:https://amanaimages.com/home.aspx
画像編集ツール
画像を使用するホームページに合わせて、加工する必要もあります。
また、画像を編集できれば、撮影した写真を加工してより美しくおしゃれにすることも可能です。
画像編集ツール
無料・有料で使える画像編集ツールを紹介します。
無料で使える画像編集ツール
Pixlr editor
Pixlr editorは、インストール不要でブラウザ上ですぐに使える画像加工ツールです。
自動選択ツール・なげなわツール・バケツツール・グラデーションツール・ブラシツールなど画像加工に必須のツールがたくさん用意されています。
特にブラシツールの種類は、豊富に用意されており、状況に応じて使い分けることが可能です。
無料なので気軽にいつでも、使用できるのがメリット。
Pixlr editor URL:https://pixlr.com/
Skitch
Skitchは、クラウドドキュメントとして有名なEvernoteの関連サービス。
このツールの素晴らしいところは機能が絞られており、初心者でも迷うことなく画像加工ができるところです。
インタフェイスもすっきりとしており、直感的な操作ができるようになっています。
モザイク加工・文字入力も簡単にできます。
Skitch URL:https://evernote.com/intl/jp/products/skitch
Polarr
こちらのツールもインストール不要でブラウザ上で使うことが可能です。
フィルター・トーンカーブ・透かし・歪み補正などの機能なども使用できます。
特にフィルターの種類が多く、シーンに合わせてぴったりのフィルターで加工することが可能です。
Chromeの拡張機能版もリリースされています。
Polarr URL:https://v2.polarr.co/
Chromeの拡張機能版 URL:拡張機能インストールはコチラ
GIMP
画像加工の無料ツールで一番機能が充実しているのが、GIMPです。
GIMPはWindows・Mac両方のOSに対応しています。
GIMPのホームページからダウンロードすることで誰でも無料で使用できます。
機能性は優れていますが、使いづらいのがデメリットです。
GIMPはこのようなインタフェイスになっています。
機能性が高いため、表示されるアイコンも多く直感的に操作するのは難しいです。
また、他の加工ツールと仕様の違いが多く、クセがあるのも難点です。
GIMP URL:https://www.gimp.org/downloads/
有料で使える画像編集ツール
ここからは、有料で使える画像編集ツールを紹介します。
Photoshop
画像編集ツールとして最も有名なのがPhotoshopです。
Photoshopは、画像編集ツールの中でも機能を多く搭載しています。
画像の編集・加工をおこなうプロもよく使用しています。
Windows・Mac両方のOSに対応しており、随時機能がアップデートされます。
なので、常に新しく使いやすい状態で操作することが可能です。
Photoshopは、月額980円で使用できます。
また、他にもAdobeが提供しているツールを使用した場合は単体プラン・コンプリートプランを使用するのがおすすめです。
Adobeの料金プランはこのようになっています。
| フォトプラン | 月額980円 | 以下のツールが使用できる ・Lightroom CC ・Lightroom Classic CC ・Photoshop CC ・20GBのクラウドストレージ |
| 単体プラン | 月額2,180円 | 以下のサービスが利用できる ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能 |
| コンプリートプラン | 月額4,980円 | 以下のサービスが利用できる Photoshop CC、Illustrator CC、Adobe XD CCなど、20を超える数のクリエイティブデスクトップおよびモバイルアプリ ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能 |
Adobe URL:https://www.adobe.com/jp/creativecloud/plans.html
Canva
ブラウザ上で使えて、初心者でもおしゃれな画像が制作できることで話題になっているのがCanvaです。
基本的には無料で使用することができますが、有料の画像やテンプレートを使用すると料金が発生します。
おしゃれな画像素材・フォントが揃っているので画像編集未経験者でも美しい画像を制作することが可能です。
「Canva for Work」という月額1,500円の有料プランすると以下のようなサービスが利用できます。
・無料で30万点以上のテンプレートが使用可能
・データを無制限に保存可能
・フォルダを無制限に作成可能
・フォルダを無制限に作成可能
・デザインサイズを変更可能
・オリジナルテンプレをチームで共有可能
・オリジナルフォントを取り込んで使用可能
Canva URL:https://www.canva.com/
Fotophire
簡単にプロ並みの画像編集ができるツールがFotophireです。
先ほど説明したPhotoshopと比べると機能性は低いですが、使いやすさでは上回っています。
例えば、クロップ・回転・背景の削除・モンタージュなどを1クリックで作成することが可能です。
年間6,680円でツールを使用することができます。
Fotophire URL:https://photo.wondershare.jp/new-purchase/buy-fotophire-toolkit.html
イラスト提供サイト
ホームページ制作には、画像だけでなくイラストも必要です。
無料・有料のイラスト提供サイトを紹介します。
無料のイラスト提供サイト
いらすとや
無料イラスト提供サイトとして最も知名度があるのがいらすとやです。
使用されているのはインターネットだけでなく、スーパーなどにも使用されています。
利用できるイラストも多く、様々なシーンで使用することができます。
可愛いイラストなので、万人ウケするのがメリットです。
いらすとや URL:http://www.irasutoya.com/
イラストレイン
イラストレインは、色使いが優しく、イラストのタッチも柔らかいのが特徴です。
女性ユーザーの多いWEBサイトにぴったり。
人物・動物・乗り物など様々なイラストが用意されています。
イラストレイン URL:http://illustrain.com/
Town Illust
建築物のイラストだけを取り扱っているのがTown Illustです。
立体的なイラストからモノクロ的なイラストまで様々なイラストが利用できます。
使用できるシーンは少ないかもしれませんが、建築物を使用するときはこのサイトを使ってみてください。
Town Illust URL:http://town-illust.com/
いらすとん
いらすとんは、いらすとやの関連サイトです。
手書きのようなゆるいイラストがいらすとんの特徴です。
本家のいらすとやにもおとらないほど多くのイラストが用意されています。
いらすとん URL:http://www.irasuton.com/
EC design
EC designは、そのWEBサイトのタイトル通り、ネットショップで使用できるイラストを提供しています。
「SALE・◯◯%割引・メルマガ登録・トロフィー・カートに入れる」などのイラストが使用可能です。
ネットショップ以外の用途にも使用することも可能なイラストもあるので一度WEBサイトを見てください。
Silhouette Design
シルエットのイラストを中心に提供しているのがSilhouette Designです。
動物・人物・家具など様々なイラストが提供されています。
シルエットのイラストは、汎用性が高く色々なところで使用可能です。
ただし、データはAIの形式でしかダウンロードできません。
(AIデータとはAdobeが提供しているIllustrator・Photoshopでしか開けないデータです。)
Silhouette Design URL:http://kage-design.com/
ヒューマン・ピクトグラム
ヒューマン・ピクトグラムは、人間をモチーフにしたイラストを提供しているサイトです。
緑色で描かれた人間が日常・スポーツ・運動など様々な場面をイラストにしています。
検索すれば使用したいぴったりのイラストを見つけることが可能です。
ヒューマン・ピクトグラム URL:http://pictogram2.com/
ハンコでアソブ
ハンコで作られたようなイラストが特徴です。
手作りのような雰囲気があり、可愛くて温もりのあるイラストを使うことができます。
WEBサイトだけでなく、チラシ・名刺にも使用可能です。
ハンコでアソブ URL:http://hankodeasobu.com/
有料のイラスト提供サイト
有料ですがクオリティーの高いイラストを提供しているサイトを紹介します。
イラストAC
イラストACは、提供しているイラストの数が多く人気があります。
JPEG形式・AI形式・EPS形式・PNG形式など様々なファイル形式に対応しているのが特徴です。
無料でも使用できますが、有料課金することで制限なくスピーディーにダウンロードすることができます。
イラストAC URL:https://www.ac-illust.com/
iStock
4,000万点以上のイラストが用意されており、10点4,000円で利用できます。
購入したイラストは、WEBサイトなど様々な媒体で使用可能です。
iStock URL:https://www.istockphoto.com/jp
Gettyimages
世界中の高品質な画像を用意しています。
海外の俳優やスポーツ選手など有名人の写真も取り扱っているのが特徴です。
単品で12,000円から購入することができます。
価格表は以下のようになっています。
| 低解像度の画像 | ・単品購入：12,000円 ・単品購入：14,000円 ・5点パック：55,000円 ・10点パック：102,000円 |
| 中解像度の画像 | ・単品購入：20,000円 ・5点パック：83,500円 ・10点パック：150,000円 |
| 高解像度の画像 | ・単品購入(画像)：37,000円 ・単品購入(映像)：54,200円 ・5点パック：164,000円 ・10点パック：312,000円 |
Gettyimages URL:https://www.gettyimages.co.jp/
イラスト制作ツール
無料・有料で使えるイラスト制作ツールを紹介します。
無料で使えるイラスト制作ツール
MediBang Paint Pro
漫画制作に特化したイラスト制作ツールです。
使いやすいインタフェイスと無料で使えることがこのツールのメリット。
以前は、CloudAlpacaという名前でしたが、改名されて現在のMediBang Paint Proという名前になりました。
コマ割・集中線などAdobeのillustratorにはない機能も搭載されています。
Mac・Windows両方のOSにも対応しています。
無料で使えるイラストツールの中で一押しのツールです。
MediBang Paint Pro URL:https://medibangpaint.com/pc/
PictBear
PictBearは、インターフェース・機能性・操作性がAdobeのillustratorに似ています。
なので、illustratorに変わる無料で使えるツールを探している人におすすめです。
illustratorと比べると機能性は低いですが、使いやすさは上回っています。
また、プラグインも開発されているので、機能を拡張することができます。
PictBear URL:https://www.fenrir-inc.com/jp/pictbear/
Piskel
Piskelは、ドット絵を簡単に制作することができるイラストツールです。
ドット絵とは、ファミコンなど昔のゲームで表現されていたイラストになります。
イラストを繋げてGIFを作成すれば、簡単なアニメーションも作成できるのがメリットです。
日本語には対応していないのがデメリット。
慣れれば問題なく使うことができるので、ぜひ一度使ってみてください。
Piskel URL:https://www.piskelapp.com/
有料で使えるイラスト制作ツール
CLIP STUDIO PAINT
CLIP STUDIO PAINTは、「CLIP STUDIO PAINT PRO」と「CLIP STUDIO PAINT EX」の二種類があります。
この2ツールの違いは、以下のようになります。
・CLIP STUDIO PAINT PRO・・・イラスト制作するために開発されたツール
・CLIP STUDIO PAINT EX・・・マンガ制作するために開発されたツール
教育機関にも導入されるなど、使いやすさ・機能性ともに優れたツールです。
CLIP STUDIO PAINT PROが5,000円、CLIP STUDIO PAINT EXは23,000円という価格設定になっています。
・CLIP STUDIO PAINT EX URL:https://www.clipstudio.net/
openCanvas
openCanvasは他のイラストツールとは違い、アナログで書いたようなイラストを描けるのが特徴です。
アナログに近いイラストを再現するため、ペンツール・ブラシツールなどの機能を使いやすくしています。
また、psd形式に変換して保存することも可能です。
Windowsのみに対応しており、MACでは使用できないのがデメリットになります。
openCanvas URL:http://www.portalgraphics.net/oc/
Illustrator
Illustratorは、Adobeが提供しているツールです。
ロゴ・イラスト・名刺・チラシなど様々なモノに使用できる汎用性の高さが人気の理由。
デザイン業界・印刷業界の標準ソフトとして多くの人に使われています。
また、使い方に関する情報はインターネット・書籍などで紹介されています。
自由度が高く、Photoshopとの互換性が高いのも魅力です。
WEBデザインを制作するために使用することもできます。
単体プラン月額2,180円以下のサービスが利用できる
ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能
| 単体プラン | 月額2,180円 | 以下のサービスが利用できる ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能 |
| コンプリートプラン | 月額4,980円 | 以下のサービスが利用できる Photoshop CC、Illustrator CC、Adobe XD CCなど、20を超える数のクリエイティブデスクトップおよびモバイルアプリ ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能 |
Illustrator URL:https://www.adobe.com/jp/creativecloud/plans.html?single_app=illustrator
エディタ
WEBサイト制作に欠かせないのがエディタです。
エディタがなければコードを書くことができません。
現在は使いやすいエディタもたくさん提供されています。
無料・有料のエディタを紹介します。
無料のエディタ
無料で使用できるエディタを紹介します。
Sublime Text
「恋に落ちるエディタ」として人気のあるエディタがSublime Textです。
とにかく使いやすく、機能性が高いのが特徴。
プラグインも豊富で追加することで機能を拡大することができます。
Windows・MAC両方に対応しています。
Sublime Text URL:https://www.sublimetext.com/3
Atom
起動が早く、機能性も高い優秀なエディタです。
無料エディタといえば、Atomと呼ばれるほど人気があります。
機能の拡張性も豊富で、一通りの機能は揃っています。
もちろん、Windows・MAC両方で使用することが可能です。
Atom URL:https://atom.io/
Dreamweaver
Dreamweaverは、Adobeが提供しているエディタです。
このエディタは、ダイアログからCSSを設定することができ、CSSの知識がなくてもホームページを制作することができます。
もちろん、補完機能もあるため、楽手にCSSコードを入力することが可能です。
単体プラン月額2,180円以下のサービスが利用できる
ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能
| 単体プラン | 月額2,180円 | 以下のサービスが利用できる ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能 |
| コンプリートプラン | 月額4,980円 | 以下のサービスが利用できる Photoshop CC、Illustrator CC、Adobe XD CCなど、20を超える数のクリエイティブデスクトップおよびモバイルアプリ ポートフォリオWebサイト、プレミアムフォント、100GBのクラウドストレージの利用が可能 |
Dreamweaver URL:https://www.adobe.com/jp/products/dreamweaver.html#x
まとめ
いかがでしたか？
ホームページを制作するためには、コードの知識だけでなく画像加工やイラストを制作する技術も必要です。
今回、紹介したツールを参考にしてください。