2019年のブランドトレンドは、未来的（英: FUturistic）かノスタルジック（英: Nostalgic）といった、２つの全く異なるスタイルを、多くのデザインで見かけることになるでしょう。 どちらかが優れていたり、収益性が高いといったわけでもありません。どのようにブランドを表現したいのか、そして、ターゲットとなるオーディエンスによっても異なり、両方のスタイルを組み合わせて利用することもできます。 今回は、ロゴデザインや製品パッケージ、ウェブデザイン、タイポグラフィ、グラフィックデザイン全般のトレンドを分析し、2019年に注目される最新ブランドトレンド10個をまとめてご紹介します。たくさんのデザイン事例と一緒にまとめているので、今後のデザイン制作の参考にしてみてはいかがでしょう。 2019年の注目トレンド早わかりガイド！ウェブやグラフィック、ロゴなど各ポイントをまとめてチェック コンテ

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

モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ

はじめにハンバーガーメニューが登場したとき、デザイン業界の反応はさまざまでした。そこから数年が経ったいま、この単純な図形は、インターネットの世界に浸透しています。 ここにくるまでハンバーガーメニューは、特にアニメーションの分野において、新しいレベルの洗練されたスタイルへと進化してきました。CSS3に加えて、SVGやキャンバスは、ユーザーエクスペリエンス全体を高める複雑で、シームレスなコンテンツ遷移を作成するのに利用されています。また、オーディオの利用もより普及してきており、メニューの使いやすさをユーザーに提供しています。 ハンバーガーメニューのレイアウトも、より複雑になってきており、サイトのナビゲーションメニューだけでなく、さまざまなコンテンツを配置しているケースが増えています。 この記事では、2018年以降に増えてきそうなハンバーガーメニューのクリエイティブな最新トレンド5つをご紹介しま

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

ロゴデザインは、会社やウェブサイト、ブランドなどにおいて顔とも言える重要なデザイン要素です。この記事では、毎年目まぐるしく変化するロゴデザインの最新トレンドを分析した「2017 Logo Trends」を各ポイントごとに詳しく見ていきましょう。 2017年のロゴデザインはこれ！確認しておきたい要注目のトレンド7個まとめ 2017年決定版！人気ロゴデザインのトレンド15個まとめ Shadow Breaks シャドウ・ブレイク これまでは潜在的な現実感のあるグラフィック表現は、デザイナーにあまり受け入れられませんでした。このシャドーブレイク（英: Shadow Break）は、ある要素が別の要素と交わるときに、立体的な影を組み合わせるテクニック。 フラットカラー以外のデザイン方法を必要としますが、特に難しいことではなく問題はないでしょう。奥行き感を表現できるこの新鮮な方法によって、立体感をうま

ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.jsが公開され、注目を集めています。 今回は、このライブラリを使い、Bootstrapを使うような感覚で、クラス名をつけると背景にグラデーションアニメが実装できるようにしました。 デザインスパイスのひとつに、一度試してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方はシンプルで、グラデーション用のクラス名をつけると、その要素の背景がグラデーションになります。 ロゴと短文を使ったカード型レイアウト。 See the Pen qaxExO by ya90net (@ya90net) on CodePen.

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

開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。 今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。 よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。 詳細は以下から。 待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ #22 – Loader with Pure CSS 動きに合わせて、背景のグラデーションカラーが美しく変化するローディン

また観光情報のデータベース「観光予報プラットフォーム」と連携し、観光地の基礎情報、混雑情報や、外国人向けのサービス情報なども提供中。今後は、ユーザーの写真投稿機能なども追加予定とのことで、今後ますます楽しみな国産フォトストックサイトのひとつと言えるでしょう。 宮城県 気仙沼港 内湾 Miyagi Inner Bay, Kesennuma Port, METI, CC BY 4.0 International 福島県 さざえ堂 Fukushima Sazae-do Hall, METI, CC BY 4.0 International 福島県 国宝 白水阿弥陀堂 Fukushima Shiramizu Amida-do Hall (National Treasure), METI, CC BY 4.0 International 沖縄県 名蔵湾 Okinawa Nagura Bay, MET

ウェブサイトやグラフィックデザイン、音楽サービス Spotify などで見かけるようになったデザインのひとつが、鮮やかでシンプルな配色の組み合わせが特長のデュオトーン（英: Duotone）です。 デュオトーンとは、２色（Duo）の色合い（Tone）から構成されたデザインを指し、かつて60年代に生まれたポップアートの旗手のひとり、アンディー・ウォーホルの作品が分かりやすいでしょう。 今回は、たった2ステップで手軽にデュオトーンを作成できる Photoshop チュートリアルをご紹介します。また、ダウンロードしてすぐに使える、デュオトーンエフェクトに適した無料グラデーションファイル10個セットも、記事の後半で公開しています。 詳細は以下から。 Photoshopで写真を今どきのデュオトーンに加工する方法 ステップ1: 加工する写真を開こう。 まずはデュオトーン・エフェクトを加えたい写真を P

移り変わりのとても速いウェブデザインの世界では、どのようなデザインや実装テクニックが人気トレンドとなっているのか、定期的にチェックしておくことが重要です。今回は、クリエイティブなアイデアの参考にしたい最新ウェブデザインをまとめてご紹介します。 コンテンツを最大限うまく引き出し、ユーザーの印象に残るデザインを演出する最先端ウェブテクニックを体感してみましょう。各サムネイルをクリックすることで、参考ページを確認することができます。 詳細は以下から。 新しいウェブデザインの魅せ方を提案する、参考にしたいサイトまとめ Pharrell Williams ファレル・ウィリアムズの世界観を表現した公式ページ。グリッド上に並べられたサムネイルをクリックすると、豊富な情報を多彩なレイアウトでまとめています。 Heyblend 美しい配色とシンプルなレイアウト、書体の組み合わせはぜひ参考にしたいミニマルデザ

Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※　デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※　ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe

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

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

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

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

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

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