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

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

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

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

Webサイトにおける「ボタン」は、使いやすさと分かりやすさが重要です。このバランスがなかなか悩みどころで、いつも同じスタイルのボタンを色を変えて再利用、なんてことも。 この記事では、コピペで利用できるCSSボタンスタイルを多数公開の便利サイトをまとめてご紹介します。 配布されているCSSボタンは、実際にウェブサイトで利用されているスタイルを中心に、かるく500個を超え、実用的なものから面白ユニーク系までが揃います。クリックひとつでソースコードをコピーできるので、ウェブ制作の時短としてもオススメです。 画像を使わずにHTMLとCSSのみでボタンを作りたいときに便利で、配色や文字サイズなどデザインが修正なときにも、画像を作り直してという面倒な手間を省くこともできます。 ボタン500個超、コピペで簡単CSSで作れるボタンを公開中の便利サイトまとめ CSSButtons.io 2021.11.17

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

この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手

最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア

インターネットが急速に普及したおかげで、世界中のさまざまな美術館や研究機関などが保有する作品を、デジタル・アーカイブ化しパブリックドメインとして無料公開する動きが活発になっています。 【2022年版】パブリックドメインで無料！世界の名画550万枚をダウンロードできる美術館サイト19個まとめ 【CC0ライセンス】モネや北斎も！世界の名画52,000枚を無料ダウンロードできるシカゴ美術館 今回は、100年以上前に描かれた水彩イラスト7,500枚以上をパブリックドメインとして公開しているデジタルコレクション USDA Pomological Watercolors をご紹介します。どれも高解像度で無料ダウンロードでき、商用利用にかかわらず自由にデザイン制作に活用できます。 デジタルコレクション USDA Pomological Watercolors とは？ USDAとは、United Stat

2019年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2019年に注目したい100種類のCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています。 1. 新作CSSライブラリ 2. お役立ちCSSユーティリティ 3. CSS画像エフェクトツール 4. CSSレイアウトフレームワーク 5. CSS Flexbox フレームワーク 6. オンラインCSSツール&生成ツール 7. CS

ロゴを特別なものにするのは何でしょう？ロゴを魅力的にするには、デザイントレンドがどのように進化しているのか、きちんと把握しておくことが大切です。 この記事では、2019年にかけて注目したい、ロゴデザインの人気トレンド9個を予想し、まとめてご紹介しています。たくさんのデザイン事例と一緒にまとめているので、今後のデザイン制作の参考にしてみてはいかがでしょう。 デザイナーが押さえておきたい、2019年のウェブデザイントレンド10個まとめ【完全ガイド】 2019年に注目したい！グラフィックデザインの最新トレンド10個まとめ コンテンツ目次 1. 可変ロゴデザイン 2. 新世代の幾何学模様 3. 目の錯覚を利用したロゴ 4. 目的のある配色 5. ネガティブ・スペースの応用 6. ミニマリズムの変化 7. 歴史のあるロゴ 8. 重なり合うロゴデザイン 9. ディテールを最大限に活用 01. 可変ロゴ

アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本

ウェブサイトやグラフィック制作において、重要なデザイン要素のひとつであるアイコン。デザインアプリによってファイル形式が合わずに、せっかく見つけた素材が使えないときも。 今回は、Photoshop や Illustrator、Sketchなど幅広いデザインツールで利用でき、無料ダウンロードも可能な新作アイコン素材をまとめてご紹介します。 今年のデザイントレンドを意識した作品も多く、ウェブサイトの見た目をガラリと変えてくれる高品質なアイテムを中心に揃えています。 商用利用可能！フリー(無料)ダウンロードできるアイコン素材50個まとめ 2017年3月度 図解でうまく伝わるデザインを！参考にしたいすごい無料アイコン素材まとめ EGO Illustrations ユニークなイラストが今年のトレンドにも通じる、6種類の高品質アイコン素材。 収録形式 AI | Sketch | SVG 48 Nolan

デザインの現場に欠かせない Photoshop（フォトショップ）は、みなさんが考えている以上に自分好みに拡張、カスタマイズすることができます。 効率的にカスタマイズする方法として、独立したプログラムとしてPhotoshopをより効果的にサポートする「拡張プラグイン」や、あらかじめ定義しておいた操作をボタンひとつで再生できる「アクション」、独自のコントロールパネルで機能を提供する「パネル」の利用が挙げられます。これらを利用することで、Photoshopをより強力なツールに拡張できます。 今回は、Photoshop作業を爆速にする、無料ダウンロードできる拡張プラグインやアクション、パネル、フィルタ素材などをまとめてご紹介します。より快適なフォトショップライフを目指しませんか。 Photoshopってすごい！作業効率をアップする拡張機能・プラグインまとめ プロ級の写真加工がボタンひとつ！良質Ph

毎月新しく公開された高品質なフリーフォント素材をまとめてご紹介しています、今回は2017年2月度のまとめとなります。 デザインの雰囲気をガラリと変える日本語フリーフォントから、グラフィックデザインで重宝しそうなスタイリッシュな英文フリーフォント素材まで幅広く揃えています。いつも同じ書体ばかり利用してしまい、デザインの可能性を引き出したいときに活用し、お手持ちのフォントコレクションに追加してみてはいかがでしょう。 テーマ、目的別に探す！合計2000個のフリーフォント素材まとめ完全版 無料ダウンロードし放題！商用OKなフリーフォント50個まとめ 2017年1月度 デザインがグッと良くなる、持っておきたいフリーフォント素材まとめ Hype Free Font シンプルで使い勝手の良いサンセリフ書体のフリーフォント。 ※　個人、商用利用可能 Noway 文字の美しさと機能的な使いやすいさを実現した

2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？

ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているのか、いくつもの記事を読んだことがあるでしょう。（この問題の参考にしたい記事はこちらやこちら、こちら、こちらからどうぞ。） 幸いにも多くのサイトやアプリで、より効率的な解決法となる代替アイデアが試されています。今回紹介しているアイデアは、他のものより優れているというわけでなく、コンテンツや内容によってパフォーマンスや実行できるかどうかは変わってきます。 01. タブ型ナビゲーションメニュー もしウェブサイトやアプリの項目が限られている場合、ユーザーはできるだけ素早くそカテゴリを切り替えたいところ。そんなときは、タブ型ナビゲーションが良い解決方法となるでしょう。 タブはもっともシンプルなナビゲーションパターンですが、デザインを制作す

切り抜きも楽勝！Photoshop CC 2015.5で注目したい使い方や最新機能まとめ チュートリアル 2016.07.12 先日、公式にリリースされた Photoshop CC の最新版 2015.5。より「使える機能」や「誰もが喜ぶ」機能を強化したアップデートで、デザイン制作をよりスピーディーに行うことができるようになりました。 今回は、注目したい Photoshop CC の新しい使い方や機能をまとめてご紹介します。各機能を実際に利用してみたことで見えてきた、より実践的な使い方が中心に揃っています。これらの機能をうまく活用することで、今後のプロジェクトを悩むことなく、よりスムーズに進めることができるでしょう。

写真を魅力的に加工することもできるPhotoshopですが、大量にある機能からうまく仕上げるのには時間とコツが必要です。もし、大量の写真を加工する場合はどうでしょう。アクション素材を利用すれば、繰り返し行う作業を大幅に短縮してくれます。 アクション素材は、再生ボタンひとつクリックするだけで、あらかじめ登録しておいた一連の作業を自動で行ってくれ、効率的にデザインを進めることができます。今回は、サイト制作に活用したい時短アクションから、プロ級の写真処理を行うことができるフリー素材をまとめてご紹介します。 詳細は以下から。 ワンクリックで写真処理を完成！優良Photoshopアクションまとめ アクション素材がどの写真加工にも適しているわけではありません。風景画やポートレイト写真の得意なアクションや、よりグラフィックを強調した素材などさまざまです。目的に合ったアイテムを探してみましょう。 アクショ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。