便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ
ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ 垂直型イメージスライダー くるりと回転したり、スクリーン
全て無料、本当は教えたくないフリーイラスト素材サイト106個まとめ【商用OK】
この記事では、商用利用かつ無料ダウンロードできるイラスト素材、サイトをまとめてご紹介します。 資料作成やサイト作成などあらゆる場面に重宝するフリー素材を揃えています。 国内と海外サイトに分けてまとめています、用途やデザインに応じて、お好みのイラスト素材を見つけてみてはいかがでしょう。 このリストは随時アップデート予定です、ブックマークしておくと便利です。 コンテンツ目次 1. 国内の無料イラスト素材サイトまとめ（56個） 2. 海外の無料イラスト素材サイトまとめ（50個） 3. 当サイト紹介の人気イラスト素材まとめ 4. イラストを活用したデザイン参考例 5. イラスト素材編集のおすすめツール 国内の無料イラスト素材サイトまとめ ここでは、日本生まれのイラスト素材サイトをまとめています。 無料なのはもちろん、商用利用OKで高品質なイラスト素材が揃います。 商用利用可能な素材を中心に紹介して
動くWebデザインの最新アイデア28個まとめ
ウェブサイトやモバイルアプリを魅力的にしたいときは、アニメーションを利用すると良いでしょう。 その理由は、ユーザーの注目を無意識に集め、美しさも表現できるから。 さまざまなデザイントレンドとしても、毎年選出されており、まずます需要が高まっています。 実際に、多くの最新ウェブデザインでも採用されており、アニメーションに特化したCSSライブラリも数多く公開されています。 ワンランク上のウェブデザインを作成したいクリエイターに、ぜひ参考にしてほしいアニメーションのアイデアを、まとめてご紹介します。 動くWebデザインの最新アイデアまとめ Daily UI “Luxury Interaction Concept” 高級車の販売を行う、インタラクティブで実験的なコンセプトページで、クリックに応じたコンテンツ遷移が心地よいつくりに。
AIスゴすぎ、フォトショップ新機能 人やモノをなぞるだけで消す「削除ツール」を試してみた
AIスゴすぎ、フォトショップ新機能 人やモノをなぞるだけで消す「削除ツール」を試してみた 人工知能を搭載したツールで、編集作業をガラリと変える フォトショップの新機能「削除ツール」は、不要なものを手軽に消すことができる、まさに魔法のようなツールです。 これまで長いあいだ、フォトショップで人や物を消すテクニックはさまざまありましたが、このAIを活用したツールの登場によって、編集作業が一新されることになるでしょう。 今回は、フォトショップの「削除ツール」の使い方と仕上がりを、実際に詳しく見ていきましょう。 フォトショップの削除ツールとは？ これまで不要なものを削除するには、「コンテンツに応じる」塗りつぶしや修復ブラシ、コピースタンプツールなどで行っていましたが、より良い結果を得るためには、作業を繰り返し行う必要がありました。 うまく削除できなかったところは、コピースタンプなど他のツールに切り替
Midjourney（ミッドジャーニー）で思い通りに画像生成できる徹底ガイド
Midjourney（ミッドジャーニー）とは、とても簡単に言えば、入力した文字だけで画像を生成できるAIツールです。 たとえば「ライオン」と文字入力するだけで、あらゆるスタイルのライオンを、１分もかからずに、AIが自動で作成します。 GoProで真正面、しかも超近距離で撮影したようなライオン 入力する文字、プロンプト（英: Prompt）を組み合わせることで、全く雰囲気の違う「ライオン」を生成でき、まるで呪文を唱える魔法のよう。 サイバーパンクなキャラクター風ライオンに プロンプトの組み合わせは自由自在で、あらゆるスタイルの「ライオン」に仕上げることが可能です。 狩りをするライオン「水彩スケッチ」風 Web制作向けUIデザインの自動生成にはじまり、Midjourneyを使い込んでいくうちに、「思い描いたデザインを生成する」ためのコツやポイントが、すこしずつ掴めてきたのでシェア。 ステンドグ
【フォトショップ】写真から何でも削除できる、怖すぎる新AIツールをつかった魔法テク
もしも、フォトショップをつかって、写真から不要な人やものを消したいとき、あなたならどうしますか。 さまざまな方法がありますが、もっとも手軽なのが「コンテンツに応じた塗りつぶし」でしょう。 シンプルな写真では問題ないのですが、特に複雑な写真では、フォトショップにあまり良い結果を期待することができません。 今回は、フォトショップと無料のAIツールをつかって、どんな写真でも不要な人やものを消す新しい写真加工テクニックをご紹介します。 フォトショップ「コンテンツに応じた塗りつぶし」の現状 まずは、フォトショップの「コンテンツに応じた塗りつぶし」をつかって、どこまで消せるか試してみます。 こちらの写真の手前に立っている男性を、消してみましょう。 加工をはじめる前に、もとの写真をコピーして保存しておくと、もしものときのバックアップになります。 ここでは、「被写体の選択」ツールを使い、人物のみを切り抜き
【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
おしゃれ英語フォント本命！商用OKな無料セリフ書体おすすめ40選
セリフフォントは、時代を超えて愛され続ける、歴史のあるクラシックな書体。 文字のストロークの端に小さな飾りが特長のセリフ書体は、より文字を認識しやすく、そして読みやすくしてくれます。 ここでは、商用利用できる本当に美しい英語セリフフォントを厳選してご紹介します。 7年ぶりのアップデート版となるこの記事では、豊富なリガチャやウェイト数など、デザイン面を重視した書体を中心に揃えています。 充実度ではプレミアム素材がおすすめ プレミアムフォントを使えば、ユニークでおしゃれなデザインをより手軽に表現することができます。 フリーフォントではむずかしい異なるウェイト数や、合字リガチャとデザインのバリエーションは抜群です。 ロゴ用テンプレートなども収録されているので、購入したらすぐにデザインを楽しむことができるのもプレミアム素材のメリットのひとつと言えるでしょう。 Eighties Comeback S
本当は教えたくないWebデザイン参考ギャラリーサイト37選
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
Webデザインに携わるすべての人へ！アイデアの参考になる世界の最新Webサイト37選
この記事では、世界中で公開されたばかりの最新ウェブデザインをまとめて紹介します。 もの凄いスピードで絶えず変化し続ける、Webデザインの見せ方やトレンドを意識したサイトを中心に集めています。 デザインの実例を見ることで、新しいアイデアの参考にしてみてはいかがでしょう。また、2021年公開のベストWebサイトも一緒に確認してみましょう。 【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個 Webデザインに携わるすべての人へ！アイデアの参考になる世界の最新Webサイト37選 The Weirdos 「変わり者」といった意味をもっとサイト名らしく、ユニークでオリジナル性の高いイラスト・デザインと鮮やかな黄色の配色が目を引くデザイン。太い仕切り線も2022年のトレンド。 Notorious Nooch レトロでファンキーなキャラクターや配色など、2022年注目デザインスタイルの
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個
当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめています。今回は、2021年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。 配色えらびやレイアウトの参考にぴったりで、2022年予想の人気デザイントレンドも意識した素敵なWebサイトを中心にまとめています。 【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個 Rockwool トップ画面に表示されたビルをクリック、スクロールで進んでいくと、壁や床、排水管にいたるまで細部まで細かくアニメーション付きで説明する、新しすぎる制作実績の見せ方。ぜひ一度サイトを開いて体験してみましょう。 Skolkovo Business District マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。スクロールに合わ
よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ
この記事では、普段のホームページ制作で直面しがちな課題を解決するCSSテクニックをまとめて紹介しています。 クライアントからの要望も多いCSSの小技テクから、「これがCSSだけでできるの？」と疑いたくなるような最新の使い方まで、実例やサンプル用ソースコードと一緒に確認できます。 ここで紹介されているCSSテクニックを利用すれば、これまで頭を抱えていた問題や課題も、一発で解決できるかもしれません。 コンテンツ目次 1. 入力フォームをカスタマイズしたい 2. ナビゲーションメニューを使いやすくしたい 3. ボタンを目立たせたい 4. リンク用エフェクトにこだわりたい 5. スクロールバーをサイトの色で統一したい 6. ドロップシャドウの影にもこだわりを 7. グラデーションをビンテージ風にしたい 8. CSSで要素を中央寄せする5つの方法 9. ブラウザごとのデザインのずれを防ぎたい 10.
時短してますか？Web制作が変わる最新オンラインツール38個まとめ
日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな
CSSコピペで完成！押したくなるWebボタンデザインまとめ
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在となっています。 JSもつかったよりクリエイティブなボタンエフェクトもあるので、プロジェクトに合ったボタンデザインを探してみましょう。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 現在37種類のボタンデザインが揃い、今後も定期的にアップデートしていきます。 CSSコピペで完成！押したくなるWebボタンデザインまとめ ユラユラと揺れる波ウェーブボタン まるで水面が揺れているようなエフェクトが特長のボタンエフェクト。 See the Pen Creative Wave Button
無料で商用OK！筆記体フリーフォント12年分をまとめた秘密リスト
「筆記体でかわいい、おしゃれなデザインにしたい」と思っても、いざ文字を入力してみると、「なんか思ってたのと違う」と感じたことはないでしょうか。 お気に入りのフォントをやっと見つけたら、個人利用のみだった、なんて経験も。 10年以上に渡り、コツコツと集めてきたフォントのなかから、商用利用ができる無料の筆記体フリーフォントのみを厳選してご紹介。 デザインに苦手意識があるひとも、文字を入力するだけでおしゃれに仕上げるオススメ＆定番の筆記体フリーフォントで、デザイン作業を快適にしてみませんか。 一覧リストには、現在84個の筆記体フリーフォントが揃い、今後もアップデート予定です。 好きに選べる、好きなだけ使えるAdobe Fonts 「海外サイトからのフォントのダウンロードは不安。」 「できるだけ低予算で、高品質なフォントを、安心して使いたい。」 そんなときは、20,000以上のプロフォント、500
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用OKで完全無料！宇宙、未来SF系のフリーフォント厳選103個まとめ
【商用OK】Google Fontsで使えるオススメ日本語フリーフォント32個まとめ
