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

この記事では、これから2020年に注目したいグラフィックデザインの最新トレンド10個をピックアップ、大予想しています。新しい令和の時代に入り、これからよりクリエイティブなデザインを表現できるテクニックを、たくさんのデザイン事例と一緒にご紹介です。 2019年に注目したい！グラフィックデザインの最新トレンド10個まとめ 動画がアツい！After Effectsで使える無料テンプレート厳選65個カテゴリ別まとめ【完全版】 人気上昇中！2016年から続くグラフィックデザインの鉄板トレンド9個まとめ 2017年に注目したい、グラフィックデザインの最新トレンド9個まとめ コンテンツ目次 1. サイバーパンクな配色 2. ストリートアート・スタイル 3. 極細の幾何学デザイン 4. 紙をちぎったカットアウト・コラージュ 5. 個性たっぷりなハンドレタリング 6. ディストピアの美学 7. ハイパー・パ

この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる

新年あけましておめでとうございます。 当サイトでは毎月、Photoshopのテクニックを学ぶのに最適なチュートリアル、作り方をまとめて紹介しています。今回は2017年のあいだに公開された中で、特に確認しておきたいPhotoshopのデザインチュートリアルをまとめてご紹介します。 分かりやすい解説で紹介されたPhotoshopの基本から、目からウロコのデザイン小技テクニックや、設定ひとつで完成のお手軽テキストエフェクト、Photoshopならではの本格的な写真合成テクニックまで人気デザインの作り方が揃います。新しい年がはじまり、Photoshopを始めてみようというひとにもぴったりなテクニックを揃えています。 【総まとめ】2017年すごいIllustratorチュートリアル、作り方厳選70個 【総まとめ】2017年公開のすごいPhotoshopチュートリアル、作り方厳選86個 美しい夕焼けに

毎日たくさんの案件を扱うデザイナーにとって、あらゆる種類やジャンルのデザインに対応できる素材を、幅広く揃えておくことが重要です。しかし、無料素材から目的のアイテムを見つけるのは大変な作業で、できれば制作プロセスの中でも短縮したいところ。 今回ご紹介する素材集 The Totally Diverse Vectors Collection は、商用案件にも利用できるプロ仕様のベクター素材を数千種類以上も収録した期間限定のデザインキット集です。 収録されている素材はどれも商用ライセンス付きで、クライアント向け案件や商品デザインにも活用できます。通常$4327（およそ48万円）の99%オフ、$29（およそ3,200円）で2週間の期間限定で販売中です。 購入ページへ進む 収録されている素材のカテゴリの幅がとても広いので、専門ではないけど色々な用途に使いたい方にもオススメです。Illustrator向

ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ 垂直型イメージスライダー くるりと回転したり、スクリーン

ユーザーがウェブサイトを訪れたとき、まず目にするものがグラフィックデザインです。高品質なUIデザインを利用することで、ユーザーにサイトをより魅力的に見せることができます。 今回は、新しいデザイントレンドを取り入れた、完全無料ダウンロード可能なUIキットをまとめてご紹介します。 これらのUIキットを利用することで、クリエイティブで美しく、便利なウェブサイトやアプリデザインの作成をスピーディーに行うことができます。必要に応じてボタンやログインフォーム、ソーシャルメディアなどの要素を編集し、自由に利用することができます。 魅力的なウェブデザインを素早く仕上げる、すごい無料UIコンポーネント素材30個まとめ 完全無料でこのクオリティ！美しい新作UIキット50個まとめ 2017年版 Blog UI Kit ファイル形式: Sketch Prometheus | UI Kit ファイル形式 : PSD

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

新しい年を迎え、ロゴデザインを新しく作成したり、変更するのにもぴったりな時期。しかし、実際どんなデザインがいいのか迷ってしまうのも事実です。今回は、2017年のロゴデザインのトレンド予想を詳しくみていきましょう。 デザインの傾向は年々変化していますが、ロゴデザインの基本的な考え方はいつの時代も変わっていないので、ユーザーに強い印象を残すだけでなく、ブランドのメッセージやコンセプトをうまく伝えることができるでしょう。 コンテンツ目次 1. ミニマルスタイル 2. 手書きデザイン 3. ネガティブ・スペース 4. ラインアート 5. ビンテージ・デザイン 6. 簡素化デザイン 7. 動きのある部品 2017年を大予想！注目すべきロゴデザインのトレンド7個まとめ Designhill が世界中のトップロゴデザイナーと一緒に実施したリサーチでは、2017年に予想される新しいデザイントレンドがいくつ

2017年、早くも2週間が過ぎたことで、さまざまなデザインブログで今年のWebデザイントレンドが予想され、公開されています。 今回は、海外のデザインブログで公開された、2017年のデザイントレンドの中から、特に気になる記事をピックアップしてご紹介します。ウェブデザイン制作に関わる業種はもちろん、これからWebサイトを作成しようと検討している方も一度目を通しておくと良いでしょう。各ブログが共通して予想しているトレンドも多く、2017年が楽しみな内容となっています。 2017年のWebデザインはどうなる？デザイナーが注目したい流行トレンド10個まとめ コンテンツ目次 1. 2017年のWebデザイン制作で注意しておきたい10のコト from CreativeMarket 2. 2017年におけるWeb制作業界全体の流れ from SitePoint 3. 2017年に実際に起こるであろう、7つ

ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・

デザイン制作のなかでも、正しい色の組み合わせを見つける作業は、もっとも重要な過程のひとつで、デザインのたびに頭を悩ますデザイナーも多いでしょう。 今回は、手軽に配色を決めることができるチートシート「The Ultimate Color Combinations Cheat Sheet」が公開されていたのでご紹介します。 詳細は以下から。 コンプリメンタリー配色 Complementary Combination コンプリメンタリー配色は、カラーホイールの反対側の色を組み合わせた組み合わせで、補色（英: Complement）同士を組み合わせた配色を指します。この配色は、鮮やかで精力のある元気なデザインが特長です。 トライアド配色 Triads Combination トライアド配色は、カラーホイール上の等しい距離にある3色の組み合わせを指します。うまく調和の取りつつ、強いコントラストを表現

完璧な写真を撮影する方程式はありません。 しかし、これから紹介する20個のガイドラインを利用すれば、つまらない写真の構図を魅力的に改善することができるでしょう。 このチュートリアルでは、写真の仕上がりがグッと良くなる、20個の構図テクニックを参考サンプル例と一緒に見ていきましょう。もっとも基本的なガイドラインにはじまり、より複雑で高度なテクニックまでまとめています。 コンテンツ目次 0. 構図ってなんだろう。 1. 三分割法 2. 中央揃えと左右対称 3. 前景シーンと奥行き感 4. 枠のなかの枠 5. リーディング・ライン 6. 対角線と三角形 7. パターンと質感 8. 奇数の法則 9. フレームを覆いつくそう。 10. 余白スペースを利用しよう。 11. シンプルさとミニマリズム 12. 被写体のみ切り抜こう。 13. 視点を変えてみよう。 14. 配色の組み合わせを考えよう。 15

オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov

毎月新しく公開された無料ダウンロードできるフリーフォント素材をまとめています。今回は、あっという間に一年の半分が過ぎた6月分まとめをご紹介します。 豊富なウエイト数を用意し、どんなデザインにも活用できる持っておくと便利なアイテムから、デザイントレンドのブラシフォントや人気の筆記体、スクリプト書体、ハンドメイド感たっぷりな手書きスタイルなど、幅広いセレクションから選んでいます。デザインに応じて使いたいフリーフォントを探してみてはいかがでしょう。 詳細は以下から。 こんなフォントが欲しかった、デザイナーにオススメの良質フリーフォントまとめ 2016年6月度 Andis くっきりとした読みやすさを重視した、シンプルでミニマルなサンセリフ書体。Light バージョンを無料ダウンロードできます。 ※　個人、商用利用可能 Tofino スクリーン表示にこだわり、太さの異なる8ウエイトを用意した万能フリ

フォトショップの新しい使い方や、テクニックを学びたいときはチュートリアルのつくり方を参考にしてみましょう。ステップごとに進めることができるので、実践的なツールの使い方を学ぶことができます。 今回はデザイナーが参考にしたい、最新 Photoshop チュートリアルをまとめてご紹介します。デモ用 PSD ファイルを無料ダウンロードできる素材もあるので、これからフォトショップをはじめるひとにもオススメです。 詳細は以下から。 これどうやって作るの？フォトショップの勉強で参考にしたい、チュートリアルつくり方まとめ 80年代レトロテキストのつくり方 Illustrator で作成した3Dシェイプ（Photoshopでも作成できます）に、レイヤースタイルを適用する手軽なテクニック。背景のつくり方もポイントで、参考PSDファイルも無料ダウンロードできます。 幻想的な多重露光エフェクトのつくり方 ポートレ

Flexbox は、もともとウェブサイトやモバイルアプリのUIをデザインするために最適化された CSS です。 Flexbox のさまざまなプロパティを利用することで、これまでは CSS のみで難しかったレイアウトや配置を実現できるようになりました。またスクリーンサイズに応じてレイアウトが変化する、レスポンシブデザインとの相性もよい点もポイントです。 この記事では、よくあるCSSによるレイアウトの問題5つを、Flexbox　で解決できるテクニックを見ていきましょう。動作確認用のデモページと一緒に、実際にこれらのテクニックを適用した実践サンプル例もまとめています。 目次 対応ブラウザ環境は？ 高さの揃ったサイドバーを作成する方法 要素の表示順番を変更する方法。 どんな要素も天地中央揃えにする方法 レスポンシブに対応する、グリッドレイアウトを作成する方法 フッター要素を常に固定する方法 対応ブ

コンテンツ目次 「被写体の選択」機能 「選択とマスク」機能 「選択とマスク」（複雑な背景バージョン） オブジェクト選択ツール レイヤースタイル「ブレンド条件」 消しゴムツール 自動選択ツール クイック選択ツール 多角形選択ツール ペンツール チャネル設定 色域指定 レイヤーマスク クリッピングマスク 境界線を調整 さいごに、 1. 「被写体の選択」機能 もっとも簡単な、最新の切り抜きテクニック。 ボタンをクリックして、数秒待つだけで完成という、嘘のようなホントのはなし。 試しに、こちらの写真の女性を選択してみましょう。 元の画像をコピー（Command/Ctrl+J）したら、プロパティパネルの「被写体を選択」をクリック。 たったこれだけで、女性モデルのみを選択することができました。 選択範囲をレイヤーマスクとして適用したら、完成です。 Adobe Stockで「背景の削除」も一発完了 実は

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

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