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

斜め上を行く最新Webオンラインツール、素材50選

「ほったらかしで、デザインの作成が完了」「配色に悩んだときの救世主」「時間のかかっていたデザイン作業が一瞬で終了」そんな噓のようなツールが、AIの進化によって日々、世界中で公開されています。このまとめでは「これはやられた！」と思わずうなってしまう、最新オンラインツールや素材55個をご紹介。カテゴリ別に整理しています、自分だけの神ツールを見つけてみませんか。

nakkisan 2023/10/21

素材

リンク

ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。このリストは2年ぶりにまとめ直したアップグレード版となります。コンテンツ目次【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA

nakkisan 2022/05/19

リンク

配色えらびに超便利！カラーパレットやグラデーションなど色ツールが揃ったCoolors

美しいカラーパレットを生成できるツールはたくさんありますが、配色を探しているときに役立つ便利なオンラインツールCoolorsをご紹介します。人気トレンドのおしゃれな配色カラーパレットを確認、編集できたり、写真から色を抽出したコラージュの作成、色覚障がい診断ツールの他に、配色の明るさや彩度、色温度なども調整できるなど、配色に必要なあらゆるツールが揃っています。 Coolorsとは Coolorsは、Spaceキーを押すたびに配色をランダムで作成、編集できるオンラインツール。配色に自信がなくても、数千を超える美しい配色カラーパレットからインスピレーションを見つけることもできます。失敗しない配色えらびに役立つさまざまなツールが同時に公開されている点もポイントです。では、Coolorsの使い方を詳しくみていきましょう。 Coolorsの使い方 Coolorsの使い方は、基本的な2通りとなります

nakkisan 2022/05/15

配色のランダム生成や人気のカラーパレットの検索、カラーパレットの保存ができる

Webサービス

リンク

無料で商用OK！筆記体フリーフォント12年分をまとめた秘密リスト

「筆記体でかわいい、おしゃれなデザインにしたい」と思っても、いざ文字を入力してみると、「なんか思ってたのと違う」と感じたことはないでしょうか。お気に入りのフォントをやっと見つけたら、個人利用のみだった、なんて経験も。 10年以上に渡り、コツコツと集めてきたフォントのなかから、商用利用ができる無料の筆記体フリーフォントのみを厳選してご紹介。デザインに苦手意識があるひとも、文字を入力するだけでおしゃれに仕上げるオススメ＆定番の筆記体フリーフォントで、デザイン作業を快適にしてみませんか。一覧リストには、現在84個の筆記体フリーフォントが揃い、今後もアップデート予定です。好きに選べる、好きなだけ使えるAdobe Fonts 「海外サイトからのフォントのダウンロードは不安。」「できるだけ低予算で、高品質なフォントを、安心して使いたい。」そんなときは、20,000以上のプロフォント、500

nakkisan 2021/08/13

リンク

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

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

nakkisan 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

nakkisan 2020/08/20

CSS

リンク

Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ

この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめコンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV

nakkisan 2020/08/09

Webサービス

リンク

Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

nakkisan 2020/07/08

web
CSS

リンク

サイトの質が向上！コピペできるHTML/CSS便利スニペット100個まとめ

この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。ここでは、カテゴリー別に分けて最新HTML／CSSスニペットをまとめています。コンテンツ目次 1. 小技テクニック系（15個） 2. 面白、ユニーク系（16個） 3. ホバーエフェクト系（6個） 4. テキストエフェクト系（10個） 5. ページレイアウト系（10個） 6. イメージスライダー系（9個） 7. ナビゲーションメニュー系（2個） 8. ローディングアニメーション系（4個） 9. ボタンエフェクト系（13個） 10. CSSマジック（10個） 11.