ShunNote 
みなさんこんにちは。
シュンです！今回は年末ということでWeb制作に役立ちそうなツールやリンク集をまとめました
これまでTwitterでツイートしたものを紹介させていただきます。
目次
ギャラリーサイト
LP ARCHIVE
16000以上のLPデザインが見れるギャラリーサイト。
『LP ARCHIVE』
国内のランディングページのデザインが見れるギャラリーサイトですPCとスマホのデザインの他に色別で検索可能です
会員登録すればデザインのお気に入り登録もできますLP制作の参考になりますね🤔https://t.co/824xt149Yk pic.twitter.com/ygvfMxt7ol
— シュン@ShunNote (@2021_Shun) December 27, 2019
MephoBox
海外のギャラリーサイト。日本には無いデザインが多いのでインスピレーションをわかせるのに役に立ちます。
『MephoBox』
404ページ,ボタン、メニュー画面など各ページ毎に見れる海外のギャラリーサイト日本のサイトでは見れないようなデザインのサイトが多いです
先ほどの404ページ作成もこのサイトを参考にさせていただきました🤗https://t.co/v6HqCwsmno pic.twitter.com/fZ1gXO964e— シュン@ShunNote (@2021_Shun) December 23, 2019
Siiimple
シンプルなデザインが好きな方は是非ご覧ください。
『Siiimple』
名前の通り、シンプルなサイトを集めたギャラリーサイトです。
絶妙な余白の使い方や書体もキレイに整ったサイトが多いのでアニメーションで動かしまくったりするのが良いという訳ではないのを思い知ります
個人的に好きなデザインが多いサイトです😃https://t.co/DgoDHMP8yk pic.twitter.com/PYiJaqnFr5
— シュン@ShunNote (@2021_Shun) December 16, 2019
イラスト＆画像サイト
ISOMETRIC
おしゃれなイラストサイト。PNG、SVG形式でダウンロード可能です。
『ISOMETRIC』
フリーイラスト素材のサイトだと
『unDraw』が有名ですがこのサイトもイラストの雰囲気がお洒落でオススメ凡庸性が高くてブログ、Webサイトにも使えそうなイラストが多いです
まだ日が浅いのでイラストの数は少ないですが
まだまだこれから期待できそう😌https://t.co/mpfvx9Riza pic.twitter.com/afGkndEK8U— シュン@ShunNote (@2021_Shun) December 5, 2019
Unsplash
高クオリティな写真が探せる写真素材サイトです。
『Unsplash』
本当にフリー素材でいいのかと思うぐらい
お洒落な画像しかない
海外のフリー写真素材サイト📷英語で検索が必要ですがカテゴリー別で分類されているので使いやすいです
壁紙としても使っていいような写真が多くて
Webサイトに使ってもお洒落になりそう😃https://t.co/IqhL3igcmT pic.twitter.com/SNQyF6vJvp— シュン@ShunNote (@2021_Shun) December 4, 2019
スニペット集
どれもコピペ等の簡単な操作で完結するものばかりです。
Epic Spinners
『Epic Spinners』
CSSのローディングアニメーションがみれるサイトです
どれを使うか迷うくらいかっこいいアニメーションばかり使い方も簡単でクリックするだけでコードが表示されます
コードもHTML/CSSコピペ可能ですhttps://t.co/xlZlB5Pigu pic.twitter.com/8PXzoD7CUk— シュン@ShunNote (@2021_Shun) December 14, 2019
Magic Animations CSS3
『MAGIC EFFECTS』
フェードのアニメーションを中心に取り揃えてるソースサイトです。
サイトからコードをコピーすることも可能ですし
掲載されてる全コードをファイルでダウンロードすることも出来ますクリックのアニメーションで使ってみても面白いかと🤔https://t.co/XXZZbmH4Nc pic.twitter.com/ObSJSZWBYe
— シュン@ShunNote (@2021_Shun) December 20, 2019
CSS ANIMO
『CSS ANIMO』
クリックするだけでhoverなどのコードをコピペできるサイトお好みのエフェクトをクリックするだけで自動コピーされます
コピペだけしてコード書きたい人には便利なんですが
意味も分からず使わずにコードはちゃんと読むことをオススメします😇https://t.co/bF5c7P7l7E pic.twitter.com/N8ayN1WVt3— シュン@ShunNote (@2021_Shun) December 11, 2019
CSS FX
『CSS FX』
CSSのクリックイベント、hover、ローディングなどのエフェクトを紹介してるサイトです非常にシンプルな物ばかりなので
サイトに複雑な動きつけないで適度に試してみたい方にはオススメです。近未来的なデザインも好きです😃https://t.co/S8lprBEKle pic.twitter.com/hWyl95smND
— シュン@ShunNote (@2021_Shun) December 2, 2019
カラーパレット
colors&font
カラーとフォントを探せるサイト。操作もクリックのみでコードコピーできます。
『color&font』
その名の通り、カラーとフォントを探せるサイトです
カラーは単色だけではなく
配色パターンから選ぶことが可能。グラデーションからコントラストのパターン、フォントもあるので配色に困った時に便利です🌈https://t.co/YezWoc4swn pic.twitter.com/waQrkMQQ8L
— シュン@ShunNote (@2021_Shun) December 9, 2019
WebGradients
綺麗なグラデーションが作れるサイトです。ダウンロードも可能です。
『WebGradients』
グラデーションの自分好み配色コードを探すことができます自分で色つけると毒入れた色みたいになりやすいくて
いつも配色に困るのでとても参考になります「Photo shop，sketchにも対応してるのも嬉しいところ😃
個人的にサイトのUIデザインも好みですhttps://t.co/L8JNSj6YzL pic.twitter.com/vnam3SlE9q
— シュン@ShunNote (@2021_Shun) November 30, 2019
アイコン
ICOOON MONO
モノトーンのフリーアイコン素材サイト。欲しいものからいらないものまであるかも。
『ICOOON MONO』
モノトーンのフリーアイコン素材サイト
種類は6000以上。カテゴリーもかなり幅広いですモノトーンで表示されてますが色の変更も可能
サイズ変更、PNG,JPG,SVGにも対応してますモノトーンなので凡庸性も高く、
いろんなサイトデザインにも対応できそう🤔https://t.co/Xy9vU6RTHd pic.twitter.com/sf3MPyDvPK— シュン@ShunNote (@2021_Shun) December 15, 2019
icongram
各アイコンサイトをまとめたサイトです。
『icongram』
8000以上のアイコンから選ぶことができるアイコン素材のサイトをまとめたサイトです。font-awesomeもアプリのアイコンもあるのでよく使ってます。
URL指定してあげればアイコン１つ単位で使えるので便利。https://t.co/DAnRweETks pic.twitter.com/z2Kl5BbZtr— シュン@ShunNote (@2021_Shun) November 27, 2019
Animated Icons
動くアイコンがダウンロードできます。
『Animated Icons』
250種類以上の動くアイコンがダウンロードできます
本当に無料ダウンロードで良いのかってくらい動いてくれるし種類も豊富です⭐️
ボタンのhoverにつけるだけでも遊び心が出そうなアイコンです😃https://t.co/MXxPWJNmcM pic.twitter.com/h90VrdGYw3
— シュン@ShunNote (@2021_Shun) December 10, 2019
その他便利ツール＆サイト
CanvasFlip
『Visual Inspector』という名前に変更されたみたいです。
『CanvasFlip』
サイト内の要素サイズ、画像ファイルの抽出、カラーやテキスト編集も可能
これ１つでWeb制作に便利な機能が利用できるChromeの機能拡張です好みのサイトのデザインをマネたり、
サイトの模写にも便利なので入れて置いて損は無いかとパーツ毎にキャプチャーもできます😊 pic.twitter.com/yydFEZcGvb
— シュン@ShunNote (@2021_Shun) December 28, 2019
animista
CSSのアニメーションが作れるサイトです。簡単なアニメーション には困らなくなるはず。
『animista』
cssのアニメーションを作ることができます
通常の動きはもちろん、テキストや背景にも動きをつける物もあるので種類も豊富希望に近い形でオブジェクト選択等の詳細も設定でき、
クラスもcssコードも表示されるのでそのまま使えます😌https://t.co/OiYKPIVq6a pic.twitter.com/KZtSrc5avg— シュン@ShunNote (@2021_Shun) December 7, 2019
PerfectPixel
Chromeの拡張機能。Web上で画像と合わせながらコーディングできます。
『PerfectPixel』
ブラウザでデザインカンプの画像とコーディングしたページと照合わせれます
画面に画像を合わせた状態でコーディングをでき、
ほんの少しのズレもわかりやすくなりますChrome拡張機能追加で使用可能
※ずっと画面見てると微妙なズレによって幻覚見てるようで頭痛くなるので注意 pic.twitter.com/SmtQ42VvW5
— シュン@ShunNote (@2021_Shun) December 1, 2019
Full Page Screen Capture
サイトのページ丸々スクリーンショットできるChrome拡張機能です。
『Full Page Screen Capture』
ChromeのWebページ全体をスクリーンショットできます！Webページの模写をする時に便利です😃
前回紹介した
『PerfectPixel』と組み合わせれば模写しながらコーディングも可能ですしAdobe XDなら並べてデザイン模写も出来そう🤔 pic.twitter.com/DtpLWmKNJr
— シュン@ShunNote (@2021_Shun) December 3, 2019
Optimizilla
デザインからスライスした画像を最適化するのに便利な画像圧縮サイト。
『Optimizilla』
画像最適化ツール
画像最適化って探すと必ず出てきますWeb制作で画像が使いすぎてリロードが重くなった時に便利です
使い方は超簡単で画像ファイルを指定の場所にドロップして画像をダウンロードするだけ
最適化前の画像と画質の比較も出来て一石二鳥🌟https://t.co/zdk1tjf3H7 pic.twitter.com/eRzR7gus8F
— シュン@ShunNote (@2021_Shun) December 5, 2019
最後に
いかがでしたでしょうか？お役に立てましたら幸いです。
最後まで見ていただきありがとうございました！
2020年もどうぞよろしくお願いします！
