soratomoのブックマーク - はてなブックマーク

便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】

2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。整理したカテゴリは以下の通り。

soratomo 2023/12/20

[tool]

webdesign

リンク

アイデアの宝庫、すごい最新Webデザイン40個まとめ

「ウェブサイトのアイデアが浮かばない」「刺激的なインスピレーションが欲しい」「打ち合わせでイメージをすり合わせたい」そんなときに目を通したい、世界で話題の最新Webデザインをまとめてご紹介します。 2023年のデザイントレンドを意識した作品から、時代に関係なく愛されるシンプルなスタイルまで、幅広いセレクションを取り揃えています。レイアウトや配色などの参考にできるのはもちろん、魅力的な動きのアニメーション探しにもおすすめです。

soratomo 2023/08/03

リンク

こんなことできるの?!ホームページ制作が楽しくなる最新オンラインツール48個まとめ

「こんなことできちゃうの?!」「もっと早く知りたかった。」この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。時間の短縮はもちろん、面倒だったあの作業も自動化できてしまうことも。大型連休中におすすめのワクワクするようなツールを集めました。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。コンテンツ目次 1. Webデザイン便利ツール（14個） 2. デザインツール（13個） 3. 配色ツール（5個） 4. プロトタイプ・アイコンツール（6個） 5. クリエイティブ・面白ツール（10個） Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール Loaders

soratomo 2022/05/03

リンク

フォトショップで写真を水彩イラスト風に一発加工！おすすめ素材25選

フォトショップのなかでも写真を水彩イラスト・絵画ペイント風に加工する方法は、人気エフェクトのひとつです。アートヒストリーブラシでなぞるだけのつくり方も紹介しましたが、今回はよりお手軽にリアルな水彩イラスト加工ができるデザイン素材をまとめてご紹介。写真を放り込むだけで完成し、誰でもプロのような仕上がりを瞬時に表現できる、まるで魔法のようなアイテムが揃います。デザイン素材集、実際の使いかたここで紹介するデザイン素材の使い方は、大きく分けて２種類。スマートオブジェクト機能を活用したPSDファイル素材タイプ再生ボタンを押すアクション素材タイプどちらも写真を用意するだけのお手軽さで、わずか数クリックでリアルな水彩イラスト加工に仕上げることができます。ここでは、実際に以下の素材 Watercolor Creator を試しにつかってみます。ダウンロードしたファイルを開いた状態がこちら

soratomo 2022/03/30

来月落ち着いてから試してみたい、、

リンク

よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選

この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。早く知っておけばよかったと思う、あまり知られていないCSSの実用的なテクニックが中心で、実際の問題ケースや参考サンプル用ソースコードを一緒に確認できます。前回のお役立ちCSSテクニック集と合わせて確認してみてはいかがでしょう。よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめコンテンツ目次 1. 画像の質感をアップしたい 2. グラスモーフィズム効果を表現したい 3. 入力フォームの使いやすさを改善したい 4. CSS Transf ormをつかった最新テクニック 5. 2022年に知っておきたい新しいCSSプロパティ 6. position: stickyの正しい使い方 7. レスポンシブ対応の区切り線のつくり方 8. するするとカーテンが降りてくるエ

soratomo 2022/03/29

css

リンク

サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】

ウェブサイトの印象を大きく左右する「動き」。現役Webデザイナーがこれは外せない！というCSSアニメーションライブラリをまとめてご紹介。任意の要素にクラスを付与するだけで、用途に応じたアニメーションを実装できる便利なライブラリを整理しています。フワフワやユラユラ、ポヨンといった弾む系の動きから、背景アニメーションなどWebサイトの印象づくりに欠かせない動きが揃います。GitHubレポジトリのスター数が多いものを中心にセレクト。コンテンツ目次 1. 万能CSSアニメーション 2. 文字エフェクト向け 3. ホバーエフェクト向け 4. 画像、背景向け 5. ふわふわ、ゆらゆら、面白系 6. ハンバーガーメニュー向け 7. クリエイティブなアニメーション 8. よりなめらかな動きを表現するには 9. アニメーションの参考リソース一覧万能CSSアニメーション Animista 基本となる

soratomo 2022/03/02

リンク

【商用可＆無料】2021年上半期ベスト英語・日本語フリーフォント厳選85個まとめ

当サイトでは、毎月新しく公開されたフリーフォント素材をまとめてご紹介しています。この記事では、2021年上半期にリリースされた、商用利用でも使える完全無料の英語・日本語フリーフォントをまとめてご紹介します。 2021年上半期は、特に数多くの日本語フリーフォントが公開され、おしゃれな英語フリーフォントから高級感のあるセリフ書体、人気定番の筆記体、手書き、ブラシフォント、ビンテージ、ディスプレイなど幅広いカテゴリよりフリーフォント素材85個を厳選しています。コンテンツ目次 1. 日本語フォント 2. 万能フォント 3. サンセリフ書体 4. セリフ書体 5. 筆記体 6. 手書き、ブラシフォント 7. レトロ、ヴィンテージフォント 8. ディスプレイ書体 9. これまでの歴代ベストフォント日本語フリーフォント無料で商用利用できる日本語フリーフォント、17書体をまとめています。漢字も利用

soratomo 2021/08/01

font

リンク

Web制作の時短に！2020年の便利オンラインツール・ベスト100選

この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ

soratomo 2020/12/22

リンク

【総まとめ】2020年公開のすごいPhotoshopチュートリアル、作り方厳選まとめ

当サイトでは、Photoshopの新しい機能テクニックをつかった最新チュートリアル、作り方を定期的にまとめて紹介しています。この記事では、2020年のあいだに公開された、特に確認しておきたいPhotoshopのデザインチュートリアル、つくり方をまとめてご紹介します。これまで以上に便利になった新しくアップデートされたPhotoshop 2021の新機能はもちろん、ボタンひとつで完成のお手軽写真やアクション、合成テクニックなど、デザイナーが覚えておくと便利な人気のデザインスタイルのつくり方がずらり揃います。これからPhotoshopを始めてみよう、というひとにもぴったりなテクニックを揃えています。年末の連休をつかって、新しいテクニックを習得してみてはいかがでしょう。 2020年公開のIllustratorチュートリアル、つくり方も以下の記事でまとめています。【総まとめ】2020年公開の

soratomo 2020/12/19

リンク

たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個

モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。上下中央揃え: place-it ems: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-it ems: centerを使えば、思ったよりに簡単に実現できます。まず、display: gridを記述したら、一緒にplace-it ems: centerを同じ要素に追加します。place-it emsは、align-it emsとjustify-it emsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-it emsとjustify-it emsの両方がcenterとして設定されます。 .paren

soratomo 2020/08/19

display grid とか flexとか対応ブラウザはモダン系

css

リンク

実例で学ぶ最新のWebデザイン見本コレクション厳選50個 2019年8月度

この記事では、デザイン制作のインスピレーションやアイデアの参考にしたい、クリエイティブな最新Webデザインをまとめてご紹介します。時代に関係なく長年愛されるシンプルな配色や、控えめで効果的なアニメーション、エレガントで高級感のあるセリフ書体のフォント選びなど、実際にウェブサイトを制作するときに真似したくなる素敵デザイン・レイアウトが揃います。実例で学ぶ最新のWebデザイン見本コレクション厳選まとめ Save Whales クジラの保護を訴えるプロジェクトで、スクロールに応じて縦横無尽に画像が切り替わるユニークなスライダー機能を実装。 Stonewall Forever Once Upon a Time in Hollywood LGBTQ問題の歴史について、インタラクティブなストーリーで伝える未来を感じる体験型サイト。ぜひ一度ページを開いてみてほしいサイトのひとつ。 The Gooni