便利になった制作系ツールたち６選
…タイトルの通りです。
最近またポートフォリオ作り直しまして、その時にまたいろんなツールにお世話になったのですが、AIが入ってきたからなのか便利になったなァオイ…！と感嘆したことがありまして…
忘れないようにそれらについて書きとめていきたいと思います。
コーディング時の参考になるサイト
ヘッダーやボタン、タイトルなどちょっとした装飾のコードが欲しい時、もちろん己で書く事もありますが時間がない時などにこういったコード版素材サイトが役に経っております（現在進行形）。
特にアコーディオンやハンバーガーメニューはかなり手間かかるので、こういったツールからお知恵を拝借できるのは本当ありがたい。
CSS Stock
タイトルやボタンのHTML/CSSがコピペできるサイト。
個人的にすごい見やすくて、どうやって構成されているのかコードの勉強にもなってかなりお世話になってます。
動くWebデザインアイディア帳
J Sなどを使用して動きのあるコーディングが必要な場合、まずはこちらを拝見しています。スライドショーやタブメニュー、ギャラリーなどJSが必要な場面が増えてきている昨今、このようにまとめられているサイトはかなり貴重すぎて重宝しております。
とほほのBootstrap 5入門
ここ数年コーダーとして作業してきて、bootstrapを使う頻度が増え、その際に使用し以後お世話になっているサイト。
…そうです、ホームページ作成に携わる一定の年齢以上の方ならほぼ通っているであろうあのとほほさんのbootstrap5の解説サイト…！しかも５だけじゃなく４以前もしっかり網羅してらっしゃる！しかもわかりやすい！最高すぎるだろ…ってことでこの方の解説サイト、まじオススメです。
Front-end Tools
グラデーション・ボタンからtransitionまでブラウザで直感的にシミュレートできるサイト。transition系のアニメーションがシミュレートできるのありがたい…！
画像作成系ツール
Adobe Express
なんと写真の背景から切り抜き出来ちゃう！
IllustratorやPhotoshopでも出来なくはないですが、この背景切り抜き、めっちゃ面倒なんですよ。ぶっちゃけ。写真をアップロードするだけで出来てしまうので非常に楽。まだ使い始めなのでどこまでできるのかわかりませんが、とりあえずシンプルな背景だったら透明に出来た。複雑な背景はどこまでいけるだろう…でもこのツールとイラレでだいぶ楽になりそうな感じはする。
アイコンフォント
icofont
登録なしでアイコンフォントが使えるサイト。
fontawesomeも良いのですが、使いたいものが大抵有料だったりするので…業務なら経費として出してもらえる事もあると思うのですが、個人だとそうは行かない。そんな時に役立つのが無料のアイコンフォントサイト。個人的には、ここのアイコンがいろいろ使いやすいものが多くて助かってます。
まとめ
とりあえず、今現在特にお世話になっているツールやサイトをピックアップしてみました。transitionなどはまだ少し弱いですが、実際どうなってるのかをみて覚えるのが一番の近道だと思っていますのでこういったジェネレーターサイトは本当ありがたい。こういう便利なサイトを活かしながら効率の良いデザイン・コーディングを目指していきたいと日々精進してまいりたいと思います。
この記事が気に入ったらサポートをしてみませんか？