ShunNote 
皆さんこんにちは。シュンです！
今回はWeb制作に役立つツール、リンク集を紹介させていただきます！
是非記事の共有をお願いします。
前回の紹介記事はこちら！
ギャラリーサイト
httpster
『httpster』
海外のお洒落なサイトが載ってるギャラリーサイト他のギャラリーサイトと違って
年数日付で分けられており、遡ることができます左上のメニューからカテゴリー別でサイトの検索も可能。
年数別にサイトを見ていけばWebサイトの流行もわかるかも🤔https://t.co/wBs8TKqPOi pic.twitter.com/FbGAwqslc3
— シュン@ShunNote (@2021_Shun) January 3, 2020
WeLoveWP
『WeLoveWP』
WordPressのテーマを使って作られたサイトのギャラリーサイトジャンルでもテーマ別でも見れますし
色、タグでも検索可能海外サイトが紹介されてますが
日本語版でこういったサイトもあるのでしょうか🤔WordPress制作考えてる方は是非https://t.co/iz3i7nZ5dp pic.twitter.com/ThWm1RNVWB
— シュン@ShunNote (@2021_Shun) January 10, 2020
ONE PAGE LOVE
『ONE PAGE LOVE』
名前の通り１ページ完結のサイトを集めたギャラリーサイト。複雑なレイアウトのサイトがないのでどのサイトも非常に見やすいサイトが多いです😃https://t.co/clOEXLSoCV pic.twitter.com/yLY9E4UKMn
— シュン@ShunNote (@2021_Shun) January 23, 2020
Pinspiry
『Pinspiry』
無料デザインリソースのフォント、グラフィック、モックアップ、Webテンプレート、UIキット等がダウンロードできるサイトえ。これも無料？ってなるくらいクオリティが高いものが多いです
特にフリーフォントの数が多いのでオススメです😃https://t.co/tYS6I6Gybs pic.twitter.com/j4eSaIQOH6— シュン@ShunNote (@2021_Shun) January 25, 2020
ライブラリー
CSShake
『CSShake』
振ったり震えたりするcssの動きをつけるツールインストール後指定されたクラス名を使えば動きをつけれます
動きの速さや振り幅変えるだけでも動きのイメージが変わるので奥深さを感じます🤔https://t.co/97BV2L0oOG
また、React版は細かく動きを設定できますhttps://t.co/37lY85uZq9 pic.twitter.com/gY3LZM6dqX
— シュン@ShunNote (@2021_Shun) January 13, 2020
Anime.css
『Anime.css』
CSSアニメーションのライブラリー
フェードからズームから多種多様なアニメーションですシンプルな動きが多く使いやすそう！
サイトページで動作を確認できます実装前に動きが見れるのは嬉しいですね😃https://t.co/ieXlkmAGgJ pic.twitter.com/MgLxItZxL8
— シュン@Webデザイン (@2021_Shun) January 29, 2020
Animated Mesh Lines
『Animated Mesh Lines』
流れ星などの曲線的な動きのライブラリ
カーソルを動かすことで視点が変わるのも面白いですね😃
スマホから見ると傾けるだけで動きますhttps://t.co/c6nTMNPRuO pic.twitter.com/CxwPbpDBmm— シュン@ShunNote (@2021_Shun) January 17, 2020
Three Dots
『Three Dots』
ローディングアニメーションを作成するためのCSSライブラリです色、高さ、間隔等のカスタマイズも可能です
3点のドットが動いてるだけなのに非常にパターンも多くてオシャレに感じます😲https://t.co/Mz6bDqfozg pic.twitter.com/zXIpXskVGH
— シュン@ShunNote (@2021_Shun) January 19, 2020
Foxholder
『Foxholder』
入力フォームやボタンにお洒落なアニメーションが付けれるライブラリー実際の動きも確認できて
フォームのアニメーションだけでも結構種類が多いと思います🤔英語ですが使い方もちゃんと書いてありますのでご確認を。https://t.co/hEofKhsmiI pic.twitter.com/yNl7fDjr9Y
— シュン@ShunNote (@2021_Shun) January 22, 2020
イラスト
Illustration Gallery
『Illustration Gallery』
高クオリティでお洒落なイラストサイト。キーワード検索も可能。
それに加えてイラストのダウンロード前に好きなカラーコードに変更できるのも嬉しいところ😃イラストのカテゴリーも幅広く、PNG、SVGに対応してますhttps://t.co/NKaUl9po1Q pic.twitter.com/8KtpsmPSc4
— シュン@ShunNote (@2021_Shun) January 4, 2020
Fresh Folk
『Fresh Folk』
PhotoShop対応のフリーイラスト素材。
アドレス登録をすることでダウンロードできますお好みのイラストにカスタマイズすることでパターンも無限です😵https://t.co/lyUrMZmnxc pic.twitter.com/pMWEzk5PFx
— シュン@ShunNote (@2021_Shun) January 18, 2020
写真素材
Gratisography
『Gratisography』
海外の写真素材サイト。遊び心溢れる写真が多く、どれもインパクトがあります。
お洒落な画像を探しがちですがユーモアを取り入れるにはいいのではないでしょうか🤔写真に目が行きがちですが意外と種類も幅広いです。https://t.co/g1OLjOwNmb pic.twitter.com/jBdvI5Igr1
— シュン@ShunNote (@2021_Shun) January 7, 2020
FreePhotos.cc
『https://t.co/XVeRWLjmGE』
複数の写真素材サイトから一括で写真を探すことができます
このサイトで見つけることができる写真は商用フリーなので安心😊キーワードの英語検索が必須ですがカテゴリーが豊富なので使いやすいです
有料で素材も販売してます pic.twitter.com/OukZRlzavV
— シュン@ShunNote (@2021_Shun) January 26, 2020
アイコン
Worldvectorlogo
『Worldvectorlogo』
世界中のロゴが検索ダウンロードできるサイトSVGでダウンロード可能
ロゴならジャンル問わず何でも検索できますプログラミング言語のロゴはもちろんサッカークラブのロゴまで検索可能
ポートフォリオのスキルのページに利用してみたりもできそう🤔https://t.co/BYCEPRnq7b pic.twitter.com/opBjsFKvG7
— シュン@ShunNote (@2021_Shun) January 2, 2020
VisualPharm
『VisualPharm』
こんなに種類の多いアイコン見たことない
ってぐらいあるアイコンサイトですカメラのアイコンだけで約1万5000種類あります😵
検索も可能ですがサブカテゴリーまで分けられてるので探しやすいです単体でアイコン探してる方は便利なのでは🤔https://t.co/pxT3j5S9OF pic.twitter.com/0gH3Rh8r7K
— シュン@ShunNote (@2021_Shun) January 15, 2020
画像編集加工
Artboard studio
『Artboard studio』
ブラウザ上で画像編集が行えるデザインツール
背景透過の素材が多く、パッケージのデザインも作れるなど無料とは思えないクオリティです使用した感じですが
以前ブログで紹介したCanvaとPhotoShopの中間のようなツールです※アドレス登録が必要ですhttps://t.co/IzFJflsNMd pic.twitter.com/CvxkVq4sFY
— シュン@ShunNote (@2021_Shun) January 8, 2020
Moose
『Moose』
背景と被写体を選択することで好みの画像が作れるサイト
作成しなくてもフリーの写真素材もダウンロードできます操作も簡単。自由に加工できるので
最適な画像が見つからない人は
画像をつくってみていいかもしれません動画の通り意味不明な画像も作れます😇https://t.co/qh9pc9CB5G pic.twitter.com/lRTixKPKCt
— シュン@ShunNote (@2021_Shun) January 12, 2020
カラーパレット
Duotone
『Duotone』
名前の通りデュオトーンの画像を加工作成ダウンロードできるサイトデュオトーンを使えばお洒落かつインパクトのある画像に仕上がります
「Unsplash」の写真から検索されるのでお洒落な写真ばかり
自分の画像もデュオトーンに加工できます😄https://t.co/Nx9OCc55Kf pic.twitter.com/77f8DBGoY5— シュン@ShunNote (@2021_Shun) January 5, 2020
Pigment
『Pigment』
カラーパターンが確認できるサイトですカラーパターンをお気に入り登録できますし
カラーコードもrgb,pantoneにも対応。カラーの明るさの調整可能
決まったカラーパターンを載せてるサイトは多いですが
微調整できるのはありがたい😃https://t.co/dnKK1xmlSY pic.twitter.com/SDJlVLu6lu— シュン@ShunNote (@2021_Shun) January 11, 2020
Make Tint & Shades
『Make Tint & Shades』
カラーコードを元に色合いとシャドーのカラーを生成してくれるサイト。どの色にも対応出来るのでお好みの色から作れます
シャドーに色を着けたい人には便利かと思います🤔
https://t.co/sjb68wu5qW pic.twitter.com/65j1FIyfid— シュン@ShunNote (@2021_Shun) January 19, 2020
その他
Get Waves
『Get Waves』
波線のようなグラフの図形が作れるツールです色、曲線のタイプ、曲線の形状から変更可能
作成したものはSVGでのダウンロード or コードでの読み込ませれば利用できますヘッダーやフッターのデザインに使って見ると面白そうだと思いました🤔https://t.co/DKvfpVLugt pic.twitter.com/NYsIpWXwuA
— シュン@ShunNote (@2021_Shun) January 2, 2020
CSS layout cheat sheet
『CSS layout cheat sheet』
CSSのレイアウトがわかりやすく書いてあるチートシートposition,float,displayについてわかりやすいので
個人的にも結構確認したりしてます他にもcenteringなどについて細かく書いてありますhttps://t.co/krE6nwX0WF pic.twitter.com/VMXFN34TaB
— シュン@ShunNote (@2021_Shun) January 15, 2020
Ostagram
『Ostagram』
少し前に話題になったAI画像合成サービス
好きな画像とパスタや名画を選択することで雰囲気に合わせた画像に加工してくれますAIの進歩を感じられずにはいられないですね。。💦
アイコンの写真に画像加工をしてみたら面白いかと🤔https://t.co/hL04ILABsO pic.twitter.com/wQJAg78lyT— シュン@ShunNote (@2021_Shun) January 20, 2020
SOLO Learn CSS
『SOLO Learn CSS』
プログラミング学習のスマホアプリです
少しの空き時間に学習できますProgateのアプリは優しすぎるという方は是非
全文英語テキストなので英文字に耐性が付きます😇CSSの他にもPHP,Ruby,JS,Python..等あります
iPhoneもAndroidも利用可能📲https://t.co/oIkYzc2eu9 pic.twitter.com/5o7P1qyXI4
— シュン@ShunNote (@2021_Shun) January 27, 2020
Lorem Ipsum Generator
『Lorem Ipsum Generator』
ダミーテキストが作れるジェネレーターサイトに文章を入れたいけど決めてないって際に代わりとしてお使いください
コピペでも利用可能ですし
長いテキストでも対応可能です😃https://t.co/RPVLLDSX5Z pic.twitter.com/92moQc3aui— シュン@Webデザイン (@2021_Shun) January 30, 2020
最後まで見てただきありがとうございます！
是非記事の共有をお願いします😃
