こんなことできるの?!ホームページ制作が楽しくなる最新オンラインツール48個まとめ
「こんなことできちゃうの?!」「もっと早く知りたかった。」 この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。 時間の短縮はもちろん、面倒だったあの作業も自動化できてしまうことも。 大型連休中におすすめのワクワクするようなツールを集めました。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール（14個） 2. デザインツール（13個） 3. 配色ツール（5個） 4. プロトタイプ・アイコンツール（6個） 5. クリエイティブ・面白ツール（10個） Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール Loaders
よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選
この記事では、日頃のホームページ制作で直面しがちな問題をCSSで乗り切る最新テクニック20個をまとめてご紹介します。 早く知っておけばよかったと思う、あまり知られていないCSSの実用的なテクニックが中心で、実際の問題ケースや参考サンプル用ソースコードを一緒に確認できます。 前回のお役立ちCSSテクニック集と合わせて確認してみてはいかがでしょう。 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ コンテンツ目次 1. 画像の質感をアップしたい 2. グラスモーフィズム効果を表現したい 3. 入力フォームの使いやすさを改善したい 4. CSS Transformをつかった最新テクニック 5. 2022年に知っておきたい新しいCSSプロパティ 6. position: stickyの正しい使い方 7. レスポンシブ対応の区切り線のつくり方 8. するするとカーテンが降りてくるエ
面倒なWeb制作におさらば！便利すぎる新登場オンラインツール48個まとめ
Web制作のたびに繰り返し手こずって、時間のかかってしまう作業ってないでしょうか。 作業の効率化や時短において、限界を感じているひとにこそ刺さる、知っておきたい最新オンラインツールをまとめてご紹介します。 面倒な作業もあっという間に終わるだけでなく、どれも無料で利用でき、これまでのWeb制作がガラリと変わるコード不要の「ノーコード」Webページビルダーや、AI技術を活用したサービスも続々増えています。 「Web制作をもっと手早く終わらせたい」と考えているひとは、まずは自分だけのお気に入りツールを見つけてみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール 面倒なWeb制作におさらば！便利すぎる新登
コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーエフェクト集まとめ
この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。 どれもHTMLスニペットとして公開されているので、CSSコードをコピー、貼り付けるだけで利用できる点もポイントです。 コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーアニメーションまとめ 100 underline/overlay animations | The ultimate CSS collection 🥇 今回特にオススメしたいリンク用ホバーアニメーション集で、基本的なものから3Dなどユニークなエフェクトまで100種類が揃います。 SVGやJS，疑似要素、@keyframeなどは使われておらず、クラス名を追加するだけでスタイリングできます。 基本となるベーシックタイプ7種類。 See the Pen The basic by Temani Afif (@t_
CSS記述が速くなる、コピペできるチートシート用コードスニペットまとめ
CSSはシンプルな表記でスタイリングが特長ですが、ときには複雑なコードによってどう書いたらよいか、迷ってしまうことがあります。 今回は、CSSでの制作をスピードアップさせる、コピペできるチートシート的コードスニペットをまとめてご紹介します。 リアルタイムによるプレビュー、確認が可能で、生成されたCSSコードをコピーするだけで利用できる、知っておくと差がつく利用機会の多いCSSプロパティが揃います。 CSS記述が速くなる、コピペできるシートシート用コードスニペットまとめ 1. CSSマウスカーソル・プロパティ さまざまなマウスカーソル用プロパティを並べたコードスニペット。各ボックスにマウスホバーすることで、ブラウザーでどのように見えるか確認できます。 See the Pen CSS Cursor Property by Kalimah Apps (@khr2003) on CodePen.
Web制作参考アイデア集！話題の最新ウェブデザイン40個まとめ
この記事では、今後のWeb制作で参考にしたい最新Webサイトデザイン40個をまとめてご紹介します。 「デザインのアイデアが見つからない」「見本サンプル例が欲しい」そんなときに活用したい世界中の最新ウェブデザイン実例を集めました。 アニメーションが当たり前となった今、ウェブデザインの魅せ方はさらに進化を続けています。2020年に入って紹介したウェブサイトと一緒に確認してみてはいかがでしょう。 Webアイデアの宝庫！注目したい最新ウェブデザイン35個まとめ Web制作の参考アイデアに！いま話題の最新ウェブデザイン50個まとめ いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ Web制作参考アイデア集！話題の最新ウェブデザインまとめ Delassus ポリゴンスタイルの鮮やかなイラストを使った水平パララックススクロールが特長で、スクロールに合わせたアニメーションでユーザーの目
2019年の色が決定！美しいサンゴのような「リビング・コーラル Living Coral」パントンから発表 - PhotoshopVIP
今年の色「リビング・コーラル」の具体的な使い方は？ デザイン業界だけでなく、ファッションやインテリアなどさまざまな業界で、実際にどのように「リビング・コーラル」色を利用できるのか、より詳しくみていきましょう。 ファッションやアクセサリー分野 「リビング・コーラル」は、男女問わずに遊びココロのある、愉しい雰囲気を表現します。暖かい色合いは、シンプルなカラーテイストのほうが、快適性やはっきりとした明瞭さを表しやすいですが、パターンやテクスチャ、モノクロスタイルも挑戦的と言えるでしょう。また、コントラストをはっきりと目立たせる色でもあります。 グラフィックやパッケージデザイン分野 「リビング・コーラル」は、もちろんパッケージデザインの用途にも理想的です。温かみがり、親しみやすく、楽観的な色使いとなっています。 プロダクトデザイン分野 あらゆる年齢層や性別の製品に利用することができるカラーリング。
2019年の人気フォントはこれ！押さえておきたい最新フォントトレンド9個まとめ - PhotoshopVIP
美しいタイポグラフィをデザインに取り入れることは、ブレンド力を高めるもっとも効果的な方法のひとつです。そのためには、最新のフォントトレンドを理解しておくことが必要になります。 クリエイティブなフォントは、メッセージを伝えるだけでなく、インパクトのあるビジュアルで感情を呼び起こします。タイポグラフィーは、喜びや恐怖、喧騒と静寂のどちらも表現でき、驚かせたり、怖がらせたり、あらゆる感情を演出できます。 この記事では、2019年にかけて注目したい、フォントデザインの人気トレンド9個を予想し、まとめてご紹介しています。たくさんのデザイン事例と一緒にまとめているので、今後のデザイン制作の参考にしてみてはいかがでしょう。 コンテンツ目次 1. 大胆すぎる太字フォント 2. ミニマルなサンセリフ書体 3. ノスタルジックなビンテージフォント 4. 進化系の筆記体フォント 5. アウトライン・フォント 6
Photoshop CC 2019 新機能「コンテンツに応じた塗りつぶし」で、なんでも秒速で消す方法 - PhotoshopVIP
カリフォルニア州ロサンゼルスで開催された Adobe MAX 2018 にて、主要アプリのメジャーアップデートが発表されました。Photoshop CCでは、新機能「コンテンツに応じた塗りつぶし」が追加され、より直感的にな操作が可能となり、より細かなコントロールに対応できるようになりました。 今回は、実際にPhotoshop CCの新機能「コンテンツに応じた塗りつぶし」をつかって、さまざまなものを手軽に消す方法をご紹介します。適用したいサンプリング範囲を微調整でき、より高度で複雑な写真にも対応でき。1分以内の短い作業時間で、魔法のような驚くべき加工が可能となっています。
Photoshopでカラー写真を白黒に変換する定番テクニック９個完全版
フォトショップでカラー写真を白黒に変換する方法はいくつかあります。 ボタンひとつで完成のお手軽テクニックから、複雑なディテールまで表現できる方法まで、各テクニックをいつ利用するのがベストなのか、各サンプルと一緒にまとめてご紹介します。 これらの方法を実践することで、オシャレで魅力的なモノクロ写真をすばやく完成させることができるので、フォトショップ初心者のひとにもオススメです。 コンテンツ目次 グレースケールで変換 「白黒」色調補正で変換 「色彩・彩度」調整レイヤーで変換 RGBカラーの代わりにLabカラーで変換 グラデーションマップ」調整レイヤーで変換 「チャンネルミキサー」調整レイヤーで変換 「色彩・彩度」調整レイヤーコンボで変換 「白黒」調整レイヤーで変換 雰囲気たっぷりなセピア色写真 必要なものは、フォトショップだけ。 まずは7日間の無料トライアルからはじめませんか。 すべての機能を
Photoshopで写真内の人や物を消す6個の超簡単テクニック 完全まとめ
最終更新日: 2022年10月3日 Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作業を行っているというひとは、どれだけいるでしょう。 今回は、Photoshopの各種ツールを駆使した除去、消去テクニックと、いつその技を使うのがベストなのか、各サンプルと一緒にまとめてご紹介します。これらの方法を実践することで、写真に写り込んでしまった不要なモノを、2〜3分の短時間で、スピーディーに除去することができるので、フォトショップ初心者のひとにもオススメです。
フォント、書体を完全マスター！デザイン作成が超快適になる無料ツール、拡張機能25個まとめ
コンテンツ・ファーストに対する考え方が、デザイナーに認識、理解されるにつれて、デザイン過程において優れたタイポグラフィの作成がますます重要になってきています。 しかしタイポグラフィの扱いはとてもデリケートで、特にこれから始めようというひとにとって厄介な問題です。このリストでは、よりタイポグラフィ作成を快適に進めることができる無料ツールをまとめてご紹介します。ここで紹介するツールは、コンテンツを改善し、より良いデザインを手がけるのに役立つものばかりが揃います。 ここでは、以下のカテゴリ別に分かれています。 フォントの選択、ダウンロード フォントの組み合わせやスタイリング フォントの縮尺スケール デザインインスピレーション フォント、書体を知ろう！デザイン作成が快適になる無料ツール、拡張機能まとめ フォントの選択、ダウンロード タイポグラフィーの作業プロセスは、フォントの選択から始まります。選
ウェブサイトをもっと面白く！コピペ可能なHTML/CSSスニペット75個まとめ 2018年7月度
ウェブ制作で差がつくテクニックをつかった、コピー&ペーストで利用できる HTML/CSS スニペットをまとめてご紹介します。2018年を代表するグラフィックデザインのトレンドでもある、グラデーションやグリッチエフェクト、ちょっとした動きが魅力的なマイクロインタラクション、CSS Gridプロパティの実践的な使い方など、今後のウェブサイト制作で参考にしたい作品を中心に揃えています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみましょう。 Webサイトを使いやすく！
超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
Webデザインのアイデア満載！創造力をアップさせる最新サイト50選
ウェブサイト制作におけるアイデア出しに困ったときに確認したい、最新ウェブデザインをまとめてご紹介します。 レイアウトや配色、書体などの見た目はもちろん、サイトの雰囲気や印象などデザイントレンドの動向を知ることもできます。さまざまな業種の中から、パーツ別に参考にしたくなるそんなサイトを中心にまとめています。これからサイトを作成しようというひとや、打ち合わせでのきっかけ作りなどに活用してみてはいかがでしょう。 2018年に流行しそうな、注目Webデザイントレンド20個を大予想 Webデザインのアイデア満載！創造力をアップさせる最新サイトまとめ The School of Sustainability 物語を支えたるようにストーリーが進んでいく、まさに体験型のウェブサイト。地図上に表示されたポイントをクリックすると、それぞれのストーリーが動画や音声などを交えて開始されます。 The Greate
デザイナーが押さえておきたい、2018年のウェブデザイントレンド6個まとめ【完全ガイド】
2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム（英: Design System）を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ
オキテ破りの写真加工！フォトショップ無料アクション素材100個まとめ【保存版】
※ 2021年8月31日に新しい素材18種類を追加し、合計100個の無料Photoshopアクション素材となりました。 ※ 2020年1月6日に新しい素材18種類を追加し、合計92個の無料Photoshopアクション素材となります。 ※ 2019年3月6日に新しい素材16種類を追加し、合計74個の無料Photoshopアクション素材となります。 フォトショップのアクションは、デザインに自信がないというひとでも、ボタンひとつでプロ顔負けの圧倒的なデザインを作成できる便利ツールです。 そこで今回は、写真加工を手軽に楽しむことができる、無料Photoshopアクション素材100個を、カテゴリー別にまとめてご紹介します。 作業ペースを格段に上げる時短ツールとして、あらゆるスタイルの写真加工をだれでも簡単に作成できます。 すべて無料でダウンロードできるので、気に入ったアクション素材はぜひ試してみまし
人気急上昇！2018年にグラデーションカラーが愛用される10個の理由
ここ何年も続いた�フラットスタイルやマテリアルデザイン、そしてスッキリとした見た目のミニマルスタイルを経て、グラデーションカラーが復活の兆しを見せています。 多くのデザイナーが、グラデーションカラーをさまざまな制作に利用しています。今回は、2018年のデザイン制作にグラデーションを愛用したい10個の理由、ポイントをまとめてご紹介します。 詳細は以下から。 01. 興味を引く背景を作成します。 グラデーションは、視覚的にユニークな見た目を実現し、ユーザーの視線を誘導するのに役立ちます。まず視線はひとつの色に注目し、グラデーション色合いや明るさが変わることで、画面全体に焦点を移動させるのに最適です。 グラデーションは、業種を問わず幅広いデザインプロジェクトに利用できとても便利。グラデーションの具体的な使い方はたくさんありますが、もっとも一般的なオプションのひとつに、画像や文字テキスト、その他の
ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無料で使えるオンラインツールを利用してみましょう。今回は、グラデーションカラーに特化し、CSSコードも手軽にコピペできるツール17個をまとめてご紹介します。2018年のデザイントレンドをうまく反映したカラーリングだけでなく、お好みのグラデーションカラーも手軽に作成することができ、ウェブデザイン制作の時間短縮につながります。 ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツールまとめ Grabient ウェブサイトやグラフィックデザインに利用したくなる美しいグラデーションカラーを現在25種類揃え、お好みで色をカスタマイズ、作成できる無料の配色作成ツールです。 ボタンをクリックするだけで、Internet Explorer や
Webデザイン見本に最適！実例で学ぶ最新トレンド、スタイル45個まとめ
さまざまな想いやメッセージ、コンセプトを伝えるウェブサイトは、クリエイティブなアイデアを表現するのに最適です。2018年のデザイントレンドを採用したり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイト、レイアウトや配色の参考にしたいサイトなどさまざま。 この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。アイデア出しに困ったときなど、デザイン見本として活用することができます。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。 2018年に流行しそうな、注目Webデザイントレンド20個を大予想 https://photoshopvip.net/106130 Webデザイン見本に最適！実例で学ぶ最新トレンド、スタイルまとめ Chobani カラフルな果物のイラストを利用することで、ブランドイメージをうまく伝え、魅力的な見た目を演出しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
