ホームページ制作ガイド
無料ツールと素材サイトGuide
素材の準備で手が止まったときに、
頼れる定番サービスを集めました。
ホームページの制作やリニューアルでは、原稿や写真などの素材を自分たちで用意する場面が数多くあります。素材づくりに役立つツールと、写真・イラストなどの素材サイトをまとめました。
無料のものを中心に、定番の有料サービスもあわせて掲載しています。前のページでご紹介した素材一覧とあわせて、まずはどんなものがあるかを知る参考にしてください。
ここで紹介するのは、画像や文章などの素材を1から作るためのツールです。ホームページそのものを作る無料サービス（Wix・Jimdo・ペライチなど）は、GUIDE 12「テンプレートサービス」とGUIDE 15「CMSサービス紹介」で紹介しています。
バナーやSNS用の画像、簡単な図解などは、専門ソフトがなくてもブラウザ上で作れます。
Canva 豊富なテンプレートをもとに、バナー・SNS画像・簡単なチラシまでブラウザ上で作成できるデザインツール。無料プランでも十分実用的です。 www.canva.com原稿の下書きやキャッチコピーの案出し、文章の推敲は、対話型のAIツールが得意な領域です。書きたい内容を箇条書きで伝えるだけで、たたき台を短時間で用意できます。
ChatGPT OpenAIの対話型AI。原稿の下書きやキャッチコピーの案出し、文章の言い換えなどを会話形式で手伝ってくれます。 chatgpt.com Claude Anthropicの対話型AI。長い文章の整理や、丁寧なトーンの原稿づくりを得意としています。 claude.aiAIが作った文章は、事実と異なる内容を含むことがあります。掲載前に必ず内容を確認し、自社の言葉に直してから使いましょう。AI生成物の権利面の注意点は、GUIDE 17「デザイン発注時に注意するべきポイント」でも解説しています。
撮影した写真をそのままアップロードすると、ファイルサイズが大きすぎて表示速度が落ちる原因になります。アップロード前のひと手間に便利なツールです。
TinyPNG 画像をドラッグ＆ドロップするだけで、画質をほぼ保ったままファイルサイズを大幅に圧縮できます。 tinypng.com remove.bg 人物や商品写真の背景を自動で切り抜けるツール。バナーや資料づくりの下処理に便利です。 www.remove.bg部門ごとに代表的なサイトをまとめました。無料のものを中心に掲載していますが、利用条件はサイトごとに異なるため、ページ末尾の注意点もあわせてご確認ください。
点数や品質を重視する場合や、他社と写真がかぶるのを避けたい場合は、有料のストックサービスが向いています。
PIXTA 日本最大級のストックサービス。国内向けの写真・イラストが豊富です。 pixta.jp Adobe Stock Adobe製品と連携して使える有料ストックサービス。 stock.adobe.com Shutterstock 世界最大級のストックサービス。素材の点数が非常に多いのが特徴です。 www.shutterstock.com amanaimages 広告・出版向けの高品質な国内ストックサービス。 amanaimages.com iStock Getty Imagesが運営する、手頃な価格帯のストックサービス。 www.istockphoto.com日本製のサイトを中心に、商用利用できるものを掲載しています。
いらすとや 幅広いジャンルをカバーする定番のイラスト素材サイト。 www.irasutoya.com イラストAC 多数の作家のイラストを検索できます（写真ACと共通アカウント）。 www.ac-illust.com ソコスト シンプルで使いやすいフラットイラスト。 soco-st.com Loose Drawing ゆるいタッチの線画イラスト。 loosedrawing.com ちょうどいいイラスト ビジネスにちょうどいいテイストのイラスト。 tyoudoii-illust.com テックピック IT・テック系のシーンに強いイラスト。 tech-pic.com ビジネス素材 ビジネスシーン向けのシンプルなイラスト。 web-sozai.com Linustock（ライナストック） 線画中心のシンプルなイラスト。 www.linustock.com ベクターシェルフ ベクター形式で編集しやすいイラスト。 vectorshelf.com イラストナビ 商用利用できるイラストをまとめた素材サイト。 illust-navi.com oishiso（おいしそうなフリーイラスト屋） 食べ物・グルメ系に特化したイラスト。 oishiso.jp shigureni free illust 女の子の日常を描いた、やわらかいタッチのイラスト。 www.shigureni.com定番のイラストは多くのサイトで使われているため、既視感が出やすい面もあります。使う点数を絞る、色味を自社サイトに合わせるなどの工夫をすると、ありきたりな印象になりにくくなります。
特に日本語フォントは収録する文字数が多く、制作にコストがかかるため、品質の高いものは有料であることがほとんどです。ブランドの印象を左右する重要な要素なので、予算があれば検討する価値があります。
Adobe Fonts Adobe Creative Cloud契約で使える高品質フォント（有料）。 fonts.adobe.com モリサワ（Morisawa Fonts） 日本語フォントの定番。サブスクで多くの書体が使えます。 morisawafonts.com フォントワークス 人気の日本語書体を多数提供（LETS）。 fontworks.co.jp SCREEN（ヒラギノ） ヒラギノシリーズで知られる日本語フォント。 www.screen.co.jp 株式会社イワタ 明朝・ゴシックなど品質の高い日本語書体。 www.iwatafont.co.jpフォントは、無料と書かれていても商用利用は別条件というケースが少なくありません。使う前に、必ず利用規約で商用利用の可否を確認してください。また、有料フォントを無断で配布している違法サイトも存在します。配布元が公式・信頼できるサイトかどうかを確認し、出所の不明なフォントは使わないようにしましょう。
フリー素材は便利な一方で、無料で使えるように見えても利用条件が細かく決められているケースがほとんどです。ダウンロードの前に、以下の点を確認する習慣をつけましょう。
トラブルになりやすいのは、規約を読まずに使ってしまうケースです。特にフォントは商用利用の条件が細かいことが多いため、不安がある場合は制作会社に確認してから使うと安心です。
どの素材を用意すればいいかわからない、ツールを使いこなせるか不安という段階でも大丈夫です。スイッチでは、素材の選び方や準備の進め方も制作のご相談の中でお答えしています。初回のご相談は無料ですので、お気軽にお声がけください。
