皆さんこんにちは！
今回は、NoCodeでデザインする際に役立つツールをまとめてみました🗒
困った時に使えるようにぜひブックマークしておいてくださいね！

‍

デザインの参考になるサイトを探す

初めてのうちは特に、WEBサイトをどこからどうやってデザインしていけばいいのか戸惑うと思います。
そんなときに使えるのが、デザインの良いページを集めて公開しているサイトです。

‍

‍SANKOU!
こちらは国内のステキなサイトが集めてあり、カテゴリや絞り込み検索などから自分が作りたいホームページに近い条件のサイトを選んで表示することができます。

‍

Pinterest
Pinterestは、自分が気に入ったアイデアを「ピン」して集めていくサービスですが、画像だけでなく、Webサイトの案も探すことができます。
「ホームページ　ショップ　セール」など、作りたいページに合わせたキーワードを入れて検索してみてくださいね。

‍

参考にするサイトを選ぶコツは、自分が作りたいサイトの色やデザインの方向性（かっこいい、やさしい、温かみのある、など…）や見せたい相手、レイアウトなどをしっかりと意識しながらいくつか候補をピックアップしていくといいですよ！

‍

配色を決める

‍

Color hunt
Color huntは、様々な配色が組まれていて、用意されたサンプルをクリックするとカラーコードが表示されるようになっています。好きな配色を選んで、メインの色、サブの色…と配色していけば、簡単にオシャレなページが完成するという優れものです✨

‍

Adobe Color
Adobe Colorを使って配色を選ぶこともできます。
【作成】のタブでは、カラーパレットから自分の好きな色を選択すると、その他の色を自動で配色してくれるというものです。類似色や補色など、配色のパターンが自分で決められます。
【探索】のタブからは、既存のイラストや写真で使われている色のカラーコードをコピーすることができます。表現したい雰囲気から選ぶにはもってこいのツールですね！
【トレンド】タブは、【探索】と似ていますが、ここでは今流行っている配色を見ることができます。
検索窓からキーワードで検索することも可能です。

‍

Color Zilla
Chromeをお使いの方には、Color Zillaというツールもおすすめです。
ネット上で見つけた気になる色をスポイトでピックアップすると、カラーコードがコピーされます。気に入ったサイトや画像で使われている色を知りたいときに役に立ちます。

‍

サイトに挿入する画像を探す

‍

自分で撮影した写真や描いたイラストがあればいいのですが、そのような画像がない場合、
フリー素材（無料で使用でき、著作権もフリーな素材）などをダウンロードする必要があります。
STUDIOにはもともと無料で使える素材が揃っていますが、欲しいものがなければ外部サイトから探してみましょう！

‍

ODAN（写真）
世界中の写真提供サイトから商用利用可の無料写真素材のみを検索することができる、とても使い勝手の良いサイトです。

‍

イラストAC（イラスト）
イラスト素材が必要な場合は、イラストACのようにイラストを専門に扱うサイトから探してみましょう。

‍

storyset
こちらからもイラスト素材がダウンロードできます。
好みのテイストに合わせて使い分けてみてくださいね♪

‍

まとめ

初めのうちは理想のページを作るのが難しいかもしれませんが、今回ご紹介したようなツールを使っていくことでデザインのクオリティを上げていくことができます！
ぜひ活用してみてくださいね！