Webサイト製作におすすめのアプリ・Webサービスを紹介します。
新人ブロガーブログ・Webサイト・バナー・LPなどの製作に役立つサイト・ツールをまとめました。
この記事でわかること！
- ブログ・Webサイト作成に役立つツールがわかる。
デザインネタの収集に役立つサイト集
デザインの参考になるサイト：Pinterest
▲デザイン探しといえばここ！プロのWebデザイナーさんはPinterestを必ず使っているイメージです。日本ではあまり人気が無い印象ですが、世界的には広く使われているサイトなので検索ヒット数も豊富です。
バナーデザインの参考サイト：レトロバナー
▲バナーデザインのギャラリーです。
▲バナーデザインのギャラリーです。
LPデザインの参考になるサイト：LPアーカイブ
▲PC・スマホごとにデザインをみることができます。その登録数は2022年2月現在でPCが28,584サイト、スマホが18,551サイトという圧倒的なサンプル数です。ログイン機能があって気に入ったデザインはお気に入りに登録して後から見返すことができます。
LPデザインの参考になるサイト：Web Design Clip
▲国内・海外・LP/Webサイト・スマホというカテゴリーに分かれています。色・業種などで検索が可能です。カッコいいデザインが多いなぁという印象で2022年2月現在の登録数1,693サイトと登録数は多くないですが、運営者さんのこだわりが感じられるので見ていて楽しいです。ログイン機能なし。
配色・カラーリングの参考サイト集
配色・カラーリングの参考：Palettable
▲メインカラーは決まったけど、その他の配色どうしようかなーというときに使えるサイトです。メインカラーを設定してボタンをクリックすると最大5色までその色にマッチした配色を提案してくれます。気に入ればLikeをクリックしてストック、気に入られなければDislikeをクリックして他の色を提案してもらいましょう。海外のサイトですが、簡単な直感的な操作だけで使用できるので個人的によく使っています。
配色・カラーリングの参考サイト：Adobe color
https://color.adobe.com/ja/explore/newest/
▲Adobeが提供するサービスです。世界で流行の色を分野別に見ることができます。他の機能として、ひとつの色を入力すると反対色を教えてくれたり配色の提案をしてくれる機能があります。使いこなせば高機能そうです。
サムネイル作成・バナー作成に役立つサービス
Canva
▲バナー・SNSのヘッダーなどを簡単に作成できます。クラウドでデータ管理できるので便利です。無料でもそこそこ使えます。
creatopy
▲バナー・SNSのヘッダーなどを簡単に作成できます。海外のサービスで日本語フォントが少ないのが残念です。本格的に使うなら課金必須。
写真・画像素材収集サイト
日本人メインのフリー写真：PAKUTASO（ぱくたそ）
▲日本人の写真が多く、同じシーンでも表情やポーズのパターンが多いので商用サイトやバナーにとっても使いやすいです。わたしは写真を探すときは先ずはこちらを利用させていただいています。
かっこいいフリー写真：Unsplash
▲かっこいい系の写真が多いです。海外の人が中心で日本人の方の写真が少ないです。かっこいい系のデザインを作成するときに重宝します！
女性向けのフリー写真：GIRLY DROP
▲名前のとおりガーリーな写真がたくさんあります。女性向け（特に若い女性）のデザイン作成に重宝します。
イラスト・あしらい収集素材
フレーム・飾り枠の素材サイト：フレームデザイン
▲飾り枠・バッジ・看板・リボン・メダルなどのあしらいデザインが豊富です。
かわいいシンプルイラスト：Loose Drawing
▲めちゃくちゃかわいいのにシンプルがゆえにどんなシーンでも使える神イラスト素材集サイト様。色変も可能という神っぷり。受注制作の相談にものっていただけるみたいです。
- 無料
- png
- 商用利用OK
- いくつかの色から選択可能
かわいいシンプルイラスト：ソコスト
- PNG/svg/eps
- 色変可能
- EPSデータはパスのアウトライン化をしてないので、線の太さやタッチの変更も可能です。
- 商法利用OK
クールなシンプルイラスト：Linustock
フリーフォント
源柔ゴシック（無料）
http://jikasei.me/font/genjyuu/
▲やわらかい丸みのデザインで使いやすいです。細さが段階がHeavyまであるのですが個人的にはHeavyに縁取りして使うのが好きです。
バナナスリップ Plus（無料）
▲ポップなデザイン。
キルゴU（無料）
▲アニメ「キルミーベイベー」のタイトル調のフォントです。
その他の便利ツール
画像加工・圧縮：Screenpresso
▲画像関連の操作をまとめてやってくれる神ツール。無料版でも神ですが、課金するとスーパーゴッドです。これとFigmaさえあればイラレやフォトショなんていらないかもしれない。
- 切り抜き・トリミング
- サイズ調整・画像の圧縮
- フォント・吹き出し・矢印などの書き込み
- モザイク
- 画像と画像の簡単な合成
プロトタイピングツール：Figma
▲神過ぎてヤバイ。これが無料でここまで使えていいのかと思う。神すぎ。最近脱パワポしてプレゼン資料もこれで作成してるし、英語学習のノート取りもこれでやるのが楽しい！
- クラウドでデータ管理のため環境に依存しない。
- リアルタイムでチーム編集。
- モックアップの作成。
- パス描画
- 画像の切り抜き・色味調整
- ロゴ・Webサイト・バナーデザイン
- 無料枠でもゴリゴリやばいほど使える。
- 無料プラグインによる拡張性がやばい。
- 簡単なデザインならフォトショップやイラストレーターいらないくらいなんでもできる
まとめ
先輩ブロガー以上、ブログに役立つツール・サービスの紹介でした。
【おすすめUdemy講座】Midjourney始め方から応用まで網羅！【完全版】
【おすすめUdemy講座】ジェネレーティブAI（生成AI）入門【ChatGPT/Midjourney】 -プロンプトエンジニアリングが開く未来-