便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
動きを思いのままに！とびきりWebアニメーションアイデア35選
ウェブ制作で「動き」をうまく活用することで、自然と視線を注目コンテンツに集めたり、ブランドの世界観を表現できたりと、あらゆるものを魅力的に演出できます。 しかし、サイトに動きを組み合わせるアイデアは、なかなか浮かびにくいものも事実。 そんなときに活用したい、さまざまな新しい「動き」を取り入れた最新Webアニメーションアイデアをまとめてご紹介。 手軽に動きを表現できるCSSアニメーションライブラリなども参考にして、心地よい動きをウェブサイトに試してみてはいかがでしょう。 動きを思いのままに！とびきりWebアニメーションアイデア35選 Virtual Reality hero section 浮遊感を表現したネオンカラーの未来的なヒーローセクションが目を引くアニメーションは、今後ますます需要が不要そうな3Dデザイン。
わずかな時間で驚くほどWeb制作がはかどる最新オンラインツール43個まとめ
この記事では、Webデザイン制作を楽にする最新オンラインツール43個をまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Layout Patter
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
フォトショップ作業が爆速に！覚えておきたい時短テクニック25個まとめ【2020年版】
この記事では、覚えておくとフォトショップでの作業効率がアップする便利な時短テクニック25個をまとめて紹介しています。 新しくPhotoshop CCに追加された便利なテクニックから、「あったら便利。」を実現できるショートカット、そしてバナナ隠しコマンドまで、時間短縮につながるものが揃っています。繰り返し作業がラクになるのはもちろん、何度もクリックして表現する面倒な作業にも効果的です。 これらのテクニックを活用して、快適なフォトショップライフを過ごしましょう。 小技テクニックの目次 1. バードアイビュー 2. 選択範囲をペイントできる「クイック選択モード」 3. ツールを一時的に切り替える 4. オーバースクロール機能 5. 調整レイヤー＋描画モードの合わせ技 6. レイヤーやブラシの不透明度をホットキーで変更 7. 選択範囲の移動 8. ラバーバンド・ペンツール 9. ブラシツールの「滑
商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 1. Adobe Fontsの手書きフォント（6個） 2. 和文、日本語の手書きナチュラル・フリーフォント（54個） 3. 英語の手書きプレミアムフォント（8個） 4. 英語の手書きナチュラル・フリーフォント（69個） 現在、137個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フ
これはいい！デザイナー注目のすごいフリーフォント54個まとめ 2019年9月度
この記事では、公開されたばかりのデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2019年9月度のフリーフォントまとめです。 どんなデザイン案件にも対応できる万能フォントから筆記体とセリフやサンセリフをセットにした「フォント・デュオ」、未来的なSFデザイン、モダンレトロな雰囲気を演出できるものなどさまざま。商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 【商用可＆無料】2019年上半期ベスト英語・日本語フリーフォント厳選90個まとめ これはいい！デザイナー注目のすごいフリーフォントまとめ Panton Rust Sans Font シンプルでモダン、そしてエレガントさをざらっとしたテクスチャの質感と共に演出、2つのフォントを無料ダウンロードできます。 ※ 個人、商用利用可能 Tucks
無料で商用可！Bootstrapでできた高品質なHTMLテンプレート素材25個まとめ
この記事では、商用可能で無料ダウンロードできるBootstrap製の最新HTMLテンプレート素材をまとめてご紹介します。 デスクトップやモバイルなどあらゆるレイアウトに対応したレスポンシブデザインで、Bootstrapフレームワークを利用しているので、手軽にカスタマイズできます。あらゆる業種にマッチする、お好みの無料HTMLテンプレートを探してみましょう。 HTMLテンプレートのライセンスについて 今回ご紹介するHTMテンプレートは、以前ご紹介したColorlibからセレクトしたものが中心となります。 レベル高っ！商用可能な無料HTMLテンプレート200+種類を配布しているサイト Colorlib 無料ダウンロードできるHTMLテンプレートは、すべてCreative Commons Attribution 3.0 License （CC BY 3.0）となっています。HTMLテンプレートを
Illustrator アーカイブ - PhotoshopVIP
グラフィックデザイナーにとって、6万円近くする CorelDraw Suite を購入することは、最適な自分への投資と言えないかもしれません。また、Adobe製品のサブスクリプションモデルも同様です。 ほとんどのグラフィックデザインツールは、同じ原則に基づいて構築されています。そして、たいていの場合、ウェブサイト用のアイコンやロゴなどの作成や、単純にベクターアートで楽しみたいなど、シンプルで効果的なツールが必要になります。たとえ複雑なベクターアートであっても、大企業が提供するすばらしい機能を使うことはめったにないでしょう。 ありがたいことに、やりたいことを実現できる無料のベクターソフトウェアがいくつか存在します。この記事では、もっとも一般的で効果的な無料ベクターツールをまとめてご紹介します。 海外サイト Icons8 で公開された Free Vector Software: Best Ed
【デザイナー必見】差のつくデザイン、すごいフリーフォント65個まとめ 2018年6月度
毎月公開されたデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2018年6月度のフリーフォントまとめです。 プロフォント顔負けのウェイト数が揃う万能フォント、最近よく見かけるようになったレトロ、ビンテージフォント、高級感のある筆記体や手書きブラシフォントなど、実践で活用できる素材で、商用利用に対応したアイテムも多数収録しています。 商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 デザインの現場で役立つ、すごいフリーフォント素材60個まとめ 2018年5月度 【デザイナー必見】差のつくデザイン、すごいフリーフォントまとめ 木漏れ日ゴシック 「デジタル」と「先生が黒板に書いた字」を混ぜて割ったようなイメージ。手書きの流れを残して、カタカナの方が小さめで、優しい雰囲気を演出できます。 ※ 個
デザイナーが持っていたい、すごいフリーフォント素材63個まとめ
デザインをしているときにどれを使おうか迷うことも多く、デザイン全体の雰囲気やイメージを決める重要な作業のひとつが、フォント選び。手持ちのフォントコレクションを定期的にアップデートして、あらゆる幅広いデザイン案件に対応したり、クリエイティブな作品づくりに活用してみましょう。 今回は、最近公開された無料ダウンロードできるフリーフォント素材をまとめてご紹介します。太さに応じて豊富なウエイトが用意された万能スタイルの書体から、今年のトレンドでもある手書き、ブラシスタイルの他に、人気の高い美しい筆記体デザインなどが揃っています。 デザイナーが持っていたい、すごいフリーフォント素材まとめ 2018年3月度 Sunderline Script Free Font スムーズに流れるような筆記体が特長のフリーフォントで、どんなデザインにも合わせやすいシンプルな書体。 ※ 個人利用可能 MADE Evolve
Photoshopで差がつく、ハイクオリティな無料PSDデザイン素材48個まとめ
ウェブサイトやグラフィックデザインなど幅広い用途で活躍するPhotoshop。表現できるスタイルやエフェクトを増やしたい。そんなときは、手軽にお好みのデザインに編集できる、無料のPSDデザイン素材を活用してみましょう。 フリーフォントでカスタマイズしやすいロゴ、ポスター、イベントフライヤーなどのテンプレート素材の他にも、作品やアートワークの新しい魅せ方を提案できるモックアップ、写真加工用アイテムやフォント入力だけで完成のテキストエフェクト、パターン、グラデーションなど幅広いデザイン素材をまとめています。 文字フォントが一瞬で美しく！手の込んだPhotoshopテキストエフェクト素材30個まとめ Photoshopで差がつく、ハイクオリティな無料PSDデザイン素材まとめ Free Gold Paint Photoshop Effect リアルな黄金ペイントをボタンひとつで表現できる、Phot
【総まとめ】2014年すごいIllustratorチュートリアル、作り方厳選50個
Photoshopチュートリアルと一緒に確認しておきたい、Illustratorデザインを集めました。不定期となりますが、Illustratorのテクニックを学ぶのに最適なチュートリアル、作り方をまとめて紹介しています。今回は2014年12月分と一緒に、今年1年間のあいだに公開された中でも、特に確認しておきたいデザインチュートリアルをまとめてご紹介します。 しっかりした基礎を学ぶことができるチュートリアルから、Photoshopでも人気の高いポリゴンスタイルやフラットスタイル、ややグランジ感が味わいのあるビンテージ加工、Illustratorが得意なベクターイラストの作り方など幅広くピックアップしています。年末年始にかけていかがでしょう。 詳細は以下から。 人気テクニックを学ぶ！すごいIllustratorチュートリアル、作り方2014年総まとめ キラキラ感たっぷりなライティングエフェクト
良質Webデザイン見本帳！創造力を高める最新サイト47個まとめ
ウェブデザインに関わる全てのひとにオススメしたい、デザインや発想、アイデアの糧になる優れた最新Webサイトの実例をまとめています。配色やレイアウトの他にも、書体や印象、業種など目的別に探せて、すぐに使えるアイデア集です。 これからウェブサイトを作ろうというひとや、クライアントとの打ち合わせの参考資料として、またアイデア出しに困ったときなど幅広く参考にできるウェブデザインを厳選してご紹介します。 アイデアに困ったら確認したい！最新ウェブデザイン良質見本47選 2017年9月度 現役デザイナーも注目！最近話題のウェブデザイン50個まとめ 2017年7月度 良質Webデザイン見本帳！創造力を高める最新サイトまとめ 久米島インスタTrip 人気インスタグラマーたちが久米島のインスタ映えする写真を投稿して、島の観光につなげる新しい試み。 Air Jordan Coilection 歴代のAir Jo
ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。 ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ コンテンツ目次 1. アコーディオンメニュー 2. サークル型ナビメニュー 3. ドロップダウンメニュー 4. フルスクリーンメ
無料ダウンロードできるすごいPhotoshopブラシ素材30選 2017年8月度
Photoshopには優れた機能がたくさん揃っていますが、これらのツールをうまく使いこなしても、ゼロからデザインをするには多くの時間と労力が必要になります。そこで利用したいのが、ブラシ素材です。 今回ご紹介するブラシ素材を使えば、驚くほど簡単にクオリティの高いデザインを作成することができます。ここでは、無料ダウンロードできる世界中のPhotoshopブラシ素材を30セットをまとめています。 デザインのデコレーションなど小さなものから、デジタルペイントなど本格的なデザイン制作まで、今後のプロジェクトに役立ててみてはいかがでしょう。 どんな場面でも役立つ！上質な無料Photoshopブラシ素材45個まとめ Photoshopでまずダウンロードしておきたい無料ブラシ素材50個セットまとめ 無料ダウンロードできるすごいPhotoshopブラシ素材まとめ Watercolor Brush 絵の具に水
ごちゃごちゃに使ってない？間違いやすいデザイン用語15個まとめ
デザインに関して話をするときに、専門的な用語を必要とするケースがしばしばあります。その中には、あまり意味が分からずに使っていることはないでしょうか。 今回は、デザインの現場で毎日のように利用される用語のうち、特に間違えやすいものを集め、その重要な違いを覚えておくために作成されたインフォグラフィックス 15 Design Terms We Always Get Wrong をご紹介します。 1. 書体とフォントの違い 日本語では「書体」とも呼ばれる「タイプフェイス」。 書体とは、表示・印刷などに用いるために、美的感覚に基づき、字体を統一的にデザインした文字のスタイルのことを指しています。 – 引用元 : 書体とフォントの違いは何ですか？ | JAGAT フォントとは、元来欧文活字の用語で、1つの書体の文字サイズごとに作られた大文字・小文字・数字・記号類のセットのことを意味します。 – 引用元
ハンバーガーメニューはもう古い！代わりに使えるモバイル用ナビメニュー5つまとめ
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用可！日本語フリーフォント、かわいいデザインコレクション厳選83個まとめ
